The UI Builder for the Flipper Zero
Effortlessly design and export user interfaces for your Flipper Zero applications.
Begin by designing your UI using our intuitive builder. Once you are satisfied with the design, export it as a JSON file. This JSON can be directly used with the specified Rust crate to integrate into your Flipper Zero application.
Every possible user interface is build from multiple Views. That's like a slide a in a
presentation and multiple Slides are building the whole presentation. A View can be different
types: Either a Message
,
Alert
, Browser
or
Input
. Every View comes with their own UI Elements which can be hidden
(Message) or just edited (All).
All buttons can have events. An event can be a function you defined in your Rust code or a
predefined event (in the proc macro), which currently are:
none
, next
, back
and
close
. Events can do internal logic or switch to a certain view e.g.
using next
for going to the next View.
To integrate the exported JSON into your Flipper Zero app, use our dedicated Rust crate. Simply include the crate in your project and load the JSON to render the UI components (don't forget to pass in your functions).
#![no_main] #![no_std] // Required for panic handler extern crate flipperzero_rt; use core::ffi::CStr; use flip_ui_macro::flipper_ui; use flipperzero_rt::{entry, manifest}; // Define the FAP Manifest for this application manifest!( name = "Flipper Zero Rust", app_version = 1, has_icon = false, ); // Define the entry function entry!(main); // Getting UI data && events flipper_ui! { App, "src/main.json", none => none, next => next, back => back, close => close, } // Entry point fn main(_args: Option<&CStr>) -> i32 { let mut app = App::create(); app.show(); 0 }