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.
Comments and suggestions are welcome.
-Alessio
