Javascript quark #1

[Alessio]

Hi,

we can do many tricks with Javascript in Studio and most of the times it's just a matter of copying & pasting the right code.

I'd like all Studio users, not just coders, to benefit from this, and thought I could drop here a snippet to blink a widget. 

I call this a quark - from the particle physics standard model - and not atom, because it's really a smaller building block than an atom 

Blinking a widget can be useful, for example, if you are not using Creo Illustrate to create a sequence but still want to draw the user attention to some item in the scene.

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

 (to Javascript coders: I'm using modern Javascript syntax, don't be frightened by that )

$scope.blink = function(widget, times, interval) {
  let w = (widget.visible !== undefined ? widget : $scope.view.wdg[widget]);
  if (!w || w.visible === undefined) { throw "Cannot blink this widget"; }
  $interval(() => w.visible = !w.visible, interval, times);
}

 Invoke the function like this:

blink(widget, times, delay);

where widget is either the id of the widget (e.g. modelItem-1) or the widget itself (e.g. $scope.view.wdg['modelItem-1']).

The other two numbers are the number of times that you want visibility to change, and the amount of milliseconds between each visibility change.

Here follow some examples.

You want to blink the widget 4 times with a 300 ms interval (and leave the widget visible at the end):

blink('modelItem-1', 2*4, 300);

You want to blink the widget 4 times with a 300 ms interval (and leave the widget not visible at the end):

blink('modelItem-1', 2*4+1, 300);

You can comment and suggest additional quarks if you want.

Alessio

[Alessio]

Next week I will provide the next quark, which allows us to fade a widget.

Now, once we have more than one quark we might want to create a sequence of quarks. If you plan to do so, then we  need to add the return keyword to our quarks, so quark #1 (blink) becomes:

$scope.blink = function(widget, times, interval) {
  let w = (widget.visible !== undefined ? widget : $scope.view.wdg[widget]);
  if (!w || w.visible === undefined) { throw "Cannot blink this widget"; }
  return $interval(() => w.visible = !w.visible, interval, times);
}

- Alessio

[SonoMontbonnot]

Hello,

Thanks a lot for your example.

In my experience the function is invoked by a button and I have determined "times = 0".

I’ll start with the Javascript code and i would like to know how i can stop the function "$interval".

Thank you in advance

- Fabrice

[Alessio]

Repeating indefinitely (times = 0) requires that you cancel the process.

To do so, when $interval is invoked it returns an object, on which you can call cancel.

You must save the value returned by $interval, and then you can later cancel it:

$scope.p = $interval(func, delay, 0);

... and when you feel you want to stop it...

$interval.cancel($scope.p);

[SonoMontbonnot]

Thanks a lot you solution works perfectly.

Best regards

- Fabrice