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

1. 准备环境

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

左右滑动查看完整表格

• 安装与授权
• Mingcedar 部署说明

2. 创建并保存演示文稿

1. 新建空白 PowerPoint 演示文稿，仅保留一张空白幻灯片，保存为 first-screen.pptx。
2. 打开 MX Design → Page → Page Ratio，Aspect ratio 选择 16:9，点击 OK。
3. 打开 MX Design → Page → Nav Path。在本页行填写 Page Code=first_screen、Level=1、Default Text=入门画面；Language Key 留空，Background 勾选，点击 Save。

完成标志 重新打开 Nav Path 时，本页仍显示 first_screen。后续配置均在这张幻灯片完成。

3. 绘制并命名四个组件

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

左右滑动查看完整表格

完成标志 左侧组件树能找到四个名称。找不到新绘制的对象时，点击行为浏览器的 Refresh。

4. 声明页面变量

打开 MX Design → Scripts → Page Script。在 Script workspace 点击 New，Folder 留空，Name 填 demo-state，保持 Enabled 勾选，将下方代码粘贴到 Code，点击 Save。已有 alarm.js 时保留其内容。

var tutorialRunning = false;

完成标志 tutorialRunning 是变量名称；false 表示初始模拟状态为停止。名称区分大小写，不加引号。重新打开 Page Script 后应能看到该文档和代码。

5. 为圆形配置 State Color

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

左右滑动查看完整表格

1. 点击对应颜色块，在 Select Color 窗口的 Hex 中输入色值并点击 OK，然后保存行为。

tutorialRunning

完成标志 左侧 DemoLamp 下出现 State Color；发布后变量为 true 时显示绿色，为 false 时显示灰色。

6. 为两个按钮配置变量赋值

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

左右滑动查看完整表格

完成标志 两个按钮分别写入布尔值 true 和 false，不加引号。本操作仅改变当前页变量，不发送设备指令。

7. 显示当前模拟状态

从 Behaviors → Text 将 Script Text 拖到 DemoStatus。清空 Setup Script 的默认内容，Condition 填 true，Display Text 填下方表达式，点击 Save。

tutorialRunning ? "模拟：运行" : "模拟：停止"

完成标志 表达式“条件 ? 内容一 : 内容二”在条件为 true 时返回第一段文字，否则返回第二段。这里只填写表达式，不需要 var 或 return。

8. 导出完整画面包

1. 保存演示文稿，打开 MX Design → Export → Export HTML。
2. 在 Choose an export folder 中选择本练习专用的空目录，例如 D:\MingcedarLessons\first-screen，然后点击 Export。
3. 等待导出完成，检查 Export log 中无失败项。目录中应有 first_screen.html、对应 SVG、js 目录及 screen.manifest.json。

完成标志 导出目录是后续发布的完整文件集合。运行依赖 Mingcedar 的共享资源，不能以双击本地 HTML 的结果代替发布验证。

9. 发布并配置运行入口

1. 登录 Mingcedar，打开“配置中心 → 画面文件（Screen Files）”，选择本练习的目标目录。
2. 使用文件夹选择功能选择上一步导出目录，在“待发布文件（Pending Files）”核对 first_screen.html 及其资源。点击“发布（Publish）”，等待上传完成。
3. 打开“配置中心 → 菜单（Menus）”，点击“新增一级（New Primary）”。默认名称填“入门画面”，类型选“页面（直接打开 HTML）”，在“入口 HTML（Entry HTML）”选择刚发布的 first_screen.html 实际路径，保存。
4. 返回运行界面并刷新，从“入门画面”菜单打开页面。

• 画面文件发布与菜单配置

10. 验证运行结果

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

左右滑动查看完整表格

11. 后续学习

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

• 接入设备：状态颜色
• 接入设备：Tag 文本
• 复用方式与参数类型
• 输入框配置与传参
• 表格配置与数据筛选
• 位写入配置与状态显示