docs: add docs

KICKSTART.md

@@ -0,0 +1,69 @@
+# Getting Started with `f0-template`
+
+Welcome on your path to creating Flipper Zero Application!  
+Here are the few stuff to get started!
+
+## Before you begin
+
+### Change `AppID`
+
+1. Open [application.fam](applciation.fam).
+2. head to `appid="demo_app"` and change it to your own.
+3. Open [./src/scenes/about/main.c](src/scenes/about/main.c).
+4. Update `#include <demo_app_icons.h>` into `#include <{app_id}_icons.h>`.  
+   If there is intelliSense error for missing variable, try rebuilding application.
+
+## Developer Resources
+
+Here are the resources for developing applications for Flipper Zero:
+
+- [Flipper Zero Firmware Docs](https://developer.flipper.net/flipperzero/doxygen/)
+  - [`struct` list](https://developer.flipper.net/flipperzero/doxygen/annotated.html) ([index](https://developer.flipper.net/flipperzero/doxygen/classes.html))
+- [Flipper Zero code examples](https://github.com/m1ch3al/flipper-zero-dev-tutorial)
+- [Lopaka, Graphics Editor for Embedded Devices](https://lopaka.app/)  
+  Note that Flipper Zero has screen dimension of `128x64`.
+
+## Directory Structure
+
+`f0-template` consists of following directories
+
+- `.github` - Reserved for GitHub Actions
+- `icons` - For generating `Icon` (Sprites) for use in GUI elements
+- `screenshots` - When uploaded to store, these are the Screenshots available from store page
+- `src` - Where the C source is located
+  - `src/main.c` - Where the main entrypoint is available.
+  - `src/scenes` - Scene definitions for Scene Manager - Refer to [Using SceneManager](#using-scenemanager)
+- `application.fam` - Flipper Zero's application manifest file - Refer to [this docs](https://developer.flipper.net/flipperzero/doxygen/app_manifests.html)
+- `CHANGELOG.md` - When uploaded to store, these are the changelog available from store page
+- `icon.png` - The Application Icon which is shown next to application name in Apps menu.
+
+### `icons`
+
+> [!WARNING]  
+> alpha channel of PNG is **NOT** supported.
+> Make sure that background is white!
+
+This directory is for generating `Icon` struct which can be used for drawing sprites in flipper zero `Canvas`.  
+It can be used as following:
+
+1. Put your `PNG` files into icons.
+2. Build (`ufbt build` or anything triggers build job) at least once before use.
+3. Import `{app_id}_icons.h`.
+4. On `draw_callback`, draw Icon by calling `canvas_draw_icon(canvas, loc_x, loc_y, &I_{png_filename});`
+5. Done!
+
+### Using `SceneManager`
+
+This template implements `SceneManager`, A "Scene" based framework for programming flipper zero GUIs.
+
+#### Creating Scenes
+
+The Scenes are defined via using macro: `SCENE_ACTION`. By default, the `f0-template` provides two example scenes
+
+1. Goto [`./src/scenes/list.h`](/src/scenes/list.h).
+2. Add your own scene by using macro: `SCENE_ACTION`.
+   (e.g. If you want to make new scene called `Store`, You should type `SCENE_ACTION(Store)`)
+3. Implement `_on_enter`, `_on_event`, `_on_exit`, `_get_view`, `_alloc`, `_free` accordingly. Refer to [`./src/scenes/home/main.c`](/src/scenes/home/main.c) for more info.  
+   (F0 doesn't make sure the precendence of `_on_exit` and `_free`. Please make sure those two are independent by checking each other's free'd state)
+4. Add headers to export those functions.
+5. Include your header in [`./src/scenes/import.h`](/src/scenes/import.h).

README.md

@@ -1,68 +1,57 @@
 <h1 align="center">Flipper Zero: Application Template</h1>
 
 ## How to use this template
+
 1. Setup the repository by clicking the `Use this template` button on the top of the repository. Fill in the data if needed.
 2. Update `README.md`'s upstream url with your repository's url.
 3. Add `LICENSE` file with your own license.
-4. Update `application.fam` with your application's information.
+4. Continue on [Setup Build environment](#setup-build-environment).
+5. Change `AppID`
 
 ## Build Status
+
 <!-- Replace the https://github.com/Alex4386/f0-template to your own repo after using template! -->
-* **Latest Release**: [Download](https://github.com/Alex4386/f0-template/releases/latest)
-* **Latest Nightly**: [Download](https://github.com/Alex4386/f0-template/actions/workflows/nightly.yml) _(GitHub Login Required)_
 
-| Nightly Build | Release Build |
-|:-------------:|:-------------:|
+- **Latest Release**: [Download](https://github.com/Alex4386/f0-template/releases/latest)
+- **Latest Nightly**: [Download](https://github.com/Alex4386/f0-template/actions/workflows/nightly.yml) _(GitHub Login Required)_
+
+|                                           Nightly Build                                           |                                           Release Build                                           |
+| :-----------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: |
 | ![Nightly Build](https://github.com/Alex4386/f0-template/actions/workflows/nightly.yml/badge.svg) | ![Release Build](https://github.com/Alex4386/f0-template/actions/workflows/release.yml/badge.svg) |
 
 ## Setup Build environment
+
 ### Build Instruction
+
 1. Install `ufbt`:
-    ```bash
-    pip3 install ufbt
-    ```
+   ```bash
+   pip3 install ufbt
+   ```
 2. Clone this repository and enter the repository root.
 3. Run `ufbt update` to update the SDK for your flipper
-    - If you are using custom firmware, You should switch SDK. Here is the example for `unleashed` firmware:
-        ```bash
-        ufbt update --index-url=https://up.unleashedflip.com/directory.json
-        ```
-    - If you want to use different release channel, You can run update to that channel too. Here is the example for `dev` channel (`dev`, `rc`, `release` are supported):
-        ```bash
-        ufbt update --channel=dev
-        ```
+   - If you are using custom firmware, You should switch SDK. Here is the example for `unleashed` firmware:
+     ```bash
+     ufbt update --index-url=https://up.unleashedflip.com/directory.json
+     ```
+   - If you want to use different release channel, You can run update to that channel too. Here is the example for `dev` channel (`dev`, `rc`, `release` are supported):
+     ```bash
+     ufbt update --channel=dev
+     ```
 4. Run `ufbt` in the repository root:
-    ```bash
-    ufbt
-    ```
+   ```bash
+   ufbt
+   ```
 5. Compiled binary is now available at `./dist/` directory.
 
 ### Setup Visual Studio Code
+
 > [!WARNING]
-> This command will overwrite your `.vscode` directory and `.gitignore` on your root directory. 
+> This command will overwrite your `.vscode` directory and `.gitignore` on your root directory.
 > **Make sure to backup your changes before running this command.**
 
 1. Suppose your build environment is ready.
 2. Run `ufbt vscode_dist` to generate Visual Studio Code config.
 
-## Developer Resources
-Here are the resources for developing applications for Flipper Zero:
-- [Flipper Zero Firmware Docs](https://developer.flipper.net/flipperzero/doxygen/)
-  - [`struct` list](https://developer.flipper.net/flipperzero/doxygen/annotated.html) ([index](https://developer.flipper.net/flipperzero/doxygen/classes.html))
-- [Flipper Zero code examples](https://github.com/m1ch3al/flipper-zero-dev-tutorial)
-- [Lopaka, Graphics Editor for Embedded Devices](https://lopaka.app/)  
-  Note that Flipper Zero has screen dimension of `128x64`.  
-
-
-### How to use `SceneManager` with this project?
-This template implements `SceneManager`, A "Scene" based framework for programming flipper zero GUIs.
-
-Here is how you can add/modify scenes in this repository:
-1. Goto [`./src/scenes/list.h`](/src/scenes/list.h).  
-2. Add your own scene by using macro: `SCENE_ACTION`.
-   (e.g. If you want to make new scene called `Store`, You should type `SCENE_ACTION(Store)`)
-3. Implement `_on_enter`, `_on_event`, `_on_exit`, `_get_view`, `_alloc`, `_free` accordingly. Refer to [`./src/scenes/home/main.c`](/src/scenes/home/main.c) for more info.    
-   (F0 doesn't make sure the precendence of `_on_exit` and `_free`. Please make sure those two are independent by checking each other's free'd state)
-4. Add headers to export those functions.
-5. Include your header in [`./src/scenes/import.h`](/src/scenes/import.h).  
+### What Next?
 
+See [KICKSTART.md](KICKSTART.md) to see how to start building and setting up the repo for the first time! (This includes changing `AppID` and required steps to make your app **WORK**)

src/scenes/about/main.c

@@ -2,6 +2,7 @@
 #include <gui/modules/submenu.h>
 #include "../../main.h"
 #include "main.h"
+#include <demo_app_icons.h>
 
 #define THIS_SCENE About
 
@@ -20,11 +21,12 @@ void About_on_draw(Canvas* canvas, void* context) {
     canvas_clear(canvas);
 
     canvas_set_bitmap_mode(canvas, true);
+    canvas_draw_icon(canvas, 2, 3, &I_DolphinWait);
     canvas_set_font(canvas, FontPrimary);
     canvas_draw_str(canvas, 67, 11, "f0-template");
     canvas_set_font(canvas, FontSecondary);
     canvas_draw_str(canvas, 72, 20, "by Alex4386");
-    canvas_draw_line(canvas, 54, 25, 124, 25);
+    canvas_draw_line(canvas, 68, 25, 124, 25);
     canvas_draw_str(canvas, 71, 39, "Protected by");
     canvas_set_font(canvas, FontPrimary);
     canvas_draw_str(canvas, 61, 51, "Fantasy Seal");

src/scenes/list.h

@@ -7,7 +7,8 @@
  * Use it as following:
  * 1. Define the scene via SCENE_ACTION macro. (e.g. SCENE_ACTION(Home))
  * 2. Implement the scene handlers in the corresponding file.
- *    (_on_enter, _on_event, _on_exit, _get_view, _alloc)
+ *    _on_enter, _on_event, _on_exit, _get_view, _alloc, _free
+ *      e.g. Home -> Home_on_enter should be implemented
  * 3. Include the scene in the list of scenes in main.h.
  */