Live Simulator¶
The Live Simulator lets you preview and iterate on your mGui UI from a JSON description file — no target hardware required. It renders the UI in a native window and can generate ready-to-use C code when you are happy with the result.
Download¶
The pre-built binaries are included in every mGui release under the tools/ folder:
| Platform | Binary |
|---|---|
| Windows | live_mgui_simulator.exe |
| Linux | live_mgui_simulator |
Quick Start — Windows¶
1. Get the files¶
After downloading the release, locate the tools/ folder. You should have at minimum:
2. Run with the example JSON¶
Open PowerShell or Command Prompt in the tools/ folder and run:
A window will open showing the rendered UI defined in screen_1.json.
3. What screen_1.json contains¶
screen_1.json is a 480 × 320 "Smart Control Panel" demo that exercises most widget types:
- A header bar with labels, buttons and a status dot
- Toggle switches for WiFi, Bluetooth and Alerts
- Radio buttons and checkboxes for settings
- Horizontal sliders for brightness and volume
- Progress bars and an arc gauge for system metrics
- A dropdown for mode selection
This gives a good baseline to experiment with colours, sizes and layout before writing your own JSON.
{
"type": "screen",
"name": "screen1",
"x": 0, "y": 0, "w": 480, "h": 320,
"color": "0x0D1B2A",
"elements": [
{
"type": "box", "name": "Header",
"x": 0, "y": 0, "w": 480, "h": 26,
"color": "0x0A3D62",
"children": [
{ "type": "label", "name": "AppTitle",
"x": 10, "y": 0, "w": 180, "h": 26,
"color": "0xFFFFFF", "text": "Smart Control Panel",
"bg_color": "0x0A3D62",
"align": "MGUI_ALIGN_CENTER_V", "align_offset": { "x": 0, "y": 0 } },
{ "type": "button", "name": "BtnStats",
"x": 200, "y": 0, "w": 50, "h": 18,
"color": "0xFF6B35",
"btn_text": "STATS", "btn_text_color": "0xFFFFFF", "btn_radius": 4,
"align": "MGUI_ALIGN_CENTER_V", "align_offset": { "x": 0, "y": 0 } },
{ "type": "button", "name": "BtnGauge",
"x": 254, "y": 0, "w": 54, "h": 18,
"color": "0xA855F7",
"btn_text": "GAUGE", "btn_text_color": "0xFFFFFF", "btn_radius": 4,
"align": "MGUI_ALIGN_CENTER_V", "align_offset": { "x": 0, "y": 0 } },
{ "type": "label", "name": "LiveLabel",
"x": 354, "y": 0, "w": 36, "h": 26,
"color": "0x00FF88", "text": "LIVE", "bg_color": "0x0A3D62",
"align": "MGUI_ALIGN_CENTER_V", "align_offset": { "x": 0, "y": 0 } },
{ "type": "circle", "name": "StatusDot",
"x": 0, "y": 0, "radius": 7, "color": "0x00FF88",
"align": "MGUI_ALIGN_CENTER_RIGHT", "align_offset": { "x": -10, "y": 0 } }
]
},
{
"type": "box", "name": "SwitchCard",
"x": 2, "y": 28, "w": 148, "h": 132,
"color": "0x162031",
"corner": { "radius": 8, "filled": true },
"border": { "color": "0x243550", "width": 1 },
"children": [
{ "type": "label", "name": "LblSwitches",
"x": 0, "y": 0, "w": 90, "h": 20,
"color": "0x00D4FF", "text": "Switches", "bg_color": "0x162031",
"align": "MGUI_ALIGN_TOP_LEFT", "align_offset": { "x": 8, "y": 6 } },
{ "type": "toggle", "name": "TogWifi",
"x": 8, "y": 26, "w": 54, "h": 22, "color": "0x00D4FF",
"toggle_checked": true,
"toggle_colors": { "on": "0x00D4FF", "off": "0x2A3F5A", "knob": "0xFFFFFF" } },
{ "type": "label", "name": "LblWifi",
"x": 66, "y": 26, "w": 60, "h": 20,
"color": "0xCCCCCC", "text": "WiFi", "bg_color": "0x162031" },
{ "type": "circle", "name": "WifiLed", "x": 0, "y": 37, "radius": 5, "color": "0x00D4FF",
"align": "MGUI_ALIGN_TOP_RIGHT", "align_offset": { "x": -6, "y": 37 } },
{ "type": "toggle", "name": "TogBT",
"x": 8, "y": 54, "w": 54, "h": 22, "color": "0x7777FF",
"toggle_checked": true,
"toggle_colors": { "on": "0x7777FF", "off": "0x2A3F5A", "knob": "0xFFFFFF" } },
{ "type": "label", "name": "LblBT",
"x": 66, "y": 54, "w": 60, "h": 20,
"color": "0xCCCCCC", "text": "Bluetooth", "bg_color": "0x162031" },
{ "type": "circle", "name": "BtLed", "x": 0, "y": 65, "radius": 5, "color": "0x7777FF",
"align": "MGUI_ALIGN_TOP_RIGHT", "align_offset": { "x": -6, "y": 65 } },
{ "type": "toggle", "name": "TogAlert",
"x": 8, "y": 82, "w": 54, "h": 22, "color": "0xFF4757",
"toggle_checked": false,
"toggle_colors": { "on": "0xFF4757", "off": "0x2A3F5A", "knob": "0xFFFFFF" } },
{ "type": "label", "name": "LblAlert",
"x": 66, "y": 82, "w": 60, "h": 20,
"color": "0xCCCCCC", "text": "Alerts", "bg_color": "0x162031" },
{ "type": "circle", "name": "AlertLed", "x": 0, "y": 93, "radius": 5, "color": "0x2A3F5A",
"align": "MGUI_ALIGN_TOP_RIGHT", "align_offset": { "x": -6, "y": 93 } }
]
},
{
"type": "box", "name": "SettingsCard",
"x": 2, "y": 162, "w": 148, "h": 130,
"color": "0x162031",
"corner": { "radius": 8, "filled": true },
"border": { "color": "0x243550", "width": 1 },
"children": [
{ "type": "label", "name": "LblSettings",
"x": 0, "y": 0, "w": 90, "h": 26,
"color": "0x00FF88", "text": "Settings", "bg_color": "0x162031",
"align": "MGUI_ALIGN_TOP_LEFT", "align_offset": { "x": 8, "y": 6 } },
{ "type": "radio", "name": "RbAuto",
"x": 8, "y": 30, "w": 132, "h": 22, "color": "0x00FF88",
"rb_text": "Auto Control", "group": "ctrlMode", "rb_checked": true },
{ "type": "radio", "name": "RbManual",
"x": 8, "y": 52, "w": 132, "h": 22, "color": "0x00FF88",
"rb_text": "Manual", "group": "ctrlMode", "rb_checked": false },
{ "type": "checkbox", "name": "ChkDark",
"x": 8, "y": 80, "w": 132, "h": 22, "color": "0xA855F7",
"cb_text": "Dark Mode", "checked": true },
{ "type": "checkbox", "name": "ChkSound",
"x": 8, "y": 106, "w": 132, "h": 22, "color": "0xA855F7",
"cb_text": "Sound", "checked": false }
]
},
{
"type": "box", "name": "LevelsCard",
"x": 152, "y": 28, "w": 164, "h": 130,
"color": "0x162031",
"corner": { "radius": 8, "filled": true },
"border": { "color": "0x243550", "width": 1 },
"children": [
{ "type": "label", "name": "LblLevels",
"x": 0, "y": 0, "w": 90, "h": 20,
"color": "0xFFD700", "text": "Levels", "bg_color": "0x162031",
"align": "MGUI_ALIGN_TOP_LEFT", "align_offset": { "x": 8, "y": 6 } },
{ "type": "label", "name": "LblBright",
"x": 0, "y": 0, "w": 90, "h": 20,
"color": "0x888888", "text": "Brightness", "bg_color": "0x162031",
"align": "MGUI_ALIGN_TOP_LEFT", "align_offset": { "x": 8, "y": 24 } },
{ "type": "slider", "name": "SlBright",
"x": 8, "y": 46, "w": 148, "h": 18, "color": "0x162031",
"value": 70, "orientation": "horizontal", "knob_size": 12, "track_thickness": 5,
"range": { "min": 0, "max": 100 },
"slider_colors": { "track": "0x2A3F5A", "knob": "0xFFD700", "fill": "0x997700" } },
{ "type": "label", "name": "LblVol",
"x": 0, "y": 0, "w": 90, "h": 20,
"color": "0x888888", "text": "Volume", "bg_color": "0x162031",
"align": "MGUI_ALIGN_TOP_LEFT", "align_offset": { "x": 8, "y": 60 } },
{ "type": "slider", "name": "SlVol",
"x": 8, "y": 82, "w": 148, "h": 18, "color": "0x162031",
"value": 50, "orientation": "horizontal", "knob_size": 12, "track_thickness": 5,
"range": { "min": 0, "max": 100 },
"slider_colors": { "track": "0x2A3F5A", "knob": "0xA855F7", "fill": "0x661199" } }
]
},
{
"type": "box", "name": "ActivityCard",
"x": 152, "y": 160, "w": 164, "h": 132,
"color": "0x162031",
"corner": { "radius": 8, "filled": true },
"border": { "color": "0x243550", "width": 1 },
"children": [
{ "type": "label", "name": "LblActivity",
"x": 0, "y": 0, "w": 90, "h": 20,
"color": "0xFF6B35", "text": "Activity", "bg_color": "0x162031",
"align": "MGUI_ALIGN_TOP_LEFT", "align_offset": { "x": 8, "y": 6 } },
{ "type": "label", "name": "LblCpu",
"x": 8, "y": 26, "w": 38, "h": 18,
"color": "0x888888", "text": "CPU", "bg_color": "0x162031" },
{ "type": "progress_bar", "name": "PbCpu",
"x": 50, "y": 26, "w": 106, "h": 22, "color": "0x0D1B2A",
"range": { "min": 0, "max": 100 }, "value": 65,
"orientation": "horizontal", "show_percentage": true, "text_on_bar": true,
"bar_color": "0x00D4FF" },
{ "type": "label", "name": "LblBat",
"x": 8, "y": 52, "w": 38, "h": 18,
"color": "0x888888", "text": "Bat", "bg_color": "0x162031" },
{ "type": "progress_bar", "name": "PbBat",
"x": 50, "y": 52, "w": 106, "h": 22, "color": "0x0D1B2A",
"range": { "min": 0, "max": 100 }, "value": 82,
"orientation": "horizontal", "show_percentage": true, "text_on_bar": true,
"bar_color": "0x00FF88" },
{ "type": "label", "name": "LblRam",
"x": 8, "y": 78, "w": 38, "h": 18,
"color": "0x888888", "text": "RAM", "bg_color": "0x162031" },
{ "type": "progress_bar", "name": "PbRam",
"x": 50, "y": 78, "w": 106, "h": 22, "color": "0x0D1B2A",
"range": { "min": 0, "max": 100 }, "value": 40,
"orientation": "horizontal", "show_percentage": true, "text_on_bar": true,
"bar_color": "0xFF4757" },
{ "type": "label", "name": "LblNet",
"x": 8, "y": 104, "w": 38, "h": 18,
"color": "0x888888", "text": "Net", "bg_color": "0x162031" },
{ "type": "progress_bar", "name": "PbNet",
"x": 50, "y": 104, "w": 106, "h": 22, "color": "0x0D1B2A",
"range": { "min": 0, "max": 100 }, "value": 28,
"orientation": "horizontal", "show_percentage": true, "text_on_bar": true,
"bar_color": "0xFFD700" }
]
},
{
"type": "box", "name": "GaugeCard",
"x": 318, "y": 28, "w": 160, "h": 200,
"color": "0x162031",
"corner": { "radius": 8, "filled": true },
"border": { "color": "0x243550", "width": 1 },
"children": [
{ "type": "label", "name": "LblGauge",
"x": 0, "y": 0, "w": 90, "h": 20,
"color": "0xA855F7", "text": "Power Load", "bg_color": "0x162031",
"align": "MGUI_ALIGN_TOP_LEFT", "align_offset": { "x": 8, "y": 6 } },
{ "type": "arc", "name": "ArcGauge",
"x": 0, "y": 24, "w": 104, "h": 104, "color": "0x162031",
"align": "MGUI_ALIGN_TOP_CENTER", "align_offset": { "x": 0, "y": 24 },
"angles": { "start": -120, "end": 120 },
"arc_thickness": 12, "arc_radius": 46,
"rounded_ends": true, "interactive": true,
"value": 65, "range": { "min": 0, "max": 100 },
"arc_knob_size": 25,
"arc_colors": { "background": "0x2A3F5A", "progress": "0xA855F7" } },
{ "type": "label", "name": "LblGaugeSub",
"x": 0, "y": 0, "w": 120, "h": 24,
"color": "0x888888", "text": "drag to adjust",
"bg_color": "0x162031",
"align": "MGUI_ALIGN_BOTTOM_CENTER", "align_offset": { "x": 0, "y": -10 } }
]
},
{
"type": "box", "name": "ModeCard",
"x": 318, "y": 230, "w": 160, "h": 60,
"color": "0x162031",
"corner": { "radius": 8, "filled": true },
"border": { "color": "0x243550", "width": 1 },
"children": [
{ "type": "label", "name": "LblMode",
"x": 0, "y": 0, "w": 80, "h": 20,
"color": "0x00D4FF", "text": "Mode", "bg_color": "0x162031",
"align": "MGUI_ALIGN_TOP_LEFT", "align_offset": { "x": 8, "y": 5 } },
{ "type": "dropdown", "name": "DdMode",
"x": 8, "y": 26, "w": 144, "h": 30, "color": "0x2A3F5A",
"items": ["Normal", "Performance", "Eco", "Sleep"],
"selected": 0, "item_height": 28, "max_visible": 4,
"dd_font_color": "0xFFFFFF" }
]
}
]
}
4. Live reload¶
The simulator watches the JSON file for changes. Edit screen_1.json in any text editor, save, and the simulator window reloads automatically. No restart needed.
5. Generate C code¶
Once the UI looks good, click the genCode button in the simulator window (or press G). The simulator calls converter and writes a .c file next to the JSON file. Copy that file into your firmware project.
The generated ui_generated.c for screen_1.json looks like this:
/*
* mGui.dev
* Licensed under the MIT License.
* See LICENSE file for details.
*/
#include <stdbool.h>
#include "mgui/inc/mgui_interface.h"
#include "mgui/inc/mgui_common_defs.h"
void ui_init(void) {
/* screen1 */
mgui_widget_t* screen1 = mgui_allocate_widget(NULL, MGUI_WIDGET_SCREEN, (mgui_area_t){0, 0, 480, 320}, ((mgui_color_t){.value = 0x08C5}));
/* Header */
mgui_widget_t* header = mgui_allocate_widget(screen1, MGUI_WIDGET_BOX, (mgui_area_t){0, 0, 480, 26}, ((mgui_color_t){.value = 0x09EC}));
/* AppTitle */
mgui_widget_t* apptitle = mgui_allocate_widget(header, MGUI_WIDGET_LABEL, (mgui_area_t){10, 0, 180, 26}, MGUI_COLOR_WHITE);
mgui_widget_align(apptitle, MGUI_ALIGN_CENTER_V);
mgui_widget_set_align_offset(apptitle, 0, 0);
mgui_widget_label_set_text(apptitle, "Smart Control Panel");
mgui_widget_label_set_bg_color(apptitle, ((mgui_color_t){.value = 0x09EC}));
/* BtnStats */
mgui_widget_t* btnstats = mgui_allocate_widget(header, MGUI_WIDGET_BUTTON, (mgui_area_t){200, 0, 50, 18}, ((mgui_color_t){.value = 0xFB46}));
mgui_widget_align(btnstats, MGUI_ALIGN_CENTER_V);
mgui_widget_set_align_offset(btnstats, 0, 0);
mgui_widget_button_text(btnstats, "STATS");
mgui_widget_button_text_color(btnstats, MGUI_COLOR_WHITE);
mgui_widget_button_set_radius(btnstats, 4);
/* BtnGauge */
mgui_widget_t* btngauge = mgui_allocate_widget(header, MGUI_WIDGET_BUTTON, (mgui_area_t){254, 0, 54, 18}, ((mgui_color_t){.value = 0xAABE}));
mgui_widget_align(btngauge, MGUI_ALIGN_CENTER_V);
mgui_widget_set_align_offset(btngauge, 0, 0);
mgui_widget_button_text(btngauge, "GAUGE");
mgui_widget_button_text_color(btngauge, MGUI_COLOR_WHITE);
mgui_widget_button_set_radius(btngauge, 4);
/* LiveLabel */
mgui_widget_t* livelabel = mgui_allocate_widget(header, MGUI_WIDGET_LABEL, (mgui_area_t){354, 0, 36, 26}, ((mgui_color_t){.value = 0x07F1}));
mgui_widget_align(livelabel, MGUI_ALIGN_CENTER_V);
mgui_widget_set_align_offset(livelabel, 0, 0);
mgui_widget_label_set_text(livelabel, "LIVE");
mgui_widget_label_set_bg_color(livelabel, ((mgui_color_t){.value = 0x09EC}));
/* StatusDot */
mgui_widget_t* statusdot = mgui_allocate_widget(header, MGUI_WIDGET_CIRCLE, (mgui_area_t){0, 0, 14, 14}, ((mgui_color_t){.value = 0x07F1}));
mgui_widget_align(statusdot, MGUI_ALIGN_CENTER_RIGHT);
mgui_widget_set_align_offset(statusdot, -10, 0);
/* SwitchCard */
mgui_widget_t* switchcard = mgui_allocate_widget(screen1, MGUI_WIDGET_BOX, (mgui_area_t){2, 28, 148, 132}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_border_property(switchcard, ((mgui_color_t){.value = 0x21AA}), 1);
mgui_widget_radius_property(switchcard, 8, true);
/* LblSwitches */
mgui_widget_t* lblswitches = mgui_allocate_widget(switchcard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 90, 20}, ((mgui_color_t){.value = 0x06BF}));
mgui_widget_align(lblswitches, MGUI_ALIGN_TOP_LEFT);
mgui_widget_set_align_offset(lblswitches, 8, 6);
mgui_widget_label_set_text(lblswitches, "Switches");
mgui_widget_label_set_bg_color(lblswitches, ((mgui_color_t){.value = 0x1106}));
/* TogWifi */
mgui_widget_t* togwifi = mgui_allocate_widget(switchcard, MGUI_WIDGET_TOGGLE_BUTTON, (mgui_area_t){8, 26, 54, 22}, ((mgui_color_t){.value = 0x06BF}));
mgui_widget_toggle_button_set_checked(togwifi, true);
mgui_widget_toggle_button_set_colors(togwifi, ((mgui_color_t){.value = 0x06BF}), ((mgui_color_t){.value = 0x29EB}), MGUI_COLOR_WHITE);
/* LblWifi */
mgui_widget_t* lblwifi = mgui_allocate_widget(switchcard, MGUI_WIDGET_LABEL, (mgui_area_t){66, 26, 60, 20}, ((mgui_color_t){.value = 0xCE79}));
mgui_widget_label_set_text(lblwifi, "WiFi");
mgui_widget_label_set_bg_color(lblwifi, ((mgui_color_t){.value = 0x1106}));
/* WifiLed */
mgui_widget_t* wifiled = mgui_allocate_widget(switchcard, MGUI_WIDGET_CIRCLE, (mgui_area_t){0, 37, 10, 10}, ((mgui_color_t){.value = 0x06BF}));
mgui_widget_align(wifiled, MGUI_ALIGN_TOP_RIGHT);
mgui_widget_set_align_offset(wifiled, -6, 37);
/* TogBT */
mgui_widget_t* togbt = mgui_allocate_widget(switchcard, MGUI_WIDGET_TOGGLE_BUTTON, (mgui_area_t){8, 54, 54, 22}, ((mgui_color_t){.value = 0x73BF}));
mgui_widget_toggle_button_set_checked(togbt, true);
mgui_widget_toggle_button_set_colors(togbt, ((mgui_color_t){.value = 0x73BF}), ((mgui_color_t){.value = 0x29EB}), MGUI_COLOR_WHITE);
/* LblBT */
mgui_widget_t* lblbt = mgui_allocate_widget(switchcard, MGUI_WIDGET_LABEL, (mgui_area_t){66, 54, 60, 20}, ((mgui_color_t){.value = 0xCE79}));
mgui_widget_label_set_text(lblbt, "Bluetooth");
mgui_widget_label_set_bg_color(lblbt, ((mgui_color_t){.value = 0x1106}));
/* BtLed */
mgui_widget_t* btled = mgui_allocate_widget(switchcard, MGUI_WIDGET_CIRCLE, (mgui_area_t){0, 65, 10, 10}, ((mgui_color_t){.value = 0x73BF}));
mgui_widget_align(btled, MGUI_ALIGN_TOP_RIGHT);
mgui_widget_set_align_offset(btled, -6, 65);
/* TogAlert */
mgui_widget_t* togalert = mgui_allocate_widget(switchcard, MGUI_WIDGET_TOGGLE_BUTTON, (mgui_area_t){8, 82, 54, 22}, ((mgui_color_t){.value = 0xFA2A}));
mgui_widget_toggle_button_set_checked(togalert, false);
mgui_widget_toggle_button_set_colors(togalert, ((mgui_color_t){.value = 0xFA2A}), ((mgui_color_t){.value = 0x29EB}), MGUI_COLOR_WHITE);
/* LblAlert */
mgui_widget_t* lblalert = mgui_allocate_widget(switchcard, MGUI_WIDGET_LABEL, (mgui_area_t){66, 82, 60, 20}, ((mgui_color_t){.value = 0xCE79}));
mgui_widget_label_set_text(lblalert, "Alerts");
mgui_widget_label_set_bg_color(lblalert, ((mgui_color_t){.value = 0x1106}));
/* AlertLed */
mgui_widget_t* alertled = mgui_allocate_widget(switchcard, MGUI_WIDGET_CIRCLE, (mgui_area_t){0, 93, 10, 10}, ((mgui_color_t){.value = 0x29EB}));
mgui_widget_align(alertled, MGUI_ALIGN_TOP_RIGHT);
mgui_widget_set_align_offset(alertled, -6, 93);
/* SettingsCard */
mgui_widget_t* settingscard = mgui_allocate_widget(screen1, MGUI_WIDGET_BOX, (mgui_area_t){2, 162, 148, 130}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_border_property(settingscard, ((mgui_color_t){.value = 0x21AA}), 1);
mgui_widget_radius_property(settingscard, 8, true);
/* LblSettings */
mgui_widget_t* lblsettings = mgui_allocate_widget(settingscard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 90, 26}, ((mgui_color_t){.value = 0x07F1}));
mgui_widget_align(lblsettings, MGUI_ALIGN_TOP_LEFT);
mgui_widget_set_align_offset(lblsettings, 8, 6);
mgui_widget_label_set_text(lblsettings, "Settings");
mgui_widget_label_set_bg_color(lblsettings, ((mgui_color_t){.value = 0x1106}));
/* RbAuto */
mgui_widget_t* rbauto = mgui_allocate_widget(settingscard, MGUI_WIDGET_RADIO_BUTTON, (mgui_area_t){8, 30, 132, 22}, ((mgui_color_t){.value = 0x07F1}));
mgui_radio_group_t* grp_ctrlmode = mgui_widget_radio_group_create();
mgui_widget_radio_button_set_group(rbauto, grp_ctrlmode);
mgui_widget_radio_button_set_text(rbauto, "Auto Control");
mgui_widget_radio_button_set_checked(rbauto, true);
/* RbManual */
mgui_widget_t* rbmanual = mgui_allocate_widget(settingscard, MGUI_WIDGET_RADIO_BUTTON, (mgui_area_t){8, 52, 132, 22}, ((mgui_color_t){.value = 0x07F1}));
mgui_widget_radio_button_set_group(rbmanual, grp_ctrlmode);
mgui_widget_radio_button_set_text(rbmanual, "Manual");
mgui_widget_radio_button_set_checked(rbmanual, false);
/* ChkDark */
mgui_widget_t* chkdark = mgui_allocate_widget(settingscard, MGUI_WIDGET_CHECKBOX, (mgui_area_t){8, 80, 132, 22}, ((mgui_color_t){.value = 0xAABE}));
mgui_widget_checkbox_set_text(chkdark, "Dark Mode");
mgui_widget_checkbox_set_checked(chkdark, true);
/* ChkSound */
mgui_widget_t* chksound = mgui_allocate_widget(settingscard, MGUI_WIDGET_CHECKBOX, (mgui_area_t){8, 106, 132, 22}, ((mgui_color_t){.value = 0xAABE}));
mgui_widget_checkbox_set_text(chksound, "Sound");
mgui_widget_checkbox_set_checked(chksound, false);
/* LevelsCard */
mgui_widget_t* levelscard = mgui_allocate_widget(screen1, MGUI_WIDGET_BOX, (mgui_area_t){152, 28, 164, 130}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_border_property(levelscard, ((mgui_color_t){.value = 0x21AA}), 1);
mgui_widget_radius_property(levelscard, 8, true);
/* LblLevels */
mgui_widget_t* lbllevels = mgui_allocate_widget(levelscard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 90, 20}, ((mgui_color_t){.value = 0xFEA0}));
mgui_widget_align(lbllevels, MGUI_ALIGN_TOP_LEFT);
mgui_widget_set_align_offset(lbllevels, 8, 6);
mgui_widget_label_set_text(lbllevels, "Levels");
mgui_widget_label_set_bg_color(lbllevels, ((mgui_color_t){.value = 0x1106}));
/* LblBright */
mgui_widget_t* lblbright = mgui_allocate_widget(levelscard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 90, 20}, ((mgui_color_t){.value = 0x8C51}));
mgui_widget_align(lblbright, MGUI_ALIGN_TOP_LEFT);
mgui_widget_set_align_offset(lblbright, 8, 24);
mgui_widget_label_set_text(lblbright, "Brightness");
mgui_widget_label_set_bg_color(lblbright, ((mgui_color_t){.value = 0x1106}));
#ifdef MGUI_WIDGET_ENABLE_SLIDER
/* SlBright */
mgui_widget_t* slbright = mgui_allocate_widget(levelscard, MGUI_WIDGET_SLIDER, (mgui_area_t){8, 46, 148, 18}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_slider_set_orientation(slbright, MGUI_SLIDER_HORIZONTAL);
mgui_widget_slider_set_value(slbright, 70);
mgui_widget_slider_set_knob_size(slbright, 12);
mgui_widget_slider_set_track_thickness(slbright, 5);
mgui_widget_slider_set_colors(slbright, ((mgui_color_t){.value = 0x29EB}), ((mgui_color_t){.value = 0xFEA0}), ((mgui_color_t){.value = 0x9BA0}));
mgui_widget_slider_set_range(slbright, 0, 100);
#endif /* MGUI_WIDGET_ENABLE_SLIDER */
/* LblVol */
mgui_widget_t* lblvol = mgui_allocate_widget(levelscard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 90, 20}, ((mgui_color_t){.value = 0x8C51}));
mgui_widget_align(lblvol, MGUI_ALIGN_TOP_LEFT);
mgui_widget_set_align_offset(lblvol, 8, 60);
mgui_widget_label_set_text(lblvol, "Volume");
mgui_widget_label_set_bg_color(lblvol, ((mgui_color_t){.value = 0x1106}));
#ifdef MGUI_WIDGET_ENABLE_SLIDER
/* SlVol */
mgui_widget_t* slvol = mgui_allocate_widget(levelscard, MGUI_WIDGET_SLIDER, (mgui_area_t){8, 82, 148, 18}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_slider_set_orientation(slvol, MGUI_SLIDER_HORIZONTAL);
mgui_widget_slider_set_value(slvol, 50);
mgui_widget_slider_set_knob_size(slvol, 12);
mgui_widget_slider_set_track_thickness(slvol, 5);
mgui_widget_slider_set_colors(slvol, ((mgui_color_t){.value = 0x29EB}), ((mgui_color_t){.value = 0xAABE}), ((mgui_color_t){.value = 0x6093}));
mgui_widget_slider_set_range(slvol, 0, 100);
#endif /* MGUI_WIDGET_ENABLE_SLIDER */
/* ActivityCard */
mgui_widget_t* activitycard = mgui_allocate_widget(screen1, MGUI_WIDGET_BOX, (mgui_area_t){152, 160, 164, 132}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_border_property(activitycard, ((mgui_color_t){.value = 0x21AA}), 1);
mgui_widget_radius_property(activitycard, 8, true);
/* LblActivity */
mgui_widget_t* lblactivity = mgui_allocate_widget(activitycard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 90, 20}, ((mgui_color_t){.value = 0xFB46}));
mgui_widget_align(lblactivity, MGUI_ALIGN_TOP_LEFT);
mgui_widget_set_align_offset(lblactivity, 8, 6);
mgui_widget_label_set_text(lblactivity, "Activity");
mgui_widget_label_set_bg_color(lblactivity, ((mgui_color_t){.value = 0x1106}));
/* LblCpu */
mgui_widget_t* lblcpu = mgui_allocate_widget(activitycard, MGUI_WIDGET_LABEL, (mgui_area_t){8, 26, 38, 18}, ((mgui_color_t){.value = 0x8C51}));
mgui_widget_label_set_text(lblcpu, "CPU");
mgui_widget_label_set_bg_color(lblcpu, ((mgui_color_t){.value = 0x1106}));
#ifdef MGUI_WIDGET_ENABLE_PROGRESS_BAR
/* PbCpu */
mgui_widget_t* pbcpu = mgui_allocate_widget(activitycard, MGUI_WIDGET_PROGRESS_BAR, (mgui_area_t){50, 26, 106, 22}, ((mgui_color_t){.value = 0x08C5}));
mgui_widget_progress_bar_set_range(pbcpu, 0, 100);
mgui_widget_progress_bar_set_value(pbcpu, 65);
mgui_widget_progress_bar_set_orientation(pbcpu, MGUI_PROGRESS_BAR_HORIZONTAL);
mgui_widget_progress_bar_set_bar_color(pbcpu, ((mgui_color_t){.value = 0x06BF}));
mgui_widget_progress_bar_show_percentage(pbcpu, true);
mgui_widget_progress_bar_set_text_on_bar(pbcpu, true);
#endif /* MGUI_WIDGET_ENABLE_PROGRESS_BAR */
/* LblBat */
mgui_widget_t* lblbat = mgui_allocate_widget(activitycard, MGUI_WIDGET_LABEL, (mgui_area_t){8, 52, 38, 18}, ((mgui_color_t){.value = 0x8C51}));
mgui_widget_label_set_text(lblbat, "Bat");
mgui_widget_label_set_bg_color(lblbat, ((mgui_color_t){.value = 0x1106}));
#ifdef MGUI_WIDGET_ENABLE_PROGRESS_BAR
/* PbBat */
mgui_widget_t* pbbat = mgui_allocate_widget(activitycard, MGUI_WIDGET_PROGRESS_BAR, (mgui_area_t){50, 52, 106, 22}, ((mgui_color_t){.value = 0x08C5}));
mgui_widget_progress_bar_set_range(pbbat, 0, 100);
mgui_widget_progress_bar_set_value(pbbat, 82);
mgui_widget_progress_bar_set_orientation(pbbat, MGUI_PROGRESS_BAR_HORIZONTAL);
mgui_widget_progress_bar_set_bar_color(pbbat, ((mgui_color_t){.value = 0x07F1}));
mgui_widget_progress_bar_show_percentage(pbbat, true);
mgui_widget_progress_bar_set_text_on_bar(pbbat, true);
#endif /* MGUI_WIDGET_ENABLE_PROGRESS_BAR */
/* LblRam */
mgui_widget_t* lblram = mgui_allocate_widget(activitycard, MGUI_WIDGET_LABEL, (mgui_area_t){8, 78, 38, 18}, ((mgui_color_t){.value = 0x8C51}));
mgui_widget_label_set_text(lblram, "RAM");
mgui_widget_label_set_bg_color(lblram, ((mgui_color_t){.value = 0x1106}));
#ifdef MGUI_WIDGET_ENABLE_PROGRESS_BAR
/* PbRam */
mgui_widget_t* pbram = mgui_allocate_widget(activitycard, MGUI_WIDGET_PROGRESS_BAR, (mgui_area_t){50, 78, 106, 22}, ((mgui_color_t){.value = 0x08C5}));
mgui_widget_progress_bar_set_range(pbram, 0, 100);
mgui_widget_progress_bar_set_value(pbram, 40);
mgui_widget_progress_bar_set_orientation(pbram, MGUI_PROGRESS_BAR_HORIZONTAL);
mgui_widget_progress_bar_set_bar_color(pbram, ((mgui_color_t){.value = 0xFA2A}));
mgui_widget_progress_bar_show_percentage(pbram, true);
mgui_widget_progress_bar_set_text_on_bar(pbram, true);
#endif /* MGUI_WIDGET_ENABLE_PROGRESS_BAR */
/* LblNet */
mgui_widget_t* lblnet = mgui_allocate_widget(activitycard, MGUI_WIDGET_LABEL, (mgui_area_t){8, 104, 38, 18}, ((mgui_color_t){.value = 0x8C51}));
mgui_widget_label_set_text(lblnet, "Net");
mgui_widget_label_set_bg_color(lblnet, ((mgui_color_t){.value = 0x1106}));
#ifdef MGUI_WIDGET_ENABLE_PROGRESS_BAR
/* PbNet */
mgui_widget_t* pbnet = mgui_allocate_widget(activitycard, MGUI_WIDGET_PROGRESS_BAR, (mgui_area_t){50, 104, 106, 22}, ((mgui_color_t){.value = 0x08C5}));
mgui_widget_progress_bar_set_range(pbnet, 0, 100);
mgui_widget_progress_bar_set_value(pbnet, 28);
mgui_widget_progress_bar_set_orientation(pbnet, MGUI_PROGRESS_BAR_HORIZONTAL);
mgui_widget_progress_bar_set_bar_color(pbnet, ((mgui_color_t){.value = 0xFEA0}));
mgui_widget_progress_bar_show_percentage(pbnet, true);
mgui_widget_progress_bar_set_text_on_bar(pbnet, true);
#endif /* MGUI_WIDGET_ENABLE_PROGRESS_BAR */
/* GaugeCard */
mgui_widget_t* gaugecard = mgui_allocate_widget(screen1, MGUI_WIDGET_BOX, (mgui_area_t){318, 28, 160, 200}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_border_property(gaugecard, ((mgui_color_t){.value = 0x21AA}), 1);
mgui_widget_radius_property(gaugecard, 8, true);
/* LblGauge */
mgui_widget_t* lblgauge = mgui_allocate_widget(gaugecard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 90, 20}, ((mgui_color_t){.value = 0xAABE}));
mgui_widget_align(lblgauge, MGUI_ALIGN_TOP_LEFT);
mgui_widget_set_align_offset(lblgauge, 8, 6);
mgui_widget_label_set_text(lblgauge, "Power Load");
mgui_widget_label_set_bg_color(lblgauge, ((mgui_color_t){.value = 0x1106}));
#ifdef MGUI_WIDGET_ENABLE_ARC
/* ArcGauge */
mgui_widget_t* arcgauge = mgui_allocate_widget(gaugecard, MGUI_WIDGET_ARC, (mgui_area_t){0, 24, 104, 104}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_align(arcgauge, MGUI_ALIGN_TOP_CENTER);
mgui_widget_set_align_offset(arcgauge, 0, 24);
mgui_widget_arc_set_angles(arcgauge, -120, 120);
mgui_widget_arc_set_thickness(arcgauge, 12);
mgui_widget_arc_set_radius(arcgauge, 46);
mgui_widget_arc_set_rounded_ends(arcgauge, true);
mgui_widget_arc_set_interactive(arcgauge, true);
mgui_widget_arc_set_value(arcgauge, 65);
mgui_widget_arc_set_range(arcgauge, 0, 100);
mgui_widget_arc_set_knob_size(arcgauge, 25);
mgui_widget_arc_set_colors(arcgauge, ((mgui_color_t){.value = 0x29EB}), ((mgui_color_t){.value = 0xAABE}), MGUI_COLOR_BLACK);
#endif /* MGUI_WIDGET_ENABLE_ARC */
/* LblGaugeSub */
mgui_widget_t* lblgaugesub = mgui_allocate_widget(gaugecard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 120, 24}, ((mgui_color_t){.value = 0x8C51}));
mgui_widget_align(lblgaugesub, MGUI_ALIGN_BOTTOM_CENTER);
mgui_widget_set_align_offset(lblgaugesub, 0, -10);
mgui_widget_label_set_text(lblgaugesub, "drag to adjust");
mgui_widget_label_set_bg_color(lblgaugesub, ((mgui_color_t){.value = 0x1106}));
/* ModeCard */
mgui_widget_t* modecard = mgui_allocate_widget(screen1, MGUI_WIDGET_BOX, (mgui_area_t){318, 230, 160, 60}, ((mgui_color_t){.value = 0x1106}));
mgui_widget_border_property(modecard, ((mgui_color_t){.value = 0x21AA}), 1);
mgui_widget_radius_property(modecard, 8, true);
/* LblMode */
mgui_widget_t* lblmode = mgui_allocate_widget(modecard, MGUI_WIDGET_LABEL, (mgui_area_t){0, 0, 80, 20}, ((mgui_color_t){.value = 0x06BF}));
mgui_widget_align(lblmode, MGUI_ALIGN_TOP_LEFT);
mgui_widget_set_align_offset(lblmode, 8, 5);
mgui_widget_label_set_text(lblmode, "Mode");
mgui_widget_label_set_bg_color(lblmode, ((mgui_color_t){.value = 0x1106}));
#ifdef MGUI_WIDGET_ENABLE_DROPDOWN
/* DdMode */
mgui_widget_t* ddmode = mgui_allocate_widget(modecard, MGUI_WIDGET_DROPDOWN, (mgui_area_t){8, 26, 144, 30}, ((mgui_color_t){.value = 0x29EB}));
const char* ddmode_items[] = {"Normal", "Performance", "Eco", "Sleep"};
mgui_widget_dropdown_set_items(ddmode, ddmode_items, 4);
mgui_widget_dropdown_set_selected(ddmode, 0);
mgui_widget_dropdown_set_font_color(ddmode, MGUI_COLOR_WHITE);
mgui_widget_dropdown_set_item_height(ddmode, 28);
mgui_widget_dropdown_set_max_visible_items(ddmode, 4);
#endif /* MGUI_WIDGET_ENABLE_DROPDOWN */
}
Command-line reference¶
| Argument | Description |
|---|---|
<json_file> |
Path to the UI JSON file — required |
[output.c] |
Path for the generated C file (default: same name as JSON with .c extension) |
[extra args…] |
Passed verbatim to json_to_mgui.py when genCode is clicked |
Examples
# Open the example UI
.\live_mgui_simulator.exe .\screen_1.json
# Open and specify a custom output path for generated C
.\live_mgui_simulator.exe .\screen_1.json .\output\ui_screen1.c
# Pass extra flags to the code generator
.\live_mgui_simulator.exe .\screen_1.json .\ui.c --func dashboard_init
Keyboard shortcuts¶
| Key | Action |
|---|---|
G |
Generate C code |
R |
Reload JSON file |
Q / Esc |
Quit |
Example output¶
See also¶
- JSON UI Reference — full property reference for every widget type
- Font Converter — convert TTF fonts for use in mGui