6. Visual Editor: Build a Clear Interface from a Blank Page
What determines operator success on site is not visual style alone, but whether the page structure is obvious, the return path is clear, and every button behaves predictably. Build in the order of pages, backgrounds, text, buttons, actions, and preview.
6.1 Page structure and backgrounds
Pages are the skeleton of the project. If the page hierarchy is messy, later button placement becomes a maintenance problem.
Goal
Create a page structure that matches the real workflow of the space.
Steps
- Open the Visual Editor and inspect the existing pages in the left-side page list.
- Create core pages first: home, menu, and one page per major function or zone.
- Name each page by its actual function, such as Home, Device Control, Lighting Control, or Projection Control.
- Select a page and choose the appropriate background image if one is needed.
- If no background is ready yet, continue with a functional layout first and add artwork later.
How To Confirm Success
- You can explain what each page is for without opening it.
- The project structure makes sense before detailed component design begins.
Common Mistakes
- Using page names like Page 1 and Control Page 2.
- Designing a lot of components before deciding how pages relate to each other.
6.2 Add components, position them, and keep styles consistent
Components are mainly text and buttons. Text explains. Buttons act. Do not blur the two roles.
Goal
Place a clear and maintainable layout on each page.
Steps
- Add components to the selected page from the canvas workflow.
- Use text components for titles, guidance, and fixed labels.
- Use button components for all actionable items and keep similar actions styled similarly.
- Position components with drag-and-drop, then fine-tune with arrow keys.
- Use Ctrl+C and Ctrl+V when repeating a style pattern.
How To Confirm Success
- Users can instantly distinguish between information and controls.
- Buttons of the same category look consistent in size and visual weight.
Practical Tips
- Keep the home page simple, large, and obvious.
- Place return buttons in a consistent position on every page.
6.3 Bind the correct action to every button
Buttons do not control devices by themselves. The real behavior comes from the action binding in the property panel.
Goal
Make every button predictable, testable, and easy to maintain.
Steps
- Select a button and open its action configuration in the property panel.
- If it should move to another page, choose page navigation and set the correct target page.
- If it should show guidance or a note, choose show text and enter the content.
- If it should control devices directly, choose command execution and attach the correct command list.
- If it should run a workflow such as opening mode, prefer the grouped logic you already tested.
- After binding each button, test it immediately in preview or Runtime mode.
How To Confirm Success
- You can explain exactly what each button does before clicking it.
- Button names and action bindings agree with each other.
Common Mistakes
- A button labeled Opening Mode actually navigates to the wrong page.
- Several buttons share similar names, making troubleshooting difficult later.
6.4 Preview, save, and leave the editor the right way
The editor is most reliable when you validate continuously instead of making many untested changes at once.
Goal
Build a habit of making one change set at a time and confirming it.
Steps
- Preview a page as soon as its main buttons are ready.
- Save after the preview passes rather than accumulating unverified edits.
- Return to Runtime mode and run through the key user path after every major page update.
- Only move on to the next page after the current one is stable.
How To Confirm Success
- Edited pages behave correctly in the real Runtime flow.
- You are validating a section before starting the next section.
Important Note
The editor supports undo, delete, copy, and preview. If a layout becomes messy, step back to a known-good state instead of forcing more edits on top of it.