Create your first screen: buttons, an indicator and text

1. Prepare the environment

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.

Scroll horizontally to view the full table

• Installation and licensing
• Mingcedar deployment

2. Create and save a presentation

1. Create a blank PowerPoint presentation with one blank slide and save it as first-screen.pptx.
2. Open MX Design → Page → Page Ratio, select 16:9 in Aspect ratio and click OK.
3. 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.

Expected result Reopen Nav Path and confirm first_screen is retained. Complete the remaining configuration on this slide.

3. Draw and name four components

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.

Scroll horizontally to view the full table

Expected result All four names appear in the component tree. Click Refresh if newly drawn objects are missing.

4. Declare the page variable

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.

var tutorialRunning = false;

Expected result 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.

5. Configure State Color on the circle

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.

Scroll horizontally to view the full table

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

tutorialRunning

Expected result State Color appears under DemoLamp; at runtime the indicator is green for true and gray for false.

6. Configure the two variable buttons

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.

Scroll horizontally to view the full table

Expected result The buttons assign Boolean true and false without quotes. These actions change only the current-page variable; they send no device commands.

7. Display the simulated state

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.

tutorialRunning ? "Simulation: running" : "Simulation: stopped"

Expected result 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.

8. Export the complete screen package

1. Save the presentation and open MX Design → Export → Export HTML.
2. In Choose an export folder, select an empty directory dedicated to this exercise, such as D:\MingcedarLessons\first-screen, then click Export.
3. 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.

Expected result Publish the complete exported directory. Runtime assets are supplied by Mingcedar, so opening local HTML directly does not verify deployment.

9. Publish and configure a runtime entry

1. Sign in to Mingcedar and open Configuration Center → Screen Files. Select a directory dedicated to this exercise.
2. 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.
3. 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.
4. Return to the runtime interface, refresh it and open First screen from the menu.

• Screen publishing and menu configuration

10. Verify the result

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.

Scroll horizontally to view the full table

11. Continue learning

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.

• Connect equipment: State Color
• Connect equipment: Tag Text
• Reuse methods and parameter types
• Input configuration and parameters
• Table configuration and filtering
• Bit writes and state display