上传一个 HTML 界面设计，选择触摸屏型号，即可得到可直接用 McgsPro 打开的 .mcp 工程：文字、色块、圆角卡片、指示灯、按钮跳转、输入框与变量、图片图标都会自动生成。 Upload an HTML screen design, pick the touch panel and get a .mcp project that opens in McgsPro — text, shapes, rounded cards, lamps, navigation buttons, inputs with variables, images and icons are generated for you.
左侧为原始 HTML，右侧为生成的 MCGS 画面。将鼠标悬停在元素上可查看对象类型和坐标。 See the HTML and the generated MCGS screen side by side. Hover elements to inspect object type and bounds.
| 变量名 | Name | 类型 | Type | 初值 | Initial |
|---|
每个画面一个元素，加 data-mcgs-window，值为窗口名；不加时整个页面就是一个窗口。第一个画面为启动窗口。
Mark each screen with data-mcgs-window (value = window name). Without it the whole page is one window. The first screen starts up.
<section data-mcgs-window="主画面" id="home">…</section>
<section data-mcgs-window="参数设置" id="settings">…</section>按钮或链接写 href="#窗口id或名称" 或 data-mcgs-open，生成“打开用户窗口”动作。
Use href="#id-or-name" or data-mcgs-open on a button/link to create an “open window” action.
<a href="#settings" class="btn">参数设置</a>
<button data-mcgs-open="主画面">返回</button>输入框（number→数值型，text→字符型）与复选框（开关型）自动建变量，名称取 data-mcgs-var / name / id。文字元素加 data-mcgs-var 即成为“显示输出”。
Inputs (number → numeric, text → string) and checkboxes (switch) create variables named from data-mcgs-var / name / id. A text element with data-mcgs-var becomes a live display.
<input type="number" data-mcgs-var="PressureHigh" value="0.8">
<span data-mcgs-var="Flow" data-mcgs-decimals="1">128.5</span>