First steps

This page walks you through the builder: where things are, how to place widgets and how to try your screens out.

The window

• Activity bar (far left) - switches the side panel between Explorer, Component Palette, Properties, Library, Search (Ctrl+F), Run and Debug (F5) and Assistant. The gear at the bottom opens Project Settings.
• Canvas (middle) - the page you're editing, with its page tabs above it.
• Menu bar (top) - File, Edit, Project, Export, View and Help.

Projects

El Mirador keeps the project you're working on in its own local database and saves it when you close the app. File → Save Project As… writes the whole project - every page plus the project's own widget library - to a single .uiproj file you can back up or share; File → Open Project… loads one again, and File → New Project starts over.

Place your first widgets

1. Open the Component Palette and drag a widget - a Button, say - onto the canvas.
2. Move it around; it snaps to the grid. Drag its handles to resize or rotate it.
3. With the widget selected, the Properties panel shows everything you can set: text, colours, size and behaviour.

Ctrl+Z and Ctrl+Y undo and redo; Edit → Copy and Edit → Paste duplicate the selected element.

Put related widgets in a Card. Cards group widgets, move with everything inside them and can be saved to your Library to reuse later.

Pages

Most projects have several screens. Click + Page next to the page tabs to add one, and use the Explorer to see and organise all of them. Operators move between pages with the navigation bar (Project Settings → Navigation) or with buttons set to navigate to a page.

Try it out

Press F5 - or open Run and Debug and click Run Live Preview - to open your project in a separate window exactly as operators will see it. Widgets react to clicks, and bound widgets show live PLC values.

Make it yours

Project Settings → Appearance sets the theme, your logo and colours (Branding), the navigation and the window. Project Settings → Features switches off what a project doesn't use, which also hides its settings.

Where to go next

• Connect to a PLC to show live values.
• Build an example dashboard step by step.
• Connect to PostgreSQL to write to a database.