Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X

Javascript quark #3: set widget colors

100% helpful (2/2)

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.





Very nice, thank you very much Alessio, thats exactly what i needed 🙂

Version history
Last update:
‎Jun 05, 2019 08:54 AM
Updated by:
Labels (1)