diff --git a/documentation/app_dev/app_dev_debugging_faps.md b/documentation/app_dev/app_dev_debugging_faps.md new file mode 100644 index 000000000..9f6ae09de --- /dev/null +++ b/documentation/app_dev/app_dev_debugging_faps.md @@ -0,0 +1,68 @@ +# Debugging FAPs {#app_dev_debugging_faps} + +In the [previous guide](#app_dev_your_first_app_in_c), you learned how to create and run basic applications written in C on the Flipper Zero. + +Now, let's explore real-time debugging. It allows launching an application, pausing execution at any point, stepping through code line by line, and monitoring variable states and execution flow. This approach helps identify and fix significantly more bugs than testing without real-time debugging. + +> [!note] +> Using in-circuit debugging is optional — you can still debug applications by loading and running them over USB. + +## Requirements + +The Flipper Zero microcontroller’s SWD (Serial Wire Debug) interface is accessible through the device’s expansion port. You can connect a supported SWD probe to this interface to control program execution. + +Therefore, you will need the following: + +- Flipper Zero +- Windows, Linux or macOS computer +- One of the supported SWD probes + +## Supported SWD probes + +To use real-time debugging, you need a device that functions as a debug probe. This can be: + +- Another Flipper Zero: simply run the [Dap LINK app](https://lab.flipper.net/apps/dap_link) to enable SWD probe functionality +- [WiFi Devboard for Flipper Zero](https://shop.flipperzero.one/products/wifi-devboard) with stock firmware +- CMSIS-DAP compatible probes (from [Raspberry Pi](https://www.raspberrypi.com/products/debug-probe/), [l-tek](https://www.l-tek.com/web-shop/cmsis-dap-debug-probe/), [makerdiary](https://makerdiary.com/products/pitaya-link), and others) +- [Blackmagic compatible probes](https://black-magic.org/hardware.html) +- Other compatible probes: [ST-LINK V2](https://www.st.com/en/development-tools/st-link-v2.html), [ST-LINK V3](https://www.st.com/en/development-tools/stlink-v3set.html), etc. + +## Prerequisites + +Your computer must have the necessary tools and libraries installed to compile and run applications on Flipper Zero. We recommend using a preconfigured package that automates this setup — **uFBT (micro Flipper Build Tool)**. Install it by following the instructions in the [uFBT repo](https://github.com/flipperdevices/flipperzero-ufbt). + +Debugging must also be enabled on your Flipper Zero. To do this, set **Settings > System > Debug** to **ON**. + +## Step-by-step guide + +1\. **Connect the SWD probe to the Flipper Zero expansion port.** If you are using a probe not specially designed for Flipper Zero, you need to connect 3 pins: SWCLK (pin 10), SWDIO (pin 12), and GND (pin 8/11/18). If your SWD probe provides a UART interface, it is helpful to connect it to the Flipper Zero USART (pins 13, 14). This serial port outputs logs and information about critical program crashes when they occur, aiding in debugging. + +2\. **Connect the SWD probe to your computer.** Most debuggers connect via USB cable, but the WiFi Devboard supports connection via USB or WiFi (see [official documentation](#dev_board) for details). + + + \image html app_dev_flipperzero_app_wifi_devboard_debug.webp width=700 + +3\. **In Visual Studio Code, switch to debugging mode** by clicking the debug icon in the left menu or use the keyboard shortcut `Ctrl+Shift+D` on Windows/Linux or `Cmd+Shift+D` on macOS. Select the debugger model and press the **Play** button. + +> [!note] +> Starting a debug session halts firmware execution. To resume, click the **Continue** button on the toolbar at the top of your VS Code window. + +4\. **Use the debug control buttons** (reset, pause, run, step in, step out, and disconnect). + +5\. **Set breakpoints** by clicking to the left of the code line. Code execution will automatically pause when it reaches a line with a breakpoint. + +6\. **View the call stack tree.** When code execution is paused, you can view the call stack tree in the Call Stack window, showing the functions the processor has entered at the moment of the pause. + +7\. **View variable values** using the Variables, Watch, or Live Watch panels. + +Watch the demo below to see how to debug Flipper Zero FAPs in VS Code: + +\htmlonly + +
+ +
+ +\endhtmlonly \ No newline at end of file diff --git a/documentation/app_dev/app_dev_furi_api.md b/documentation/app_dev/app_dev_furi_api.md new file mode 100644 index 000000000..e75eda985 --- /dev/null +++ b/documentation/app_dev/app_dev_furi_api.md @@ -0,0 +1,45 @@ +# Using Furi API {#app_dev_furi_api} + +To fully leverage Flipper Zero's capabilities — such as the screen, speaker, radio transceiver, USB, or NFC — you need to understand how to interact with its hardware components. For this purpose, Flipper Zero includes Furi API, a set of libraries designed to provide developers with a simple interface for hardware interaction and common system tasks. + +This page provides an overview of Flipper Zero's hardware and software architecture, laying the foundation for a clearer understanding of the system's internals as you develop your applications. + +## Hardware + +Inside Flipper Zero is an STM32WB55 microcontroller (MCU), which features two cores, RAM, flash memory, and several dozen peripheral blocks (timers, RTC, BLE, GPIO, etc.). The operation of these blocks are detailed in the MCU's Reference Manual. + +In addition to the MCU, Flipper Zero includes several peripheral (external to the MCU) chips. To learn how work with these components, refer to their respective datasheets and documentation. + +Below is the hardware structure of Flipper Zero, where: + +- **Purple** — Blocks within the MCU +- **Blue** — Chips external to the MCU +- **Orange** — Other peripheral components that do not require complex interaction with chips + +\image html flipper_zero_hardware.png "Hardware structure of Flipper Zero" width=700 + +The Flipper Zero firmware is open-source, which means you can access the hardware directly from your software by implementing your own low level drivers. + +## Software + +To simplify development, Flipper Zero includes a dedicated software abstraction layer between the bare-metal hardware and application-level code — **Furi** (Flipper Universal Registry Implementation). Furi is a set of libraries included in the Flipper Zero firmware. It provides a straightforward API for interacting with hardware components and handling common system tasks such as thread management, dynamic memory allocation, and resource access control. + +With Furi, developers don't need to read hundreds of pages of datasheets, analyze schematics, or write low-level drivers. Learning the Furi API is sufficient. This approach saves development time and reduces code duplication across common tasks implemented by different developers. + +When added onto the hardware structure, the resulting architecture looks like this: + +\image html flipper_zero_architecture.png "Hardware + software structure of Flipper Zero" width=700 + +As shown, Furi spans the full width of the diagram, illustrating how it effectively separates and abstracts the application-level code (services and applications) from the underlying hardware. + +> The primary purpose of Furi libraries is to provide Flipper Zero developers with a simple API for hardware interaction and common system tasks. + +## Examples + +Furi is used in all Flipper Zero applications, making it easy to find examples of interacting with any hardware component. We recommend starting with the example applications in the [official Flipper Zero firmware repository](https://github.com/flipperdevices/flipperzero-firmware). You can also take a look at community-developed applications in the [Apps Catalog](https://lab.flipper.net/apps) (link to the source code can be found at the bottom of each app description), focusing on apps whose functionality closely matches what you aim to develop. + +## Furi source code + +Furi Core: [https://github.com/flipperdevices/flipperzero-firmware/tree/dev/furi](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/furi) + +Furi HAL (Hardware Abstraction Layer): [https://github.com/flipperdevices/flipperzero-firmware/tree/dev/targets](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/targets) \ No newline at end of file diff --git a/documentation/app_dev/app_dev_gui.md b/documentation/app_dev/app_dev_gui.md new file mode 100644 index 000000000..34c17cfd4 --- /dev/null +++ b/documentation/app_dev/app_dev_gui.md @@ -0,0 +1,184 @@ +# GUI in Apps {#app_dev_gui} + +This page introduces basic GUI concepts for Flipper Zero development and reviews existing GUI application approaches with their pros and cons: + +- [Dialogs API](#app_dev_gui_dialogs) + +- [ViewPort](#app_dev_gui_viewport) + +- [Views & Scenes](#app_dev_gui_views_scenes) + +# Basic GUI Concepts + +## EventLoop + +An asynchronous event handling mechanism that eliminates the need for polling or waiting for events (e.g., button presses, packet reception). Instead, event handler functions are assigned and invoked upon event occurrence, allowing the main loop to perform other tasks concurrently. + +## Canvas + +The **canvas** is just a raw drawing area with no abstractions over it. Drawing on the canvas directly is useful for implementing custom design elements (e.g., in games), but this is rather uncommon. + +## ViewPort + +**ViewPort** defines the behavior and rendering of a screen area with specific position and size. + +Multiple ViewPorts form a Drawing Stack, rendered bottom to top. This allows ViewPorts to overlap each other. + +Displaying a specific ViewPort can be enabled or disabled after its creation. + +## Model, View, and View Dispatcher + +The **Model** and **View** concepts help separate GUI from data, simplifying development, maintenance and testing. + +The **Model** contains the data; technically, it is a structure in memory. + +The **View** implements the logic for interface rendering and event handling. The View uses the Model: it retrieves data from the Model for display and modifies the data when processing events. + +To switch between multiple views, there is a separate entity — the **View Dispatcher**, which holds references to all the views that an application needs and switches between them as requested by the application. + +## View Modules + +View modules are fullscreen templates (View+Model) included in the firmware for typical Flipper Zero UIs. Available view modules: + +- `button_menu` +- `button_panel` +- `byte_input` +- `dialog_ex` +- `empty_screen` +- `file_browser` +- `loading` +- `menu` +- `number_input` +- `popup` +- `submenu` +- `text_box` +- `text_input` +- `variable_item_list` +- `widget` + +View module source code: https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/services/gui/modules + +## Scene & Scene Manager + +A **Scene** manages the behavior of an application within a single screen. For example, the [standard GPIO application](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/main/gpio) include the following screens: + +- `gpio_scene_start` (start menu) +- `gpio_scene_usb_uart` (USB-UART bridge mode interface) +- `gpio_scene_usb_uart_cfg` (USB-UART bridge mode settings interface) +- `gpio_scene_usb_uart_close` (confirmation dialog for exiting USB-UART bridge) +- `gpio_scene_test` (GPIO manual control) + +From the main menu, you can navigate to the manual control scene or enter USB-UART bridge mode. Within USB-UART bridge mode, you can access mode settings or exit the mode via a confirmation dialog. + +Each scene implementation includes: + +- `on_enter` function: used to initialize the scene’s views. +- `on_exit` function: used to de-initialize the scene and free resources. +- `on_event` function: handles incoming external events. + +An external event handler can trigger a UI switch to another scene. For example, selecting an item in the main menu triggers a transition to the corresponding scene via the **Scene Manager**, which enables switching between scenes and simplifies navigation in applications with complex navigation flows. + +--- + +# Approaches to GUI Development + +In this section, we will review existing GUI development approaches, starting from the simplest and progressing to more complex ones. The complexity of the interface you want to create determines the number of GUI abstractions required. + +## Using Dialogs {#app_dev_gui_dialogs} + +The simplest approach to building a GUI application. It is suitable when the entire interface can be implemented using only dialogs. + +You can find the Dialog API functions in the header file [dialogs.h](https://github.com/flipperdevices/flipperzero-firmware/blob/dev/applications/services/dialogs/dialogs.h). + +\image html app_dev_gui_dialogs.jpg width=700 + +**Pros:** + +- Simple and easy to use + +**Cons:** + +- Cannot build complex GUIs (only Dialogs are available) +- Dialogs operate synchronously, meaning that until the user presses a button in the dialog, no other application code will execute + +### **Example** + +```c +#include +#include +#include + +int32_t test_app(void* p) { + UNUSED(p); + + DialogsApp* dialogs = furi_record_open(RECORD_DIALOGS); + DialogMessage* message = dialog_message_alloc(); + dialog_message_set_header(message, "Hello world", 64, 20, AlignCenter, AlignTop); + dialog_message_set_text(message, "I'm test_app!", 64, 32, AlignCenter, AlignTop); + dialog_message_show(dialogs, message); + dialog_message_free(message); + furi_record_close(RECORD_DIALOGS); + + return 0; +} +``` + +## Using ViewPort {#app_dev_gui_viewport} + +This approach enables drawing on the screen and handling all button input. A single fullscreen ViewPort is created to render the display and process all events (e.g., button presses). + +\image html app_dev_gui_viewport.png width=700 + +**Pros:** + +- Easy: uses only one ViewPort instance without more complex GUI abstractions +- Fast and game-friendly +- Full control over what happens on the screen + +**Cons:** + +- No navigation helpers +- No reusable Views + +### Examples + +- Many of the [debug tools](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/debug) +- [BLE pairing dialog](https://github.com/flipperdevices/flipperzero-firmware/blob/dev/applications/services/bt/bt_service/bt.c) +- [Dolphin Passport](https://github.com/flipperdevices/flipperzero-firmware/blob/dev/applications/settings/dolphin_passport/passport.c) +- Most of the games + +## Using Views and Scenes {#app_dev_gui_views_scenes} + +This is the main approach for developing applications with complex, hierarchical UIs. Most Flipper Zero applications use this method. + +\image html app_dev_gui_views_and_scenes.jpg width=700 + +**Pros:** + +- Supports complex navigation +- View recycling +- A lot of reusable view modules available + +**Cons:** + +- Takes time to sink in +- Complex implementation + +### Examples + +- [Flipper Zero Desktop](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/services/desktop) +- [iButton app](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/main/ibutton) +- [Infrared app](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/main/infrared) +- [GPIO app](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/main/gpio) +- [NFC app](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/main/nfc) +- [RFID app](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/main/lfrfid) +- [Sub-GHz app](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/main/subghz) + +# Learn more (external resources) + +- [A Visual Guide to Flipper Zero GUI Modules by Christopher Hranj](https://brodan.biz/blog/a-visual-guide-to-flipper-zero-gui-components/) +- [Scenes Demo Application Tutorial by Derek Jamison](https://github.com/jamisonderek/flipper-zero-tutorials/tree/main/ui/basic_scenes#scenes-demo-application-tutorial) +- YouTube tutorials by Derek Jamison: + - [Using ViewPort for applications](https://www.youtube.com/watch?v=5QwwihbxkC8) + - [Creating UI using Scenes](https://www.youtube.com/watch?v=YbskaB6caqk&list=PLM1cyTMe-PYJaMQ6TWeK1mAWxORdjYJZ5&index=8) + - [SceneManager Best Practice](https://www.youtube.com/watch?v=vQAk7fC_no4) \ No newline at end of file diff --git a/documentation/app_dev/app_dev_your_first_app_in_c.md b/documentation/app_dev/app_dev_your_first_app_in_c.md new file mode 100644 index 000000000..bff9fc945 --- /dev/null +++ b/documentation/app_dev/app_dev_your_first_app_in_c.md @@ -0,0 +1,119 @@ +# Your first app in C {#app_dev_your_first_app_in_c} + +In this tutorial, you'll learn how to set up your development environment and generate an app template using uFBT. You'll also learn how to create simple apps and implement basic functionality using the GUI. Lastly, we'll explain how to build and run your app on Flipper Zero. + +## 1. Environment setup + +To develop applications for Flipper Zero, you'll need the device itself and a USB cable to connect it to your computer. You'll also need to install the following software on your Windows/MacOS/Linux system: + +- [uFBT](https://github.com/flipperdevices/flipperzero-ufbt) (”micro Flipper Build Tool”) — a version of [FBT](#fbt) that supports everything you need for app development. +- [Visual Studio Code](https://code.visualstudio.com/) — recommended IDE for work with uFBT. You may use other IDEs, but they will not be able to integrate directly with uFBT without additional manual configuration. + +## 2. Generate an app template + +1. Create a folder for your new app, name it as you want, for example `test_app`. +2. In this folder, open Terminal and run: `ufbt create APPID=test_app`. uFBT will generate the file structure required for the app. +3. Run `ufbt vscode_dist`. This will configure VS Code to allow building and debugging your Flipper Zero application directly from the IDE. + +> [!warning] +> `APPID` can only contain letters `a-z`, numbers `0-9`, and the symbol `_`. + +In the app folder, the file structure will looks as follows: + +``` +test_app/ +├── application.fam +├── test_app.c +├── test_app.png +├── .github/ +│ └── workflows/ +| └── build.yml +└── images/ + └── .gitkeep +``` + +> Here is a breakdown of the structure: +> - `images/.gitkeep` — a placeholder file used to ensure that the `images/` directory is tracked by Git, even if it's empty. +> - `images/` — the folder for storing images. +> - `.github/workflows/build.yml` — GitHub Actions configuration. [Learn more](https://github.com/marketplace/actions/build-flipper-application-package-fap). +> - `test_app.png` — the app icon. +> - `test_app.c` — the app main file, containing the app entry point. +> - `application.fam` — the app manifest that uFBT reads to find out how to build your app. [Learn more about FAM](#app_manifests). + +## 3. Template app code + +```c +#include +#include + +int32_t test_app_app(void* p) { + UNUSED(p); + FURI_LOG_I("TEST", "Hello world"); + FURI_LOG_I("TEST", "I'm test_app!"); + + return 0; +} +``` + +> Here is a breakdown: +> - `#include ` — Includes the main header file for FURI, a core component of the Flipper Zero firmware. +> - `#include ` — Needed if the app uses images. uFBT automatically converts PNG files into Flipper’s internal image format and generates this file. All you need to do is add your PNG files to the `images/` directory. +> - `int32_t` — You'd typically use this return type for the app's main function. +> - `UNUSED(p);` — A macro that silences compiler warnings about the unused `p` parameter. +> - `FURI_LOG_I` — A function that logs an `info` level message to the Flipper console. You can see these messages by opening the console (`ufbt cli`), then running the `log info` command. +> - `return 0;` — A return value of `0` indicates successful program termination (convention in C). + +## 4. Add a graphical UI (GUI) + +Open the application folder in Visual Studio Code (**File → Open Folder...**). + +> [!note] +> It is recommended to install all suggested VS Code extensions when opening the folder. + +Let's make the app a bit more advanced and display two lines on the screen: `Hello world` and `I'm test_app!`. Open the `test_app.c` file and replace its contents with the code below: + +```c +#include +#include +#include + +int32_t test_app_app(void* p) { + UNUSED(p); + DialogsApp* dialogs = furi_record_open(RECORD_DIALOGS); + DialogMessage* message = dialog_message_alloc(); + dialog_message_set_header(message, "Hello world", 64, 20, AlignCenter, AlignTop); + dialog_message_set_text(message, "I'm test_app!", 64, 32, AlignCenter, AlignTop); + dialog_message_show(dialogs, message); + dialog_message_free(message); + furi_record_close(RECORD_DIALOGS); + + return 0; +} +``` + +> This code utilizes the `Dialogs` GUI service that provides a system API. Learn more: [GUI in Apps](#app_dev_gui). + +## 5. Build and run the App + +1. Connect your Flipper Zero to your computer using a USB cable. +2. Run the `ufbt launch` command. It will build, upload, and start your app on Flipper. + +Alternatively, you can manually build and transfer your app to Flipper Zero: + +1. Build the app using the keyboard shortcut `Shift+Ctrl+B` on Win/Linux or `Shift+Cmd+B` on Mac. Your app with all the resources will be built into a self-contained FAP file. +2. In qFlipper, go to **File Manager → SD Card → apps → Examples** (create the folder if it doesn't exist), then simply drag and drop your built app into the folder. +3. Run your app. On your Flipper Zero, go to **Apps** → **Examples** and select your app. + +> [!note] +> To run your application on Flipper Zero, the firmware SDK version on the device must match the SDK version used by uFBT. +> If you get an SDK version mismatch error when launching your app, flash your Flipper Zero using the command: `ufbt flash_usb` + +If you used the log output method (`FURI_LOG_I`), you can see the logs by opening the console (`ufbt cli`), then running the `log` command. If you changed the default log level, use `log info` instead. + +## What's next? + +Congrats on completing your first app! + +If you feel your C programming skills are a bit rusty, we recommend referring to *The C Programming Language* by B. Kernighan and D. Ritchie, along with other resources listed on the [main page](#applications) of this section. + +**Next step:** [Debugging FAPs](#app_dev_debugging_faps) diff --git a/documentation/doxygen/applications.dox b/documentation/doxygen/applications.dox index 7c21a6e8d..39aba48ff 100644 --- a/documentation/doxygen/applications.dox +++ b/documentation/doxygen/applications.dox @@ -1,12 +1,38 @@ /** @page applications App Development -Flipper Zero features full support for custom apps which (usually) do not require any changes to the firmware. +Flipper Zero features full support for custom apps which (usually) do not require any changes to the firmware. Applications are written in C/C++ and run directly from [FAP files](#apps_on_sd_card) stored on the microSD card. Developers can publish their apps to the Apps Catalog, so that user can quickly install them via the Flipper mobile app or via the Flipper Lab web portal. For easy app development, a software tool called [uFBT](https://github.com/flipperdevices/flipperzero-ufbt) is available. -- @subpage apps_on_sd_card — Creating apps that can be dynamically loaded from the SD card -- @subpage app_manifests — How apps announce themselves to the system +> [!note] +> You can also [create scripts using JavaScript](#js). + +## Guides + +- @subpage app_dev_your_first_app_in_c — Create a simple app with GUI and run it on Flipper Zero +- @subpage app_dev_debugging_faps — How to debug apps using the Devboard or other SWD probes +- @subpage app_dev_furi_api — Capabilities and architecture of the Flipper system API +- @subpage app_dev_gui — How to make a GUI application +- @subpage app_publishing — Learn how to publish your app to the Apps Catalog + +## Examples + - @subpage app_examples — Various app examples, complete with the source code -- @subpage app_publishing — Learn how to publish and update your app in the Apps Catalog -*/ +- [Apps Catalog](https://lab.flipper.net/apps) — Check out community developers’ repos + +## Additional resources + +- @subpage apps_on_sd_card — General overview of the format and its capabilities +- @subpage app_manifests — Learn about app manifests +- *The C Programming Language* by B. Kernighan and D. Ritchie, if you have questions regarding the C language +- Video tutorials by Derek Jamison (YouTube): + - [Write your own app (modifying the Skeleton App)](https://www.youtube.com/watch?v=3OgPYkSm0EY) (part 1) + - [Modify the RGB values on the Flipper Zero’s internal LED](https://www.youtube.com/watch?v=TzPYAqJityM) (part 2) + - [Tips on Debugging apps](https://www.youtube.com/watch?v=YxY0ftHjvMI) + - [MacOS development environment](https://www.youtube.com/watch?v=RyMWqA5np0k) + - [Use MacBook to compile and upload apps](https://www.youtube.com/watch?v=DxIwOUjKfcg) + - [Submit your app to the Apps Catalog](https://www.youtube.com/watch?v=6ttjTcfrMg0) + - [How to Contribute to Flipper Zero applications](https://www.youtube.com/watch?v=kw-6QAOOZD0) + +*/ \ No newline at end of file diff --git a/documentation/images/app_dev_flipperzero_app_wifi_devboard_debug.webp b/documentation/images/app_dev_flipperzero_app_wifi_devboard_debug.webp new file mode 100644 index 000000000..c134aaa1c Binary files /dev/null and b/documentation/images/app_dev_flipperzero_app_wifi_devboard_debug.webp differ diff --git a/documentation/images/app_dev_gui_dialogs.jpg b/documentation/images/app_dev_gui_dialogs.jpg new file mode 100644 index 000000000..548bd4076 Binary files /dev/null and b/documentation/images/app_dev_gui_dialogs.jpg differ diff --git a/documentation/images/app_dev_gui_viewport.png b/documentation/images/app_dev_gui_viewport.png new file mode 100644 index 000000000..46d31b08b Binary files /dev/null and b/documentation/images/app_dev_gui_viewport.png differ diff --git a/documentation/images/app_dev_gui_views_and_scenes.jpg b/documentation/images/app_dev_gui_views_and_scenes.jpg new file mode 100644 index 000000000..219ca43ad Binary files /dev/null and b/documentation/images/app_dev_gui_views_and_scenes.jpg differ diff --git a/documentation/images/flipper_zero_architecture.png b/documentation/images/flipper_zero_architecture.png new file mode 100644 index 000000000..568668ec0 Binary files /dev/null and b/documentation/images/flipper_zero_architecture.png differ diff --git a/documentation/images/flipper_zero_hardware.png b/documentation/images/flipper_zero_hardware.png new file mode 100644 index 000000000..4acc7a44f Binary files /dev/null and b/documentation/images/flipper_zero_hardware.png differ