Product: Mingcedar Studio DESIGNER
Animation behaviors | Mingcedar Studio
Choose Move, Rotate, Scale, Blink, or Range Color for the state you need to communicate, then configure expressions and verify the result in the runtime.
<section id="preface" class="docs-block docs-block-intro"> <span class="section-kicker">Manual</span> <h2>Before Use</h2> <p>Choose Move, Rotate, Scale, Blink, or Range Color for the state you need to communicate, then configure expressions and verify the result in the runtime.</p> </section> <section id="animation-syntax" class="docs-block"> <span class="section-kicker">Data binding</span> <h2>Expression and template field syntax</h2> <p>Identify whether a field expects a Tag name, a variable name, a number, or text. The leading = marks an expression in selected configuration fields. It is not general script syntax and does not grant Tag access.</p> <div class="docs-detail-list"> <article id="animation-syntax-item-1" class="docs-detail-row"> <strong>1. Distinguish Tag names, runtime variables, and template parameters</strong> <p>Mingcedar supplies Tag data. Runtime variables hold state on the current page. Template parameters replace placeholders when configuring an instance. A variable containing a Tag name is still a string; a read method retrieves its value. Examples use PLC_LINE01, PUMP01, and TANK01. Replace them with names configured in your project.</p> <ul> <li>Full Tag name: `PLC_LINE01.PUMP01.SPEED`.</li><li>Calculated Tag name: `Line01TotalFlow`, exactly as saved in the host.</li><li>Runtime variables: `selectedSpeedTag` holds a name; `speedValue` holds a number.</li><li>Template placeholders: `<PLC>` and `<PUMP_CODE>`, replaced with instance values.</li> </ul> <pre class="docs-code-block"><code>// Page Script: store the target name
var selectedSpeedTag = "PLC_LINE01.PUMP01.SPEED";
// Behavior Setup Script: read the current value during evaluation
var speedValue = ReadTagDouble(selectedSpeedTag, 0);</code></pre> </article><article id="animation-syntax-item-2" class="docs-detail-row"> <strong>2. Target fields in Tag Text and write behaviors</strong> <p>Target tag in Tag Text and Target Tag in Write Tag or Write Tag Bit identify the read or write target. Enter a full fixed name directly, or a variable that holds the name. Use = for object properties or computed names to distinguish them from literal Tag paths. The control performs the read or write; do not call ReadTag or WriteTag inside the target field.</p> <ul> <li>Fixed target: `PLC_LINE01.PUMP01.SPEED`.</li><li>Name variable: `selectedSpeedTag`; define it first and ensure it returns a string.</li><li>Object property: `=bindingConfig.speedTag`.</li><li>Write Tag Bit takes the parent Tag name and a separate Bit Index from 0 to 31.</li> </ul> </article><article id="animation-syntax-item-3" class="docs-detail-row"> <strong>3. = expressions in Input and charts</strong> <p>The Input PLC Tag field, chart series Tag fields, Gauge Tag, and JSON Tag treat a fixed entry as a name. To obtain the name from a page variable, enter =selectedSpeedTag. The expression must return a Tag name string, not the current Tag value or a JSON object.</p> <ul> <li>Fixed Input target: `PLC_LINE01.PUMP01.SPEED_SETPOINT`.</li><li>Dynamic Input target: `=selectedSetpointTag`.</li><li>Dynamic chart target: `=selectedSpeedTag`.</li><li>JSON Tag: `PLC_LINE01.REPORT01.CHART_DATA`; use `=selectedJsonTag` for a dynamic name.</li> </ul> </article><article id="animation-syntax-item-4" class="docs-detail-row"> <strong>4. Variable-name fields and value fields</strong> <p>In Input Runtime Variable mode, enter the destination name, such as speedSetpointDraft. A dynamic name can use =selectedVariableName, which must return a valid variable-name string. The Variable field in Set Variable on Click identifies the assignment target; Value supplies the content to assign.</p> <ul> <li>Fixed variable name without quotes: `speedSetpointDraft`.</li><li>Dynamic Input variable: define `var selectedVariableName = "speedSetpointDraft";` in Page Script and enter `=selectedVariableName` in the field.</li><li>Value and Condition are expression fields: enter `speedValue` or `speedValue > 1200` directly.</li><li>In JavaScript, use `ReadTagDouble(selectedSpeedTag, 0)`. Do not pass `"=selectedSpeedTag"` as an API name argument.</li> </ul> </article><article id="animation-syntax-item-5" class="docs-detail-row"> <strong>5. Literal text and table data</strong> <p>Table Rows and Headers accept arrays, page array variables, or functions returning arrays. Use = to request evaluation explicitly. Quote a literal title when it could be confused with a variable. Table array data and the Tag name required by JSON Chart are different input types.</p> <ul> <li>Headers: `["Equipment", "Status"]`.</li><li>Rows: `[["PUMP01", "Running"], ["PUMP02", "Stopped"]]`.</li><li>Dynamic rows: `pumpRows` or `=buildPumpRows()`, returning an array.</li><li>Literal title: `"Pump station operating record"`.</li> </ul> </article><article id="animation-syntax-item-6" class="docs-detail-row"> <strong>6. Combine template parameters and page variables</strong> <p>Set template parameter PLC to PLC_LINE01 and define the equipment code in Page Script. The template replaces <PLC> during authoring. At runtime, the page variable supplies the remaining name. Built-in template expressions use Page Script variables and cannot access another behavior's Setup Script locals. Enter each part below in the location identified by its comment. Lines beginning with = belong in configuration fields, not in a JavaScript script body.</p> <pre class="docs-code-block"><code>// Page Script
var selectedPumpCode = "PUMP01";
// Input or chart Tag field
="<PLC>." + selectedPumpCode + ".SPEED"
// Script Text: Setup Script
var speedTagName = "<PLC>." + selectedPumpCode + ".SPEED";
var speedValue = ReadTagDouble(speedTagName, 0);
// Script Text: Text
speedValue.toFixed(0) + " rpm"</code></pre> </article><article id="animation-syntax-item-7" class="docs-detail-row"> <strong>7. Dynamic targets and page access</strong> <p>Variable-selected targets remain subject to export validation and Mingcedar read/write permissions. If export cannot determine a dynamic write target, use HQVISU_DECLARE_TAGS in Page Script to declare the finite candidate names associated with the expression. Those names must exist and be authorized in the host. Declarations do not bypass host permissions. Enter each part below in the location identified by its comment. Lines beginning with = belong in configuration fields, not in a JavaScript script body.</p> <pre class="docs-code-block"><code>var selectedSetpointTag = "PLC_LINE01.PUMP01.SPEED_SETPOINT";
HQVISU_DECLARE_TAGS({
expression: "selectedSetpointTag",
read: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"],
write: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"]
});
// Input PLC Tag field
=selectedSetpointTag</code></pre> </article><article id="animation-syntax-item-8" class="docs-detail-row"> <strong>8. Evaluation failures and target changes</strong> <p>An explicit expression that fails, returns a non-string, or retains an unresolved placeholder is not reinterpreted as another Tag name. Check variable scope, return type, template values, and name case.</p> <ul> <li>Changing an Input target or binding mode cancels the old unsubmitted draft. Enter a new value for the new target.</li><li>A write already sent is not recalled by a subsequent target change.</li><li>A live chart clears samples from the previous target when its dynamic target changes.</li><li>Runtime variables belong to the current page. Use page parameters to transfer context to another page.</li> </ul> </article> </div> </section><section id="move-detail" class="docs-block"> <span class="section-kicker">Geometry</span> <h2>Move: show position through displacement</h2> <p>Map a number to a horizontal or vertical offset from the original position, for sliders, level markers and indicators.</p> <div class="docs-detail-list"> <article id="move-detail-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Move is a Geometry behavior for numeric single-axis motion. Use Rotate for angles and Scale for size changes.</p> </article><article id="move-detail-item-2" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Move clamps Source value to Limit minimum / Limit maximum and maps that interval to At limit minimum / At limit maximum. The output is a canvas distance relative to the original component position. Source minimum / Source maximum are available as ValueMin / ValueMax aliases. Changing the source range alone does not update the input limits.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Quality override / Override border by quality configures Good and Bad borders for data quality, separately from process limits.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Source value returns a number, for example ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0). Condition returns a boolean; false skips the behavior and does not hide the component.</li><li>Source minimum / Source maximum default to 0 / 100 and supply the ValueMin / ValueMax expression aliases.</li><li>At limit minimum / At limit maximum specify movement offsets, initially 0 / 120 for a new Move behavior, at the input-limit endpoints. Capture calculates an endpoint from the component geometry.</li><li>Limit minimum / Limit maximum start as independent values 0 / 100 and control clamping and normalization. Enter ValueMin / ValueMax to follow the source range.</li><li>Move axis: Horizontal or Vertical. Hide outside input limits controls visibility on an out-of-range input.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Source value
ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0)
// Source minimum / maximum: 0 / 100
// Limit minimum / maximum: ValueMin / ValueMax
// At limit minimum / maximum: 0 / -shape.height
// Move axis: Vertical</code></pre> </article><article id="move-detail-item-3" class="docs-detail-row"> <strong>How the Capture buttons work</strong> <p>Capture beside At limit minimum / At limit maximum calculates the offset from the same component in PowerPoint. The editor records the original geometry, writes the difference between target and original coordinates, and then attempts to restore the original position.</p> <ul> <li>Choose Move axis first: Horizontal uses the Left difference and Vertical uses the Top difference.</li><li>Move the component to the desired endpoint, then use Capture beside that endpoint.</li><li>The offset uses 0.### formatting and can be replaced with a numeric expression.</li><li>The same component must remain selected. Unavailable original or current geometry produces an error.</li><li>If restoration fails, the saved offset remains; restore the component before continuing.</li> </ul> </article><article id="move-detail-item-4" class="docs-detail-row"> <strong>When to use it</strong> <p>Use a measured value to drive linear motion, for example:</p> <ul> <li>Tank level: map the level percentage into a vertical offset so the liquid block floats up and down with the level</li><li>Slider / horizontal indicator: map a 0-100 value into a horizontal offset to produce slider or horizontal indicator bar motion</li> </ul> </article><article id="move-detail-item-5" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these settings:</p> <ul> <li>Movement outputs use canvas distance. Use shape.width for one component width; 100 means 100 canvas units.</li><li>Limit minimum / Limit maximum controls the actual mapping, with out-of-range visibility controlled separately.</li><li>Check the movement axis before Capture to avoid recording the wrong coordinate difference.</li><li>After changing the source range, update input limits or enter ValueMin / ValueMax to follow it.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="move-detail-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/move.png" alt="Move behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Move editor</strong> <p>Set the source range, offset range, and axis to map a value proportionally into a single-axis offset.</p> </figcaption> </figure> </div> </section><section id="rotate-detail" class="docs-block"> <span class="section-kicker">Geometry</span> <h2>Rotate: show direction through angles</h2> <p>Rotate a component around a chosen pivot by an input angle, for pointers, valve plates and fan blades.</p> <div class="docs-detail-list"> <article id="rotate-detail-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Drag Geometry → Rotate onto the component. It applies the supplied angle directly without percentage mapping.</p> </article><article id="rotate-detail-item-2" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Rotation input returns an angle in degrees. Maximum angle defines a symmetric allowed range and PIVOT POINT sets the pivot. Rotate does not perform source-range percentage mapping.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Override border by quality configures Good / Bad borders for data quality.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Rotation input: an angle expression, such as ReadTagDouble("PLC_LINE01.VALVE01.ANGLE", 0).</li><li>Condition: a boolean; false skips rotation and does not hide the component.</li><li>Maximum angle defaults to 360. A value of 90 permits -90° to +90°. Preset buttons enter 45, 90, 180, 270, or 360.</li><li>PIVOT POINT: Center, Top, Bottom, Left, or Right, according to the mechanical pivot.</li><li>Hide outside angle range hides an out-of-range angle; otherwise the angle is clamped to the boundary.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Rotation input
ReadTagDouble("PLC_LINE01.VALVE01.ANGLE", 0)
// Maximum angle: 90
// PIVOT POINT: Center</code></pre> </article><article id="rotate-detail-item-3" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it for angle-driven motion, for example:</p> <ul> <li>Gauge pointer: read the angle for the pressure/temperature value and turn the needle around its center</li><li>Valve angle: rotate the valve icon by its opening angle, with the pivot on the real stem center</li><li>Fan / mixer blade: rotate the blade by its running angle to show motion</li> </ul> </article><article id="rotate-detail-item-4" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these limits:</p> <ul> <li>Rotation input uses degrees. Convert an opening percentage explicitly when the Tag is not an angle.</li><li>Match the pivot to the mechanical axis. Use Bottom for a bottom-hinged pointer and Center for a center-mounted component.</li><li>Angle presets only update Maximum angle, not Rotation input.</li><li>A false Condition only skips rotation. Use the hide option or a separate visibility behavior to control visibility.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="rotate-detail-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/rotate.png" alt="Rotate behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Rotate editor</strong> <p>Apply an angle value to the component so it turns around the chosen pivot, with a max-rotation limit.</p> </figcaption> </figure> </div> </section><section id="scale-detail" class="docs-block"> <span class="section-kicker">Geometry</span> <h2>Scale: show changing size</h2> <p>Map a numeric value to component size, for data bars, level fills and size indicators.</p> <div class="docs-detail-list"> <article id="scale-detail-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Drag Geometry → Scale onto a component to drive its size from a number.</p> </article><article id="scale-detail-item-2" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Scale clamps Source value to Limit minimum / Limit maximum and maps that interval to At limit minimum / At limit maximum. The output is a scale factor; 1 preserves the original size. Source minimum / Source maximum are available as ValueMin / ValueMax aliases. Changing the source range alone does not update the input limits.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Quality override / Override border by quality configures Good and Bad borders for data quality, separately from process limits.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Source value returns a number, for example ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0). Condition returns a boolean; false skips the behavior and does not hide the component.</li><li>Source minimum / Source maximum default to 0 / 100 and supply the ValueMin / ValueMax expression aliases.</li><li>At limit minimum / At limit maximum specify scale factors, initially 0.5 / 1.5 for a new Scale behavior (change them to 0 / 1 for the level-fill example), at the input-limit endpoints. Capture calculates an endpoint from the component geometry.</li><li>Limit minimum / Limit maximum start as independent values 0 / 100 and control clamping and normalization. Enter ValueMin / ValueMax to follow the source range.</li><li>Moving edge: Top moves the top edge and fixes the bottom; Right moves the right edge and fixes the left.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Source value
ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0)
// Source minimum / maximum: 0 / 100
// Limit minimum / maximum: ValueMin / ValueMax
// At limit minimum / maximum: 0 / 1
// Moving edge: Top</code></pre> </article><article id="scale-detail-item-3" class="docs-detail-row"> <strong>How the Capture buttons work</strong> <p>The editor records the original size. Resize the same component in PowerPoint and click Capture beside an endpoint. It calculates target size / original size using Moving edge, writes the factor and attempts to restore the original geometry.</p> <ul> <li>Choose Moving edge first, because it decides whether the calculation uses width or height and which edge defines the target size.</li><li>Top / Bottom use height: Top uses original bottom minus current top, and Bottom uses current bottom minus original top.</li><li>Left / Right use width: Left uses original right minus current left, and Right uses current right minus original left.</li><li>If the original width/height is zero, the target size would be negative, or the selected object is not the same component, Target warns and refuses to write.</li><li>Capture writes a 0.### factor. If you need a fixed expression instead, you can still overwrite At limit minimum / At limit maximum by hand.</li> </ul> </article><article id="scale-detail-item-4" class="docs-detail-row"> <strong>When to use it</strong> <p>Use size to represent a value, for example:</p> <ul> <li>Level fill: a fill block inside a tank rises with the level percentage; set Moving edge to Top so the bottom stays fixed.</li><li>Bar growth: a throughput or load bar grows from one end with the value; set Moving edge to the edge it grows toward.</li><li>Icon response: an icon scales between At limit minimum and At limit maximum with a value as a strength indicator.</li> </ul> </article><article id="scale-detail-item-5" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these Scale settings:</p> <ul> <li>Moving edge is the edge that moves, not the fixed one: choosing Top means the top edge moves and the bottom is fixed; Left means the left moves and the right is fixed. To keep an edge still, pick its opposite.</li><li>At limit minimum / At limit maximum are scale factors, not percentages: the original size is 1.0, not 100.</li><li>One Moving edge means one direction: if you pick Right, do not expect it to scale toward both sides; the fixed edge does not move.</li><li>Scale has no out-of-range hiding option. A false Condition only skips scaling; use Visibility in State Color or Script Color when the component must be hidden.</li><li>Recheck Limit minimum / Limit maximum when changing the input range, or use ValueMin / ValueMax to keep the effective range aligned with the source range.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="scale-detail-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/scale.png" alt="Scale behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Scale editor</strong> <p>Map a value into a scale factor and use Moving edge to choose which edge moves and which stays fixed.</p> </figcaption> </figure> </div> </section><section id="blink-detail" class="docs-block"> <span class="section-kicker">Colors</span> <h2>Blink: highlight a state</h2> <p>Use a boolean condition to alternate between Blink ON and Blink OFF appearances for alarm or warning indication. Enable FALSE to apply the static Condition FALSE appearance when the condition is false.</p> <div class="docs-detail-list"> <article id="blink-detail-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Blink Color is a Visual States behavior for fill, border, and visibility. With TRUE enabled, a true condition alternates Blink ON and Blink OFF. With FALSE enabled, a false condition applies Condition FALSE. Blink Color has no blink-interval setting. Use State Color for ordinary running/stopped indication and Range Color for numeric bands.</p> </article><article id="blink-detail-item-2" class="docs-detail-row"> <strong>Field configuration</strong> <p>Bind Blink Color and configure the fields below. The example Condition blinks when the alarm bit is true.</p> <ul> <li>Behavior Name: a recognizable name for this behavior (Component Name is read-only and filled in for you).</li><li>Setup Script: optional. Read tags, define variables, and compute intermediate values here for the Condition to use.</li><li>Condition: an expression returning true / false. Enter ReadTagBoolean("PLC_LINE01.PUMP01.ALARM", false) directly, or reference a boolean from Setup Script.</li><li>Action / Apply result: TRUE is enabled by default and FALSE is disabled. Enable FALSE and configure Condition FALSE for a static appearance after the alarm clears.</li><li>Output Channels: independently enable Fill Color, Border Color, and Visibility, in any combination.</li><li>Each enabled channel is configured across three columns: Blink ON, Blink OFF, and Condition FALSE - pick colors for fill/border, or visible/hidden for Visibility.</li><li>Quality Override: enable Follow data quality (border / hide) and configure Good and Bad. Enable Hide when quality is bad when the shape should be hidden on invalid data.</li> </ul> <pre class="docs-code-block"><code>// Setup Script
var alarm = ReadTagBoolean("PLC_LINE01.PUMP01.ALARM", false);
// Condition
alarm;</code></pre> </article><article id="blink-detail-item-3" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it for binary states that need a prominent warning.</p> <ul> <li>Alarm lamp: blink the fill between red and dark red while the alarm bit is true; rest on a static gray after reset.</li><li>Run/warning block: blink the block while a device is faulted or needs action; keep a steady static color when normal.</li> </ul> </article><article id="blink-detail-item-4" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these configuration boundaries:</p> <ul> <li>Condition must return a boolean. Pass a literal Tag name to ReadTagBoolean; the name string itself is not an alarm state.</li><li>Blink Color has no Blink Interval or speed field.</li><li>Condition FALSE takes effect only with FALSE enabled. To show gray after an alarm clears, enable FALSE and Fill color and set the static color.</li><li>Quality Override represents data quality. On good quality, an explicit Border color takes precedence over Good. Bad quality restores the base appearance and applies the configured Bad border or visibility.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="blink-detail-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/blink.png" alt="Blink Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Blink Color editor</strong> <p>When the condition is true it toggles between Blink ON and Blink OFF; when false it rests on a static look, across fill, border, and visibility.</p> </figcaption> </figure> </div> </section><section id="range-detail" class="docs-block"> <span class="section-kicker">Colors</span> <h2>Range Color: show numerical intervals</h2> <p>Map a continuous value to ranges with their own fill, border, and visibility. The default configuration has five ranges; add or remove ranges as needed, from 1 to 24.</p> <div class="docs-detail-list"> <article id="range-detail-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Use Range Color for temperature, pressure, level, or load bands. Four upper limits create five default ranges. Use + Add range or delete rows to configure 1–24 ranges. Enter increasing upper limits and configure an appearance for each range.</p> </article><article id="range-detail-item-2" class="docs-detail-row"> <strong>Field configuration</strong> <p>Prepare data in Setup script and return a number from Range value. Each Range actions row represents a range, with Final (+∞) as the last row. Enter each part of the example in its indicated field.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Setup script (Setup Script): optional numeric preparation for this behavior.</li><li>Range value: a numeric expression, not a literal Tag name or color string.</li><li>Upper limit: enter finite, increasing numbers for all rows except the final range.</li><li>Fill / Border / Visibility: enable the required channels and configure each row.</li><li>+ Add range inserts a range; recheck adjacent boundaries after deleting a row.</li><li>Quality override: Follow data quality (border / hide) configures Good / Bad and hiding on bad quality. An explicit range border takes precedence over Good.</li><li>Save validates scripts and numeric limits. Blank, non-numeric, non-finite, or non-increasing limits block saving.</li> </ul> <pre class="docs-code-block"><code>// Setup script
var temperature = ReadTagDouble("PLC_LINE01.OVEN01.TEMPERATURE", 0);
// Range value
temperature
// Upper limit: 60, 80, 95, 110
// Final (+∞): values above 110</code></pre> </article><article id="range-detail-item-3" class="docs-detail-row"> <strong>When to use it</strong> <p>Use color to distinguish numeric bands, for example:</p> <ul> <li>Temperature example: ≤60, (60,80], (80,95], (95,110], and >110. Configure colors according to the process specification.</li><li>Load bands can indicate low, normal, high, and over-limit values. A range color does not create a host alarm event.</li> </ul> </article><article id="range-detail-item-4" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Range boundaries and publishing checks:</p> <ul> <li>Four limits L1 < L2 < L3 < L4 create five bands: value ≤ L1, L1 < value ≤ L2, L2 < value ≤ L3, L3 < value ≤ L4, and value > L4.</li><li>An upper limit belongs to its range. This differs from the strict Value < comparison in Discrete Color.</li><li>N ranges use N−1 increasing upper limits. A single range has no upper limits and applies to every valid numeric value.</li><li>For projects using an older runtime, update the plugin and host, then export and publish the project again. After adding or removing ranges, verify fill, border, and visibility at every upper limit and in the final range.</li><li>Check finite values, increasing order, and output channels before saving. Invalid limits are not silently saved as 0.</li><li>Quality override represents data reliability; process alarms require separate host configuration.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="range-detail-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/range.png" alt="Range Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Range Color editor</strong> <p>Four limits split the value into five bands, each with its own fill/border color or show/hide.</p> </figcaption> </figure> </div> </section><section id="animation-selection" class="docs-block"> <span class="section-kicker">Geometry</span> <h2>Choose the behavior for the task</h2> <p>Map a number to a horizontal or vertical offset from the original position, for sliders, level markers and indicators.</p> <div class="docs-detail-list"> <article id="animation-selection-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Move is a Geometry behavior for numeric single-axis motion. Use Rotate for angles and Scale for size changes.</p> </article><article id="animation-selection-item-2" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Move clamps Source value to Limit minimum / Limit maximum and maps that interval to At limit minimum / At limit maximum. The output is a canvas distance relative to the original component position. Source minimum / Source maximum are available as ValueMin / ValueMax aliases. Changing the source range alone does not update the input limits.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Quality override / Override border by quality configures Good and Bad borders for data quality, separately from process limits.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Source value returns a number, for example ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0). Condition returns a boolean; false skips the behavior and does not hide the component.</li><li>Source minimum / Source maximum default to 0 / 100 and supply the ValueMin / ValueMax expression aliases.</li><li>At limit minimum / At limit maximum specify movement offsets, initially 0 / 120 for a new Move behavior, at the input-limit endpoints. Capture calculates an endpoint from the component geometry.</li><li>Limit minimum / Limit maximum start as independent values 0 / 100 and control clamping and normalization. Enter ValueMin / ValueMax to follow the source range.</li><li>Move axis: Horizontal or Vertical. Hide outside input limits controls visibility on an out-of-range input.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Source value
ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0)
// Source minimum / maximum: 0 / 100
// Limit minimum / maximum: ValueMin / ValueMax
// At limit minimum / maximum: 0 / -shape.height
// Move axis: Vertical</code></pre> </article><article id="animation-selection-item-3" class="docs-detail-row"> <strong>How the Capture buttons work</strong> <p>Capture beside At limit minimum / At limit maximum calculates the offset from the same component in PowerPoint. The editor records the original geometry, writes the difference between target and original coordinates, and then attempts to restore the original position.</p> <ul> <li>Choose Move axis first: Horizontal uses the Left difference and Vertical uses the Top difference.</li><li>Move the component to the desired endpoint, then use Capture beside that endpoint.</li><li>The offset uses 0.### formatting and can be replaced with a numeric expression.</li><li>The same component must remain selected. Unavailable original or current geometry produces an error.</li><li>If restoration fails, the saved offset remains; restore the component before continuing.</li> </ul> </article><article id="animation-selection-item-4" class="docs-detail-row"> <strong>When to use it</strong> <p>Use a measured value to drive linear motion, for example:</p> <ul> <li>Tank level: map the level percentage into a vertical offset so the liquid block floats up and down with the level</li><li>Slider / horizontal indicator: map a 0-100 value into a horizontal offset to produce slider or horizontal indicator bar motion</li> </ul> </article><article id="animation-selection-item-5" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these settings:</p> <ul> <li>Movement outputs use canvas distance. Use shape.width for one component width; 100 means 100 canvas units.</li><li>Limit minimum / Limit maximum controls the actual mapping, with out-of-range visibility controlled separately.</li><li>Check the movement axis before Capture to avoid recording the wrong coordinate difference.</li><li>After changing the source range, update input limits or enter ValueMin / ValueMax to follow it.</li> </ul> </article><article id="animation-selection-item-6" class="docs-detail-row"> <strong>Overview</strong> <p>Drag Geometry → Rotate onto the component. It applies the supplied angle directly without percentage mapping.</p> </article><article id="animation-selection-item-7" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Rotation input returns an angle in degrees. Maximum angle defines a symmetric allowed range and PIVOT POINT sets the pivot. Rotate does not perform source-range percentage mapping.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Override border by quality configures Good / Bad borders for data quality.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Rotation input: an angle expression, such as ReadTagDouble("PLC_LINE01.VALVE01.ANGLE", 0).</li><li>Condition: a boolean; false skips rotation and does not hide the component.</li><li>Maximum angle defaults to 360. A value of 90 permits -90° to +90°. Preset buttons enter 45, 90, 180, 270, or 360.</li><li>PIVOT POINT: Center, Top, Bottom, Left, or Right, according to the mechanical pivot.</li><li>Hide outside angle range hides an out-of-range angle; otherwise the angle is clamped to the boundary.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Rotation input
ReadTagDouble("PLC_LINE01.VALVE01.ANGLE", 0)
// Maximum angle: 90
// PIVOT POINT: Center</code></pre> </article><article id="animation-selection-item-8" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it for angle-driven motion, for example:</p> <ul> <li>Gauge pointer: read the angle for the pressure/temperature value and turn the needle around its center</li><li>Valve angle: rotate the valve icon by its opening angle, with the pivot on the real stem center</li><li>Fan / mixer blade: rotate the blade by its running angle to show motion</li> </ul> </article><article id="animation-selection-item-9" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these limits:</p> <ul> <li>Rotation input uses degrees. Convert an opening percentage explicitly when the Tag is not an angle.</li><li>Match the pivot to the mechanical axis. Use Bottom for a bottom-hinged pointer and Center for a center-mounted component.</li><li>Angle presets only update Maximum angle, not Rotation input.</li><li>A false Condition only skips rotation. Use the hide option or a separate visibility behavior to control visibility.</li> </ul> </article><article id="animation-selection-item-10" class="docs-detail-row"> <strong>Overview</strong> <p>Drag Geometry → Scale onto a component to drive its size from a number.</p> </article><article id="animation-selection-item-11" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Scale clamps Source value to Limit minimum / Limit maximum and maps that interval to At limit minimum / At limit maximum. The output is a scale factor; 1 preserves the original size. Source minimum / Source maximum are available as ValueMin / ValueMax aliases. Changing the source range alone does not update the input limits.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Quality override / Override border by quality configures Good and Bad borders for data quality, separately from process limits.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Source value returns a number, for example ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0). Condition returns a boolean; false skips the behavior and does not hide the component.</li><li>Source minimum / Source maximum default to 0 / 100 and supply the ValueMin / ValueMax expression aliases.</li><li>At limit minimum / At limit maximum specify scale factors, initially 0.5 / 1.5 for a new Scale behavior (change them to 0 / 1 for the level-fill example), at the input-limit endpoints. Capture calculates an endpoint from the component geometry.</li><li>Limit minimum / Limit maximum start as independent values 0 / 100 and control clamping and normalization. Enter ValueMin / ValueMax to follow the source range.</li><li>Moving edge: Top moves the top edge and fixes the bottom; Right moves the right edge and fixes the left.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Source value
ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0)
// Source minimum / maximum: 0 / 100
// Limit minimum / maximum: ValueMin / ValueMax
// At limit minimum / maximum: 0 / 1
// Moving edge: Top</code></pre> </article><article id="animation-selection-item-12" class="docs-detail-row"> <strong>How the Capture buttons work</strong> <p>The editor records the original size. Resize the same component in PowerPoint and click Capture beside an endpoint. It calculates target size / original size using Moving edge, writes the factor and attempts to restore the original geometry.</p> <ul> <li>Choose Moving edge first, because it decides whether the calculation uses width or height and which edge defines the target size.</li><li>Top / Bottom use height: Top uses original bottom minus current top, and Bottom uses current bottom minus original top.</li><li>Left / Right use width: Left uses original right minus current left, and Right uses current right minus original left.</li><li>If the original width/height is zero, the target size would be negative, or the selected object is not the same component, Target warns and refuses to write.</li><li>Capture writes a 0.### factor. If you need a fixed expression instead, you can still overwrite At limit minimum / At limit maximum by hand.</li> </ul> </article><article id="animation-selection-item-13" class="docs-detail-row"> <strong>When to use it</strong> <p>Use size to represent a value, for example:</p> <ul> <li>Level fill: a fill block inside a tank rises with the level percentage; set Moving edge to Top so the bottom stays fixed.</li><li>Bar growth: a throughput or load bar grows from one end with the value; set Moving edge to the edge it grows toward.</li><li>Icon response: an icon scales between At limit minimum and At limit maximum with a value as a strength indicator.</li> </ul> </article><article id="animation-selection-item-14" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these Scale settings:</p> <ul> <li>Moving edge is the edge that moves, not the fixed one: choosing Top means the top edge moves and the bottom is fixed; Left means the left moves and the right is fixed. To keep an edge still, pick its opposite.</li><li>At limit minimum / At limit maximum are scale factors, not percentages: the original size is 1.0, not 100.</li><li>One Moving edge means one direction: if you pick Right, do not expect it to scale toward both sides; the fixed edge does not move.</li><li>Scale has no out-of-range hiding option. A false Condition only skips scaling; use Visibility in State Color or Script Color when the component must be hidden.</li><li>Recheck Limit minimum / Limit maximum when changing the input range, or use ValueMin / ValueMax to keep the effective range aligned with the source range.</li> </ul> </article><article id="animation-selection-item-15" class="docs-detail-row"> <strong>Overview</strong> <p>Blink Color is a Visual States behavior for fill, border, and visibility. With TRUE enabled, a true condition alternates Blink ON and Blink OFF. With FALSE enabled, a false condition applies Condition FALSE. Blink Color has no blink-interval setting. Use State Color for ordinary running/stopped indication and Range Color for numeric bands.</p> </article><article id="animation-selection-item-16" class="docs-detail-row"> <strong>Field configuration</strong> <p>Bind Blink Color and configure the fields below. The example Condition blinks when the alarm bit is true.</p> <ul> <li>Behavior Name: a recognizable name for this behavior (Component Name is read-only and filled in for you).</li><li>Setup Script: optional. Read tags, define variables, and compute intermediate values here for the Condition to use.</li><li>Condition: an expression returning true / false. Enter ReadTagBoolean("PLC_LINE01.PUMP01.ALARM", false) directly, or reference a boolean from Setup Script.</li><li>Action / Apply result: TRUE is enabled by default and FALSE is disabled. Enable FALSE and configure Condition FALSE for a static appearance after the alarm clears.</li><li>Output Channels: independently enable Fill Color, Border Color, and Visibility, in any combination.</li><li>Each enabled channel is configured across three columns: Blink ON, Blink OFF, and Condition FALSE - pick colors for fill/border, or visible/hidden for Visibility.</li><li>Quality Override: enable Follow data quality (border / hide) and configure Good and Bad. Enable Hide when quality is bad when the shape should be hidden on invalid data.</li> </ul> <pre class="docs-code-block"><code>// Setup Script
var alarm = ReadTagBoolean("PLC_LINE01.PUMP01.ALARM", false);
// Condition
alarm;</code></pre> </article><article id="animation-selection-item-17" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it for binary states that need a prominent warning.</p> <ul> <li>Alarm lamp: blink the fill between red and dark red while the alarm bit is true; rest on a static gray after reset.</li><li>Run/warning block: blink the block while a device is faulted or needs action; keep a steady static color when normal.</li> </ul> </article><article id="animation-selection-item-18" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these configuration boundaries:</p> <ul> <li>Condition must return a boolean. Pass a literal Tag name to ReadTagBoolean; the name string itself is not an alarm state.</li><li>Blink Color has no Blink Interval or speed field.</li><li>Condition FALSE takes effect only with FALSE enabled. To show gray after an alarm clears, enable FALSE and Fill color and set the static color.</li><li>Quality Override represents data quality. On good quality, an explicit Border color takes precedence over Good. Bad quality restores the base appearance and applies the configured Bad border or visibility.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="animation-selection-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/move.png" alt="Move behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Move editor</strong> <p>Set the source range, offset range, and axis to map a value proportionally into a single-axis offset.</p> </figcaption> </figure><figure id="animation-selection-image-2" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/rotate.png" alt="Rotate behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Rotate editor</strong> <p>Apply an angle value to the component so it turns around the chosen pivot, with a max-rotation limit.</p> </figcaption> </figure><figure id="animation-selection-image-3" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/scale.png" alt="Scale behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Scale editor</strong> <p>Map a value into a scale factor and use Moving edge to choose which edge moves and which stays fixed.</p> </figcaption> </figure><figure id="animation-selection-image-4" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/blink.png" alt="Blink Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Blink Color editor</strong> <p>When the condition is true it toggles between Blink ON and Blink OFF; when false it rests on a static look, across fill, border, and visibility.</p> </figcaption> </figure> </div> </section><section id="move-scale-compare" class="docs-block"> <span class="section-kicker">Geometry</span> <h2>Choose between Move and Scale</h2> <p>Map a number to a horizontal or vertical offset from the original position, for sliders, level markers and indicators.</p> <div class="docs-detail-list"> <article id="move-scale-compare-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Move is a Geometry behavior for numeric single-axis motion. Use Rotate for angles and Scale for size changes.</p> </article><article id="move-scale-compare-item-2" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Move clamps Source value to Limit minimum / Limit maximum and maps that interval to At limit minimum / At limit maximum. The output is a canvas distance relative to the original component position. Source minimum / Source maximum are available as ValueMin / ValueMax aliases. Changing the source range alone does not update the input limits.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Quality override / Override border by quality configures Good and Bad borders for data quality, separately from process limits.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Source value returns a number, for example ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0). Condition returns a boolean; false skips the behavior and does not hide the component.</li><li>Source minimum / Source maximum default to 0 / 100 and supply the ValueMin / ValueMax expression aliases.</li><li>At limit minimum / At limit maximum specify movement offsets, initially 0 / 120 for a new Move behavior, at the input-limit endpoints. Capture calculates an endpoint from the component geometry.</li><li>Limit minimum / Limit maximum start as independent values 0 / 100 and control clamping and normalization. Enter ValueMin / ValueMax to follow the source range.</li><li>Move axis: Horizontal or Vertical. Hide outside input limits controls visibility on an out-of-range input.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Source value
ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0)
// Source minimum / maximum: 0 / 100
// Limit minimum / maximum: ValueMin / ValueMax
// At limit minimum / maximum: 0 / -shape.height
// Move axis: Vertical</code></pre> </article><article id="move-scale-compare-item-3" class="docs-detail-row"> <strong>How the Capture buttons work</strong> <p>Capture beside At limit minimum / At limit maximum calculates the offset from the same component in PowerPoint. The editor records the original geometry, writes the difference between target and original coordinates, and then attempts to restore the original position.</p> <ul> <li>Choose Move axis first: Horizontal uses the Left difference and Vertical uses the Top difference.</li><li>Move the component to the desired endpoint, then use Capture beside that endpoint.</li><li>The offset uses 0.### formatting and can be replaced with a numeric expression.</li><li>The same component must remain selected. Unavailable original or current geometry produces an error.</li><li>If restoration fails, the saved offset remains; restore the component before continuing.</li> </ul> </article><article id="move-scale-compare-item-4" class="docs-detail-row"> <strong>When to use it</strong> <p>Use a measured value to drive linear motion, for example:</p> <ul> <li>Tank level: map the level percentage into a vertical offset so the liquid block floats up and down with the level</li><li>Slider / horizontal indicator: map a 0-100 value into a horizontal offset to produce slider or horizontal indicator bar motion</li> </ul> </article><article id="move-scale-compare-item-5" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these settings:</p> <ul> <li>Movement outputs use canvas distance. Use shape.width for one component width; 100 means 100 canvas units.</li><li>Limit minimum / Limit maximum controls the actual mapping, with out-of-range visibility controlled separately.</li><li>Check the movement axis before Capture to avoid recording the wrong coordinate difference.</li><li>After changing the source range, update input limits or enter ValueMin / ValueMax to follow it.</li> </ul> </article><article id="move-scale-compare-item-6" class="docs-detail-row"> <strong>Overview</strong> <p>Drag Geometry → Scale onto a component to drive its size from a number.</p> </article><article id="move-scale-compare-item-7" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Scale clamps Source value to Limit minimum / Limit maximum and maps that interval to At limit minimum / At limit maximum. The output is a scale factor; 1 preserves the original size. Source minimum / Source maximum are available as ValueMin / ValueMax aliases. Changing the source range alone does not update the input limits.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Quality override / Override border by quality configures Good and Bad borders for data quality, separately from process limits.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Source value returns a number, for example ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0). Condition returns a boolean; false skips the behavior and does not hide the component.</li><li>Source minimum / Source maximum default to 0 / 100 and supply the ValueMin / ValueMax expression aliases.</li><li>At limit minimum / At limit maximum specify scale factors, initially 0.5 / 1.5 for a new Scale behavior (change them to 0 / 1 for the level-fill example), at the input-limit endpoints. Capture calculates an endpoint from the component geometry.</li><li>Limit minimum / Limit maximum start as independent values 0 / 100 and control clamping and normalization. Enter ValueMin / ValueMax to follow the source range.</li><li>Moving edge: Top moves the top edge and fixes the bottom; Right moves the right edge and fixes the left.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Source value
ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0)
// Source minimum / maximum: 0 / 100
// Limit minimum / maximum: ValueMin / ValueMax
// At limit minimum / maximum: 0 / 1
// Moving edge: Top</code></pre> </article><article id="move-scale-compare-item-8" class="docs-detail-row"> <strong>How the Capture buttons work</strong> <p>The editor records the original size. Resize the same component in PowerPoint and click Capture beside an endpoint. It calculates target size / original size using Moving edge, writes the factor and attempts to restore the original geometry.</p> <ul> <li>Choose Moving edge first, because it decides whether the calculation uses width or height and which edge defines the target size.</li><li>Top / Bottom use height: Top uses original bottom minus current top, and Bottom uses current bottom minus original top.</li><li>Left / Right use width: Left uses original right minus current left, and Right uses current right minus original left.</li><li>If the original width/height is zero, the target size would be negative, or the selected object is not the same component, Target warns and refuses to write.</li><li>Capture writes a 0.### factor. If you need a fixed expression instead, you can still overwrite At limit minimum / At limit maximum by hand.</li> </ul> </article><article id="move-scale-compare-item-9" class="docs-detail-row"> <strong>When to use it</strong> <p>Use size to represent a value, for example:</p> <ul> <li>Level fill: a fill block inside a tank rises with the level percentage; set Moving edge to Top so the bottom stays fixed.</li><li>Bar growth: a throughput or load bar grows from one end with the value; set Moving edge to the edge it grows toward.</li><li>Icon response: an icon scales between At limit minimum and At limit maximum with a value as a strength indicator.</li> </ul> </article><article id="move-scale-compare-item-10" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these Scale settings:</p> <ul> <li>Moving edge is the edge that moves, not the fixed one: choosing Top means the top edge moves and the bottom is fixed; Left means the left moves and the right is fixed. To keep an edge still, pick its opposite.</li><li>At limit minimum / At limit maximum are scale factors, not percentages: the original size is 1.0, not 100.</li><li>One Moving edge means one direction: if you pick Right, do not expect it to scale toward both sides; the fixed edge does not move.</li><li>Scale has no out-of-range hiding option. A false Condition only skips scaling; use Visibility in State Color or Script Color when the component must be hidden.</li><li>Recheck Limit minimum / Limit maximum when changing the input range, or use ValueMin / ValueMax to keep the effective range aligned with the source range.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="move-scale-compare-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/move.png" alt="Move behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Move editor</strong> <p>Set the source range, offset range, and axis to map a value proportionally into a single-axis offset.</p> </figcaption> </figure><figure id="move-scale-compare-image-2" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/scale.png" alt="Scale behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Scale editor</strong> <p>Map a value into a scale factor and use Moving edge to choose which edge moves and which stays fixed.</p> </figcaption> </figure> </div> </section><section id="animation-rules" class="docs-block"> <span class="section-kicker">Colors</span> <h2>Keep animation and state cues understandable</h2> <p>Use a boolean condition to alternate between Blink ON and Blink OFF appearances for alarm or warning indication. Enable FALSE to apply the static Condition FALSE appearance when the condition is false.</p> <div class="docs-detail-list"> <article id="animation-rules-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Blink Color is a Visual States behavior for fill, border, and visibility. With TRUE enabled, a true condition alternates Blink ON and Blink OFF. With FALSE enabled, a false condition applies Condition FALSE. Blink Color has no blink-interval setting. Use State Color for ordinary running/stopped indication and Range Color for numeric bands.</p> </article><article id="animation-rules-item-2" class="docs-detail-row"> <strong>Field configuration</strong> <p>Bind Blink Color and configure the fields below. The example Condition blinks when the alarm bit is true.</p> <ul> <li>Behavior Name: a recognizable name for this behavior (Component Name is read-only and filled in for you).</li><li>Setup Script: optional. Read tags, define variables, and compute intermediate values here for the Condition to use.</li><li>Condition: an expression returning true / false. Enter ReadTagBoolean("PLC_LINE01.PUMP01.ALARM", false) directly, or reference a boolean from Setup Script.</li><li>Action / Apply result: TRUE is enabled by default and FALSE is disabled. Enable FALSE and configure Condition FALSE for a static appearance after the alarm clears.</li><li>Output Channels: independently enable Fill Color, Border Color, and Visibility, in any combination.</li><li>Each enabled channel is configured across three columns: Blink ON, Blink OFF, and Condition FALSE - pick colors for fill/border, or visible/hidden for Visibility.</li><li>Quality Override: enable Follow data quality (border / hide) and configure Good and Bad. Enable Hide when quality is bad when the shape should be hidden on invalid data.</li> </ul> <pre class="docs-code-block"><code>// Setup Script
var alarm = ReadTagBoolean("PLC_LINE01.PUMP01.ALARM", false);
// Condition
alarm;</code></pre> </article><article id="animation-rules-item-3" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it for binary states that need a prominent warning.</p> <ul> <li>Alarm lamp: blink the fill between red and dark red while the alarm bit is true; rest on a static gray after reset.</li><li>Run/warning block: blink the block while a device is faulted or needs action; keep a steady static color when normal.</li> </ul> </article><article id="animation-rules-item-4" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these configuration boundaries:</p> <ul> <li>Condition must return a boolean. Pass a literal Tag name to ReadTagBoolean; the name string itself is not an alarm state.</li><li>Blink Color has no Blink Interval or speed field.</li><li>Condition FALSE takes effect only with FALSE enabled. To show gray after an alarm clears, enable FALSE and Fill color and set the static color.</li><li>Quality Override represents data quality. On good quality, an explicit Border color takes precedence over Good. Bad quality restores the base appearance and applies the configured Bad border or visibility.</li> </ul> </article><article id="animation-rules-item-5" class="docs-detail-row"> <strong>Data quality and display state</strong> <p>Data quality indicates whether Tag data is valid; process states such as running, stopped and alarmed are separate. In Script Text, select Use quality outline colors under Quality Override and set Good and Bad colors. State Color provides Follow data quality (border / hide), with an option to hide on bad quality.</p> </article><article id="animation-rules-item-6" class="docs-detail-row"> <strong>What Condition means</strong> <p>Condition has a different role in each behavior. Use the table and the corresponding editor to configure it.</p> </article><article id="animation-rules-item-7" class="docs-detail-row"> <strong>Three visibility options</strong> <p></p> </article><article id="animation-rules-item-8" class="docs-detail-row"> <strong>Expressions and verification</strong> <p>For example, enter the expression below in Script Text Condition to evaluate its text only when the specified Tag has good quality. Replace the example name with your project Tag and verify both good and bad quality. Configure the corresponding Quality Override when a persistent quality indication is required.</p> <ul> <li>Condition must return a Boolean immediately; do not use fetch, promises or timers.</li><li>Condition does not replace Mingcedar write permissions or equipment interlocks.</li><li>Move / Rotate / Scale currently have no separate Post Operations input.</li> </ul> <pre class="docs-code-block"><code>ReadTagQualityGood("PLC_LINE01.PUMP01.SPEED")</code></pre> </article> </div> <div class="docs-note-grid"> <figure id="animation-rules-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/blink.png" alt="Blink Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Blink Color editor</strong> <p>When the condition is true it toggles between Blink ON and Blink OFF; when false it rests on a static look, across fill, border, and visibility.</p> </figcaption> </figure> </div> </section><section id="animation-samples" class="docs-block"> <span class="section-kicker">Geometry</span> <h2>Configure common animation scenarios</h2> <p>Map a number to a horizontal or vertical offset from the original position, for sliders, level markers and indicators.</p> <div class="docs-detail-list"> <article id="animation-samples-item-1" class="docs-detail-row"> <strong>Overview</strong> <p>Move is a Geometry behavior for numeric single-axis motion. Use Rotate for angles and Scale for size changes.</p> </article><article id="animation-samples-item-2" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Move clamps Source value to Limit minimum / Limit maximum and maps that interval to At limit minimum / At limit maximum. The output is a canvas distance relative to the original component position. Source minimum / Source maximum are available as ValueMin / ValueMax aliases. Changing the source range alone does not update the input limits.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Quality override / Override border by quality configures Good and Bad borders for data quality, separately from process limits.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Source value returns a number, for example ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0). Condition returns a boolean; false skips the behavior and does not hide the component.</li><li>Source minimum / Source maximum default to 0 / 100 and supply the ValueMin / ValueMax expression aliases.</li><li>At limit minimum / At limit maximum specify movement offsets, initially 0 / 120 for a new Move behavior, at the input-limit endpoints. Capture calculates an endpoint from the component geometry.</li><li>Limit minimum / Limit maximum start as independent values 0 / 100 and control clamping and normalization. Enter ValueMin / ValueMax to follow the source range.</li><li>Move axis: Horizontal or Vertical. Hide outside input limits controls visibility on an out-of-range input.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Source value
ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0)
// Source minimum / maximum: 0 / 100
// Limit minimum / maximum: ValueMin / ValueMax
// At limit minimum / maximum: 0 / -shape.height
// Move axis: Vertical</code></pre> </article><article id="animation-samples-item-3" class="docs-detail-row"> <strong>How the Capture buttons work</strong> <p>Capture beside At limit minimum / At limit maximum calculates the offset from the same component in PowerPoint. The editor records the original geometry, writes the difference between target and original coordinates, and then attempts to restore the original position.</p> <ul> <li>Choose Move axis first: Horizontal uses the Left difference and Vertical uses the Top difference.</li><li>Move the component to the desired endpoint, then use Capture beside that endpoint.</li><li>The offset uses 0.### formatting and can be replaced with a numeric expression.</li><li>The same component must remain selected. Unavailable original or current geometry produces an error.</li><li>If restoration fails, the saved offset remains; restore the component before continuing.</li> </ul> </article><article id="animation-samples-item-4" class="docs-detail-row"> <strong>When to use it</strong> <p>Use a measured value to drive linear motion, for example:</p> <ul> <li>Tank level: map the level percentage into a vertical offset so the liquid block floats up and down with the level</li><li>Slider / horizontal indicator: map a 0-100 value into a horizontal offset to produce slider or horizontal indicator bar motion</li> </ul> </article><article id="animation-samples-item-5" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these settings:</p> <ul> <li>Movement outputs use canvas distance. Use shape.width for one component width; 100 means 100 canvas units.</li><li>Limit minimum / Limit maximum controls the actual mapping, with out-of-range visibility controlled separately.</li><li>Check the movement axis before Capture to avoid recording the wrong coordinate difference.</li><li>After changing the source range, update input limits or enter ValueMin / ValueMax to follow it.</li> </ul> </article><article id="animation-samples-item-6" class="docs-detail-row"> <strong>Overview</strong> <p>Drag Geometry → Rotate onto the component. It applies the supplied angle directly without percentage mapping.</p> </article><article id="animation-samples-item-7" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Rotation input returns an angle in degrees. Maximum angle defines a symmetric allowed range and PIVOT POINT sets the pivot. Rotate does not perform source-range percentage mapping.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Override border by quality configures Good / Bad borders for data quality.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Rotation input: an angle expression, such as ReadTagDouble("PLC_LINE01.VALVE01.ANGLE", 0).</li><li>Condition: a boolean; false skips rotation and does not hide the component.</li><li>Maximum angle defaults to 360. A value of 90 permits -90° to +90°. Preset buttons enter 45, 90, 180, 270, or 360.</li><li>PIVOT POINT: Center, Top, Bottom, Left, or Right, according to the mechanical pivot.</li><li>Hide outside angle range hides an out-of-range angle; otherwise the angle is clamped to the boundary.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Rotation input
ReadTagDouble("PLC_LINE01.VALVE01.ANGLE", 0)
// Maximum angle: 90
// PIVOT POINT: Center</code></pre> </article><article id="animation-samples-item-8" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it for angle-driven motion, for example:</p> <ul> <li>Gauge pointer: read the angle for the pressure/temperature value and turn the needle around its center</li><li>Valve angle: rotate the valve icon by its opening angle, with the pivot on the real stem center</li><li>Fan / mixer blade: rotate the blade by its running angle to show motion</li> </ul> </article><article id="animation-samples-item-9" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these limits:</p> <ul> <li>Rotation input uses degrees. Convert an opening percentage explicitly when the Tag is not an angle.</li><li>Match the pivot to the mechanical axis. Use Bottom for a bottom-hinged pointer and Center for a center-mounted component.</li><li>Angle presets only update Maximum angle, not Rotation input.</li><li>A false Condition only skips rotation. Use the hide option or a separate visibility behavior to control visibility.</li> </ul> </article><article id="animation-samples-item-10" class="docs-detail-row"> <strong>Overview</strong> <p>Drag Geometry → Scale onto a component to drive its size from a number.</p> </article><article id="animation-samples-item-11" class="docs-detail-row"> <strong>How to use it: every control in the editor</strong> <p>Scale clamps Source value to Limit minimum / Limit maximum and maps that interval to At limit minimum / At limit maximum. The output is a scale factor; 1 preserves the original size. Source minimum / Source maximum are available as ValueMin / ValueMax aliases. Changing the source range alone does not update the input limits.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Quality override / Override border by quality configures Good and Bad borders for data quality, separately from process limits.</li><li>JS functions... inserts a method into the focused expression field.</li><li>Source value returns a number, for example ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0). Condition returns a boolean; false skips the behavior and does not hide the component.</li><li>Source minimum / Source maximum default to 0 / 100 and supply the ValueMin / ValueMax expression aliases.</li><li>At limit minimum / At limit maximum specify scale factors, initially 0.5 / 1.5 for a new Scale behavior (change them to 0 / 1 for the level-fill example), at the input-limit endpoints. Capture calculates an endpoint from the component geometry.</li><li>Limit minimum / Limit maximum start as independent values 0 / 100 and control clamping and normalization. Enter ValueMin / ValueMax to follow the source range.</li><li>Moving edge: Top moves the top edge and fixes the bottom; Right moves the right edge and fixes the left.</li><li>Save / Ctrl+S validates and saves; Cancel / Esc discards the edit.</li> </ul> <pre class="docs-code-block"><code>// Source value
ReadTagDouble("PLC_LINE01.TANK01.LEVEL", 0)
// Source minimum / maximum: 0 / 100
// Limit minimum / maximum: ValueMin / ValueMax
// At limit minimum / maximum: 0 / 1
// Moving edge: Top</code></pre> </article><article id="animation-samples-item-12" class="docs-detail-row"> <strong>How the Capture buttons work</strong> <p>The editor records the original size. Resize the same component in PowerPoint and click Capture beside an endpoint. It calculates target size / original size using Moving edge, writes the factor and attempts to restore the original geometry.</p> <ul> <li>Choose Moving edge first, because it decides whether the calculation uses width or height and which edge defines the target size.</li><li>Top / Bottom use height: Top uses original bottom minus current top, and Bottom uses current bottom minus original top.</li><li>Left / Right use width: Left uses original right minus current left, and Right uses current right minus original left.</li><li>If the original width/height is zero, the target size would be negative, or the selected object is not the same component, Target warns and refuses to write.</li><li>Capture writes a 0.### factor. If you need a fixed expression instead, you can still overwrite At limit minimum / At limit maximum by hand.</li> </ul> </article><article id="animation-samples-item-13" class="docs-detail-row"> <strong>When to use it</strong> <p>Use size to represent a value, for example:</p> <ul> <li>Level fill: a fill block inside a tank rises with the level percentage; set Moving edge to Top so the bottom stays fixed.</li><li>Bar growth: a throughput or load bar grows from one end with the value; set Moving edge to the edge it grows toward.</li><li>Icon response: an icon scales between At limit minimum and At limit maximum with a value as a strength indicator.</li> </ul> </article><article id="animation-samples-item-14" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these Scale settings:</p> <ul> <li>Moving edge is the edge that moves, not the fixed one: choosing Top means the top edge moves and the bottom is fixed; Left means the left moves and the right is fixed. To keep an edge still, pick its opposite.</li><li>At limit minimum / At limit maximum are scale factors, not percentages: the original size is 1.0, not 100.</li><li>One Moving edge means one direction: if you pick Right, do not expect it to scale toward both sides; the fixed edge does not move.</li><li>Scale has no out-of-range hiding option. A false Condition only skips scaling; use Visibility in State Color or Script Color when the component must be hidden.</li><li>Recheck Limit minimum / Limit maximum when changing the input range, or use ValueMin / ValueMax to keep the effective range aligned with the source range.</li> </ul> </article><article id="animation-samples-item-15" class="docs-detail-row"> <strong>Overview</strong> <p>Use Range Color for temperature, pressure, level, or load bands. Four upper limits create five default ranges. Use + Add range or delete rows to configure 1–24 ranges. Enter increasing upper limits and configure an appearance for each range.</p> </article><article id="animation-samples-item-16" class="docs-detail-row"> <strong>Field configuration</strong> <p>Prepare data in Setup script and return a number from Range value. Each Range actions row represents a range, with Final (+∞) as the last row. Enter each part of the example in its indicated field.</p> <ul> <li>Behavior name is editable; Component name is read-only.</li><li>Setup script (Setup Script): optional numeric preparation for this behavior.</li><li>Range value: a numeric expression, not a literal Tag name or color string.</li><li>Upper limit: enter finite, increasing numbers for all rows except the final range.</li><li>Fill / Border / Visibility: enable the required channels and configure each row.</li><li>+ Add range inserts a range; recheck adjacent boundaries after deleting a row.</li><li>Quality override: Follow data quality (border / hide) configures Good / Bad and hiding on bad quality. An explicit range border takes precedence over Good.</li><li>Save validates scripts and numeric limits. Blank, non-numeric, non-finite, or non-increasing limits block saving.</li> </ul> <pre class="docs-code-block"><code>// Setup script
var temperature = ReadTagDouble("PLC_LINE01.OVEN01.TEMPERATURE", 0);
// Range value
temperature
// Upper limit: 60, 80, 95, 110
// Final (+∞): values above 110</code></pre> </article><article id="animation-samples-item-17" class="docs-detail-row"> <strong>When to use it</strong> <p>Use color to distinguish numeric bands, for example:</p> <ul> <li>Temperature example: ≤60, (60,80], (80,95], (95,110], and >110. Configure colors according to the process specification.</li><li>Load bands can indicate low, normal, high, and over-limit values. A range color does not create a host alarm event.</li> </ul> </article><article id="animation-samples-item-18" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Range boundaries and publishing checks:</p> <ul> <li>Four limits L1 < L2 < L3 < L4 create five bands: value ≤ L1, L1 < value ≤ L2, L2 < value ≤ L3, L3 < value ≤ L4, and value > L4.</li><li>An upper limit belongs to its range. This differs from the strict Value < comparison in Discrete Color.</li><li>N ranges use N−1 increasing upper limits. A single range has no upper limits and applies to every valid numeric value.</li><li>For projects using an older runtime, update the plugin and host, then export and publish the project again. After adding or removing ranges, verify fill, border, and visibility at every upper limit and in the final range.</li><li>Check finite values, increasing order, and output channels before saving. Invalid limits are not silently saved as 0.</li><li>Quality override represents data reliability; process alarms require separate host configuration.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="animation-samples-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/move.png" alt="Move behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Move editor</strong> <p>Set the source range, offset range, and axis to map a value proportionally into a single-axis offset.</p> </figcaption> </figure><figure id="animation-samples-image-2" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/rotate.png" alt="Rotate behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Rotate editor</strong> <p>Apply an angle value to the component so it turns around the chosen pivot, with a max-rotation limit.</p> </figcaption> </figure><figure id="animation-samples-image-3" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/geometry/scale.png" alt="Scale behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Scale editor</strong> <p>Map a value into a scale factor and use Moving edge to choose which edge moves and which stays fixed.</p> </figcaption> </figure><figure id="animation-samples-image-4" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/range.png" alt="Range Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Range Color editor</strong> <p>Four limits split the value into five bands, each with its own fill/border color or show/hide.</p> </figcaption> </figure> </div> </section>