flipper-zero-tutorials/plugins/basic/README.md

# BASIC DEMO

## Introduction

This is a basic ViewPort application for the Flipper Zero. The goal of this project is to use it as a starting point for other applications. When creating a UI for the Flipper Zero, you can choose from three techniques:

- "ViewPort" (single view that does all the rendering & input handling)
- "ViewDispatcher" (multiple views, single back button is handled for you)
- "SceneManager" (multiple views, back button history is handled for you)

## Installation Directions

This project is intended to be overlayed on top of an existing firmware repo.

- Clone, Build & Deploy an existing flipper zero firmware repo. See this [tutorial](/firmware/updating/README.md) for updating firmware.
- Copy the "basic_demo" [folder](..) to the \applications\plugins\basic_demo folder in your firmware.
- Build & deploy the firmware. See this [tutorial](/firmware/updating/README.md) for updating firmware.
- NOTE: You can also extract the basic_demo.FAP from resources.tar file and use qFlipper to copy the file to the SD Card/apps/Misc folder.

## Running the updated firmware

These directions assume you are starting at the flipper desktop. If not, please press the back button until you are at the desktop.

- Press the OK button on the flipper to pull up the main menu.
- Choose "Applications" from the menu.
- Choose "Misc" from the sub-menu.
- Choose "Basic Viewport Demo"

- The flipper should say "Basic Viewport Demo".

- Press the BACK button to exit.

## How it works

- application.fam

  - specifies the name of our application.
  - specifies the entry point for our application.
  - specifies we use the GUI.
  - specifies our icon is the basic_demo.png file.
  - specifies our application can be found in the "Misc" category.

- basic_demo.png

  - The icon for our application.

- basic_demo_app.c
  - We #include the libraries we referece.
  - We define DemoEventType (so we know the reason for events)
  - We define DemoEvent (which has the event type and its data) used for adding to an event queue.
  - We define DemoData (data used by our application)
  - We define DemoContext (pointer to event queue, pointer to application data, and pointer to mutex [to safely access the data])
  - We create a basic_demo_input_callback(...) method that queues a key event.
  - We create a basic_demo_render_callback(...) method that does the screen rendering.
    - We acquire the mutex, so that no other thread can modify the data.
      - If unsuccessful, we don't render anything this frame.
    - We select the Primary font. We render the text "Basic Demo".
    - We release the mutex, so other threads may modify the data.
  - We create the entrypoint basic_demo_app(...) method
    - We configure our initial data state
    - We create a queue for events.
    - We setup view_port_draw_callback_set(...) to invoke basic_demo_render_callback when rendering should happen.
    - We setup view_port_input_callback_set(...) to invoke basic_demo_input_callback when button is pressed.
    - We open GUI and register view_port.
    - We create a message pump loop
      - We get an event from the queue.
        - If it is key message.
          - If it is a short press of back key, we set processing=false which will exit our message loop.
    - The message loop continues until processing is false.
    - We release our application resources.
    - We exit the program.