flipperzero-firmware/wiki/UI.md
Valeria Aquamine 12e319e6d9
User Interface guidlines (#152)
Co-authored-by: Valeria Aquamine <valerie@flipperdevices.com>
2020-10-02 02:23:10 +03:00

3.4 KiB

Controls

Flipper Zero have 5 button directional pad.
Buttons ← Left, → Right, ↑ Up, ↓ Down can be pressed only one at a time, and CAN'T BE used in combination.
Buttons ◉ OK and ⮌ Back is independed from other buttons and can be used for combinations.

        Up
        ↑
Left ← (OK) → Right
        ↓
       Down         ⮌ Back   

On directinal pad only one button out of 4 can be pressed at once. ◉ OK and ⮌ Back buttons are indepandent.

Reboot combination

Reset combination triggers hard reboot that cannot be intercepted by any software. Used when application freezes or as normal way to reboot device.

  1. Press and hold Left ← + ⮌ Back for reset
  2. Release to normal boot

Reboot combination

Reboot to Bootloader (Firmware update mode)

Same as hard reboot, but stay in Firmware Update mode after boot. Useful when firmware is broken and user cannot boot in normal mode.

  1. Press and hold Left ← + ⮌ Back for reset
  2. Release Left ← and keep holding ⮌ Back until Firmware Update mode appears
  3. Release ⮌ Back

To exit from Firmware Update mode use reboot combination

Reboot to Bootloader

DFU mode (Rescue mode)

Reboot to rescue DFU mode. Useful when firmware and bootloader is broken.

  1. Press and hold Left ← + ⮌ Back + ◉ OK
  2. Release Left ← + ⮌ Back and keep ◉ OK pressed
  3. Release ◉ OK

To exit from Firmware Update mode use reboot combination

Menu structure

Standby screen

On standby screen we can see battery, status bar and dolphin animation. Animation can cover the status bar according to the battery charge width.

Main menu

Active row is always in the middle of the screen.

Active row

Font: Born2bSportyV2
Size: 16 px

Non-active row

Font: Helvetipixel
Size: 16 px

Icon

Scrollbar

Scrollbar has 32 dots and a simple thumb.

Application menu

Font: Helvetipixel
Size: 16 px

Application screen with buttons

Font: Helvetipixel
Size: 16 px

Minimum button width is 38 px.
Maximum button width is 63 px.

Pass-code lock

Flipper will store your secrets like U2F token and house keys. What if Flipper gets lost?

Well, no problem! For this case, we made a locking feature. You can lock Flipper and unlock it with the special pass-combo, like in good old fighting games (for example, →↑↑←↓↑↓). Users can set a pass-combo of any length, and all functions will be blocked until the combo is entered, including firmware flashing.