App Builder¶

The App Builder is a browser-based tool for writing, generating, and testing Cyber Fidget apps — no local setup required.

What it does¶

Write or generate a C++ app using the code editor or build assistant
Compile to WASM — builds your app to WebAssembly via GitHub Actions to support emulator
Run in the emulator — test with on-screen buttons, slider, OLED, and LEDs
Flash to hardware — compile for the ESP32 and flash OTA or via USB

Getting started¶

Go to cyberfidget.com/build
Sign in with your GitHub account (required for compilation)
Write or generate your app code in the editor
Click Compile Emulator to build for the browser, then Emulator to run it
When ready, compile for hardware and flash to your device

Naming your app¶

Your app has a name you choose and a name your code uses, and they are allowed to be different.

Studio asks what you want to call it before it writes any code. The question is the first thing on the start panel of a new app, and generating code waits until you have answered it. That is on purpose: the name you choose is what your code gets called, so choosing it first saves you hunting down a placeholder name afterwards.

Use at least one letter or number. Anything else is fair game -- spaces, capitals, whatever reads best -- and Studio works out a sensible name for the code from it. "Lunar Lander" becomes LunarLander.

The name you choose is the one shown at the top of Studio, on your project card, and in the NAME box in Settings. It is also the label that appears in the menu on your Cyber Fidget.

To rename it, double-click the name at the top of Studio. Type the new one and press Enter. Press Escape, or click away, to leave it as it was. Renaming from the NAME box in Settings does the same thing -- the two stay in step, and so does everywhere else the name appears.

The name your code uses is shown as Code name, under Device menu details in Settings. You cannot type into it, because it is read straight out of your app's code: whatever your code calls itself is what appears there. To change it, change the name in your code and this follows.

Renaming your app does not rewrite your code. That is deliberate -- if you pasted or hand-wrote your app, a rename that quietly renamed things inside it would be editing your work without asking.

Compile vs Emulator¶

Action	What it does	Speed
Compile Emulator	Builds C++ to WASM via GitHub Actions	~1–2 min (first time, cached after)
Emulator	Loads the compiled WASM and runs it in the browser	Instant

These are intentionally separate steps. Compilation is slow (cloud build), but the emulator loads instantly from the cached WASM in IndexedDB.

Emulator features¶

The browser emulator maps all hardware to browser APIs:

Display — 128x64 canvas matching the OLED
Buttons — Keyboard shortcuts (Q/E/A/D/Z/C) or click on-screen
Slider — Draggable slider control
LEDs — Rendered as colored circles
Audio — Web Audio API for tones
Serial Monitor — Shows Serial.println() output

For full details, see the Browser Emulator page.

App lifecycle¶

Every app follows the same pattern:

void begin();   // Runs once when app starts
void update();  // Runs 50 times per second
void end();     // Runs once when app exits

See How an App Works for the full lifecycle and Concepts for how to use buttons, display, audio, LEDs, slider, and accelerometer.

Generating apps with 3D models¶

Besides flat pixel art, the App Builder can generate wireframe models -- 3D shapes made of nodes and straight-line struts that spin on the display, drawn like a classic vector arcade game. See 3D Models for what a wireframe model is and how to build one by hand in Studio's 3D tab.

What to ask for: describe the shape as three-dimensional, rotating, or a wireframe, and the App Builder generates a model instead of flat art -- for example, "a spinning wireframe crystal" or "a 3D ship that flies across the screen." Ask for flat art (a character, an icon, a background) and you'll get a sprite instead.

Spinning or facing a direction: a generated model can turn in two ways. It can spin continuously in place, like a rotating trophy. Or its facing can follow your app's own logic -- for example, a ship that banks and turns to face the direction it's moving, the way a paper airplane leans into a turn, driven by whatever your app already tracks (steering input, velocity, and so on).

Using a model you already built in Studio: open the model in the 3D tab and choose Try it in an app -- it either starts you off with a small example app showing the model spinning, or, if your project already has app code, switches to Generate with a request already filled in to add that model to your app.