From 179d06b7e95122d12bebcfe89763b22cef4a824c Mon Sep 17 00:00:00 2001 From: Valeria Aquamine <69796052+aquam1ne@users.noreply.github.com> Date: Tue, 29 Sep 2020 13:59:31 +0300 Subject: [PATCH] Ui guidlines (#140) * User Interface Wiki page Co-authored-by: Valeria Aquamine --- README.md | 4 +- wiki/UI.md | 111 +++++++++++++++++++--- wiki_static/ui/UI-Scrollbar-and-thumb.png | 3 + wiki_static/ui/UI-Standby.png | 3 + wiki_static/ui/UI-active-row-text.png | 3 + wiki_static/ui/UI-app-menu.png | 3 + wiki_static/ui/UI-icon.png | 3 + wiki_static/ui/UI-main-menu-screen.png | 3 + wiki_static/ui/UI-non-active-row-text.png | 3 + wiki_static/ui/buttons.png | 3 + wiki_static/ui/buttons_transperent.png | 3 + wiki_static/ui/menu-navigation.png | 3 + wiki_static/ui/reboot-combo.png | 3 + wiki_static/ui/reboot-to-bootloader.png | 3 + wiki_static/ui/reboot-to-dfu.png | 3 + 15 files changed, 140 insertions(+), 14 deletions(-) create mode 100644 wiki_static/ui/UI-Scrollbar-and-thumb.png create mode 100644 wiki_static/ui/UI-Standby.png create mode 100644 wiki_static/ui/UI-active-row-text.png create mode 100644 wiki_static/ui/UI-app-menu.png create mode 100644 wiki_static/ui/UI-icon.png create mode 100644 wiki_static/ui/UI-main-menu-screen.png create mode 100644 wiki_static/ui/UI-non-active-row-text.png create mode 100644 wiki_static/ui/buttons.png create mode 100644 wiki_static/ui/buttons_transperent.png create mode 100644 wiki_static/ui/menu-navigation.png create mode 100644 wiki_static/ui/reboot-combo.png create mode 100644 wiki_static/ui/reboot-to-bootloader.png create mode 100644 wiki_static/ui/reboot-to-dfu.png diff --git a/README.md b/README.md index 25abd8924..616e9415e 100644 --- a/README.md +++ b/README.md @@ -34,9 +34,9 @@ Flipper consists of the two main parts: * Core: OS, HAL, FS, bootloader, FURI * Applications: features like RFID or Tamagotchi, and also background tasks like button debouncing and backlight control. -### UI +### User Interface -Common UI feature (menu, screens...) at [UI page](https://github.com/Flipper-Zero/flipperzero-firmware-community/wiki/UI) +[User Interface](https://github.com/Flipper-Zero/flipperzero-firmware-community/wiki/UI) ### Features diff --git a/wiki/UI.md b/wiki/UI.md index fbb5493f9..a4bfe50ae 100644 --- a/wiki/UI.md +++ b/wiki/UI.md @@ -1,22 +1,109 @@ -## Main menu +# 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. -* [443/866Mhz Transceiver](Sub-1-GHz-radio) -* [Proximity tag 125khz](125-kHz-RFID) -* [Bad USB](USB) -* [Infrared](Infrared) -* [iButton (1-Wire)](iButton-contact-keys) -* [Plugins](Plugins) -* Settings -* [Dolphin](Tamagotchi) +``` + Up + ↑ +Left ← (OK) → Right + ↓ + Down ⮌ Back +``` -## Settings menu +![](./../wiki_static/ui/buttons.png) + +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](../wiki_static/ui/reboot-combo.png) + +# 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-combination) + +![Reboot to Bootloader](./../wiki_static/ui/reboot-to-bootloader.png) + +# 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` + +![](../wiki_static/ui/reboot-to-dfu.png) + +# Menu structure + +![](../wiki_static/ui/menu-navigation.png) + +# Standby screen + +On standby screen we can see battery life status and dolphin animation. + +![](../wiki_static/ui/UI-Standby.png) + +# Main menu + +Active row is always in the middle of the screen. + +![](./../wiki_static/ui/UI-main-menu-screen.png) + +### Active row + +Font: `Born2bSportyV2` +Size: 16 px + +![](./../wiki_static/ui/UI-active-row-text.png) + +### Non-active row + +Font: `Helvetipixel` +Size: 16 px + +![](./../wiki_static/ui/UI-non-active-row-text.png) + +### Icon + +![](./../wiki_static/ui/UI-icon.png) + +### Scrollbar + +Scrollbar has 32 dots and a simple thumb + +![](./../wiki_static/ui/UI-Scrollbar-and-thumb.png) + +# Application menu + +Font: `Helvetipixel` +Size: 16 px + +![](../wiki_static/ui/UI-app-menu.png) + +## Application screen with buttons + + + +# Settings menu * Display * Power -## Pass-code lock +# Pass-code lock Flipper will store your secrets like U2F token and house keys. What if Flipper gets lost? diff --git a/wiki_static/ui/UI-Scrollbar-and-thumb.png b/wiki_static/ui/UI-Scrollbar-and-thumb.png new file mode 100644 index 000000000..6c6ea8923 --- /dev/null +++ b/wiki_static/ui/UI-Scrollbar-and-thumb.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1d240d7faa5e964e283af37d8935bca61eda4c795260ae5a3ad75358e9a6ca41 +size 8954 diff --git a/wiki_static/ui/UI-Standby.png b/wiki_static/ui/UI-Standby.png new file mode 100644 index 000000000..58fa9c856 --- /dev/null +++ b/wiki_static/ui/UI-Standby.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:94dac8ea00b3016e3d2034674b7705e1c359141cc7a593eb5baae10fea02edaa +size 103983 diff --git a/wiki_static/ui/UI-active-row-text.png b/wiki_static/ui/UI-active-row-text.png new file mode 100644 index 000000000..a3c117c30 --- /dev/null +++ b/wiki_static/ui/UI-active-row-text.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:180454f7a3269f9bb57e604617cdc83206f1e679802463a067e59b5a121b7ab2 +size 12903 diff --git a/wiki_static/ui/UI-app-menu.png b/wiki_static/ui/UI-app-menu.png new file mode 100644 index 000000000..d3072f363 --- /dev/null +++ b/wiki_static/ui/UI-app-menu.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:eaf7e06f7f4696c16f95c6a8dabd9ba0b61b7311f81f6793ac914acd0cef4c49 +size 113293 diff --git a/wiki_static/ui/UI-icon.png b/wiki_static/ui/UI-icon.png new file mode 100644 index 000000000..3407e39e0 --- /dev/null +++ b/wiki_static/ui/UI-icon.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0aebf324d033a7169ded2dd210be700ee6c3abb0651543676aa4ed7a6fbd35cb +size 9327 diff --git a/wiki_static/ui/UI-main-menu-screen.png b/wiki_static/ui/UI-main-menu-screen.png new file mode 100644 index 000000000..7f4b2b6c6 --- /dev/null +++ b/wiki_static/ui/UI-main-menu-screen.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:249289d049f6926b42b378f019175616bf8d2777e4af15a71f9ab162c91ade6a +size 373376 diff --git a/wiki_static/ui/UI-non-active-row-text.png b/wiki_static/ui/UI-non-active-row-text.png new file mode 100644 index 000000000..242f7770f --- /dev/null +++ b/wiki_static/ui/UI-non-active-row-text.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b001126ba9791289a742b56c34405b35f5c4377f294a1580fdbbe9de07e8920b +size 12428 diff --git a/wiki_static/ui/buttons.png b/wiki_static/ui/buttons.png new file mode 100644 index 000000000..09b9057b6 --- /dev/null +++ b/wiki_static/ui/buttons.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e614dafbcd4e43e9fb7dff0f3d33620b61531801c42c38b567a9ff74474422d8 +size 23310 diff --git a/wiki_static/ui/buttons_transperent.png b/wiki_static/ui/buttons_transperent.png new file mode 100644 index 000000000..64c41ae3a --- /dev/null +++ b/wiki_static/ui/buttons_transperent.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d330a69858f2366427ddfcfdca2e04501a9860654c1b7776df8dbea097537e27 +size 124790 diff --git a/wiki_static/ui/menu-navigation.png b/wiki_static/ui/menu-navigation.png new file mode 100644 index 000000000..852f59813 --- /dev/null +++ b/wiki_static/ui/menu-navigation.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:545469542f434677a88a8ddba799c5ac907d34a80b06a467002a49ccd1282391 +size 126876 diff --git a/wiki_static/ui/reboot-combo.png b/wiki_static/ui/reboot-combo.png new file mode 100644 index 000000000..b9642cd2d --- /dev/null +++ b/wiki_static/ui/reboot-combo.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bb07cbaa87f25bb901a7f62d56e84e57bc276ace52d83de9fddd86515a5fbafe +size 32934 diff --git a/wiki_static/ui/reboot-to-bootloader.png b/wiki_static/ui/reboot-to-bootloader.png new file mode 100644 index 000000000..aa72a83b4 --- /dev/null +++ b/wiki_static/ui/reboot-to-bootloader.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:da18c8626cf717dba133296f546b753a82bdf785ac7e46b5bbf28d624268364d +size 53573 diff --git a/wiki_static/ui/reboot-to-dfu.png b/wiki_static/ui/reboot-to-dfu.png new file mode 100644 index 000000000..d2f5f5c15 --- /dev/null +++ b/wiki_static/ui/reboot-to-dfu.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ed30c4b7f4a64b134ab9470f2c83bfb5fd1c18a47e967dd46bcd65037d82bccb +size 53196