MainUI: Possible to add custom JavaScript?

Add-ons UIs
,
1

I have created a custom colorpicker list button widget, which should emulate the oh-colorpicker with openIn set to “popup”, but with the possibility to fully customize the popup window.

Since I wanted to show the currently set color in a box I’ve had to fiddle around with the HSB values to convert them to CSS HSL or RGB values and I’ve come up with a working solution:

- component: Label
  config:
	style:
	  width: 32px
	  height: 32px
	  border-radius: 5px
	  background-color: >
		= "hsl(" + items[props.colorItem].state.split(",")[0] + "," + ( ((2 - items[props.colorItem].state.split(",")[1] / 100) * items[props.colorItem].state.split(",")[2] / 2) < 50
		  ? Math.round( items[props.colorItem].state.split(",")[1] / (200 - items[props.colorItem].state.split(",")[1]) * 100 )
		  : Math.round( items[props.colorItem].state.split(",")[1] * items[props.colorItem].state.split(",")[2] / (200 - ((2 - items[props.colorItem].state.split(",")[1] / 100) * items[props.colorItem].state.split(",")[2] / 2) * 2) )
		  )
		+ "%," + Math.round((2 - items[props.colorItem].state.split(",")[1] / 100) * items[props.colorItem].state.split(",")[2] / 2) + "%)"

The background-color part (looks awful doesn’t it?) basically emulates the following JavaScript:

var l = (2 - hsv.s / 100) * hsv.v / 2;
var h = hsv.h
var s = l < 50 ? hsv.s / (200 - hsv.s) * 100 : hsv.s * hsv.v / (200 - l * 2)
return "hsl(" + h + "," + s + "%," + l + "%)"

Is there any known possibility to add a chunk of javascript to the page or to set an intermediate variable inside the expression?

2

Unfortunately it is much more limited than that:

3

Just to provide an answer to my own question (in case it helps anyone), I have solved it by adding a string item called MyItem_CSSColor and linked it to the color channel using the JS transformation profile and the following javascript.

(function(i) {
    var hsv = i.split(",");
    var h = hsv[0] / 360;
    var s = hsv[1] / 100;
    var v = hsv[2] / 100;

    var r, g, b;
    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
  
    switch (i % 6) {
      case 0: r = v, g = t, b = p; break;
      case 1: r = q, g = v, b = p; break;
      case 2: r = p, g = v, b = t; break;
      case 3: r = p, g = q, b = v; break;
      case 4: r = t, g = p, b = v; break;
      case 5: r = v, g = p, b = q; break;
    }
  
    return "rgb(" +  Math.round(r * 255) + 
            "," + Math.round(g * 255) + 
            "," + Math.round(b * 255) + ")";
})(input)

That item’s state can be referenced wherever a color is needed in css notation.

background-color: =items.MyItem_CSSColor.state
3 Likes