Product: Mingcedar Studio DESIGNER

Choose a state color behavior | Mingcedar Studio

Select a TRUE or FALSE appearance from a boolean condition to control fill, border, and visibility. Enable the corresponding state in Apply result. Use it for running/stopped, open/closed, or auto/manual components.

Published 2026-10-25T12:48:42.702173231Z Updated 2026-10-25T12:48:42.70217242Z

<section id="visual-selection" class="docs-block docs-block-intro docs-block-current"> <span class="section-kicker">Colors</span> <h2>Choose a state color behavior</h2> <p>Select a TRUE or FALSE appearance from a boolean condition to control fill, border, and visibility. Enable the corresponding state in Apply result. Use it for running/stopped, open/closed, or auto/manual components.</p> <div class="docs-detail-list"> <article id="visual-selection-item-1" class="docs-detail-row"> <strong>What it is and what it's for</strong> <p>State Color is in Visual States. Condition selects TRUE state or FALSE state, and only states enabled in Apply result apply their fill, border, and visibility. A false condition does not inherently stop display or hide the component. Use Range Color or Discrete Color for numeric bands, and Multi-State Color for prioritized conditions.</p> </article><article id="visual-selection-item-2" class="docs-detail-row"> <strong>How to use it: fields in its editor</strong> <p>Bind State Color to the component and open its editor. Prepare data in Setup Script and return a boolean from Condition. In Action, enable the required states and output channels. Enter each part of the example in its indicated field.</p> <ul> <li>Setup Script: optional variables and intermediate results for this behavior.</li><li>Condition: a boolean expression, such as ReadTagBoolean("PLC_LINE01.PUMP01.RUN", false), or running from Setup Script.</li><li>Apply result: TRUE is enabled by default. Enable FALSE to apply a static appearance when the condition is false.</li><li>Output channel: enable Fill color, Border color, or Visibility and configure TRUE state and FALSE state.</li><li>Quality Override: enable Follow data quality (border / hide), configure Good and Bad, and optionally enable Hide when quality is bad.</li><li>Save / Ctrl+S validates and saves. Cancel / Esc discards this edit.</li> </ul> <pre class="docs-code-block"><code>// Setup Script

var running = ReadTagBoolean("PLC_LINE01.PUMP01.RUN", false);

// Condition

running

// Action: enable TRUE, FALSE, and Fill color

// TRUE state: #22C55E

// FALSE state: #94A3B8</code></pre> </article><article id="visual-selection-item-3" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it to distinguish two states by color or visibility.</p> <ul> <li>Pump/motor run lamp: running = green, stopped = grey/orange</li><li>Valve open/close state: open = green, closed = red</li><li>Auto/manual or local/remote two-state markers</li><li>A boolean alarm block: shown and red when active, hidden when normal</li> </ul> </article><article id="visual-selection-item-4" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>FALSE is disabled by default; setting a FALSE state color alone does not apply it. Condition requires a boolean, not a literal Tag name or color string. State Color supports Quality Override: bad data quality restores the base appearance and applies the configured Bad border or visibility. On good quality, an enabled state border takes precedence over the Good border color. Configure data quality separately from running, stopped, and alarm states.</p> </article><article id="visual-selection-item-5" 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="visual-selection-item-6" 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="visual-selection-item-7" 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="visual-selection-item-8" 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><article id="visual-selection-item-9" class="docs-detail-row"> <strong>Overview</strong> <p>Discrete Color uses seven increasing thresholds to divide State value into up to eight intervals. Each interval can set fill, border, and visibility. Use it for status codes, alarm levels, or bit combinations. To give specific values different appearances, set thresholds that separate those values.</p> </article><article id="visual-selection-item-10" class="docs-detail-row"> <strong>Field configuration</strong> <p>Open the Discrete Color editor. Prepare data in Setup script and return a number from State value. In State actions, enter seven increasing thresholds in Value < to create eight state intervals.</p> <ul> <li>Setup script (Setup Script): read a numeric Tag and prepare the state value.</li><li>State value: return a number such as stateValue. Use State Color for booleans, or convert explicitly to 0 / 1.</li><li>State actions / Value <: default thresholds are 0, 1, 2, 4, 8, 16, 32. Comparisons use strictly less than; the last state is Final (+∞).</li><li>Fill: a fill color per state (8 states); can be toggled on/off as a whole.</li><li>Border: a border color per state (8 states); can be toggled on/off as a whole.</li><li>Visibility: show or hide per state (8 states); can be toggled on/off as a whole.</li><li>Quality override: Follow data quality (border / hide) controls quality borders and hiding on bad quality. An enabled state border takes precedence over Good.</li> </ul> <pre class="docs-code-block"><code>// Setup script

var stateValue = ReadTagInteger("PLC_LINE01.PUMP01.MODE", 0);

// State value

stateValue</code></pre> </article><article id="visual-selection-item-11" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it when a finite set of numeric values needs different appearances based on thresholds.</p> <ul> <li>Device status codes: set thresholds so 0 (stopped), 1 (running), 2 (fault), and 4 (maintenance) fall into the intended color intervals.</li><li>Alarm level or bit combination: map an integer state into a few fixed buckets, each with its own fill/border/visibility.</li> </ul> </article><article id="visual-selection-item-12" class="docs-detail-row"> <strong>Pitfalls</strong> <p>Check these limits:</p> <ul> <li>State value must return a number; use State Color for a boolean condition.</li><li>8 states maximum. It can't express more than 8 states.</li><li>Discrete Color uses threshold intervals, not equality matching. With default thresholds, both 2 and 3 enter [2, 4). Adjust thresholds or use exact equality conditions in Multi-State Color when they must differ.</li><li>The seven Value < thresholds must increase. By default, 0 enters [0, 1) and values at or above 32 enter the final state. There is no automatic unknown-enum branch.</li><li>Quality Border reflects communication quality, not the process value itself; when quality is bad the shape should not keep rendering as if the value were valid.</li> </ul> </article><article id="visual-selection-item-13" class="docs-detail-row"> <strong>Overview</strong> <p>Multi-State Color displays several states by priority. Configure up to eight Boolean conditions; at runtime, the first true row supplies the component's fill, border, and visibility settings. Row 1 has the highest priority. Use Else for a default appearance when no condition is true.</p> </article><article id="visual-selection-item-14" class="docs-detail-row"> <strong>Field configuration</strong> <p>Arrange conditions by priority, top to bottom. Enable output channels and set each row’s action.</p> <ul> <li>Setup Script (optional): preparation area to read tags and define helper values; leave it empty if not needed.</li><li>Conditions (1-8): one true/false expression per row; the row number is its priority, row 1 highest, and the runtime uses the first row that is true.</li><li>Use Else: when checked, adds an Else row at the bottom of the condition list, used when no condition is true.</li><li>Fill (enable via the column header): set one fill color for each state row.</li><li>Border (enable via the column header): set one border color for each state row.</li><li>Visible (enable via the column header): set show or hide for each state row.</li><li>Quality Override: enable Follow data quality (border / hide) and configure Good and Bad border colors. Enable Hide when quality is bad to hide the component on invalid data.</li> </ul> <pre class="docs-code-block"><code>// Setup Script (prepare)

var st = ReadTagInteger("PLC_LINE01.PUMP01.STATE", 0);

var alarm = ReadTagBoolean("PLC_LINE01.PUMP01.ALARM", false);

// Condition 1 (highest priority, alarm)

alarm === true

// Condition 2 (manual)

st === 2

// Condition 3 (auto running)

st === 1

// Else fallback: idle</code></pre> </article><article id="visual-selection-item-15" class="docs-detail-row"> <strong>When to use it</strong> <p>Use it when one component must show three or more mutually exclusive operating states that have a clear priority.</p> <ul> <li>Pump/device status lamp: alarm shows red first, then manual orange, then auto-running green, then idle grey.</li><li>Multi-level run state: stopped / low speed / high speed / fault on a single shape switched by priority, instead of stacking several behaviors.</li> </ul> </article><article id="visual-selection-item-16" class="docs-detail-row"> <strong>Common mistakes</strong> <p>Check priority and unmatched-state handling:</p> <ul> <li>Order decides the result: the first true condition wins, so put the more important state (e.g. alarm) earlier or an earlier true condition will steal it.</li><li>Conditions are expressions, not colors: a condition row only returns true/false; colors are set in the action columns, and an empty condition is treated as false.</li><li>None true with no Else: this behavior leaves the component unchanged; enable Use Else if you need a fallback.</li><li>Enable the channel in the header first: if Fill / Border / Visible is unchecked, that column has no effect on any row.</li><li>Quality is communication quality: Quality Border reflects tag comms, not the process value; do not keep showing a valid-looking state when quality is bad.</li> </ul> </article><article id="visual-selection-item-17" class="docs-detail-row"> <strong>Overview</strong> <p>Script Color computes one component's fill, border, and visibility from JavaScript expressions. Use it when the appearance depends on several Tags or combined conditions. Open Color Script Editor to configure the output channels.</p> </article><article id="visual-selection-item-18" class="docs-detail-row"> <strong>Field configuration</strong> <p>Open the bound behavior and configure these fields:</p> <ul> <li>General: behavior name; component name is read-only, just to confirm the bound target</li><li>Setup Script: read tags, declare variables, compute intermediate values; its hint reads "define fill, border, or visibility values"</li><li>Condition: an enable expression, defaults to true; the behavior only applies its colors when this is true</li><li>Output Channels: three channels - Fill Color, Border Color, Visibility - each with its own Expression box and its own checkbox; only checked channels are applied</li><li>Fill Color and Border Color return color strings; Visibility returns true/false. A new behavior refers to MyFillcolor, MyStrokecolor, and MyVisibility from Setup Script. Keep the output expressions aligned when changing that script</li><li>Quality Override: enable Follow data quality (border / hide) and configure Good and Bad border colors. Enable Hide when quality is bad to hide the component on invalid data.</li> </ul> <pre class="docs-code-block"><code>// Setup Script

var state = ReadTagInteger("PLC_LINE01.PUMP01.STATE", 0);

var fillColor = state === 1 ? "#22C55E" : "#EF4444";

var borderColor = "#000000";

var isVisible = true;

// Fill Color expression: fillColor

// Border Color expression: borderColor

// Visibility expression: isVisible</code></pre> </article><article id="visual-selection-item-19" class="docs-detail-row"> <strong>When to use it</strong> <p>Use scripts for multiple visual channels or combined conditions, for example:</p> <ul> <li>Pump status block: change fill and border together from a run tag and an alarm tag, hiding or flashing the block on alarm</li><li>Multi-tag combined state: color must be decided from several numeric and boolean values that a single State Color or Range Color cannot express</li> </ul> </article><article id="visual-selection-item-20" class="docs-detail-row"> <strong>Limitations and troubleshooting</strong> <p>Check these conditions before saving:</p> <ul> <li>Script Color output expressions must return synchronously. Handle asynchronous data in an async Page Script function or user interaction script, then store the result in a page variable for the expression to read.</li><li>Keep multi-line logic, tag reads, and function definitions in Setup Script; the three Output Channel expressions should only return the final result</li><li>An output channel's expression only applies when its checkbox (Fill/Border/Visibility) is checked; unchecked channels are ignored</li><li>The quality border and Hide when quality is bad use communication quality (good/bad), not the process value or alarm state.</li> </ul> </article> </div> <div class="docs-note-grid"> <figure id="visual-selection-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/state.png" alt="State Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>State Color editor</strong> <p>Write the condition in the editor and configure two style sets - fill, stroke, and visibility for the true and false states.</p> </figcaption> </figure><figure id="visual-selection-image-2" 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><figure id="visual-selection-image-3" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/discrete.png" alt="Discrete Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Discrete Color editor</strong> <p>Snap one numeric value into up to 8 fixed states by limits, each with its own fill, border, and visibility.</p> </figcaption> </figure><figure id="visual-selection-image-4" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/multi-state.png" alt="Multi-State Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Multi-State Color editor</strong> <p>Rank up to 8 conditions by priority; the first true one wins and applies that row's fill, border, and visibility.</p> </figcaption> </figure><figure id="visual-selection-image-5" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/current/color/script.png" alt="Script Color behavior editor" loading="lazy" decoding="async"> <figcaption> <strong>Script Color editor</strong> <p>Drive fill color, border color, and visibility together from one script across the three output channels.</p> </figcaption> </figure> </div> </section>