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

Javascript quark #3: set widget colors

Highlighted
Level 9

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.

 

Comments and suggestions are welcome.

 

-Alessio

Tags (1)
Announcements

Surveys are coming to the Vuforia Community!  Your feedback is valuable to us!  When prompted, please take our 60 second survey!