Icon rotation in Ignition Perspective

Ignition
,
1

Hi,
I was trying to rotate the icon [material/autorenew] in forward direction continuously until my motor value becomes zero.
I was tried the value change script with loop functions, but it's rotating even after the value becomes zero. loop function not breaking.

val = currentValue.value
while   val  > 0:
	for degree in range (0, 361, 10):
		self.getSibling("Icon").props.style.transform =  "rotate(" + str(degree) + "deg)"
		if val == 0:
			break 	
	if val == 0 :
		break

any suggestions please let me know
or any alternate way to show the running indication with icon please post it here.

Thanks in advance.
Dayaraju

2

Use an SVG version of the icon and use CSS animation to implement the rotation animation.

A reference thread:

1 Like
3

Scripts run on the gateway and that means that your animation would require continuous updates from the the gateway to the browser. This won't work well. In addition, open-ended while loops are not a good idea.

Instead use CSS animation which is all handled by the browser. On your icon style properties add style.animation. Create an expression binding on the new style,

if({../tagMotorRunning},
    "spin 2s linear infinite",
    ""
)

This has the small problem that the animation snaps back to 0° when the motor stops. Someone may have a fix for that.

1 Like
4

Thanks, its working and that too one line of code :+1: