Back to site

Guides·01

Using Studio

The Protok Studio workspace: build LVGL screens, bind CAN signals, wire low-code logic nodes, simulate, and export C99 firmware.

Protok Studio is one window with a visual LVGL UI editor for display screens and a built-in low-code node engine for HMI logic — all on the same infinite canvas. Widgets and logic nodes share one signal bus, and the whole project feeds a single C99 generator that produces a complete firmware image.

Build an LVGL screen

Protok Studio targets LVGL 9.6.0.

  1. Drag widgets from the palette onto the canvas: buttons, labels, images, sliders, arcs, bars, rollers, dropdowns, lines, scales, containers.
  2. Select a widget to open the floating inspector. Set size, position, alignment, colors, opacity, fonts, and text.
  3. Toggle flags (LV_OBJ_FLAG_*: clickable, scrollable, hidden, floating…) and states (LV_STATE_*: checked, focused, pressed, disabled, user states).
  4. Bind events — screen load/unload, animations, low-code triggers.
  5. Add animations and timelines via the right-hand tabs.

Assets

Drop PNG/JPG images and TTF fonts into the project. Protok converts them to C-arrays (assets.c/h) ready for the target. The unified asset packager can also emit a monolithic Flash binary (merged_bin) for one-shot flashing.

Wire low-code logic

The HMI node engine lives on the same canvas as the UI. Drag logic nodes from the palette, connect them to widgets and CAN signals, set constants, and run everything together in the simulator. Node families available today:

  • Logic — IF, OR, AND, comparisons (>, =, <…).
  • Math — add, subtract, multiply, scale, and other arithmetic operators.
  • Timers — DELAY (one-shot) and CYCLIC TIMER (periodic) nodes.
  • Watchdogs — fire an action when a CAN message stops arriving within a timeout.
  • Screen switches — load another screen on a condition or event.
  • Animation triggers — start an LVGL animation from a node.
  • NVM — read/write persistent values to flash or EEPROM.
  • C-script — drop in a small C99 snippet when a node is not enough.

Nodes evaluate on LVGL timers in the generated firmware (see Generated code), so they run in the same thread as the UI and are always safe to call LVGL APIs.

Bind CAN / J1939 signals

Import a DBC file and Protok parses it into typed signals. Then:

  • Drag a signal onto a widget to bind it — the widget updates automatically when the signal arrives.
  • Drag a signal onto a logic node input to feed logic from the bus.
  • Configure watchdogs that fire actions when a message stops arriving.
  • Set up CAN TX to pack widget or logic values back onto the bus.

Beyond CAN, you can import TRDP (trdp-config.xml) anddevice descriptions (*.protokdev.xml) for I/O mapping. Protok auto-generates TRDP_PUB_<comId> / TRDP_SUB_<comId>palette nodes from your TRDP config.

Simulate

Switch the canvas to Simulate mode. The WASM simulator runs the actual runtime — not a mock — so the preview is faithful. You can:

  • Replay recorded CAN trace files.
  • Inject single frames, GPIO states, or TRDP messages by hand.
  • Interact with the HMI (touch/click) and watch logic and TX frames respond.

Generate & export C99

Choose Generate C99. Protok emits portable, zero-allocation C99 for your whole project. See Generated code for the file set, andRuntime & HAL for compiling and flashing it.

Deep Protok Logs (DPL)

For Protok HMI (PHMI) targets, you can enable DPL in Project Settings. DPL records the live HMI session — screens, widget values, variables, and CAN frames — into a compact binary log you can replay in Studio after the run. It is purely additive: enabling it adds pli_dpl.c/h to the generated set and one HAL hook (pli_dpl_write) for you to implement. SeeGenerated code → DPL.

System passports

One click exports an audit-ready PDF system passport: screen layouts, logic graphs, signal bindings, and C99 traceability — useful for compliance and customer hand-off.

What's next