Interface Editor
Design custom control dashboards for your Arduino projects — drag and drop buttons, sliders, toggles, and gauges.
Overview
Every project in ArduinoStudio has two modes: Logic and Interface. The Logic tab is where you build sequences (what your hardware does). The Interface tab is where you design a custom control panel (how users interact with it).
Switching to Interface Mode
In the canvas editor, click the Interface tab at the top center of the screen (next to "Logic"). This opens the drag-and-drop UI editor.
Available Controls
| Control | What it does |
|---|---|
| Button | Triggers a sequence when pressed |
| Toggle (On/Off) | Switches a sequence on or off |
| Slider | Controls a value (speed, brightness, angle) |
| Gauge | Displays sensor readings in real time |
| Label | Static text for labeling your dashboard |
Linking Controls to Sequences
Each control can be linked to one or more sequences from the Logic tab. For example:
- A "Forward" button triggers the "Arm Forward" sequence
- A speed slider controls the motor speed in real time
- A gauge displays the temperature from a thermometer sensor
Design Panel
Select any element on the canvas to see its properties in the Design panel on the right side:
- Size — Width and height in pixels
- Fill — Background color
- Border — Border color and radius
- Position — Alignment tools (left, center, right, distribute)
Sharing Your Interface
When you make your project public, anyone with the link can view and interact with your custom interface. They can run your sequences on their own Arduino board, or just see the design.
Tips
- Use the grid alignment tools to keep your layout clean
- Group related controls together (e.g., all motor controls in one area)
- Test your interface with real hardware connected — sensor gauges update in real time
- The interface is responsive — it works on both desktop and mobile browsers