Product: Mingcedar Studio DESIGNER
Click, Hover, and Press/Release scripts | Mingcedar Studio
Run JavaScript on click for confirmation, Tag reads/writes, styling or navigation. Condition controls whether it runs.
<section id="script-interactions" class="docs-block docs-block-intro docs-block-current"> <span class="section-kicker">Interactions</span> <h2>Click, Hover, and Press/Release scripts</h2> <p>Run JavaScript on click for confirmation, Tag reads/writes, styling or navigation. Condition controls whether it runs.</p> <div class="docs-detail-list"> <article id="script-interactions-item-1" class="docs-detail-row"> <strong>What it is and what it's for</strong> <p>Click Script is an Interactions behavior for custom click logic. Scripts can access object, objects, event, tag, page, presentation, shape, hqVisuDesigner and globals.</p> </article><article id="script-interactions-item-2" class="docs-detail-row"> <strong>Field configuration</strong> <p>General has editable Behavior Name and read-only Component Name; Trigger is Click. Configure these Interaction Setup fields:</p> <ul> <li>Click Script: the script body executed on click. It supports multiple lines for conditions, tag reads and writes, component updates, and dialogs. Use return to exit early or return a result.</li><li>Condition: an enable-gate expression, defaulting to true;. Put only a single expression that resolves immediately to true/false here, e.g. ReadTagBoolean(...) or a comparison; when false, that click does not run.</li><li>Tag helpers available: ReadTagBoolean/Integer/Double/String, and during this real click action WriteTagBoolean/Integer/Double/String. Components and navigation use hqVisuDesigner (setComponentFill / setComponentText / setComponentVisible / openPage / openScreen, etc.).</li><li>Async APIs (fetch, setTimeout, setInterval, ...) belong only in a script body like Click Script; never in Condition (a synchronous evaluation slot).</li><li>The script snippet button is context-aware: it offers full script snippets in Click Script and short expression snippets in Condition.</li> </ul> <pre class="docs-code-block"><code>// Click Script
var v = prompt("Enter a value", "0");
if (v === null || v === "") { return; }
var n = parseInt(v, 10);
if (isNaN(n)) { alert("Please enter an integer."); return; }
WriteTagInteger("PLC_LINE01.PUMP01.SETPOINT", n);
// Condition
ReadTagBoolean("PLC_LINE01.PUMP01.ALLOW_OP", false)</code></pre> </article><article id="script-interactions-item-3" class="docs-detail-row"> <strong>When to use it</strong> <p>Use for multi-step or custom click actions:</p> <ul> <li>Confirm-then-write: prompt/confirm the operator first, then WriteTagInteger/WriteTagBoolean.</li><li>Drive several components on one click: recolor, relabel, or show/hide multiple components in a single handler (hqVisuDesigner.setComponentFill / setComponentText / setComponentVisible).</li><li>A guarded action button: wire Condition to an allow/logged-in/manual-mode tag so the click simply does nothing when the precondition isn't met.</li> </ul> </article><article id="script-interactions-item-4" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Configuration requirements:</p> <ul> <li>Writes remain subject to host permissions, confirmation, reason capture, and asynchronous processing. Calling WriteTag does not confirm that the device accepted the value; verify the result in the runtime platform.</li><li>Condition must return its result synchronously. It does not support fetch() or other asynchronous calls that return a Promise.</li><li>A multi-line Click Script can finish naturally without a final return. Use return in branches that must exit early, such as when the user cancels.</li><li>Don't navigate with relative disk paths: use hqVisuDesigner.openPage("PageName") within the same package, hqVisuDesigner.openScreen("SCREEN_CODE") across packages, and a URL only for real external sites.</li> </ul> </article><article id="script-interactions-item-5" class="docs-detail-row"> <strong>Overview</strong> <p>Hover Script attaches pointer-enter and pointer-leave scripts to a component for highlighting or temporary hints. It runs when a user moves the pointer in the Mingcedar runtime. Restore any appearance changed on enter in the leave script.</p> </article><article id="script-interactions-item-6" class="docs-detail-row"> <strong>How to use it: the fields in its editor</strong> <p>Trigger is Pointer Move. Both script boxes support multi-line code, ReadTag* and async calls such as setTimeout and fetch. Hover actions must not write devices:</p> <ul> <li>Pointer Enter (mouse over; called Mouse Over in the docs): script that runs when the pointer enters the shape.</li><li>Pointer Leave (mouse out; called Mouse Out in the docs): script that runs when the pointer leaves, used to undo what the enter script changed.</li><li>Context objects available in the script: object, objects, event (mouse context) plus tag, page, presentation, shape, hqVisuDesigner, and globals.</li><li>object is the current shape's DOM element, so you can set its style directly (e.g. object.style.opacity); shape.name is the shape name.</li><li>Note: Hover Script has no Enable/Condition gate (unlike Click Script); both scripts simply run.</li> </ul> <pre class="docs-code-block"><code>// Pointer Enter (mouse over)
object.style.opacity = "0.7";
// Pointer Leave (mouse out)
object.style.opacity = "1";</code></pre> </article><article id="script-interactions-item-7" class="docs-detail-row"> <strong>When to use it</strong> <p>Use for highlights and hints without a click.</p> <ul> <li>Device-icon hover highlight: dim the opacity or add a stroke when the pointer is over a pump/valve, restore on leave, to signal it is clickable.</li><li>Temporary info hint: on enter use hqVisuDesigner to show a note or emphasis border on the page, clear it on leave, without interrupting the operator.</li> </ul> </article><article id="script-interactions-item-8" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check runtime and restoration behavior:</p> <ul> <li>Enter changes are not auto-undone: you must write the matching restore logic in Pointer Leave, or the effect stays after the pointer leaves.</li><li>It runs only on real pointer interaction in the exported/host page, not in PowerPoint edit mode, so verify after export.</li><li>Do not call WriteTag* from Hover Script. The runtime grants write capability only to trusted click or Pointer Button press/release actions; keep hover purely visual.</li> </ul> </article><article id="script-interactions-item-9" class="docs-detail-row"> <strong>Overview</strong> <p>Press/Release Script has a fixed Pointer Button trigger. The runtime accepts a real primary left-pointer interaction: pointerdown runs Pointer Press, while pointerup, pointercancel, or lost pointer capture enters Pointer Release. Unlike Click Script, it distinguishes the held and released phases.</p> </article><article id="script-interactions-item-10" class="docs-detail-row"> <strong>How to use it: design the scripts as a pair</strong> <p>The editor provides two full script boxes, Pointer Press and Pointer Release, with no separate Condition field. The press script enters a temporary state; the release script exits or resets it. Both scripts can use object, objects, event, tag, page, presentation, shape, hqVisuDesigner, and globals.</p> <ul> <li>Pointer Press: runs on the primary pointer press, for example write a momentary command true, show a pressed state, or begin a temporary action.</li><li>Pointer Release: runs on release, cancellation, or lost capture, for example write false, restore styling, or end the action.</li><li>Each script is syntax-validated separately. An empty phase script does not run.</li><li>Tag writes still depend on host permission, confirmation, reason, and audit processing; a script call is not proof that the device completed the action.</li> </ul> <pre class="docs-code-block"><code>// Pointer Press
WriteTagBoolean("<CommandTag>", true);
// Pointer Release
WriteTagBoolean("<CommandTag>", false);</code></pre> </article><article id="script-interactions-item-11" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it for actions that remain active until the operator releases the pointer: motor jog, manual valve movement, a temporary acknowledgement, a hold-to-preview state, or pressed-state feedback. Keep one-shot submissions, navigation, and fixed writes in Click Script, Open Link, or Write Tag.</p> </article><article id="script-interactions-item-12" class="docs-detail-row"> <strong>Safety boundaries and common mistakes</strong> <p>Keep the release script short, idempotent, and safe to repeat. Never configure only the press side and omit the reset path, and never treat this UI behavior as a replacement for PLC interlocks, emergency stops, or a safety circuit. If a host write outcome is uncertain, the runtime may block a later release write; the PLC/control system must enforce the final safe state for critical equipment.</p> </article> </div> <div class="docs-note-grid"> <figure id="script-interactions-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/interaction/click-script.png" alt="Click Script behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Click Script editor</strong> <p>Write the on-click script in the Click Script box and use Condition to gate whether the click runs.</p> </figcaption> </figure><figure id="script-interactions-image-2" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/interaction/hover-script.png" alt="Hover Script behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Hover Script editor</strong> <p>Fill the Pointer Enter and Pointer Leave scripts separately; the leave script restores what the enter script changed.</p> </figcaption> </figure><figure id="script-interactions-image-3" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/MouseBehaviorEditorForm.png" alt="Shared mouse behavior editor structure used by Press/Release Script" loading="lazy" decoding="async"> <figcaption> <strong>Press/Release Script editor structure</strong> <p>This behavior shares the Click/Hover editor shell; its actual mode shows Pointer Button, Pointer Press, and Pointer Release.</p> </figcaption> </figure> </div> </section>