Ui guidlines (#140)

* User Interface Wiki page

Co-authored-by: Valeria Aquamine <valerie@flipperdevices.com>

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
 

wiki/UI.md

@@ -1,22 +1,109 @@
-## Main menu
+# Controls 
 
-<img width="400" src="https://hsto.org/webt/uh/wo/01/uhwo01ftylu-gdb_4qp2vxgjmte.png" />
+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)
+        Up
-* [Bad USB](USB)
+        ↑
-* [Infrared](Infrared)
+Left ← (OK) → Right
-* [iButton (1-Wire)](iButton-contact-keys)
+        ↓
-* [Plugins](Plugins)
+       Down         ⮌ Back   
-* Settings
+```
-* [Dolphin](Tamagotchi)
 
-## 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?
 

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

wiki_static/ui/UI-Standby.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:94dac8ea00b3016e3d2034674b7705e1c359141cc7a593eb5baae10fea02edaa
+size 103983

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

wiki_static/ui/UI-app-menu.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eaf7e06f7f4696c16f95c6a8dabd9ba0b61b7311f81f6793ac914acd0cef4c49
+size 113293

wiki_static/ui/UI-icon.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0aebf324d033a7169ded2dd210be700ee6c3abb0651543676aa4ed7a6fbd35cb
+size 9327

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

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

wiki_static/ui/buttons.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e614dafbcd4e43e9fb7dff0f3d33620b61531801c42c38b567a9ff74474422d8
+size 23310

wiki_static/ui/buttons_transperent.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d330a69858f2366427ddfcfdca2e04501a9860654c1b7776df8dbea097537e27
+size 124790

wiki_static/ui/menu-navigation.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:545469542f434677a88a8ddba799c5ac907d34a80b06a467002a49ccd1282391
+size 126876

wiki_static/ui/reboot-combo.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bb07cbaa87f25bb901a7f62d56e84e57bc276ace52d83de9fddd86515a5fbafe
+size 32934

wiki_static/ui/reboot-to-bootloader.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:da18c8626cf717dba133296f546b753a82bdf785ac7e46b5bbf28d624268364d
+size 53573

wiki_static/ui/reboot-to-dfu.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ed30c4b7f4a64b134ab9470f2c83bfb5fd1c18a47e967dd46bcd65037d82bccb
+size 53196