flipper-zero-tutorials

History

Derek Jamison 257f048fde Update readme to fix typos		2023-04-15 14:56:55 -04:00
..
final_files	Cookie Clicker over bluetooth!	2023-03-30 16:03:11 -04:00
README.md	Update readme to fix typos	2023-04-15 14:56:55 -04:00

README.md

This tutorial modifies the Flipper Zero firmware to add a Cookie Clicker controller option to the hid_app (known as "Remote" under Applications/Bluetooth). This Cookie clicker will automatically click the mouse and allow you to set the speed of the clicks.

The "Remote" application is a Bluetooth HID (Human Interface Device) application. It allows you to connect to a Bluetooth HID device and send keystrokes and mouse clicks. The Flipper Zero firmware has a TikTok controller built in. This tutorial will show you how to modify the firmware to add a Cookie Clicker controller, starting with the code from the TikTok controller.

Make sure you have a working Flipper Zero before you start this tutorial & that you have enabled Bluetooth on the Flipper Zero (under Settings). You will need to pair the Flipper Zero with your phone before you can use the Cookie Clicker controller (the Flipper Zero device should display in your phone's Bluetooth settings while the "Remote" application is running).

If you are unclear of a step, the final_files folder contains the modified files you should have after you have completed the tutorial. Please let me know which step was unclear and I will try to clarify it for future users.

Step 1. Install Git and VS Code.

If you have not already installed Git and VS Code, you will need to do so. The following links will take you to the download pages for Git and VS Code.

Git
VS Code

Step 2. Clone the Flipper Zero firmware.

Clone the Flipper Zero firmware from GitHub. The following command will clone the firmware into a folder named official-firmware. (The below commands may wrap on your screen. You can copy and paste the entire command; there should only be two lines.)

Open a command window (in windows, press the Windows key+R, type: cmd, then press enter)

md <your working directory>
cd <your working directory>
git clone --recursive https://github.com/flipperdevices/flipperzero-firmware.git official-firmware

Replace <your working directory> with the directory where you want to clone the firmware (like \flipper).

Step 3. Run FBT to build the firmware and configure VS Code.

Run the following commands from the root of the firmware folder to build the firmware and configure VS Code. Replace <your working directory> with the directory where you cloned the firmware. In some environments you do not need the "./" at the beginning of the command.

cd <your working directory>
cd official-firmware
./fbt vscode_dist
./fbt updater_package

*** Please follow the steps at FBT VSCode integration before proceeding. ***

Step 4. Open the applications\external\hid_app folder in VS Code.

After following the previous step, navigate to the applications \ external \ hid_app folder in VS Code.

Step 5. Expand the assets folder.

Expand the assets folder in VS Code.

Step 6. Create a Cookie_def_11x9.png.

Copy the Like_def_11x9.png file to Cookie_def_11x9.png. Edit the file to have a cookie image.

Step 7. Create a Cookie_pressed_17x17.png.

Copy the Like_pressed_17x17.png file to Cookie_pressed_17x17.png. Edit the file to have a cookie image.

Step 8. Expand the views folder.

Expand the views folder in VS Code.

Step 9. Create a hid_cc.h file.

In the views folder, copy the hid_tiktok.h file to hid_cc.h.

Step 10. Edit the hid_cc.h file.

Edit the hid_cc.h file to have the following changes:

Case-sensitive! Replace all TikTok with CC
Case-sensitive! Replace all _tiktok with _cc

Step 11. Create a hid_cc.c file.

In the views folder, copy the hid_tiktok.c file to hid_cc.c.

Step 12. Edit the hid_cc.c file.

Edit the hid_cc.c file to have the following changes:

Case-sensitive! Replace all TikTok with CC
Case-sensitive! Replace all _tiktok with _cc
Case-sensitive! Replace all I_Like_ with I_Cookie_

Step 13. Edit the views.h file.

Edit the views.h file to have the following changes:

Below BtHidViewTikTok, add the following line:

    BtHidViewCC,

Step 14. Edit the hid.h file.

Edit the hid.h file to have the following changes:

Below #include "views/hid_tiktok.h" add the following line:

#include "views/hid_cc.h"

Below HidTikTok* hid_tiktok; add the following line:

HidCC* hid_cc;

Step 15. Edit the hid.c file.

Edit the hid.c file to have the following changes:

Below HidSubmenuIndexTikTok, add the following line:

    HidSubmenuIndexCC,

Below view_dispatcher_switch_to_view(app->view_dispatcher, BtHidViewTikTok); add the following lines:

    } else if(index == HidSubmenuIndexCC) {
        app->view_id = BtHidViewCC;
        view_dispatcher_switch_to_view(app->view_dispatcher, BtHidViewCC);

Below hid_tiktok_set_connected_status(hid->hid_tiktok, connected); add the following line:

hid_cc_set_connected_status(hid->hid_cc, connected);

Find the text "TikTok Controller" and then after the next close bracket (a few lines later), add the following commands:

    if(app->transport == HidTransportBle) {
        submenu_add_item(
            app->device_type_submenu,
            "CC Controller",
            HidSubmenuIndexCC,
            hid_submenu_callback,
            app);
    }

Find the text "TikTok view" and then after the next blank line (a few lines later), add the following commands:

    // CC view
    app->hid_cc = hid_cc_alloc(app);
    view_set_previous_callback(hid_cc_get_view(app->hid_cc), hid_exit_confirm_view);
    view_dispatcher_add_view(app->view_dispatcher, BtHidViewCC, hid_cc_get_view(app->hid_cc));

After the line hid_tiktok_free(hid->hid_tiktok); add the following commands:

    view_dispatcher_remove_view(app->view_dispatcher, BtHidViewCC);
    hid_cc_free(app->hid_cc);

Step 16. Compile and run the application

You should now how copied the TikTok application to the Cookie Clicker application. Lets build and deploy the firmware to your Flipper Zero, and confirm that "Cookie Clicker" is just a copy of TikTok.

Run the following command from the root of the firmware folder to compile and run the application. Make sure you are not currently running the Flipper UI, qFlipper or lab.flipper.net. In some environments you do not need the "./" at the beginning of the command.

cd <your working directory>
cd official-firmware
./fbt launch_app APPSRC=applications/external/hid_app

The application should run on the Flipper Zero and you should see the Cookie Clicker application. You can now edit the application to add your own custom code.

Step 17. Decide what changes we need to make to our view (hid_cc.c)

We need to make the following changes to our hid_cc view:

Add a timer that fires every so often.
Keep track of the click speed and if the timer is enabled.
Display the speed of the cookie clicker.
When the timer fires, we need to click the mouse if enabled.
When UP is pressed, increase the speed of the cookie clicker.
When DOWN is pressed, decrease the speed of the cookie clicker.
When OK is pressed, toggle the timer on/off.

Step 18. Add a "FuriTimer* timer" to the HidCC:

In the hid_cc.c file, find modify the struct HidCC to have the following changes:

struct HidCC {
View* view;
Hid* hid;
FuriTimer* timer; // Add this line
};

Step 19. Add a "float timer_duration" and "bool timer_click_enabled" to HidCCModel.

In the hid_cc.c file, find modify the HidCCModel to have the following changes:

typedef struct {
bool left_pressed;
bool up_pressed;
bool right_pressed;
bool down_pressed;
bool ok_pressed;
bool connected;
bool is_cursor_set;
HidTransport transport;
float timer_duration; // Add this line (duration in ms)
bool timer_click_enabled; // Add this line (are we clicking)
} HidCCModel;

Step 20. Rename title from "CC" to "Cookie\nClicker".

Replace the title which should be double-quotes followed by CC followed by double-quotes. We use \n so the text will wrap 2 lines. Find the line elements_multiline_text_aligned(canvas, 17, 3, AlignLeft, AlignTop, "CC"); which contains the title and change it to:

elements_multiline_text_aligned(
canvas, 17, 3, AlignLeft, AlignTop, "Cookie\nClicker");

Step 21. Add code to display the click speed, right after displaying the title.

The canvas_set_font(canvas, FontSecondary); should already be the text immediately after the title. We will add the code to display the click speed right after this line. Find the line canvas_set_font(canvas, FontSecondary); and add the following code:

canvas_set_font(canvas, FontSecondary);
FuriString\* buffer = furi_string_alloc(32);
furi_string_printf(
buffer,
"%0.1f ms\r\n",
(double)model->timer_duration);
elements_multiline_text_aligned(canvas, 17, 25, AlignLeft, AlignTop, furi_string_get_cstr(buffer));
furi_string_free(buffer);

This code does the following:

Sets the font to FontSecondary.
Allocates a buffer to hold the text.
Formats the text (containing the duration) into the buffer.
Displays the text on the screen.
Frees the buffer.

Step 22. Add a new method to update the timer.

-You can add this code immediate before the static void hid_cc_reset_cursor(HidCC* hid_cc) code. Find the line static void hid_cc_reset_cursor(HidCC* hid_cc) and add the following above it:

static void hid_cc_update_timer(HidCC* hid_cc, HidCCModel* model) {
    furi_assert(hid_cc);
    furi_assert(model);
    if(model->timer_click_enabled) {
        furi_timer_start(hid_cc->timer, model->timer_duration);
    } else {
        furi_timer_stop(hid_cc->timer);
    }
}

This code does the following:

Checks that the hid_cc and model are not null.
If the timer is enabled, start the timer using the duration from the model.
If the timer is disabled, stop the timer.

Step 23. Add a new method to handle when the timer fires.

You can add this code immediately after the code from the previous step.

static void hid_cc_tick_callback(void* context) {
    furi_assert(context);
    HidCC* hid_cc = context;

    with_view_model(
        hid_cc->view,
        HidCCModel * model,
        {
            if (model->timer_click_enabled) {
            hid_hal_mouse_press(hid_cc->hid, HID_MOUSE_BTN_LEFT);
            furi_delay_ms(10);
            hid_hal_mouse_release(hid_cc->hid, HID_MOUSE_BTN_LEFT);
            }
        },
        true);
}

This code does the following:

Checks that the context is not null.
Gets the model from the view.
If the timer is enabled, click the mouse.

Step 24, change what the OK button does.

We will update the hid_cc_input_callback handling of short press of the OK button. We want the code to toggle the timer_click_enabled value and then update_timer (so it starts/stops).

REPLACE:

if(event->key == InputKeyOk) {
hid_hal_mouse_press(hid_tiktok->hid, HID_MOUSE_BTN_LEFT);
furi_delay_ms(50);
hid_hal_mouse_release(hid_tiktok->hid, HID_MOUSE_BTN_LEFT);
furi_delay_ms(50);
hid_hal_mouse_press(hid_tiktok->hid, HID_MOUSE_BTN_LEFT);
furi_delay_ms(50);
hid_hal_mouse_release(hid_tiktok->hid, HID_MOUSE_BTN_LEFT);
consumed = true;
}

WITH:

if(event->key == InputKeyOk) {
  model->timer_click_enabled = !model->timer_click_enabled;
  hid_cc_update_timer(hid_cc, model);
  consumed = true;
}

Step 25, change what the UP button does.

We will update the hid_cc_input_callback handling of short press of the UP button. We want the code to reduce the duration of the timer to 95% of value + update_timer.

REPLACE:

else if(event->key == InputKeyUp) {
// Emulate up swipe
hid_hal_mouse_scroll(hid_tiktok->hid, -6);
hid_hal_mouse_scroll(hid_tiktok->hid, -12);
hid_hal_mouse_scroll(hid_tiktok->hid, -19);
hid_hal_mouse_scroll(hid_tiktok->hid, -12);
hid_hal_mouse_scroll(hid_tiktok->hid, -6);
consumed = true;

WITH:

} else if(event->key == InputKeyUp) {
  // Reduce duration to 95% of value + update_timer.
  if (model->timer_duration>0) {
    model->timer_duration *= 0.95f;
    hid_cc_update_timer(hid_cc, model);
  }
  consumed = true;

Step 26, change what the DOWN button does.

We will update the hid_cc_input_callback handling of short press of the DOWN button. We want the code to increase the duration of the timer to 105% of value + update_timer.

REPLACE:

} else if(event->key == InputKeyDown) {
// Emulate down swipe
hid_hal_mouse_scroll(hid_tiktok->hid, 6);
hid_hal_mouse_scroll(hid_tiktok->hid, 12);
hid_hal_mouse_scroll(hid_tiktok->hid, 19);
hid_hal_mouse_scroll(hid_tiktok->hid, 12);
hid_hal_mouse_scroll(hid_tiktok->hid, 6);
consumed = true;

WITH:

} else if(event->key == InputKeyDown) {
  // Increase duration to 105% of value + update_timer
  model->timer_duration *= 1.05f;
  hid_cc_update_timer(hid_cc, model);
  consumed = true;

Step 27, allocate the timer object.

Update hid_cc_alloc to set timer values & allocate timer object.

REPLACE:

with_view_model(
hid_cc->view, HidCCModel * model, { model->transport = bt*hid->transport; }, true);

WITH:

with_view_model(
hid_cc->view,
HidCCModel * model,
{
model->transport = bt_hid->transport;
// Set default values for timer
model->timer_duration = 22.0f;
model->timer_click_enabled = false;
},
true);
// Allocate timer
hid_cc->timer = furi_timer_alloc(hid_cc_tick_callback, FuriTimerTypePeriodic, hid_cc);

This code does the following:

Gets the model from the view.
Sets the default values for the timer (22ms and not enabled).
Allocates the timer object.

Step 28, free the timer object.

Update hic_cc_free to free timer object.

REPLACE:

view_free(hid_cc->view);

WITH:

furi_timer_free(hid_cc->timer);
view_free(hid_cc->view);

Step 29. Compile and run the application

cd <your working directory>
cd official-firmware
./fbt launch_app APPSRC=applications/external/hid_app

The application should run on the Flipper Zero and you should see the Cookie Clicker application. When you click the OK button, the timer should start and stop. When you click the UP button, the timer duration should decrease. When you click the DOWN button, the timer duration should increase.

Congratulations! You have successfully modified the TikTok application to the Cookie Clicker application.

README.md

Cookie Clicker Tutorial

Step 1. Install Git and VS Code.

Step 2. Clone the Flipper Zero firmware.

Step 3. Run FBT to build the firmware and configure VS Code.

Step 4. Open the applications\external\hid_app folder in VS Code.

Step 5. Expand the assets folder.

Step 6. Create a Cookie_def_11x9.png.

Step 7. Create a Cookie_pressed_17x17.png.

Step 8. Expand the views folder.

Step 9. Create a hid_cc.h file.

Step 10. Edit the hid_cc.h file.

Step 11. Create a hid_cc.c file.

Step 12. Edit the hid_cc.c file.

Step 13. Edit the views.h file.

Step 14. Edit the hid.h file.

Step 15. Edit the hid.c file.

Step 16. Compile and run the application

Step 17. Decide what changes we need to make to our view (hid_cc.c)

Step 18. Add a "FuriTimer* timer" to the HidCC:

Step 19. Add a "float timer_duration" and "bool timer_click_enabled" to HidCCModel.

Step 20. Rename title from "CC" to "Cookie\nClicker".

Step 21. Add code to display the click speed, right after displaying the title.

Step 22. Add a new method to update the timer.

Step 23. Add a new method to handle when the timer fires.

Step 24, change what the OK button does.

Step 25, change what the UP button does.

Step 26, change what the DOWN button does.

Step 27, allocate the timer object.

Step 28, free the timer object.

Step 29. Compile and run the application