State Color | Mingcedar Studio

<div class="manual-doc-article manual-doc-article-section"><h2 id="state-color">Colors: State Color</h2>

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.

<div class="doc-card-list">

<article class="doc-card">

<h3 id="state-color-item-1">What it is and what it&#39;s for</h3>

<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 class="doc-card">

<h3 id="state-color-item-2">How to use it: fields in its editor</h3>

<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(&quot;PLC_LINE01.PUMP01.RUN&quot;, 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>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>JavaScript</span><span class="manual-code-tools"><small>JavaScript</small><button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: JavaScript">Copy code</button><span class="manual-code-status" role="status"></span></span></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#6A737D">// Setup Script</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> running </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> ReadTagBoolean</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.RUN"</span><span style="color:#24292E">, </span><span style="color:#005CC5">false</span><span style="color:#24292E">);</span></span>

<span class="line"></span>

<span class="line"><span style="color:#6A737D">// Condition</span></span>

<span class="line"><span style="color:#24292E">running</span></span>

<span class="line"></span>

<span class="line"><span style="color:#6A737D">// Action: enable TRUE, FALSE, and Fill color</span></span>

<span class="line"><span style="color:#6A737D">// TRUE state: #22C55E</span></span>

<span class="line"><span style="color:#6A737D">// FALSE state: #94A3B8</span></span></code></pre></div>

</article>

<article class="doc-card">

<h3 id="state-color-item-3">When to use it</h3>

<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 class="doc-card">

<h3 id="state-color-item-4">Limitations and troubleshooting</h3>

<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>

</div>

<div class="docs-note-grid manual-doc-image-grid">

<figure class="docs-note-card manual-doc-image-card" id="state-color-image-1">

<img src="/WEB_img/HQPPT/current/color/state.png" alt="State Color behavior editor" loading="lazy" decoding="async" />

<figcaption>

<strong>Figure 1: 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>

</div>

</div>