Esquirio/tutorials

examples/tutorials/lessons/01-programming-the-braccio-display/01_creating_a_button/01_creating_a_button.ino

@@ -0,0 +1,20 @@
+ #include "Braccio++.h"
+
+void customMenu() {
+  lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
+  lv_obj_set_size(btn1, 120, 75);
+  lv_obj_t * label1 = lv_label_create(btn1);
+  lv_label_set_text(label1, "BTN 1");
+  lv_obj_align(btn1, LV_ALIGN_CENTER, 0, 0);
+  lv_obj_center(label1);
+}
+
+void setup() {
+  // put your setup code here, to run once:
+  Braccio.begin(customMenu);
+}
+
+void loop() {
+  // put your main code here, to run repeatedly:
+
+}

examples/tutorials/lessons/01-programming-the-braccio-display/01_creating_a_button/sketch.json

@@ -0,0 +1,7 @@
+{
+  "cpu": {
+    "fqbn": "arduino:mbed_nano:nanorp2040connect",
+    "name": "Arduino Nano RP2040 Connect",
+    "port": "serial:///dev/ttyACM0"
+  }
+}

examples/tutorials/lessons/01-programming-the-braccio-display/02_designing_the_button/02_designing_the_button.ino

@@ -0,0 +1,39 @@
+#include "Braccio++.h"
+
+// Arduino Colors
+#define COLOR_TEAL       0x00878F
+#define COLOR_LIGHT_TEAL 0x62AEB2
+#define COLOR_ORANGE     0xE47128
+#define COLOR_YELLOW     0xE5AD24
+#define COLOR_WHITE      0xFFFFFF
+
+
+void customMenu() {
+  static lv_style_t style;
+  lv_style_init(&style);
+  lv_style_set_bg_color(&style, lv_color_hex(COLOR_WHITE));
+  lv_style_set_border_color(&style, lv_color_hex(COLOR_TEAL));
+  lv_style_set_border_width(&style, 5);
+  lv_style_set_text_color(&style, lv_color_hex(COLOR_ORANGE));
+
+  lv_obj_t * btn1 = lv_btn_create(lv_scr_act()); 
+  lv_obj_set_size(btn1, 120, 75);
+
+  lv_obj_t * label1 = lv_label_create(btn1);
+  lv_label_set_text(label1, "BTN 1");
+
+  lv_obj_align(btn1, LV_ALIGN_CENTER, 0, 0);
+  lv_obj_center(label1);
+
+  lv_obj_add_style(btn1, &style, 0);
+}
+
+void setup() {
+  // put your setup code here, to run once:
+  Braccio.begin(customMenu);
+}
+
+void loop() {
+  // put your main code here, to run repeatedly:
+
+}

examples/tutorials/lessons/01-programming-the-braccio-display/02_designing_the_button/sketch.json

@@ -0,0 +1,6 @@
+{
+  "cpu": {
+    "fqbn": "arduino:mbed_nano:nanorp2040connect",
+    "port": ""
+  }
+}

examples/tutorials/lessons/01-programming-the-braccio-display/03_creating_a_menu/03_creating_a_menu.ino

@@ -0,0 +1,46 @@
+#include "Braccio++.h"
+
+#define MARGIN_LEFT   0
+#define MARGIN_TOP    0
+
+// Arduino Colors
+#define COLOR_TEAL       0x00878F
+#define COLOR_LIGHT_TEAL 0x62AEB2
+#define COLOR_ORANGE     0xE47128
+#define COLOR_YELLOW     0xE5AD24
+#define COLOR_WHITE      0xFFFFFF
+
+static const char * btnm_map[] = {"OPTION 1", "OPTION 2", "\n",
+                                  "OPTION 3", "OPTION 4", "\0"
+                                 };
+
+void customMenu() {
+  static lv_style_t style_bg;
+  lv_style_init(&style_bg);
+  lv_style_set_bg_color(&style_bg, lv_color_hex(COLOR_LIGHT_TEAL));
+
+  static lv_style_t style_btn;
+  lv_style_init(&style_btn);
+  lv_style_set_bg_color(&style_btn, lv_color_hex(COLOR_WHITE));
+  lv_style_set_border_color(&style_btn, lv_color_hex(COLOR_YELLOW));
+  lv_style_set_border_width(&style_btn, 2);
+  lv_style_set_text_color(&style_btn, lv_color_hex(COLOR_TEAL));
+
+
+  lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
+  lv_btnmatrix_set_map(btnm1, btnm_map);
+  lv_obj_align(btnm1, LV_ALIGN_CENTER, MARGIN_LEFT, MARGIN_TOP);
+
+  lv_obj_add_style(btnm1, &style_bg, 0);
+  lv_obj_add_style(btnm1, &style_btn, LV_PART_ITEMS);
+}
+
+void setup() {
+  // put your setup code here, to run once:
+  Braccio.begin(customMenu);
+}
+
+void loop() {
+  // put your main code here, to run repeatedly:
+
+}

examples/tutorials/lessons/01-programming-the-braccio-display/04_testing_it_out/04_testing_it_out.ino

@@ -0,0 +1,46 @@
+#include "Braccio++.h"
+
+#define MARGIN_LEFT   0
+#define MARGIN_TOP    0
+
+// Arduino Colors
+#define COLOR_TEAL       0x00878F
+#define COLOR_LIGHT_TEAL 0x62AEB2
+#define COLOR_ORANGE     0xE47128
+#define COLOR_YELLOW     0xE5AD24
+
+static const char * btnm_map[] = {"OPTION 1", "OPTION 2", "OPTION 3", "\n",
+                                   "OPTION 4", "OPTION 5", "\0"
+                                 };
+
+void customMenu(){
+  static lv_style_t style_bg;
+  lv_style_init(&style_bg);
+  lv_style_set_bg_color(&style_bg, lv_color_hex(COLOR_LIGHT_TEAL));
+
+  static lv_style_t style_btn;
+  lv_style_init(&style_btn);
+  lv_style_set_bg_color(&style_btn, lv_color_hex(0xFFFFFF));
+  lv_style_set_border_color(&style_btn, lv_color_hex(COLOR_YELLOW));
+  lv_style_set_border_width(&style_btn, 2);
+  lv_style_set_text_color(&style_btn, lv_color_hex(COLOR_TEAL));
+
+
+  lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
+  lv_btnmatrix_set_map(btnm1, btnm_map);
+  lv_btnmatrix_set_btn_width(btnm1, 3, 2);  // Make "Option 4" twice as wide as "Option 5"
+  lv_obj_align(btnm1, LV_ALIGN_CENTER, MARGIN_LEFT, MARGIN_TOP);
+
+  lv_obj_add_style(btnm1, &style_bg, 0);
+  lv_obj_add_style(btnm1, &style_btn, LV_PART_ITEMS);
+}
+
+void setup() {
+  // put your setup code here, to run once:
+  Braccio.begin(customMenu);
+}
+
+void loop() {
+  // put your main code here, to run repeatedly:
+
+}

examples/tutorials/lessons/01-programming-the-braccio-display/05_display_challenge/05_display_challenge.ino

@@ -0,0 +1,46 @@
+#include "Braccio++.h"
+
+#define MARGIN_LEFT   0
+#define MARGIN_TOP    0
+
+#define COLOR_BG         0xA69F80
+#define COLOR_BTN        0xF2C36B
+#define COLOR_BORDER     0x591202
+#define COLOR_TEXT       0xA65221
+
+static const char * btnm_map[] = {"BTN 1", "\n",
+                                  "BTN 2", "BTN 3", "\n",
+                                  "BTN 4", "BTN 5", "\0"
+                                 };
+
+void customMenu() {
+  static lv_style_t style_bg;
+  lv_style_init(&style_bg);
+  lv_style_set_bg_color(&style_bg, lv_color_hex(COLOR_BG));
+
+  static lv_style_t style_btn;
+  lv_style_init(&style_btn);
+  lv_style_set_bg_color(&style_btn, lv_color_hex(COLOR_BTN));
+  lv_style_set_border_color(&style_btn, lv_color_hex(COLOR_BORDER));
+  lv_style_set_border_width(&style_btn, 2);
+  lv_style_set_text_color(&style_btn, lv_color_hex(COLOR_TEXT));
+
+
+  lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
+  lv_btnmatrix_set_map(btnm1, btnm_map);
+  lv_btnmatrix_set_btn_width(btnm1, 1, 2);  // Make "Button 2" twice as wide as "Button 3"
+  lv_obj_align(btnm1, LV_ALIGN_CENTER, MARGIN_LEFT, MARGIN_TOP);
+
+  lv_obj_add_style(btnm1, &style_bg, 0);
+  lv_obj_add_style(btnm1, &style_btn, LV_PART_ITEMS);
+}
+
+void setup() {
+  // put your setup code here, to run once:
+  Braccio.begin(customMenu);
+}
+
+void loop() {
+  // put your main code here, to run repeatedly:
+
+}

examples/tutorials/lessons/02-navigatting-the-display-menu/01_playing_with_the_Joystick/01_playing_with_the_Joystick.ino

@@ -0,0 +1,30 @@
+#include "Braccio++.h"
+
+String message = "";
+
+String checkJoystick(int input){
+  String joystick[] = { "",
+    "Joystick left was moved!",
+    "Joystick right was moved!",
+    "Joystick select button was pressed!",
+    "Joystick up was moved!",
+    "Joystick down was moved!"};
+   return joystick[input];
+}
+
+void setup() {
+  Serial.begin(115200);
+  while(!Serial){}
+  Braccio.begin();
+  Serial.println("Press any button or move the joystick.");
+}
+
+void loop() {
+  int joystickPos = Braccio.getKey();
+  message = checkJoystick(joystickPos);
+  if(message != ""){
+    Serial.println(message);
+    message = "";
+  }
+  delay(500);
+}

examples/tutorials/lessons/02-navigatting-the-display-menu/02_handling_events_in_the_menu/02_handling_events_in_the_menu.ino

@@ -0,0 +1,70 @@
+#include "Braccio++.h"
+
+#define MARGIN_LEFT   0
+#define MARGIN_TOP    0
+
+// Arduino Colors
+#define COLOR_TEAL       0x00878F
+#define COLOR_LIGHT_TEAL 0x62AEB2
+#define COLOR_ORANGE     0xE47128
+#define COLOR_YELLOW     0xE5AD24
+#define COLOR_WHITE      0xFFFFFF
+
+static const char * btnm_map[] = {"Option 1", "Option 2", "\n",
+                                  "Option 3", "Option 4", "\n",
+                                  "Option 5", "Option 6", "\0"
+                                 };
+
+static void eventHandler(lv_event_t * e){
+  lv_event_code_t code = lv_event_get_code(e);
+  lv_obj_t * obj = lv_event_get_target(e);
+  if (code == LV_EVENT_PRESSED) {
+    uint32_t id = lv_btnmatrix_get_selected_btn(obj);
+    const char * txt = lv_btnmatrix_get_btn_text(obj, id);
+
+    LV_LOG_USER("%s was selected\n", txt);
+    Serial.println(String(txt) + " was selected.");
+  }
+}
+
+void customMenu(){
+  static lv_style_t style_bg;
+  lv_style_init(&style_bg);
+  lv_style_set_bg_color(&style_bg, lv_color_hex(COLOR_WHITE));
+
+  static lv_style_t style_btn;
+  lv_style_init(&style_btn);
+  lv_style_set_bg_color(&style_btn, lv_color_hex(COLOR_YELLOW));
+  lv_style_set_border_color(&style_btn, lv_color_hex(COLOR_LIGHT_TEAL));
+  lv_style_set_border_width(&style_btn, 2);
+  lv_style_set_text_color(&style_btn, lv_color_hex(COLOR_TEAL));
+
+
+  lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
+  lv_btnmatrix_set_map(btnm1, btnm_map);
+  lv_obj_align(btnm1, LV_ALIGN_CENTER, MARGIN_LEFT, MARGIN_TOP);
+
+  lv_obj_add_style(btnm1, &style_bg, 0);
+  lv_obj_add_style(btnm1, &style_btn, LV_PART_ITEMS);
+
+  lv_btnmatrix_set_btn_ctrl(btnm1, 0, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 1, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 2, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 3, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 4, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 5, LV_BTNMATRIX_CTRL_CHECKABLE);
+
+  lv_btnmatrix_set_one_checked(btnm1, true);
+
+  lv_obj_add_event_cb(btnm1, eventHandler, LV_EVENT_ALL, NULL);
+
+  Braccio.connectJoystickTo(btnm1);
+}
+
+void setup() {
+  Braccio.begin(customMenu);
+}
+
+void loop() {
+
+}

examples/tutorials/lessons/02-navigatting-the-display-menu/03_navigate_challenge_I/03_navigate_challenge_I.ino

@@ -0,0 +1,70 @@
+#include "Braccio++.h"
+
+#define MARGIN_LEFT   0
+#define MARGIN_TOP    0
+
+// Arduino Colors
+#define COLOR_TEAL       0x00878F
+#define COLOR_LIGHT_TEAL 0x62AEB2
+#define COLOR_ORANGE     0xE47128
+#define COLOR_YELLOW     0xE5AD24
+#define COLOR_WHITE      0xFFFFFF
+
+static const char * btnm_map[] = {"Option 1", "Option 2", "\n",
+                                  "Option 3", "Option 4", "\n",
+                                  "Option 5", "Option 6", "\0"
+                                 };
+
+static void eventHandler(lv_event_t * e){
+  lv_event_code_t code = lv_event_get_code(e);
+  lv_obj_t * obj = lv_event_get_target(e);
+  if (code == LV_EVENT_PRESSING) {
+    uint32_t id = lv_btnmatrix_get_selected_btn(obj);
+    const char * txt = lv_btnmatrix_get_btn_text(obj, id);
+
+    LV_LOG_USER("%s is pressed\n", txt);
+    Serial.println(String(txt) + " is pressed.");
+  }
+}
+
+void customMenu(){
+  static lv_style_t style_bg;
+  lv_style_init(&style_bg);
+  lv_style_set_bg_color(&style_bg, lv_color_hex(COLOR_LIGHT_TEAL));
+
+  static lv_style_t style_btn;
+  lv_style_init(&style_btn);
+  lv_style_set_bg_color(&style_btn, lv_color_hex(COLOR_WHITE));
+  lv_style_set_border_color(&style_btn, lv_color_hex(COLOR_YELLOW));
+  lv_style_set_border_width(&style_btn, 2);
+  lv_style_set_text_color(&style_btn, lv_color_hex(COLOR_TEAL));
+
+
+  lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
+  lv_btnmatrix_set_map(btnm1, btnm_map);
+  lv_obj_align(btnm1, LV_ALIGN_CENTER, MARGIN_LEFT, MARGIN_TOP);
+
+  lv_obj_add_style(btnm1, &style_bg, 0);
+  lv_obj_add_style(btnm1, &style_btn, LV_PART_ITEMS);
+
+  lv_btnmatrix_set_btn_ctrl(btnm1, 0, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 1, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 2, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 3, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 4, LV_BTNMATRIX_CTRL_CHECKABLE);
+  lv_btnmatrix_set_btn_ctrl(btnm1, 5, LV_BTNMATRIX_CTRL_CHECKABLE);
+
+  lv_btnmatrix_set_one_checked(btnm1, true);
+
+  lv_obj_add_event_cb(btnm1, eventHandler, LV_EVENT_ALL, NULL);
+
+  Braccio.connectJoystickTo(btnm1);
+}
+
+void setup() {
+  Braccio.begin(customMenu);
+}
+
+void loop() {
+
+}