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

Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X

Javascript quark #2: fading out

100% helpful (1/1)

This is the second Javascript quark in the series: it can be used to fade a widget out. You can find the first quark here.


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


$scope.fadeOut = function(widget, time, interval) {
  let w = (widget.opacity !== undefined ? widget : $scope.view.wdg[widget]);
  if (time <= 0 || interval <= 0 || w.opacity === undefined) { throw "Cannot fade this widget"; }
  let steps = Math.floor(time / interval);
  let opDelta = w.opacity / steps;
  return $interval(() => w.opacity = (opDelta < w.opacity) ? (w.opacity - opDelta) : 0, interval, steps);

This quark will make the widget fade out from its current opacity to 0 in time milliseconds, uniformly decrementing opacity at every interval .


Invoke the function like this:


fadeOut(widget, 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']), time represent the total time it takes to fade the widget out from its current opacity, and interval represents the amount of time between each opacity change.


Here's an example:


fadeOut('modelItem-1', 2000, 50);

This example fades the model item out by bringing its current opacity to zero after 2 seconds with an opacity change every 50 ms.


Comments and suggestions are welcome.





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