When working with certain RGB/HSV compatible lights that expect a dim/brightness/lightness value (Lifx, Hue, Neopixels etc.), the following converting formula/code (Javascript) works for me.
Requirements:
iro.js
I found this particular library to be reliable, flexible, accurate and fast for this. Although you can use any code that outputs individual RGB and HSV values from a picked color.
First, load the library:
Code: Select all
<html>
<head>
<!-- ... -->
<script src="./path/to/iro.min.js"></script>
</head>
<!-- ... -->
</html>
Create a <div> inside the page body where you want the color wheel to appear:
Code: Select all
<div id="colorwheel"></div>
Instantiate iro.js with a CSS selector (title of the <div> we just created):
Code: Select all
<script type="text/javascript">
$(document).ready(function()
{
var colorPicker = new iro.ColorPicker("#colorwheel", {
// Set the size of the color picker
width: 240,
// Set the initial color to white (for starters)
color: "#fff",
borderWidth: 0
// There is quite a lot of other options, but I'm not going to go into detail here as it's not relevant for this guide.
})
Here's the important part - the function that converts the chosen color's "V" (the V in HSV) value to a dim level value in the [0-255] range:
Code: Select all
function onColorChange(color, changes) {
var level = Math.round(color.hsv.v/100*255);
"Math.round" is there simply to make sure the numbers are rounded (no decimals).
"color.hsv" gets all three HSV values but we just need the V, so we can use the element "color.hsv.v".
Divide this by 100 and multiply by the highest/brightest value of the range we are converting to. The range for dimmable devices on the Tellstick is always 0-255.
In the end, it's up to each plug-in to "translate" the commands we send to it, to the ones natively used on the Tellstick's software. See the API Explorer to find out exactly what that is.
Code: Select all
// Now we have RGB and Dim/Brightness value, so we can send the request to the API.
// Use whatever language or method that floats your boat though.
// This is my (mockup) asynchronous Ajax request to PHP:
request('rgb&deviceId=1337&red=' + color.rgb.r + '&green=' + color.rgb.g + '&blue=' + color.rgb.b + '&level=' + level);
}
// Fire the onColorChange function on each color/brightness selection
colorPicker.on('input:end', onColorChange);
});
</script>
Also, to get the individual RGB values:
Code: Select all
var red = color.rgb.r;
var green = color.rgb.g;
var blue = color.rgb.b;
Wrapping it up:
Each time I send a "device/rgb" request, I also send a "device/dim" command with the dim level value we got from converting the HSV value. I spent way too many hours getting my head around this initially, but it seems to be working consistently, with minor adjustments.
That said, bear in mind that I am NOT a Level 100 RGB color wizard with epic loot (yet), so don't hold any of this against me
Just wanted to share this with you beta-people, in case anyone finds any use for it
Best,
Andreas
atchoo78@Github