feat(ui): update button styles so focused is highlighted red so it is easy to see what button is selected when using the gamepad

Author: finger563

components/gui/include/gui.hpp

@@ -214,6 +214,9 @@ class Gui {
   std::atomic<int> focused_rom_{-1};
   lv_img_dsc_t focused_boxart_;
 
+  // style for buttons
+  lv_style_t button_style_;
+
   lv_anim_t rom_label_animation_template_;
   lv_style_t rom_label_style_;
 

components/gui/src/gui.cpp

@@ -168,6 +168,22 @@ void Gui::init_ui() {
   lv_group_add_obj(settings_screen_group_, ui_hapticupbutton);
   lv_group_add_obj(settings_screen_group_, ui_hapticplaybutton);
 
+  // set the focused style for all the buttons to have a red border
+  lv_style_init(&button_style_);
+  lv_style_set_border_color(&button_style_, lv_palette_main(LV_PALETTE_RED));
+  lv_style_set_border_width(&button_style_, 2);
+
+  lv_obj_add_style(ui_settingsbutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_playbutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_closebutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_volumeupbutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_volumedownbutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_mutebutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_hapticupbutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_hapticdownbutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_hapticplaybutton, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_videosettingdropdown, &button_style_, LV_STATE_FOCUSED);
+
   focus_rommenu();
 }
 

components/menu/include/menu.hpp

@@ -172,9 +172,10 @@ class Menu {
   void on_value_changed(lv_event_t *e);
   void on_key(lv_event_t *e);
 
+  // LVLG menu objects
+  lv_style_t button_style_;
   lv_group_t *group_{nullptr};
 
-  // LVLG menu objects
   lv_img_dsc_t state_image_;
   lv_img_dsc_t paused_image_;
 

components/menu/src/menu.cpp

@@ -68,6 +68,23 @@ void Menu::init_ui() {
   lv_group_add_obj(group_, ui_reset_btn);
   lv_group_add_obj(group_, ui_quit_btn);
 
+  // set the focused style for all the buttons to have a red border
+  lv_style_init(&button_style_);
+  lv_style_set_border_color(&button_style_, lv_palette_main(LV_PALETTE_RED));
+  lv_style_set_border_width(&button_style_, 2);
+
+  lv_obj_add_style(ui_resume_btn, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_volume_mute_btn, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_volume_dec_btn, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_volume_inc_btn, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_btn_slot_dec, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_btn_slot_inc, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_load_btn, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_save_btn, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_Dropdown2, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_reset_btn, &button_style_, LV_STATE_FOCUSED);
+  lv_obj_add_style(ui_quit_btn, &button_style_, LV_STATE_FOCUSED);
+
   // now focus the resume button
   lv_group_focus_obj(ui_resume_btn);
   lv_group_focus_freeze(group_, false);