-
-
Save D-Touch/2937226 to your computer and use it in GitHub Desktop.
Delaying color picker commands
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Color Picker module for CommandFusion | |
=============================================================================== | |
AUTHOR: Sergey Klenov, Jarrod Bell, Florent Pillet, CommandFusion | |
CONTACT: support@commandfusion.com | |
URL: https://github.com/CommandFusion/ | |
VERSION: v1.0.2 | |
LAST MOD: Thursday, 17 November 2011 | |
========================================================================= | |
HELP: | |
REQUIRES iViewer v4.0.6 | |
Note: Safari security is very strict, to debug this code you need to use Google Chrome | |
1. If you want to change the color picker image (you can use any image you like), you need to change it in the GUI file, and also the filename at the bottom of this script. | |
2. You handle the R,G,B data in the callback defined at the bottom of the script. Settings joins s10, s11 and s12 are just an example of what you can do. | |
3. To disable the hovering image, remove it from GUI project and send an empty string "" as the hoverJoin parameter to the ColorPicker object | |
4. To limit the rate that any color data is sent, change the 0 in the "new" call to something larger. 100 means limit rate to sending only every 100ms (ie. 10 times a second). | |
========================================================================= | |
*/ | |
// ====================================================================== | |
// Color Picker Object - Create one for each color picker you want in your GUI | |
// ====================================================================== | |
var ColorPicker = function(url, hoverJoin, freq, callback) { | |
var self = { | |
imageURL: url || "colorpicker.png", // URL to load into the Image object | |
freq: freq || 100, // Frequency, in milliseconds, to limit the communication rate whilst dragging | |
can: null, // Canvas | |
img: null, // Image object | |
ctx: null, // Canvas context | |
callback: callback, // The function to call when new color data is obtained | |
hoverJoin: hoverJoin || null, // The join of the image object used as the hover image | |
hoverImageData: {}, // Store info about the hover image for precise positioning later | |
lastSend: 0 // Last time the color values were sent, used with freq to limit sending rate | |
}; | |
self.setup = function () { | |
if (self.hoverJoin !== null) { | |
CF.getProperties(self.hoverJoin, function(join) { | |
self.hoverImageData = join; | |
}); | |
} | |
// Use HTML Canvas object and HTML Image object to draw the image and get the pixel data to obtain the colors | |
self.can = document.createElement("canvas"); | |
self.ctx = self.can.getContext('2d'); | |
self.img = new Image(); | |
// When the image loads, draw it onto the canvas and setup the canvas size | |
self.img.onload = function(){ | |
self.can.width = self.img.width; | |
self.can.height = self.img.height; | |
self.ctx.drawImage(self.img, 0, 0, self.img.width, self.img.height); | |
} | |
self.img.crossOrigin = ''; | |
CF.loadAsset(self.imageURL, CF.BINARY, function (data) { | |
self.img.src = "data:image/png;base64," + encode64(data); | |
}); | |
}; | |
self.getColorAt = function (x, y, dolimitRate) { | |
// Check if sending too quickly | |
if (dolimitRate && (Date.now() - self.lastSend < self.freq)) { | |
return; | |
} | |
// Obtain the color of the pixel at given location. If transparent, | |
// do nothing (this way, color pickers don't have to be square -- any transparent pixel | |
// will be ignored) | |
var pixel = self.ctx.getImageData(x, y, 1, 1); | |
if (pixel.data[3] != 0) { | |
CF.setProperties({join: self.hoverJoin, x: x - (self.hoverImageData.w / 2), y: y - (self.hoverImageData.h / 2)}); | |
self.lastSend = Date.now(); | |
self.callback(pixel.data[0], pixel.data[1], pixel.data[2], x, y); | |
} | |
}; | |
return self; | |
}; | |
function encode64(input) { | |
var output = ""; | |
var chr1, chr2, chr3 = ""; | |
var enc1, enc2, enc3, enc4 = ""; | |
var i = 0; | |
var keyStr = "ABCDEFGHIJKLMNOP" + | |
"QRSTUVWXYZabcdef" + | |
"ghijklmnopqrstuv" + | |
"wxyz0123456789+/" + | |
"="; | |
do { | |
chr1 = input.charCodeAt(i++); | |
chr2 = input.charCodeAt(i++); | |
chr3 = input.charCodeAt(i++); | |
enc1 = chr1 >> 2; | |
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); | |
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); | |
enc4 = chr3 & 63; | |
if (isNaN(chr2)) enc3 = enc4 = 64; | |
else if (isNaN(chr3)) enc4 = 64; | |
output = output + | |
keyStr.charAt(enc1) + | |
keyStr.charAt(enc2) + | |
keyStr.charAt(enc3) + | |
keyStr.charAt(enc4); | |
chr1 = chr2 = chr3 = ""; | |
enc1 = enc2 = enc3 = enc4 = ""; | |
} while (i < input.length); | |
return output; | |
} | |
// Push the modules into the startup process | |
CF.modules.push({name: "Color Picker", object: ColorPicker}); | |
var myColorPicker; | |
// Only one CF.userMain function in all scripts is allowed! | |
// If you have one already in your project, consolidate all their contents into one CF.userMain function | |
CF.userMain = function () { | |
myColorPicker = new ColorPicker("colorpicker.png", "s1", 0, function (r, g, b, x, y) { | |
// This code will be run everytime the pixel color is obtained, along with the pixel data as parameters | |
//CF.log("R: " + r + ", G: " + g + ", B: " + b); | |
CF.setJoins([ | |
{join: "s10", value: r}, | |
{join: "s11", value: g}, | |
{join: "s12", value: b} | |
]); | |
CF.send("AppleKNX", "\x06\x20\xF0\x80\x00\x15\x04\x00\x00\x00\xF0\x06\x01\x32\x00\x01\x01\x32\x03\x01" + String.fromCharCode(r) ); | |
CF.send("AppleKNX", "\x06\x20\xF0\x80\x00\x15\x04\x00\x00\x00\xF0\x06\x01\x33\x00\x01\x01\x33\x03\x01" + String.fromCharCode(g) ); | |
CF.send("AppleKNX", "\x06\x20\xF0\x80\x00\x15\x04\x00\x00\x00\xF0\x06\x01\x34\x00\x01\x01\x34\x03\x01" + String.fromCharCode(b) ); | |
}); | |
// Setup the colorpicker object after it was created above | |
myColorPicker.setup(); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment