Product: Mingcedar Studio DESIGNER

Create your first screen: buttons, an indicator and text | Mingcedar Studio

Connect run/stop buttons, an indicator and text with a page variable, then publish to Mingcedar. No PLC or preconfigured Tag is required.

Published 2026-10-25T12:48:42.659431099Z Updated 2026-10-26T19:56:55.66055189Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="first-screen">Getting started: Create your first screen: buttons, an indicator and text</h2>

Connect run/stop buttons, an indicator and text with a page variable, then publish to Mingcedar. No PLC or preconfigured Tag is required.

<h3 id="first-screen-item-1">1. Prepare the environment</h3>

<p>Requires Windows PowerPoint with Studio installed and activated. Runtime checks also require Mingcedar and an account allowed to publish files, configure menus and view screens. Authoring and export can begin before the platform is ready.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Term</th><th scope="col">Meaning in this tutorial</th></tr></thead><tbody>

<tr><th scope="row">Component</th><td>A circle, button shape or text box on a slide.</td></tr>

<tr><th scope="row">Behavior</th><td>A display rule or action attached to a component, such as State Color.</td></tr>

<tr><th scope="row">Page Script</th><td>JavaScript documents that define variables and functions for the current page.</td></tr>

<tr><th scope="row">Page variable</th><td>Temporary runtime data. This example uses true and false for two simulated states.</td></tr>

<tr><th scope="row">Page Code</th><td>The page identifier used for exported files and navigation within the package.</td></tr>

<tr><th scope="row">Screen package / runtime platform</th><td>The package contains exported files; Mingcedar loads them and runs the interactions.</td></tr>

</tbody></table></div>

<li><a href="/en/ppt/manual/windows-install/">Installation and licensing</a></li>

<li><a href="/en/hqserver/manual/windows-install/">Mingcedar deployment</a></li>

</ul>

</article>

<h3 id="first-screen-item-2">2. Create and save a presentation</h3>

<ol>

<li>Create a blank PowerPoint presentation with one blank slide and save it as first-screen.pptx.</li>

<li>Open MX Design → Page → Page Ratio, select 16:9 in Aspect ratio and click OK.</li>

<li>Open MX Design → Page → Nav Path. Set this row to Page Code=first_screen, Level=1 and Default Text=First screen. Leave Language Key empty, check Background and click Save.</li>

</ol>

<p class="doc-step-result"><strong>Expected result</strong> Reopen Nav Path and confirm first_screen is retained. Complete the remaining configuration on this slide.</p>

</article>

<h3 id="first-screen-item-3">3. Draw and name four components</h3>

<p>Use PowerPoint Insert → Shapes / Text Box to draw a circle, two rectangle buttons and a text box. Open MX Design → Behaviors → Browse, expand First screen, and use Rename Component on each node. Component names and button captions are separate.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Object</th><th scope="col">Component name</th><th scope="col">Caption</th></tr></thead><tbody>

<tr><th scope="row">Circle</th><td>DemoLamp</td><td>No text</td></tr>

<tr><th scope="row">Button</th><td>DemoStart</td><td>Simulate running</td></tr>

<tr><th scope="row">Button</th><td>DemoStop</td><td>Simulate stopped</td></tr>

<tr><th scope="row">Text box</th><td>DemoStatus</td><td>Simulation: stopped</td></tr>

</tbody></table></div>

<p class="doc-step-result"><strong>Expected result</strong> All four names appear in the component tree. Click Refresh if newly drawn objects are missing.</p>

</article>

<h3 id="first-screen-item-4">4. Declare the page variable</h3>

<p>Open MX Design → Scripts → Page Script. In Script workspace, click New, leave Folder empty, set Name to demo-state, keep Enabled checked, paste the code into Code and click Save. Leave any existing alarm.js unchanged.</p>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>Page Script → demo-state → Code</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: Page Script → demo-state → Code">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:#D73A49">var</span><span style="color:#24292E"> tutorialRunning </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> false</span><span style="color:#24292E">;</span></span></code></pre></div>

<p class="doc-step-result"><strong>Expected result</strong> tutorialRunning is the variable name; false sets the initial simulated state to stopped. Names are case-sensitive and unquoted. Reopen Page Script to confirm the document and code were saved.</p>

</article>

<h3 id="first-screen-item-5">5. Configure State Color on the circle</h3>

<p>In Behavior Browser, drag State Color from Behaviors → Visual States onto the DemoLamp component node. Fill the editor as shown and click Save. To edit it later, double-click State Color beneath DemoLamp. Double-clicking the catalog item does not bind a behavior.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Field</th><th scope="col">Entry</th></tr></thead><tbody>

<tr><th scope="row">Setup Script</th><td>Clear the default content</td></tr>

<tr><th scope="row">Condition</th><td>tutorialRunning</td></tr>

<tr><th scope="row">Action → Apply result</th><td>Enable TRUE and FALSE</td></tr>

<tr><th scope="row">Action → Output channel</th><td>Enable Fill color</td></tr>

<tr><th scope="row">TRUE state → Fill color</th><td>#22C55E</td></tr>

<tr><th scope="row">FALSE state → Fill color</th><td>#94A3B8</td></tr>

<tr><th scope="row">Quality Override</th><td>Leave off; this exercise does not read Tags</td></tr>

</tbody></table></div>

<ol>

<li>Click each color swatch, enter its value in Hex in the Select Color dialog, click OK and save the behavior.</li>

</ol>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>State Color → Condition</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: State Color → Condition">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:#24292E">tutorialRunning</span></span></code></pre></div>

<p class="doc-step-result"><strong>Expected result</strong> State Color appears under DemoLamp; at runtime the indicator is green for true and gray for false.</p>

</article>

<h3 id="first-screen-item-6">6. Configure the two variable buttons</h3>

<p>Drag Set Variable on Click from Behaviors → Interactions onto DemoStart and DemoStop. For both, clear Setup Script, set Condition to true and enter tutorialRunning in Variable (Target variable). Set Value as shown and save each behavior.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Button</th><th scope="col">Variable</th><th scope="col">Value</th></tr></thead><tbody>

<tr><th scope="row">DemoStart</th><td>tutorialRunning</td><td>true</td></tr>

<tr><th scope="row">DemoStop</th><td>tutorialRunning</td><td>false</td></tr>

</tbody></table></div>

<p class="doc-step-result"><strong>Expected result</strong> The buttons assign Boolean true and false without quotes. These actions change only the current-page variable; they send no device commands.</p>

</article>

<h3 id="first-screen-item-7">7. Display the simulated state</h3>

<p>Drag Script Text from Behaviors → Text onto DemoStatus. Clear the default Setup Script, set Condition to true, enter the expression below in Display Text and click Save.</p>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>Script Text → Display Text</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: Script Text → Display Text">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:#24292E">tutorialRunning </span><span style="color:#D73A49">?</span><span style="color:#032F62"> "Simulation: running"</span><span style="color:#D73A49"> :</span><span style="color:#032F62"> "Simulation: stopped"</span></span></code></pre></div>

<p class="doc-step-result"><strong>Expected result</strong> The expression condition ? first : second returns the first text for true and the second for false. This field takes the expression only, without var or return.</p>

</article>

<h3 id="first-screen-item-8">8. Export the complete screen package</h3>

<ol>

<li>Save the presentation and open MX Design → Export → Export HTML.</li>

<li>In Choose an export folder, select an empty directory dedicated to this exercise, such as D:\MingcedarLessons\first-screen, then click Export.</li>

<li>Wait for completion and check Export log for failures. The directory should contain first_screen.html, its SVG, the js directory and screen.manifest.json.</li>

</ol>

<p class="doc-step-result"><strong>Expected result</strong> Publish the complete exported directory. Runtime assets are supplied by Mingcedar, so opening local HTML directly does not verify deployment.</p>

</article>

<h3 id="first-screen-item-9">9. Publish and configure a runtime entry</h3>

<ol>

<li>Sign in to Mingcedar and open Configuration Center → Screen Files. Select a directory dedicated to this exercise.</li>

<li>Use folder selection to choose the exported directory. Check first_screen.html and its resources in Pending Files, click Publish and wait for upload completion.</li>

<li>Open Configuration Center → Menus and click New Primary. Set the default name to First screen and the type to Page (open HTML directly). Select the published first_screen.html path in Entry HTML and save.</li>

<li>Return to the runtime interface, refresh it and open First screen from the menu.</li>

</ol>

<li><a href="/en/hqserver/manual/screens/">Screen publishing and menu configuration</a></li>

</ul>

</article>

<h3 id="first-screen-item-10">10. Verify the result</h3>

<p>Reloading initializes the variable from Page Script again. Then change both colors and captions yourself and export again. Review the new files in Pending Files, select Allow Overwrite to update this exercise’s published files, and click Publish. Refresh the same entry and verify the changes.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Action</th><th scope="col">Indicator</th><th scope="col">Text</th></tr></thead><tbody>

<tr><th scope="row">Open the page</th><td>Gray</td><td>Simulation: stopped</td></tr>

<tr><th scope="row">Click Simulate running</th><td>Green</td><td>Simulation: running</td></tr>

<tr><th scope="row">Click Simulate stopped</th><td>Gray</td><td>Simulation: stopped</td></tr>

<tr><th scope="row">Reload the runtime page</th><td>Gray</td><td>Simulation: stopped</td></tr>

</tbody></table></div>

<div class="doc-step-troubleshooting"><p><strong>If the result differs</strong></p><ul>

<li>Editor cannot save: inspect field diagnostics. Page Script selects the first failing document and line. Check case, straight quotes and brackets.</li>

<li>Only one color appears: enable TRUE, FALSE and Fill color in Action, and confirm the two button Values are true and false.</li>

<li>Text does not change: bind Script Text to DemoStatus, reference tutorialRunning in Display Text and clear Setup Script.</li>

<li>Buttons have no effect: use the Mingcedar runtime page, save both behaviors, enable demo-state and publish the current export.</li>

<li>HTML is missing from the entry list or opens as 404: verify the upload directory, publication result and selected menu path.</li>

</ul></div>

</article>

<h3 id="first-screen-item-11">11. Continue learning</h3>

<p>Before connecting real equipment, verify the Tag name, type, read access and quality in Mingcedar. Configure read-only State Color and Tag Text displays before adding writes.</p>

<li><a href="/en/ppt/manual/state-color/">Connect equipment: State Color</a></li>

<li><a href="/en/ppt/manual/text-tag-text/">Connect equipment: Tag Text</a></li>

<li><a href="/en/ppt/manual/design-reuse-guide/">Reuse methods and parameter types</a></li>

<li><a href="/en/ppt/manual/recipe-page-parameter-input/">Input configuration and parameters</a></li>

<li><a href="/en/ppt/manual/recipe-parameterized-table/">Table configuration and filtering</a></li>

<li><a href="/en/ppt/manual/recipe-template-bit-write/">Bit writes and state display</a></li>

</ul>

</article>

</div>