cancel
Showing results for
Did you mean:
cancel
Showing results for
Did you mean:

Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X

15-Moonstone

## Javascript quark #3: set widget colors

This is the third JavaScript quark in the series: it can be used to change a widget color by cycling through a given array of colors. You can find the second quark here.

Here's the code to copy & paste to your Home.js:

`\$scope.cycleColors = function(widget, colors, time, interval) {  let w = (widget.color !== undefined ? widget : \$scope.view.wdg[widget]);  if (!w || w.color === undefined) { throw "Cannot color-cycle this widget"; }  let originalColor = w.color;  w.color = colors[0];  w.visible = true;  w.opacity = 1;    let nSteps = Math.ceil(Math.floor(time/interval) / colors.length) * colors.length;  return \$interval(iterationCount => w.color = iterationCount === nSteps ? originalColor : colors[iterationCount % colors.length], interval, nSteps);}`

This JavaScript quark will make the widget color cycle through the colors provided in the colors array. The effect will last time milliseconds, and each color change will happen every interval milliseconds.

Invoke the function like this:

`cycleColors(widget, colors, time, interval);`

where widget is either the id of the widget (e.g. modelItem-1) or the widget itself (e.g. \$scope.view.wdg['modelItem-1']), colors represents an array of colors (e.g. ["rgba(200,0,0,1)", "rgba(0,0,200,1)"]), time represents the total time in milliseconds it takes to execute this effect, and interval represents the amount of time in milliseconds between each color change.

Here's an example:

`cycleColors("modelItem-1", ["rgba(200,0,0,1)", "rgba(0,200,0,1)", "rgba(0,0,200,1)"], 2000, 50);`

This example cycles the model item color through red, green and blue; the effect will last for 2 seconds with a color change every 50 ms.