From dcc81ec8ccd1e4561ca77c291f6c3c89d9fadd18 Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@fastmail.fm>
Date: Mon, 27 Mar 2023 22:47:27 +0300
Subject: [PATCH] flipper app examples

---
 content/posts/2023/flipper-zero/make-app.md | 1552 +++++++++++++++++++
 1 file changed, 1552 insertions(+)
 create mode 100644 content/posts/2023/flipper-zero/make-app.md

diff --git a/content/posts/2023/flipper-zero/make-app.md b/content/posts/2023/flipper-zero/make-app.md
new file mode 100644
index 0000000..ec15a3d
--- /dev/null
+++ b/content/posts/2023/flipper-zero/make-app.md
@@ -0,0 +1,1552 @@
+---
+title: "📟 Как создать приложение для Flipper Zero"
+date: 2023-03-27T21:42:08+03:00
+draft: false
+tags: [tutorial, development, c, flipper zero]
+---
+
+**Это руководство полная копия
+[статьи](https://amperka.ru/blogs/projects/flipper-zero-app-programming-tutorial)
+с сайта amperka.ru**.  
+Автор: **Максим Данилин**. Написано: 25.01.2023 года.
+
+# Как создать приложение для Flipper Zero
+
+Привет!
+
+В этой статье мы разберёмся, как написать собственную
+программу-приложение для Flipper Zero!
+
+Сердцем гаджета Flipper Zero является 32-битный микроконтроллер STM32.
+Программирование Дельфина сильно отличается
+от программирования привычных нам Arduino.
+Помимо самого микроконтроллера во Флиппере есть радиомодуль,
+NFC-модуль, кардридер, модуль Bluetooth, дисплей,
+микросхема управления подсветкой и так далее.
+Эффективно управлять всеми этими устройствами
+в одном цикле `loop`, как это обычно выглядит
+в среде разработки Arduino, уже нельзя.
+
+На помощь приходит
+[операционная система реального времени](https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%80%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%B8)
+или RTOS (real-time operating system). RTOS разграничивает
+логические части всей программы в разные потоки
+и сама осуществляет переключение между ними,
+а также выделяет необходимые для работы потоков ресурсы.
+
+Так как Флиппер построен на чипе STM32, в нём используется, наверное, самая популярная операционка для этого типа микроконтроллеров —
+[FreeRTOS](https://ru.wikipedia.org/wiki/FreeRTOS).
+
+Мы не будем подробно разбирать, как реализована операционная система
+на Flipper Zero, а лучше сосредоточимся на написании приложений.
+
+**Это важно!** Проект Flipper Zero активно развивается,
+и на момент выхода данной статьи официальной документации
+по созданию собственных приложений нет, а сам API полностью не описан.
+Однако принцип построения приложений вполне понятен
+в процессе изучения исходного кода встроенных в Флиппер приложений.
+Вполне возможно, что со временем API изменится,
+и код из этой статьи станет неактуальным.
+Разработчики Flipper Zero обещают, что документация появится,
+когда стабилизируется API. Статья актуальна для прошивки Флиппера **0.75.0**.
+
+Прошивку можно собрать на следующих платформах:
+
+* Windows 10+ с PowerShell и Git (архитектура x86_64).
+* macOS 12+ с Command Line tools (архитектура x86_64 и arm64).
+* Ubuntu 20.04+ с `build-essential` и Git (архитектура x86_64).
+
+У пользователей macOS не должно быть проблем
+со сборкой прошивки благодаря [Homebrew](https://docs.brew.sh/Homebrew-on-Linux).
+Ну а если вы собираете прошивку на Windows и столкнулись с трудностями,
+попробуйте воспользоваться [WSL](https://ubuntu.com/wsl).
+
+Писать код для собственных приложений мы будем на языке программирования **C**
+на настольном компьютере под управлением Linux,
+а именно Ubuntu 22.04.1 LTS (Jammy Jellyfish).
+
+## Установка необходимого софта
+
+Перед тем как писать новое приложение,
+нам придётся научиться собирать всю прошивку микроконтроллера.
+
+Сперва скачаем и установим официальную программу
+[qFlipper](https://docs.flipperzero.one/basics/firmware-update#yK3zg)
+для работы с Флиппером через графический интерфейс.
+Мы будем использовать qFlipper для удобной загрузки
+наших готовых приложений на SD-карту во Флиппере.
+
+Скачиваем версию программы для OS Linux куда-нибудь,
+например в домашнюю директорию.
+На момент выхода статьи программа qFlipper имеет версию 1.2.2,
+а сам файл называется `qFlipper-x86_64-1.2.2.AppImage`.
+Также установите необходимую для работы программы библиотеку
+`libfuse2`, если её нет в вашей системе.
+
+```sh
+wget https://update.flipperzero.one/builds/qFlipper/1.2.2/qFlipper-x86_64-1.2.2.AppImage
+sudo apt install libfuse2
+```
+
+Установите разрешение на запуск qFlipper
+и добавьте в систему `udev` правила доступа
+к USB Serial-порту для обычного пользователя.
+Иначе понадобится вести разработку от лица суперпользователя,
+что небезопасно для всей системы в случае неосторожности.
+
+```sh
+sudo chmod +x qFlipper-x86_64-1.2.2.AppImage
+./qFlipper-x86_64-1.2.2.AppImage rules install
+```
+
+Запустите qFlipper и подключите ваш Flipper Zero к компьютеру по USB.
+
+```sh
+./qFlipper-x86_64-1.2.2.AppImage
+```
+
+Убедитесь, что ваш Флиппер появился в программе qFlipper,
+всё работает как положено и установлена свежая прошивка.
+
+![](/content/images/2023/flipper-app/1.png)
+
+Для быстрой и удобной установки необходимого софта
+понадобится диспетчер пакетов
+[Homebrew](https://docs.brew.sh/Homebrew-on-Linux).
+
+Установите Homebrew:
+
+```sh
+sudo apt install curl
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+
+После установки добавьте переменные окружения `PATH`,
+`MANPATH` для Homebrew.  
+Это можно сделать, добавив следующую строку в файле `.profile` для вашего юзера:
+
+```sh
+echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/$USER/.profile
+```
+
+Прошивка для Flipper Zero хранится в репозитории
+[flipperzero-firmware](https://github.com/flipperdevices/flipperzero-firmware)
+на GitHub.
+
+Склонируйте к себе репозиторий прошивки Flipper Zero со всеми модулями. Репозиторий займет чуть больше 2 ГБ пространства.
+
+```sh
+git clone --recursive https://github.com/flipperdevices/flipperzero-firmware.git
+```
+
+Установите перечисленный в описании репозитория софт:
+
+```sh
+sudo apt update
+sudo apt install openocd clang-format-13 dfu-util protobuf-compiler
+```
+
+Перейдите в директорию репозитория и установите
+все необходимые пакеты с помощью Homebrew:
+
+```sh
+cd flipperzero-firmware
+brew bundle --verbose
+```
+
+Готово! Прошивка для Флиппера, как и пользовательские приложения,
+собираются с помощью утилиты `fbt` (Flipper Build Tool).
+Для создания собственных приложений нет необходимости
+каждый раз собирать всю прошивку целиком,
+однако при первом запуске утилиты `fbt`
+будут скачаны необходимые `gcc-arm` тулчейны.
+
+Соберите прошивку:
+
+```sh
+./fbt
+```
+
+Все результаты сборки и бинарные файлы будут помещены в директорию `./dist`.
+
+## Пример 1. Простейшее приложение
+
+Создадим простейшее компилируемое приложение.
+
+Мы будем создавать приложение типа FAP (Flipper Application Package).
+Готовое приложение этого типа представляет собой файл формата `.fap`.
+По сути, `.fap` приложение — это исполняемый файл `.elf`
+с дополнительными встроенными данными.
+
+**Кстати!** Весь исходный код приложений
+из этой стати мы выложили на GitHub
+в репозитории [flipperzero-examples](https://github.com/amperka/flipperzero-examples).
+
+При создании пользовательские приложения помещаются
+в отдельные папки в специально организованную директорию `applications_user`:
+
+![](/content/images/2023/flipper-app/2.png)
+
+Придумайте имя для приложения. Мы назвали наше первое приложение `example_1`,
+этим же именем назвали и папку. В неё помещаются все файлы,
+которые относятся к вашему приложению: исходный код, изображения и прочее.
+
+В папке `example_1` создадим файл исходного кода на языке С — `example_1_app.c`.
+Вот как выглядит код простейшего приложения.
+
+```c
+#include <furi.h>
+
+int32_t example_1_app(void* p) {
+    UNUSED(p);
+    return 0;
+}
+```
+
+Конвенционально в приложении точкой входа является функция,
+которая имеет имя приложения и суффикс `app`.
+Точка входа в наше приложение — функция `example_1_app`.
+Главная функция традиционно возвращает код ошибки числом типа `int32_t`.
+Возвращаемый ноль сообщает об отсутствии ошибок.
+
+При компиляции кода для Флиппера любой `warning` воспринимается как ошибка.
+Да, ваш код должен быть чистеньким.
+Неиспользованные в функции аргументы вызывают `warning`,
+поэтому для обозначения неиспользуемого указателя `p`
+мы используем макрос `UNUSED`.
+Реализация данного макроса описана в заголовке `furi.h`.
+FURI расшифровывается как «Flipper Universal Registry Implementation».
+Этим заголовочным файлом мы, по сути, подключаем вce core API Флиппера.
+
+Нашему приложению понадобится иконка. Для пользовательских приложений,
+которые находятся на самом Флиппере в разделе **Applications**,
+в качестве иконок используются изображения PNG
+с глубиной цвета 1 бит (чёрно-белые) и размером 10×10 пикселей.
+
+Раздел **Apllications** с пользовательскими приложениями:
+
+![](/content/images/2023/flipper-app/3.png)
+
+Можно использовать одно из уже имеющихся изображений,
+но всегда лучше добавить что-то своё.
+В GIMP мы нарисовали вот такой смайл в чёрных очках:
+
+![](/content/images/2023/flipper-app/emoji_smile_icon_10x10px.png)
+
+Нарисовать свою иконку можно и в Paint.
+Файл изображения помещаем в папку нашего приложения `example_1`.
+
+Помимо исходного кода и иконки нам нужен
+файл манифеста приложения — `application.fam`.
+Этот файл является обязательным.
+Наш манифест приложения имеет следующий вид:
+
+```c
+App(
+    appid="example_1",
+    name="Example 1 application",
+    apptype=FlipperAppType.EXTERNAL,
+    entry_point="example_1_app",
+    cdefines=["APP_EXAMPLE_1"],
+    stack_size=1 * 1024,
+    order=90,
+    fap_icon="emoji_smile_icon_10x10px.png",
+    fap_category="Misc",
+)
+```
+
+Разберёмся, за что отвечают данные параметры.
+Параметры для всех видов приложений:
+
+* `appid` — строка, которая используется как **ID**
+приложения при конфигурации сборки `fbt`,
+а также для разрешения зависимостей и конфликтов.
+Есть смысл использовать здесь непосредственно имя вашего приложения.
+* `name` — читабельное имя приложения,
+которое будет отображаться в меню приложений на Флиппере.
+* `apptype` — тип приложения.
+Существуют разные типы для тестовых, системных, сервисных,
+архивных приложений и для приложений,
+которые должны быть в главном меню Флиппера.
+В конце сборки наше приложение будет типа FAP.
+Для приложений подобного рода используется
+тип `EXTERNAL` (`FlipperAppType.EXTERNAL`).
+* `entry_point` — точка входа приложения.
+Имя главной функции, с выполнения которой начнётся работа вашего приложения.
+Если в качестве точки входа вы хотите использовать функцию **C++**,
+то она должна быть обёрнута в `extern "C"`.
+* `cdefines` — препроцессорное глобальное объявление для других приложений,
+когда текущее приложение включено в активную конфигурацию сборки.
+* `stack_size` — размер стека в байтах, выделяемый для приложения при его запуске.
+Обратите внимание, что выделение слишком маленького стека приведёт
+к сбою системы из-за переполнения стека,
+а выделение слишком большого уменьшит полезный объём
+`heap`-памяти для обработки данных приложениями.
+* `order` — порядок приложения внутри своей группы
+при сортировке записей. Чем ниже значение,
+тем выше по списку окажется ваше приложение.
+
+Параметры для внешних приложений типа `EXTERNAL`:
+
+* `fap_icon` — путь и имя PNG-изображения размером 10×10 пикселей,
+которое используется как иконка. Здесь пишем путь и имя нашей PNG-иконки.
+* `fap_category` — подкатегория приложения.
+Определяет путь `.fap`-файла в папке приложений в файловой системе.
+Может быть пустым. Мы поместили наше приложение в категорию **Misc** на Флиппере.
+
+Если все файлы на месте, мы можем начинать сборку приложения.
+
+![](/content/images/2023/flipper-app/4.png)
+
+В терминале переходим в корневую директорию прошивки `flipperzero-firmware`.
+Сборка осуществляется командой `./fbt fap_{APPID}`,
+где `{APPID}` — это **ID**, указанный в `.fam`-файле манифеста приложения.
+
+```sh
+./fbt fap_example_1
+```
+
+Сбилдить все имеющиеся в прошивке приложения FAP можно командой `./fbt faps`.
+
+Готовое FAP-приложение находится в директории `build`
+в скрытой директории `.extapps`.
+Наш файл приложения называется `example_1.fap`.
+
+![](/content/images/2023/flipper-app/5.png)
+
+Используя программу qFlipper, перенесём файл приложения
+на SD-карту в директорию `/apps/Misc`.
+Файл можно перенести мышкой прямо в окно программы.
+
+![](/content/images/2023/flipper-app/6.png)
+
+После последнего обновления все приложения
+FAP можно сбилдить и перенести на Флиппер одной командой из консоли:
+
+```sh
+./fbt fap_deploy
+```
+
+Готово! Теперь наше приложение появилось на Флиппере в разделе `Misc`:
+
+![](/content/images/2023/flipper-app/7.png)
+
+Главная функция `example_1_app()` сейчас пуста,
+поэтому при запуске приложения программа просто
+завершит свою работу и мы не увидим никаких изменений на экране.
+
+Смотреть видео: https://youtu.be/qfpTYmIwJbA.
+
+Как видно, ваше приложение может вовсе не иметь графического интерфейса
+и отработать как бы «за кулисами».
+Но у нашего Флиппера есть экранчик,
+поэтому нельзя не сделать графический интерфейс.
+
+## Пример 2. Графический интерфейс
+
+Добавим нашему приложению графический интерфейс.
+
+Чтобы не путаться между пунктами статьи,
+мы сделаем новое приложение с именем `example_2`,
+но по сути будем продолжать предыдущее приложение.
+
+Новое приложение поместим в директорию
+`applications_user/example_2`.
+Соответственно, файл с исходным кодом приложения имеет имя `example_2_app.c`.
+
+Для создания графического интерфейса вам придётся значительно расширить
+исходный код приложения. Создадим в директории приложения
+заголовочный файл `example_2_app.h` для описания типов данных,
+структур и прототипов функций.
+
+Включим уже знакомый нам заголовочный файл ядра `furi.h`.
+Для графического интерфейса понадобится заголовок `gui/gui.h`.
+
+```c
+#pragma once
+
+#include <furi.h>
+#include <gui/gui.h>
+
+struct Example2App {
+    Gui* gui;
+    ViewPort* view_port;
+};
+
+typedef struct Example2App Example2App;
+```
+
+В заголовочном файле мы создали структуру `Example2App`,
+которая будет хранить указатели на все важные компоненты нашего приложения,
+и ввели новый тип для этой структуры.
+В структуре нашего приложения есть указатели
+на графический интерфейс `Gui` и на `ViewPort`.
+`ViewPort` — это структура, которая используется
+для отрисовки единичного полного экрана.
+К ней привязываются указатели на `callback`-функции
+отрисовки графических объектов на экране
+и функции обработки различных событий (`Events`), например нажатие клавиш.
+
+Исходный код приложения в файле `example_2_app.c` теперь выглядит так:
+
+```c
+#include "example_2_app.h"
+
+#include <furi.h>
+#include <gui/gui.h>
+
+Example2App* example_2_app_alloc() {
+    Example2App* app = malloc(sizeof(Example2App));
+
+    app->view_port = view_port_alloc();
+
+    app->gui = furi_record_open(RECORD_GUI);
+    gui_add_view_port(app->gui, app->view_port, GuiLayerFullscreen);
+
+    return app;
+}
+
+void example_2_app_free(Example2App* app) {
+    furi_assert(app);
+
+    view_port_enabled_set(app->view_port, false);
+    gui_remove_view_port(app->gui, app->view_port);
+    view_port_free(app->view_port);
+
+    furi_record_close(RECORD_GUI);
+}
+
+int32_t example_2_app(void *p) {
+    UNUSED(p);
+    Example2App* app = example_2_app_alloc();
+
+    furi_delay_ms(10000);
+
+    example_2_app_free(app);
+    return 0;
+}
+```
+
+Разберёмся, что есть что. Программирование под Флиппер
+очень требовательно к ресурсам операционной системы,
+и нам нужно за этим следить.
+Это необходимо, чтобы наше приложение работало правильно
+и не вызывало зависаний и глюков. Поэтому,
+если мы хотим что-то добавить в приложение или интерфейс,
+то самостоятельно выделяем под это память, а когда удаляем — освобождаем.
+
+Описываем функцию, которая будет выделять память
+под структуру нашего приложения и инициализировать его:
+
+```c
+Example2App* example_2_app_alloc()
+```
+
+И функцию, которая освобождает занятую приложением память:
+
+```c
+void example_2_app_free(Example2App* app)
+```
+
+В функции выделения памяти мы сначала выделяем память
+под структуру `app` типа `Example2App` для нашего приложения.
+Затем выделяем память для `view_port`:
+
+```c
+app->view_port = view_port_alloc();
+```
+
+Получаем указатель на текущий `Gui` Флиппера — `gui`.
+Перехватываем управление `Gui` и говорим операционной системе,
+что у нашего приложения есть некий интерфейс
+c отрисовкой экрана `view_port` и мы хотим его отобразить.
+
+```c
+app->gui = furi_record_open(RECORD_GUI);
+gui_add_view_port(app->gui, app->view_port, GuiLayerFullscreen);
+```
+
+В функции освобождения памяти мы, соответственно,
+работаем в обратном направлении. Выключаем рендер нашего `view_port`:
+
+```c
+view_port_enabled_set(app->view_port, false);
+```
+
+Отключаем `view_port` от `Gui` и освобождаем память, занятую `view_port`:
+
+```c
+gui_remove_view_port(app->gui, app->view_port);
+view_port_free(app->view_port);
+```
+
+В конце мы передаём управление графическим интерфейсом
+от нашего приложения обратно операционной системе:
+
+```c
+furi_record_close(RECORD_GUI);
+```
+
+Так как мы пишем на С и регулярно используем указатели,
+в ядре FURI существует крайне полезная для нас функция `furi_assert()`,
+которая экстренно остановит работу приложения и выдаст сообщение,
+если мы вдруг передадим указатель на пустой участок памяти.
+
+Точкой входа приложения на этот раз будет функция с именем `example_2_app`:
+
+```c
+int32_t example_2_app(void *p) {
+    UNUSED(p);
+    Example2App* app = example_2_app_alloc();
+
+    furi_delay_ms(10000);
+
+    example_2_app_free(app);
+    return 0;
+}
+```
+
+При запуске приложения мы аллоцируем память для структуры приложения,
+перехватываем управление `Gui` и рендерим наш `ViewPort`.
+После этого мы простаиваем 10 секунд функцией `furi_delay_ms()`,
+освобождаем все занятые ресурсы, передаём управление `Gui`
+операционной системе и завершаем работу приложения.
+
+Кроме того, у нас получился хороший шаблон
+с выделением/освобождением памяти для будущих приложений.
+
+Иконку для приложения оставляем прежней.
+
+Вносим правки в файл манифеста приложения `application.fam`.
+Здесь всё остаётся прежним, за исключением нового параметра `requires`.
+В этом параметре мы указываем,
+что для работы нашему приложению нужен сервис,
+отвечающий за графические интерфейсы `gui`.
+
+```c
+App(
+    appid="example_2",
+    name="Example 2 application",
+    apptype=FlipperAppType.EXTERNAL,
+    entry_point="example_2_app",
+    cdefines=["APP_EXAMPLE_2"],
+    requires=[
+        "gui",
+    ],
+    stack_size=1 * 1024,
+    order=90,
+    fap_icon="emoji_smile_icon_10x10px.png",
+    fap_category="Misc",
+)
+```
+
+Собираем новое приложение:
+
+```sh
+./fbt fap_example_2
+```
+
+Используя программу qFlipper, перенесём новое
+FAP-приложение из папки `build` на SD-карту в папку `/apps/Misc`.
+Или используем терминал и команду `./fbt fap_deploy`.
+
+Находим новое приложение в списке и запускаем его:
+
+![](/content/images/2023/flipper-app/8.png)
+
+Сейчас для нашего `ViewPort` не описаны конкретные функции
+отрисовки графических объектов.
+Программа приложения просто отобразит пустой графический интерфейс
+в течение 10 секунд и завершит работу.
+
+Смотреть видео: https://youtu.be/7LlnIKkdM8s.
+
+## Пример 3. Текст и изображения
+
+Добавим в интерфейс нашего приложения какие-нибудь графические объекты.
+Некоторые графические объекты могут иметь довольно сложную реализацию,
+например: меню, выпадающие списки, файловые браузеры,
+различные формы ввода. Мы же начнём с простых объектов.
+
+Снова создадим копию предыдущего приложения,
+но теперь под именем `example_3`.
+
+Для рендера графических объектов создадим
+в исходном файле `example_3_app.c` `callback`-функцию
+отрисовки `example_3_app_draw_callback`:
+
+```c
+static void example_3_app_draw_callback(Canvas* canvas, void* ctx) {
+    UNUSED(ctx);
+    canvas_clear(canvas);
+}
+```
+
+Callback-функция имеет определённую сигнатуру
+и два аргумента `canvas`, то есть «холст»,
+на котором мы будем рисовать, и контекст `ctx`.
+Контекстом могут быть другие данные,
+в зависимости от которых рендерится `canvas`.
+Пока что мы оставим контекст неиспользованным, то есть `UNUSED`.
+
+Первым делом перед рендером очистим наш экран:
+
+```c
+canvas_clear(canvas);
+```
+
+Графические объекты размещаются на экране согласно системе координат.
+Экран Флиппера имеет разрешение **128×64**,
+а начало координат находится в левом верхнем углу:
+
+![](/content/images/2023/flipper-app/9.png)
+
+Добавим текст в интерфейс нашего приложения.
+
+Подключим заголовочный файл с графическими текстовыми элементами
+`gui/elements.h`. Текст отрисовывается функцией
+`canvas_draw_str()` с указанием координаты (`x` и `y`) исходной точки текста
+и, собственно, самой строки. Возможен выбор шрифта для текста.
+Шрифт устанавливается функцией `canvas_set_font()`.
+Шрифт может быть главным — `FontPrimary` (высота 8 пикселей),
+второстепенным — `FontSecondary` (высота 7 пикселей),
+`FontKeyboard` или `FontBigNumbers`.
+При желании вы сможете создать и собственный шрифт.
+
+Например, напишем главным шрифтом строку
+«**This is an example app!**» вверху экрана
+и примерно по центру, по координатам (`4` и `8`).
+По умолчанию начало координат текста находится в левом нижнем углу.
+
+```c
+canvas_set_font(canvas, FontPrimary);
+canvas_draw_str(canvas, 4, 8, "This is an example app!");
+```
+
+В заголовочном файле `gui/elements.h` можно найти различные имплементации
+для отрисовки простых элементов, скроллбаров, кнопок или выравнивания текста.
+
+Например, снизу от нашей первой надписи разместим длинный двухстрочный текст
+«**Some long long long long aligned multiline text**»,
+написанный второстепенным шрифтом и автоматически выровненный
+по верхней и правой границам.
+Для этого воспользуемся функцией `elements_multiline_text_aligned()`:
+
+```c
+canvas_set_font(canvas, FontSecondary);
+elements_multiline_text_aligned(canvas, 127, 15, AlignRight, AlignTop, "Some long long long long \n aligned multiline text");
+```
+
+Теперь разберёмся, как вывести на экран картинку.
+
+Для эксперимента мы нарисовали чёрно-белый логотип Амперки
+в PNG разрешением в **128×35** пикселей:
+
+![](/content/images/2023/flipper-app/amperka_ru_logo_128x35px.png)
+
+В папке с вашим приложением создайте специальную директорию
+для хранения изображений. Например, мы назвали свою папку `images`.
+В данную папку поместите все изображения,
+которые планируете выводить на экран.
+Мы назвали нашу картинку `amperka_ru_logo_128x35px.png`
+и поместили её в созданную папку `images`:
+
+![](/content/images/2023/flipper-app/10.png)
+
+В манифесте приложения `application.fam`
+добавляем новый параметр `fap_icon_assets`
+с путём до директории с изображениями:
+
+```c
+App(
+    appid="example_3",
+    name="Example 3 application",
+    apptype=FlipperAppType.EXTERNAL,
+    entry_point="example_3_app",
+    cdefines=["APP_EXAMPLE_3"],
+    requires=[
+        "gui",
+    ],
+    stack_size=1 * 1024,
+    order=90,
+    fap_icon="emoji_smile_icon_10x10px.png",
+    fap_category="Misc",
+    fap_icon_assets="images",
+)
+```
+
+Теперь при сборке приложения все изображения из папки `images`
+будут переведены в код, а сам код будет сгенерирован
+в специальном заголовочном файле с именем `{APPID}_icons.h`,
+где `{APPID}` — это **ID**, указанный в `.fam`-файле манифеста приложения.
+
+Наше приложение имеет **ID** `example_3`,
+значит заголовочный файл получит имя `example_3_icons.h`.
+Добавим данный файл в заголовок приложения:
+
+```c
+#include "example_3_icons.h"
+```
+
+Теперь мы можем получить указатель на область памяти,
+где хранится наше изображение в виде массива байтов.
+Имя указателя будет соответствовать имени самого файла изображения,
+но с приставкой `I_ИМЯ_ВАШЕГО_ФАЙЛА`.
+Для нашей картинки с именем `amperka_ru_logo_128x35px.png` имя указателя будет
+`I_amperka_ru_logo_128x35px`.
+
+Теперь, имея адрес изображения, мы можем отрендерить его
+на экране функцией `canvas_draw_icon()`.
+Выведем изображение внизу экрана по координатам (`0` и `29`):
+
+```c
+canvas_draw_icon(canvas, 0, 29, &I_amperka_ru_logo_128x35px);
+```
+
+Пока что хватит графических элементов.
+Результат должен выглядеть следующим образом:
+
+![](/content/images/2023/flipper-app/11.png)
+
+Наша `callback`-функция отрисовки готова,
+и её необходимо привязать к структуре `ViewPort` нашего приложения.
+Это нужно сделать в функции инициализации нашего приложения
+сразу после выделения памяти под `ViewPort`.
+В качестве контекста мы ничего не отправляем (`NULL`).
+После привязки первый раз `callback`-функция будет выполнена автоматически.
+
+```c
+view_port_draw_callback_set(app->view_port, example_3_app_draw_callback, NULL);
+```
+
+Заголовочный файл нашего третьего приложения не изменился,
+за исключением имени приложения и подключаемого заголовка с изображениями.
+
+Код `example_3_app.h`:
+
+```c
+#pragma once
+
+#include <furi.h>
+#include <gui/gui.h>
+
+#include "example_3_icons.h"
+
+struct Example3App {
+    Gui* gui;
+    ViewPort* view_port;
+};
+
+typedef struct Example3App Example3App;
+```
+
+Код `example_3_app.с`:
+
+```c
+#include "example_3_app.h"
+
+#include <furi.h>
+#include <gui/gui.h>
+
+#include <gui/elements.h>
+
+static void example_3_app_draw_callback(Canvas* canvas, void* ctx) {
+    UNUSED(ctx);
+
+    canvas_clear(canvas);
+
+    canvas_draw_icon(canvas, 0, 29, &I_amperka_ru_logo_128x35px);
+
+    canvas_set_font(canvas, FontPrimary);
+    canvas_draw_str(canvas, 4, 8, "This is an example app!");
+
+    canvas_set_font(canvas, FontSecondary);
+    elements_multiline_text_aligned(canvas, 127, 15, AlignRight, AlignTop, "Some long long long long \n aligned multiline text");
+}
+
+Example3App* example_3_app_alloc() {
+    Example3App* app = malloc(sizeof(Example3App));
+
+    app->view_port = view_port_alloc();
+
+    view_port_draw_callback_set(app->view_port, example_3_app_draw_callback, NULL);
+
+    app->gui = furi_record_open(RECORD_GUI);
+    gui_add_view_port(app->gui, app->view_port, GuiLayerFullscreen);
+
+    return app;
+}
+
+void example_3_app_free(Example3App* app) {
+    furi_assert(app);
+
+    view_port_enabled_set(app->view_port, false);
+    gui_remove_view_port(app->gui, app->view_port);
+    view_port_free(app->view_port);
+
+    furi_record_close(RECORD_GUI);
+}
+
+int32_t example_3_app(void *p) {
+    UNUSED(p);
+    Example3App* app = example_3_app_alloc();
+
+    furi_delay_ms(10000);
+
+    example_3_app_free(app);
+    return 0;
+}
+```
+
+Главную функцию приложения `example_3_app` оставляем как есть.
+Приложение снова отработает 10 секунд и завершит свою работу,
+но на этот раз у нас будет графика.
+
+Собираем новое приложение:
+
+```sh
+./fbt fap_example_3
+```
+
+Используя программу qFlipper, перенесём новое FAP-приложение
+из папки `build` на SD-карту в папку `/apps/Misc`.
+Или используем терминал и команду `./fbt fap_deploy`.
+
+Находим новое приложение в списке и запускаем его:
+
+![](/content/images/2023/flipper-app/12.png)
+
+Смотреть видео: https://youtu.be/RNyTfBK4074.
+
+## Пример 4. Кнопки
+
+Разберёмся, как обрабатывать нажатия кнопок на Флиппере.
+
+Продолжаем предыдущее приложение под новым именем `example_4`.
+
+Для использования кнопок нам понадобится очередь сообщений
+(`MessageQueue`) и ещё одна `callback`-функция для обработки этой очереди.
+
+**Зачем нужна очередь сообщений?**
+Поскольку за нас работает операционная система,
+то `callback`-функция ввода с кнопок, как и `callback`-функция
+рендера графики выполняется в контексте других потоков ОС Flipper Zero,
+а не в потоке нашего приложения. Поток, отвечающий за нажатие кнопок,
+не может вызвать какую-либо функцию напрямую из нашего приложения.
+Но потоки могут отправлять друг другу сообщения
+в любой момент выполнения, этим мы и воспользуемся.
+
+Добавляем в структуру нашего приложения `Example4App`
+очередь `event_queue` типа `FuriMessageQueue`:
+
+```c
+struct Example4App {
+    Gui* gui;
+    ViewPort* view_port;
+    FuriMessageQueue* event_queue;
+};
+```
+
+В функции инициализации приложения `example_4_app_alloc()`
+выделяем память под новую очередь.
+
+```c
+app->event_queue = furi_message_queue_alloc(8, sizeof(InputEvent));
+```
+
+Наша очередь будет на 8 сообщений типа `InputEvent`,
+который отвечает за нажатие клавиш.
+Структуры данных и функции для работы с сообщениями от кнопок
+находятся в заголовочном файле `input/input.h`.
+
+В функции освобождения памяти нашего приложения,
+соответственно, освобождаем занятую очередью память.
+
+```c
+furi_message_queue_free(app->event_queue);
+```
+
+Теперь создадим `callback`-функцию для обработки этой очереди.
+
+```c
+static void example_4_app_input_callback(InputEvent* input_event, void* ctx) {
+    furi_assert(ctx);
+
+    FuriMessageQueue* event_queue = ctx;
+    furi_message_queue_put(event_queue, input_event, FuriWaitForever);
+}
+```
+
+Как и в случае с `callback`-функцией отрисовки, эта имеет два аргумента:
+`input_event` и контекст `ctx`. Событие `input_event` сигнализирует
+о каком-либо взаимодействии с кнопками. В отличие от функции отрисовки,
+в этот раз контекст не пустой. Мы положили в контекст очередь сообщений
+нашего приложения. Таким образом актуальные события ввода
+с кнопок окажутся в потоке нашего приложения.
+
+Привязываем новую `callback`-функцию к графическому интерфейсу `ViewPort`
+нашего приложения. В качестве контекста указываем очередь сообщений
+приложения `event_queue`:
+
+```c
+view_port_input_callback_set(app->view_port, example_4_app_input_callback, app->event_queue);
+```
+
+Готово! Теперь информация о состоянии кнопок находится
+в нашем распоряжении, и её можно обработать.
+
+Сейчас наше приложение работает 10 секунд,
+а затем завершает работу. Давайте сделаем так, чтобы приложение закрывалось
+не автоматически, а при нажатии на клавишу «**Назад**» на Флиппере.
+
+Обработчик сообщений из очереди напишем в главной функции нашего приложения
+(точке входа) в бесконечном цикле:
+
+```c
+while (1) {
+    if (furi_message_queue_get(app->event_queue, &event, 100) == FuriStatusOk) {
+        if (event.type == InputTypePress) {
+            if (event.key == InputKeyBack)
+                break;
+        }
+    }
+}
+```
+
+Пока очередь пуста, крутимся в бесконечном цикле.
+Если в нашей очереди есть событие (`FuriStatusOk`),
+нажалась кнопка (`InputTypePress`),
+и это была кнопка «Назад» (`InputKeyBack`),
+то выходим из цикла и, как следствие, движемся к завершению работы приложения.
+
+Код `example_4_app.h`:
+
+```c
+#pragma once
+
+#include <furi.h>
+#include <gui/gui.h>
+
+#include "example_4_icons.h"
+
+struct Example4App {
+    Gui* gui;
+    ViewPort* view_port;
+    FuriMessageQueue* event_queue;
+};
+
+typedef struct Example4App Example4App;
+```
+
+Код `example_4_app.с`:
+
+```c
+#include "example_4_app.h"
+
+#include <furi.h>
+#include <gui/gui.h>
+#include <gui/elements.h>
+
+#include <input/input.h>
+
+static void example_4_app_draw_callback(Canvas* canvas, void* ctx) {
+    UNUSED(ctx);
+
+    canvas_clear(canvas);
+
+    canvas_draw_icon(canvas, 0, 29, &I_amperka_ru_logo_128x35px);
+
+    canvas_set_font(canvas, FontPrimary);
+    canvas_draw_str(canvas, 4, 8, "This is an example app!");
+
+    canvas_set_font(canvas, FontSecondary);
+    elements_multiline_text_aligned(canvas, 127, 15, AlignRight, AlignTop, "Some long long long long \n aligned multiline text");
+}
+
+static void example_4_app_input_callback(InputEvent* input_event, void* ctx) {
+    furi_assert(ctx);
+
+    FuriMessageQueue* event_queue = ctx;
+    furi_message_queue_put(event_queue, input_event, FuriWaitForever);
+}
+
+Example4App* example_4_app_alloc() {
+    Example4App* app = malloc(sizeof(Example4App));
+
+    app->view_port = view_port_alloc();
+    app->event_queue = furi_message_queue_alloc(8, sizeof(InputEvent));
+
+    view_port_draw_callback_set(app->view_port, example_4_app_draw_callback, NULL);
+    view_port_input_callback_set(app->view_port, example_4_app_input_callback, app->event_queue);
+
+    app->gui = furi_record_open(RECORD_GUI);
+    gui_add_view_port(app->gui, app->view_port, GuiLayerFullscreen);
+
+    return app;
+}
+
+void example_4_app_free(Example4App* app) {
+    furi_assert(app);
+
+    view_port_enabled_set(app->view_port, false);
+    gui_remove_view_port(app->gui, app->view_port);
+    view_port_free(app->view_port);
+
+    furi_message_queue_free(app->event_queue);
+
+    furi_record_close(RECORD_GUI);
+}
+
+int32_t example_4_app(void *p) {
+    UNUSED(p);
+    Example4App* app = example_4_app_alloc();
+
+    InputEvent event;
+
+    while (1) {
+        if (furi_message_queue_get(app->event_queue, &event, 100) == FuriStatusOk) {
+            if (event.type == InputTypePress) {
+                if (event.key == InputKeyBack)
+                    break;
+            }
+        }
+    }
+
+    example_4_app_free(app);
+    return 0;
+}
+```
+
+Собираем новое приложение и переносим его на Flipper Zero.
+
+```sh
+./fbt fap_example_4
+./fbt fap_deploy
+```
+
+![](/content/images/2023/flipper-app/13.png)
+
+Смотреть видео: https://youtu.be/PlClOH5_yB0.
+
+Изменим наше приложение и добавим ещё пару кнопок.
+
+Например, будем по-разному рендерить изображение на экране
+в зависимости от нажатой кнопки.
+
+Пусть у нас будет три состояния интерфейса:
+рендерится только текст, рендерится только изображение,
+либо рендерится и то, и другое.
+Переключаться между этими режимами будем при долгом нажатии
+на кнопки «Влево» или «Вправо».
+
+Введём в структуру нашего приложения переменную,
+которая будет отвечать за то, какой режим рендерится в данный момент.
+Назовем её `draw_mode`.
+
+```c
+typedef enum {
+    DRAW_ALL,
+    DRAW_ONLY_TEXT,
+    DRAW_ONLY_PICTURES,
+    TOTAL_DRAW_MODES = 3,
+} DrawMode;
+
+struct Example4App {
+    Gui* gui;
+    ViewPort* view_port;
+    FuriMessageQueue* event_queue;
+
+    DrawMode draw_mode;
+};
+```
+
+Чтобы `draw_mode` был доступен для нашей `callback`-функции рендера экрана,
+передадим в неё указатель на всю структуру приложения `app` в качестве контекста:
+
+```c
+view_port_draw_callback_set(app->view_port, example_4_app_draw_callback, app);
+```
+
+Теперь изменим саму `callback`-функцию рендера.
+Пусть разные графические объекты рендерятся
+в зависимости от текущего значения `draw_mode`:
+
+```c
+static void example_4_app_draw_callback(Canvas* canvas, void* ctx) {
+    furi_assert(ctx);
+    Example4App* app = ctx;
+
+    canvas_clear(canvas);
+
+    DrawMode mode = app->draw_mode;
+    if (mode == DRAW_ONLY_PICTURES || mode == DRAW_ALL)
+        canvas_draw_icon(canvas, 0, 29, &I_amperka_ru_logo_128x35px);
+    if (mode == DRAW_ONLY_TEXT|| mode == DRAW_ALL) {
+        canvas_set_font(canvas, FontPrimary);
+        canvas_draw_str(canvas, 4, 8, "This is an example app!");
+        canvas_set_font(canvas, FontSecondary);
+        elements_multiline_text_aligned(canvas, 127, 15, AlignRight, AlignTop, "Some long long long long \n aligned multiline text");
+    }
+}
+```
+
+В заключении обработаем новые события кнопок
+в бесконечном цикле главной функции приложения:
+
+```c
+while (1) {
+    if (furi_message_queue_get(app->event_queue, &event, 100) == FuriStatusOk) {
+        if (event.type == InputTypePress) {
+            if (event.key == InputKeyBack)
+                break;
+        } else if (event.type == InputTypeLong) {
+            DrawMode mode = app->draw_mode;
+            if (event.key == InputKeyLeft)
+                app->draw_mode = (mode - 1 + TOTAL_DRAW_MODES) % TOTAL_DRAW_MODES;
+            else if (event.key == InputKeyRight)
+                app->draw_mode = (mode + 1) % TOTAL_DRAW_MODES;
+
+            view_port_update(app->view_port);
+        }
+    }
+}
+```
+
+Теперь если будет зарегистрировано событие длительного нажатия
+(`InputTypeLong`) кнопки «Влево» (`InputKeyLeft`)
+или «Вправо» (`InputKeyRight`), наш режим отрисовки
+`app->draw_mode` будет меняться от `0` до `TOTAL_DRAW_MODES`.
+
+Функция `view_port_update()` запускает ререндер нашего интерфейса `view_port`.
+Функция не обязательная, операционная система сама производит ререндер
+раз в несколько миллисекунд, но мы можем форсировать это функцией.
+
+Соберём обновлённое приложение, загрузим его на Флиппер,
+запустим и посмотрим результат:
+
+Смотреть видео: https://youtu.be/7EBGrZNekXM.
+
+## Пример 5. Оповещения
+
+Помимо дисплея Flipper Zero имеет и другой способ сообщать
+нам о происходящих в программе событиях — оповещения
+(`Notifications`). Нам доступно управление следующими встроенными девайсами:
+
+* RGB-cветодиод.
+* Вибромотор.
+* Пьезопищалка.
+
+Продолжаем предыдущее приложение под новым именем `example_5`.
+
+За оповещения в операционной системе Flipper Zero отвечает отдельный поток,
+и мы не можем вызывать его функции из нашего приложения напрямую.
+Но мы можем отсылать в этот поток сообщения — `NotificationMessage`.
+Из этих сообщений формируются последовательности `NotificationSequence`,
+которые уже непосредственно отправляются в поток.
+
+Описание структур сообщений и их последовательностей
+находится в заголовочном файле `notification/notification_messages.h`,
+добавляем его в наше приложение.
+
+В главной структуре указываем, что наше приложение
+собирается использовать оповещения `NotificationApp`:
+
+```c
+struct Example5App {
+    Gui* gui;
+    ViewPort* view_port;
+    FuriMessageQueue* event_queue;
+    NotificationApp* notifications;
+
+    DrawMode draw_mode;
+};
+```
+
+В функции инициализации приложения `example_5_app_alloc()`
+перехватываем управление оповещениями:
+
+```c
+app->notifications = furi_record_open(RECORD_NOTIFICATION);
+```
+
+А в функции освобождения памяти приложения
+`example_5_app_free` отдаём управление обратно:
+
+```c
+furi_record_close(RECORD_NOTIFICATION);
+```
+
+Можно использовать и готовые последовательности сообщений,
+а можно сделать их самостоятельно, это несложно.
+Вы можете изучить соответствующий заголовочный файл
+и какие последовательности там доступны.
+
+Создадим нашу последовательность сообщений для управления RGB-светодиодом.
+Назовем её `example_led_sequence` и разместим в заголовке нашего приложения.
+
+Пусть светодиод мигнёт фиолетовым цветом **RGB(255, 0, 255)** три раза
+с интервалом **500 мс**, а затем погаснет.
+Сообщение будет выглядеть следующим образом:
+
+```c
+const NotificationSequence example_led_sequence = {
+    &message_red_255,
+    &message_blue_255,
+    &message_delay_500,
+    &message_red_0,
+    &message_blue_0,
+    &message_delay_500,
+    &message_red_255,
+    &message_blue_255,
+    &message_delay_500,
+    &message_red_0,
+    &message_blue_0,
+    &message_delay_500,
+    &message_red_255,
+    &message_blue_255,
+    &message_delay_500,
+    &message_red_0,
+    &message_blue_0,
+    NULL,
+};
+```
+
+Последовательности сообщений для управления вибромотором
+составляются схожим образом.
+Создадим последовательность для вибромотора
+с именем `example_vibro_sequence` и разместим её в заголовке.
+
+Пусть по сигналу наш вибромотор включится на 3 секунды, а затем выключится. Последовательность сообщений будет выглядеть так:
+
+```c
+const NotificationSequence example_vibro_sequence = {
+    &message_vibro_on,
+    &message_do_not_reset,
+    &message_delay_1000,
+    &message_delay_1000,
+    &message_delay_1000,
+    &message_vibro_off,
+    NULL,
+};
+```
+
+По умолчанию максимально долгая описанная задержка составляет 1 секунду,
+поэтому мы три раза использовали сообщение `message_delay_1000`.
+
+Теперь создадим последовательность сообщений для пьезодинамика.
+Назовем её `example_sound_sequence`.
+
+Здесь нам уже доступна полная MIDI-клавиатура прямо из коробки!
+Описание всех нот и их частот можно посмотреть
+в заголовочном файле `notification_messages_notes.h`.
+
+Добавим в наш Флиппер классическую мелодию звонка телефонов **Nokia**:
+
+![](/content/images/2023/flipper-app/sound.png)
+
+Последовательность сообщений с данной мелодией выглядит так:
+
+```c
+const NotificationSequence example_sound_sequence = {
+    &message_note_e5,
+    &message_delay_100,
+    &message_note_d5,
+    &message_delay_100,
+    &message_note_fs4,
+    &message_delay_250,
+    &message_note_gs4,
+    &message_delay_250,
+    &message_note_cs5,
+    &message_delay_100,
+    &message_note_b4,
+    &message_delay_100,
+    &message_note_d4,
+    &message_delay_250,
+    &message_note_e4,
+    &message_delay_250,
+    &message_note_b4,
+    &message_delay_100,
+    &message_note_a4,
+    &message_delay_100,
+    &message_note_cs4,
+    &message_delay_250,
+    &message_note_e4,
+    &message_delay_250,
+    &message_note_a4,
+    &message_delay_500,
+    NULL,
+};
+```
+
+Отлично! Теперь нужно решить, когда запускать данные оповещения.
+Пусть при нажатии на кнопку «Вверх» (`InputKeyUp`) включится светодиод,
+при нажатии на кнопку «Вниз» (`InputKeyDown`) включится вибромотор,
+а при нажатии на кнопку «Ок» (`InputKeyOk`) заиграет мелодия.
+
+Добавляем обработку для новых кнопок в бесконечный цикл
+в главной функции нашего приложения `example_5_app()`:
+
+```c
+while (1) {
+    if (furi_message_queue_get(app->event_queue, &event, 100) == FuriStatusOk) {
+        if (event.type == InputTypePress) {
+            if (event.key == InputKeyBack)
+                break;
+            else if (event.key == InputKeyUp)
+                notification_message(app->notifications, &example_led_sequence);
+            else if (event.key == InputKeyDown)
+                notification_message(app->notifications, &example_vibro_sequence);
+            else if (event.key == InputKeyOk)
+                notification_message(app->notifications, &example_sound_sequence);
+
+        } else if (event.type == InputTypeLong) {
+            DrawMode mode = app->draw_mode;
+            if (event.key == InputKeyLeft)
+                app->draw_mode = (mode - 1 + TOTAL_DRAW_MODES) % TOTAL_DRAW_MODES;
+            else if (event.key == InputKeyRight)
+                app->draw_mode = (mode + 1) % TOTAL_DRAW_MODES;
+
+            view_port_update(app->view_port);
+        }
+    }
+}
+```
+
+Отправка сообщений осуществляется функцией `notification_message()`
+с указанием соответствующей последовательности.
+
+Собираем новое приложение:
+
+```sh
+./fbt fap_example_5
+```
+
+Используя программу qFlipper, переносим новый FAP-файл из папки `build`
+на SD-карту в папку `/apps/Misc`.
+Или загружаем приложение командой `./fbt fap_deploy`.
+
+Запускаем приложение:
+
+![](/content/images/2023/flipper-app/14.png)
+
+Смотреть видео: https://youtu.be/238dmsw5DA4.
+
+## Пример 6. GPIO
+
+На Flipper Zero 18 контактов **GPIO**,
+среди которых есть как пины питания, так и пины ввода-вывода.
+Логическое напряжение питания — **3,3В**, и пины нетолерантны к **5В**
+(за исключением пина `iButton`).
+По сути, пины Флиппера соответствуют пинам установленного
+в нём микроконтроллера `STM32WB55`
+и обладают теми же настраиваемыми
+альтернативными функциями (`ADC`, `USART`, `SPI` и др.).
+
+Распиновка Флиппера:
+
+![](/content/images/2023/flipper-app/pinout.png)
+
+Подробное назначение пинов можно посмотреть
+в заголовочном файле `furi_hal_resources.h`.
+**FURI HAL** — специальный HAL Flipper Zero,
+который призван упростить для нас взаимодействие с железом.
+
+В FURI HAL GPIO-структура имеет имя `GpioPin`.
+Без разборки Флиппера на куски нам доступны:
+
+* `const GpioPin gpio_ext_pc0` — порт GPIOC, пин 0 (номер 16 на Флиппере).
+* `const GpioPin gpio_ext_pc1` — порт GPIOC, пин 1 (номер 15 на Флиппере).
+* `const GpioPin gpio_ext_pc3` — порт GPIOC, пин 3 (номер 7 на Флиппере).
+* `const GpioPin gpio_ext_pb2` — порт GPIOB, пин 2 (номер 6 на Флиппере).
+* `const GpioPin gpio_ext_pb3` — порт GPIOB, пин 3 (номер 5 на Флиппере).
+* `const GpioPin gpio_ext_pa4` — порт GPIOA, пин 4 (номер 4 на Флиппере).
+* `const GpioPin gpio_ext_pa6` — порт GPIOA, пин 6 (номер 3 на Флиппере).
+* `const GpioPin gpio_ext_pa7` — порт GPIOA, пин 7 (номер 2 на Флиппере).
+* `const GpioPin ibutton_gpio` — порт GPIOB, пин 14 (номер 17 на Флиппере).
+
+Также доступны пины с функцией USART по умолчанию:
+
+* `const GpioPin gpio_usart_tx` — порт GPIOB, пин 6 (номер 13 на Флиппере).
+* `const GpioPin gpio_usart_rx` — порт GPIOB, пин 7 (номер 14 на Флиппере).
+
+Ещё есть пины интерфейса SWD (Serial Wire Debug) для отладки,
+маркированные на корпусе как SIO, SWC.
+Все остальные пины микроконтроллера используются
+для управления начинкой Flipper Zero:
+дисплеем, кнопками, USB, NFC, I²C, SPI и т.д.
+
+Сделаем приложение, через которое мы сможем управлять GPIO.
+Сперва сделаем простой `DigitalWrite`, `DigitalRead`.
+Читать значение будем с пина `А6`, а писать значение в пин `А7`.
+
+Подключим к Флипперу простую кнопку к пину `А6` и светодиод к пину `А7`.
+Максимальный ток на пине — **20 мА**, для светодиода хватит.
+Питание берём с шины **3,3В**.
+Установим светодиод и кнопку на макетную плату:
+
+![](/content/images/2023/flipper-app/breadboard-1.jpg)
+
+Назовём новое приложение `example_6` и сделаем его
+на основе нашего предыдущего примера номер 4.
+Предварительно уберём из приложения всё,
+что касается оповещений, рендера графических элементов и обработки кнопок,
+чтобы остался пустой интерфейс.
+
+Для управления GPIO нам нужен HAL Флиппера.
+Подключаем файл `furi_hal.h` в заголовок нашего приложения.
+
+В главной структуре `Example6App` нашего приложения создадим
+два пина для входа и выхода: `input_pin`, `output_pin`
+и две булевы переменные для хранения текущих значений на этих пинах:
+`input_value`, `output_value`.
+
+Наш заголовочный файл принимает следующий вид:
+
+```c
+#pragma once
+
+#include <furi.h>
+#include <furi_hal.h>
+#include <gui/gui.h>
+
+struct Example6App {
+    Gui* gui;
+    ViewPort* view_port;
+    FuriMessageQueue* event_queue;
+
+    const GpioPin* input_pin;
+    const GpioPin* output_pin;
+
+    bool input_value;
+    bool output_value;
+};
+
+typedef struct Example6App Example6App;
+```
+
+В функции инициализации приложения `example_6_app_alloc()`
+задаём номера пинов. Функцией `furi_hal_gpio_init()` инициалзируем пины.
+Для ввода устанавливаем режим `GpioModeInput` и включаем подтяжку `GpioPullUp`,
+а для вывода режим `GpioModeOutputPushPull`
+и отключаем подтяжку `GpioPullNo`.
+Оба пина опрашиваются на максимальной скорости `GpioSpeedVeryHigh`:
+
+```c
+app->input_pin = &gpio_ext_pa6;
+app->output_pin = &gpio_ext_pa7;
+
+furi_hal_gpio_init(app->input_pin, GpioModeInput, GpioPullUp, GpioSpeedVeryHigh);
+furi_hal_gpio_init(app->output_pin, GpioModeOutputPushPull, GpioPullNo, GpioSpeedVeryHigh);
+```
+
+В главной функции приложения `example_6_app()`
+(и по совместительству в нашей точке входа) считываем
+и отправляем соответствующие значения в бесконечном цикле:
+
+```c
+furi_hal_gpio_write(app->output_pin, app->output_value);
+app->input_value = furi_hal_gpio_read(app->input_pin);
+```
+
+Пусть выходное значение зависит от состояния кнопки «Ок» Флиппера.
+Кнопка нажата — сигнал есть, отжата — сигнала нет.
+Как и прежде, клавишей «Назад» завершаем работу приложения.
+Добавим соответствующую обработку кнопки «Ок» в бесконечный цикл нашей программы:
+
+```c
+if (furi_message_queue_get(app->event_queue, &event, 100) == FuriStatusOk) {
+    if (event.key == InputKeyBack) {
+        if (event.type == InputTypePress)
+            break;
+
+    } else if (event.key == InputKeyOk) {
+        if (event.type == InputTypePress)
+            app->output_value = true;
+        else if (event.type == InputTypeRelease)
+            app->output_value = false;
+    }
+```
+
+Наконец, добавим немного графики в `callback`-функцию отрисовки интерфейса.
+Просто выведем текстом текущее входное и выходное значение.
+Для отрисовки больших цифр можно использовать шрифт `FontBigNumbers`.
+В качестве контекста передаём в функцию отрисовки главную структуру приложения.
+
+```c
+static void example_6_app_draw_callback(Canvas* canvas, void* ctx) {
+    furi_assert(ctx);
+    Example6App* app = ctx;
+
+    canvas_clear(canvas);
+    canvas_set_font(canvas, FontSecondary);
+    elements_multiline_text_aligned(canvas, 32, 17, AlignCenter, AlignTop, "Output PA7:");
+    elements_multiline_text_aligned(canvas, 96, 17, AlignCenter, AlignTop, "Input PA6:");
+
+    canvas_set_font(canvas, FontBigNumbers);
+    elements_multiline_text_aligned(canvas, 32, 32, AlignCenter, AlignTop, app->output_value ? "1" : "0");
+    elements_multiline_text_aligned(canvas, 96, 32, AlignCenter, AlignTop, app->input_value ? "1" : "0");
+}
+```
+
+Интерфейс будет выглядеть так:
+
+![](/content/images/2023/flipper-app/15.png)
+
+Собираем новое приложение и загружаем его на Флиппер:
+
+```sh
+./fbt fap_example_6
+./fbt fap_deploy
+```
+
+Смотреть видео: https://youtu.be/6k5D1TGZm0Q.
+
+**PWM и ADC**
+С генерацией ШИМ-сигналов всё обстоит намного сложнее.
+Здесь уже не обойтись одной-двумя функциями из FURI HAL,
+а сам код сильно разрастается.
+
+В прошивке Flipper Zero уже есть приложение **Signal Generator**
+для генерации ШИМ-сигнала на пинах `PA7` и `PA4`.
+Вы можете самостоятельно изучить исходный код для генерации ШИМ
+в директории
+[applications/plugins/signal_generator/](https://github.com/flipperdevices/flipperzero-firmware/tree/dev/applications/plugins/signal_generator)
+и реплицировать его в ваше приложение.
+
+А вот официальной документации на чтение аналоговых сигналов пока нет.
+Кроме этого альтернативные функции аналого-цифрового преобразователя на пинах
+ещё не имплементированы в FURI HAL.
+Однако сам ADC на микроконтроллере STM32
+и его возможности никуда от нас не делись.
+
+На просторах интернета мы нашли пример использования **ADC**.
+Мы разместили в репозитории с примерами
+[flipperzero-examples](https://github.com/amperka/flipperzero-examples)
+приложение [`adc_example`](https://github.com/amperka/flipperzero-examples/tree/main/applications/adc_example),
+которое cчитывает аналоговое значение с пина `PC3`
+и выводит его на экран.
+Код ещё нуждается в доработке, и вы можете использовать его в своих приложениях,
+однако мы советуем дождаться официальной документации и примеров.
+
+Опорным напряжением является выборочно или **2.5В** или **2.048В**.
+Подключив к флипперу потенциометр и взяв питание с пина **3.3В**
+понадобится простой делитель напряжения в пределах тысячи **Ом**.
+Разрешение АЦП - **12 бит**.
+
+Читаем напряжение от **0** до **2.5В**
+на пине `PC3` и меняем его потенциометром:
+
+Смотреть видео: https://youtu.be/k2DK9xAi9QQ.
+
+## Заключение
+
+На этом мы заканчиваем базовое знакомство
+с пользовательскими приложениями для Flipper Zero.
+
+Покопавшись в документации, нам удалось зайти подальше банального
+«Hello, world!» и написать несколько приложений для примера работы с GUI,
+кнопками и встроенной периферией Флиппера —
+RGB-светодиодом, вибромотором и баззером.
+
+Ждём обновления официальной документации гаджета и надеемся,
+что наши примеры помогут вам в создании своих приложений для Flipper Zero!