Reload OS

Reload OS Studio

A screen designer in the browser, in the manner of Android Studio's layout editor. The screen in the middle is the real interface: the same LVGL, shell, fonts and theme as on a device, compiled to WebAssembly. What you draw exports as C for the app kit.

Open Studio

How it works

  1. Pick a board in the toolbar, and turn the screen or switch to the light theme. The status bar is the real one.

  2. Drag widgets from the Palette onto the screen or click to add one. A Column or a Row lays out what is in it; a Free area keeps each widget where you put it, anchored to a corner, an edge or the centre.

  3. Set them up in Attributes. Sizes that fill or fit their content move with the screen; pixel sizes do not. Colours by name follow the light and dark theme on the device.

  4. Say what happens when a widget is tapped: a message, another screen, back, a sound, or a function of yours. A screen can come in fading or sliding (Screen › Comes in), and play a sound as it does (Screen › Plays) - a voice prompt; the way back is the way in, reversed.

  5. Pictures and sounds of your own: Assets › + takes picture files (PNG, JPEG, GIF, WebP) and sound files (WAV, MP3, OGG, M4A). A picture becomes a PNG no larger than the screen; a sound a 16 kHz mono WAV, the first 60 s. A Picture widget shows one - as it is, or scaled to its size, stretched, cut or tiled; Run plays the sounds in the browser. They go inside the app's .elf: one file to copy, nothing else on the device.

  6. Run tries it on the screen, with the mouse as a finger and Esc as the back swipe.

  7. Problems at the bottom checks the screen on every board, both ways round: a widget that runs off the edge, a name C can't use.

  8. Export › ELF builds the app on our server with the app kit and gives you the .elf for the board you picked: copy it into apps/ on the device's flash drive or SD card and restart the device. A compiler error comes back into Problems. Nothing of your app stays on the server.

  9. Export › Project folder gives a zip of the app's folder instead, for the app kit on your own machine (ESP-IDF 5.5.4) - when you write more of app.c than Studio shows:

    unzip myapp.zip -d appkit
cd appkit
./build.sh myapp jc         # -> myapp/jc1060p470c/myapp.elf

What you get

FileWhat it is
main/ui.c, main/ui.hThe screens, made from the design. Don't edit them: change the design and export again. ui.h has the widgets by their id, ui.title; a meter's needle is ui.gauge_needle, a spinbox's row of buttons ui.qty_box.
main/app.cYours: the app's start, and the functions the widgets call. A function you have not written yet shows a message instead.
myapp.designThe design. Open it in Studio to change the screens, then copy the new ui.c and ui.h over the old ones.

Good to know

  • Your design stays in this browser (and in the .design file you save). Nothing is sent anywhere.
  • Studio can use what an app may call on a device: the code stays inside reloados/api.txt.
  • Pictures and sounds stay in this browser too (and in the .design file). The app's file grows with them and is loaded into the device's memory whole: Problems warns above 2 MB, and the build server takes 6 MB. A picture is decoded once while the app runs and freed when it closes. In the C: ui_picture(UI_PIC_name) and ui_sound(UI_SND_name); the files are main/assets/, embedded by main/CMakeLists.txt. They work on firmware 1.4.0 too.
  • Run shows the design. It does not run your app.c: that needs a device.
  • Keypad keys: a row a line, a comma between keys; a key named like an LVGL symbol (OK, BACKSPACE, LEFT ...) shows the symbol. A calendar with no date shows the device's month.
  • The calendar, meter, spinbox, LED, keypad, toggle buttons and the screen transitions came after firmware 1.4.0: a device on 1.4.0 or older can't open an app that uses them (Settings › About › Check online).
  • The build server builds one app at a time; a board's first build of the day can take a few minutes. It accepts the three sources only, and an #include of a header by its name.