flipper-zero-tutorials/plugins/basic
2024-01-28 11:27:45 -06:00
..
application.fam appid must be lowercase in latest firmware 2023-06-11 17:03:26 -05:00
basic_view_port_demo_app.c clarify this is viewport 2024-01-28 11:27:45 -06:00
basic_view_port_demo.png clarify this is viewport 2024-01-28 11:27:45 -06:00
README.md clarify this is viewport 2024-01-28 11:27:45 -06:00

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 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 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.