所属产品: Mingcedar Studio DESIGNER

制作第一个画面：按钮、状态灯与文本 | Mingcedar Studio

用页面变量连接运行/停止按钮、状态灯和文本，发布到 Mingcedar 验证。无需 PLC 或预配置 Tag。

首次发布 2026-10-25T12:48:42.57794359Z 最近更新 2026-10-26T19:56:55.600832633Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="first-screen">入门教程: 制作第一个画面：按钮、状态灯与文本</h2>

用页面变量连接运行/停止按钮、状态灯和文本，发布到 Mingcedar 验证。无需 PLC 或预配置 Tag。

<p>需已安装并激活 Studio 的 Windows PowerPoint。运行验证还需已部署的 Mingcedar，以及可发布文件、配置菜单和查看运行页的账号；平台就绪前可先制作和导出。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<thead><tr><th scope="col">术语</th><th scope="col">本教程中的含义</th></tr></thead><tbody>

<tr><th scope="row">组件</th><td>幻灯片上的圆形、按钮形状或文本框。</td></tr>

<tr><th scope="row">行为</th><td>附加到组件上的显示规则或操作，例如 State Color。</td></tr>

<tr><th scope="row">Page Script</th><td>当前页的 JavaScript 文档，用于声明同页共用的变量和函数。</td></tr>

<tr><th scope="row">页面变量</th><td>运行页中的临时数据；本例用 true / false 表示两种模拟状态。</td></tr>

<tr><th scope="row">Page Code</th><td>包内页面标识，用于导出文件和页面导航。</td></tr>

<tr><th scope="row">画面包 / 运行平台</th><td>画面包是导出的文件集合；Mingcedar 加载这些文件并运行交互。</td></tr>

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

<li><a href="/ppt/manual/windows-install/">安装与授权</a></li>

<li><a href="/hqserver/manual/windows-install/">Mingcedar 部署说明</a></li>

</ul>

</article>

<h3 id="first-screen-item-2">2. 创建并保存演示文稿</h3>

<ol>

<li>新建空白 PowerPoint 演示文稿，仅保留一张空白幻灯片，保存为 first-screen.pptx。</li>

<li>打开 MX Design → Page → Page Ratio，Aspect ratio 选择 16:9，点击 OK。</li>

<li>打开 MX Design → Page → Nav Path。在本页行填写 Page Code=first_screen、Level=1、Default Text=入门画面；Language Key 留空，Background 勾选，点击 Save。</li>

</ol>

<p class="doc-step-result"><strong>完成标志</strong> 重新打开 Nav Path 时，本页仍显示 first_screen。后续配置均在这张幻灯片完成。</p>

</article>

<h3 id="first-screen-item-3">3. 绘制并命名四个组件</h3>

<p>用 PowerPoint“插入 → 形状 / 文本框”绘制圆形、两个矩形按钮和文本框。打开 MX Design → Behaviors → Browse，展开“入门画面”，逐个右键组件并用 Rename Component 命名。组件名与按钮文字分别填写。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<tr><th scope="row">圆形</th><td>DemoLamp</td><td>无文字</td></tr>

<tr><th scope="row">矩形按钮</th><td>DemoStart</td><td>模拟运行</td></tr>

<tr><th scope="row">矩形按钮</th><td>DemoStop</td><td>模拟停止</td></tr>

<tr><th scope="row">文本框</th><td>DemoStatus</td><td>模拟：停止</td></tr>

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

<p class="doc-step-result"><strong>完成标志</strong> 左侧组件树能找到四个名称。找不到新绘制的对象时，点击行为浏览器的 Refresh。</p>

</article>

<h3 id="first-screen-item-4">4. 声明页面变量</h3>

<p>打开 MX Design → Scripts → Page Script。在 Script workspace 点击 New，Folder 留空，Name 填 demo-state，保持 Enabled 勾选，将下方代码粘贴到 Code，点击 Save。已有 alarm.js 时保留其内容。</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="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Page Script → demo-state → 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>完成标志</strong> tutorialRunning 是变量名称；false 表示初始模拟状态为停止。名称区分大小写，不加引号。重新打开 Page Script 后应能看到该文档和代码。</p>

</article>

<h3 id="first-screen-item-5">5. 为圆形配置 State Color</h3>

<p>回到 Behavior Browser，从右侧 Behaviors → Visual States 将 State Color 拖到左侧 DemoLamp 组件节点。编辑器打开后按下表填写并点击 Save。再次修改时，双击左侧 DemoLamp 下的 State Color 行为节点；双击右侧目录项不会绑定行为。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<tr><th scope="row">Setup Script</th><td>清空默认内容</td></tr>

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

<tr><th scope="row">Action → Apply result</th><td>启用 TRUE 和 FALSE</td></tr>

<tr><th scope="row">Action → Output channel</th><td>启用 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>本练习不启用；尚未读取 Tag</td></tr>

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

<ol>

<li>点击对应颜色块，在 Select Color 窗口的 Hex 中输入色值并点击 OK，然后保存行为。</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="已复制" data-failed="请选中代码后复制" aria-label="复制代码: State Color → Condition">复制代码</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>完成标志</strong> 左侧 DemoLamp 下出现 State Color；发布后变量为 true 时显示绿色，为 false 时显示灰色。</p>

</article>

<h3 id="first-screen-item-6">6. 为两个按钮配置变量赋值</h3>

<p>从 Behaviors → Interactions 分别将 Set Variable on Click 拖到 DemoStart 和 DemoStop。两者的 Setup Script 均清空，Condition 均填 true；Variable（Target variable）均填 tutorialRunning。按下表填写 Value，各自点击 Save。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<thead><tr><th scope="col">按钮</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>完成标志</strong> 两个按钮分别写入布尔值 true 和 false，不加引号。本操作仅改变当前页变量，不发送设备指令。</p>

</article>

<h3 id="first-screen-item-7">7. 显示当前模拟状态</h3>

<p>从 Behaviors → Text 将 Script Text 拖到 DemoStatus。清空 Setup Script 的默认内容，Condition 填 true，Display Text 填下方表达式，点击 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="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Script Text → Display Text">复制代码</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"> "模拟：运行"</span><span style="color:#D73A49"> :</span><span style="color:#032F62"> "模拟：停止"</span></span></code></pre></div>

<p class="doc-step-result"><strong>完成标志</strong> 表达式“条件 ? 内容一 : 内容二”在条件为 true 时返回第一段文字，否则返回第二段。这里只填写表达式，不需要 var 或 return。</p>

</article>

<h3 id="first-screen-item-8">8. 导出完整画面包</h3>

<ol>

<li>保存演示文稿，打开 MX Design → Export → Export HTML。</li>

<li>在 Choose an export folder 中选择本练习专用的空目录，例如 D:\MingcedarLessons\first-screen，然后点击 Export。</li>

<li>等待导出完成，检查 Export log 中无失败项。目录中应有 first_screen.html、对应 SVG、js 目录及 screen.manifest.json。</li>

</ol>

<p class="doc-step-result"><strong>完成标志</strong> 导出目录是后续发布的完整文件集合。运行依赖 Mingcedar 的共享资源，不能以双击本地 HTML 的结果代替发布验证。</p>

</article>

<h3 id="first-screen-item-9">9. 发布并配置运行入口</h3>

<ol>

<li>登录 Mingcedar，打开“配置中心 → 画面文件（Screen Files）”，选择本练习的目标目录。</li>

<li>使用文件夹选择功能选择上一步导出目录，在“待发布文件（Pending Files）”核对 first_screen.html 及其资源。点击“发布（Publish）”，等待上传完成。</li>

<li>打开“配置中心 → 菜单（Menus）”，点击“新增一级（New Primary）”。默认名称填“入门画面”，类型选“页面（直接打开 HTML）”，在“入口 HTML（Entry HTML）”选择刚发布的 first_screen.html 实际路径，保存。</li>

<li>返回运行界面并刷新，从“入门画面”菜单打开页面。</li>

</ol>

<li><a href="/hqserver/manual/screens/">画面文件发布与菜单配置</a></li>

</ul>

</article>

<h3 id="first-screen-item-10">10. 验证运行结果</h3>

<p>重载后变量按 Page Script 重新初始化，不保留上一次选择。随后自行修改两种颜色和显示文字，重新导出。在 Pending Files 核对本次文件，更新本练习已发布的文件时勾选 Allow Overwrite，再点击 Publish。刷新同一入口，确认修改生效。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<tr><th scope="row">重新加载运行页面</th><td>灰色</td><td>模拟：停止</td></tr>

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

<div class="doc-step-troubleshooting"><p><strong>如果结果不一致</strong></p><ul>

<li>编辑器无法保存：查看字段错误提示；Page Script 会定位首个错误文档及行。检查大小写、英文引号和括号。</li>

<li>只有一种颜色：检查 Action 是否同时启用 TRUE、FALSE 和 Fill color；确认两个按钮的 Value 分别为 true 和 false。</li>

<li>文本不变化：确认 Script Text 绑定在 DemoStatus，Display Text 引用 tutorialRunning，Setup Script 已清空。</li>

<li>按钮无反应：确认是在 Mingcedar 运行页操作，两个行为已保存，demo-state 已启用，发布的文件是本次导出版本。</li>

<li>入口列表没有 HTML 或打开后 404：核对上传目录、发布结果和菜单所选的实际路径。</li>

</ul></div>

</article>

<p>接入真实设备前，在 Mingcedar 确认 Tag 名称、类型、读取权限及质量；用 State Color 和 Tag Text 完成只读显示后，再学习写入。</p>

<li><a href="/ppt/manual/design-reuse-guide/">复用方式与参数类型</a></li>

<li><a href="/ppt/manual/recipe-page-parameter-input/">输入框配置与传参</a></li>

<li><a href="/ppt/manual/recipe-parameterized-table/">表格配置与数据筛选</a></li>

<li><a href="/ppt/manual/recipe-template-bit-write/">位写入配置与状态显示</a></li>

</ul>

</article>

</div>