RGB/HSV Brightness for Lifx and Hue - Javascript

Moderator: Telldus

Post Reply
atchoo
Posts: 20
Joined: Thu Jan 18, 2018 11:08 am
Location: Oslo, Norway
Contact:

RGB/HSV Brightness for Lifx and Hue - Javascript

Post by atchoo » Tue Feb 18, 2020 10:44 pm

Hello,

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

atchoo
Posts: 20
Joined: Thu Jan 18, 2018 11:08 am
Location: Oslo, Norway
Contact:

Re: RGB/HSV Brightness for Lifx and Hue - Javascript

Post by atchoo » Thu Feb 20, 2020 8:15 am

Just one more thing that I forgot to mention...

To "get" the currently selected color from Tellstick RGB devices:

First, send a "device/info" query to the API along with the device ID for the RGB device you want.
In the output, look for the "statevalues" array. The "value" key is the one we're after.

Example:

Code: Select all


{
    "statevalues": [
        {
            "state": "1024",
            "value": 16724480
        },
}
To get the hex color value from "16724480", simply convert the number from decimal to hexadecimal, which is most color pickers' first choice anyway.

EDIT: Removed javascript for converting dec->hex. Turned out it didn't work at all, but the point remains (as long as you have working code for the converting :banghead:)

Then we can use that variable as the color picker's starting point.

Andreas

Post Reply