Animate and QR Code

Animate (CSS/SVG Animation)

Animate starts/stops a CSS animation or SVG SMIL animation based on a condition. It is used for visual effects such as rotation, vibration, pulse, and blinking.

Usage

Field	Value
Type	Animate
Suitable SVG Elements	<g>, <path>, <circle>
Expression Type	Tag (Boolean), Expression

SVG + CSS Example — Spinning Fan

<style>
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .spinning { animation: spin 1s linear infinite; transform-origin: center; }
</style>

<g id="fan_blades" transform="translate(100,100)">
  <line x1="-30" y1="0" x2="30" y2="0" stroke="#333" stroke-width="4"/>
  <line x1="0" y1="-30" x2="0" y2="30" stroke="#333" stroke-width="4"/>
  <line x1="-21" y1="-21" x2="21" y2="21" stroke="#333" stroke-width="4"/>
  <line x1="21" y1="-21" x2="-21" y2="21" stroke="#333" stroke-width="4"/>
</g>

Expression: Fan_Running (Tag, Boolean)

• true → .spinning class is added to fan_blades → fan spins
• false → class is removed → fan stops

---

QRCodeGeneration (QR Code Generation)

QRCodeGeneration generates a QR code from a variable value or text.

Field	Value
Type	QRCodeGeneration
Expression Type	Expression, Text

// Convert device information to QR code
var sn = ins.getVariableValue("Serial_Number").value;
return "https://inscada.com/device/" + sn;

Usage: Device identification code, maintenance form URL, inventory label.