Merge pull request 'themes' (#58) from themes into main

Reviewed-on: https://codeberg.org/cool-tech-zone/tangara-fw/pulls/58
Reviewed-by: cooljqln <cooljqln@noreply.codeberg.org>

10 files changed, 160 insertions, 176 deletions

diff --git a/src/lua/CMakeLists.txt b/src/lua/CMakeLists.txt
index cee738bd..0240a50c 100644
--- a/src/lua/CMakeLists.txt
+++ b/src/lua/CMakeLists.txt
@@ -3,8 +3,8 @@
 # SPDX-License-Identifier: GPL-3.0-only
 
 idf_component_register(
-  SRCS "lua_thread.cpp" "bridge.cpp" "property.cpp" "lua_database.cpp"
-  "lua_queue.cpp" "lua_version.cpp" "lua_controls.cpp" "registry.cpp"
+  SRCS "lua_theme.cpp" "lua_thread.cpp" "bridge.cpp" "property.cpp" "lua_database.cpp"
+  "lua_queue.cpp" "lua_version.cpp" "lua_theme.cpp" "lua_controls.cpp" "registry.cpp"
   "lua_screen.cpp"
   INCLUDE_DIRS "include"
   REQUIRES "drivers" "lvgl" "tinyfsm" "events" "system_fsm" "database"
diff --git a/src/lua/bridge.cpp b/src/lua/bridge.cpp
index 2bef1c30..cfa9d5f7 100644
--- a/src/lua/bridge.cpp
+++ b/src/lua/bridge.cpp
@@ -21,6 +21,7 @@
 #include "lua_queue.hpp"
 #include "lua_screen.hpp"
 #include "lua_version.hpp"
+#include "lua_theme.hpp"
 #include "lvgl.h"
 
 #include "font/lv_font_loader.h"
@@ -85,6 +86,7 @@ auto Bridge::installBaseModules(lua_State* L) -> void {
   RegisterDatabaseModule(L);
   RegisterQueueModule(L);
   RegisterVersionModule(L);
+  RegisterThemeModule(L);
   RegisterScreenModule(L);
 }
 
diff --git a/src/lua/include/lua_theme.hpp b/src/lua/include/lua_theme.hpp
new file mode 100644
index 00000000..fed710e0
--- /dev/null
+++ b/src/lua/include/lua_theme.hpp
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2024 ailurux <ailuruxx@gmail.com>
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ */
+
+#pragma once
+
+#include "lua.hpp"
+
+namespace lua {
+
+auto RegisterThemeModule(lua_State*) -> void;
+
+}  // namespace lua
diff --git a/src/lua/lua_theme.cpp b/src/lua/lua_theme.cpp
new file mode 100644
index 00000000..72434d97
--- /dev/null
+++ b/src/lua/lua_theme.cpp
@@ -0,0 +1,89 @@
+
+/*
+ * Copyright 2023 ailurux <ailuruxx@gmail.com>
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ */
+
+#include "lua_version.hpp"
+
+#include <string>
+
+#include "bridge.hpp"
+#include "lua.hpp"
+
+#include "esp_app_desc.h"
+#include "esp_log.h"
+#include "lauxlib.h"
+#include "lua.h"
+#include "lua_thread.hpp"
+#include "luavgl.h"
+#include "themes.hpp"
+
+namespace lua {
+
+static auto set_style(lua_State* L) -> int {
+  // Get the object and class name from the stack
+  std::string class_name = luaL_checkstring(L, -1);
+  lv_obj_t* obj = luavgl_to_obj(L, -2);
+  if (obj != NULL) {
+    ui::themes::Theme::instance()->ApplyStyle(obj, class_name);
+  }
+  return 0;
+}
+
+static auto set_theme(lua_State* L) -> int {
+  std::string class_name;
+  luaL_checktype(L, -1, LUA_TTABLE);
+  lua_pushnil(L);  /* first key */
+  while (lua_next(L, -2) != 0) {
+    /* uses 'key' (at index -2) and 'value' (at index -1) */
+    if (lua_type(L, -2) == LUA_TSTRING) {
+      class_name = lua_tostring(L, -2);
+    }
+    if (lua_type(L, -1) == LUA_TTABLE) {
+      // Nesting
+      lua_pushnil(L); // First key
+      while (lua_next(L, -2) != 0) {
+        // Nesting the second
+        int selector = -1;
+        lua_pushnil(L); // First key
+        while (lua_next(L, -2) != 0) {
+          int idx = lua_tointeger(L, -2);
+          if (idx == 1) {
+            // Selector
+            selector = lua_tointeger(L, -1);
+          } else if (idx == 2) {
+            // Style
+            lv_style_t* style = luavgl_to_style(L, -1);
+            if (style == NULL) {
+              ESP_LOGI("lua_theme", "Style was null or malformed");
+              return 0;
+            } else {
+              ui::themes::Theme::instance()->AddStyle(class_name, selector, style);
+            }
+          }
+          lua_pop(L, 1); 
+        }
+        lua_pop(L, 1); 
+      }
+    }
+    /* removes 'value'; keeps 'key' for next iteration */
+    lua_pop(L, 1);
+  }
+  return 0;
+}
+
+static const struct luaL_Reg kThemeFuncs[] = {{"set", set_theme}, {"set_style", set_style}, {NULL, NULL}};
+
+static auto lua_theme(lua_State* L) -> int {
+  luaL_newlib(L, kThemeFuncs);
+  return 1;
+}
+
+auto RegisterThemeModule(lua_State* L) -> void {
+  luaL_requiref(L, "theme", lua_theme, true);
+  lua_pop(L, 1);
+}
+
+}  // namespace lua
diff --git a/src/ui/include/themes.hpp b/src/ui/include/themes.hpp
index 11680c0d..09b9cdce 100644
--- a/src/ui/include/themes.hpp
+++ b/src/ui/include/themes.hpp
@@ -1,5 +1,8 @@
 #pragma once
 
+#include <string>
+#include <map>
+#include <vector>
 #include "lvgl.h"
 
 namespace ui {
@@ -19,31 +22,17 @@ class Theme {
  public:
   void Apply(void);
   void Callback(lv_obj_t* obj);
-  void ApplyStyle(lv_obj_t* obj, Style style);
+  void ApplyStyle(lv_obj_t* obj, std::string style_key);
+
+  void AddStyle(std::string key, int selector, lv_style_t* style);
 
   static auto instance() -> Theme*;
 
  private:
   Theme();
-
-  lv_style_t base_style_;
-  lv_style_t base_focused_style_;
-
-  lv_style_t button_style_;
-  lv_style_t bar_style_;
-  lv_style_t dropdown_style_;
-  lv_style_t dropdown_list_style_;
-
-  lv_style_t slider_indicator_style_;
-  lv_style_t slider_knob_style_;
-  lv_style_t slider_knob_focused_style_;
-
-  lv_style_t switch_style_;
-  lv_style_t switch_indicator_style_;
-  lv_style_t switch_indicator_checked_style_;
-  lv_style_t switch_knob_style_;
-
+  std::map<std::string, std::vector<std::pair<int, lv_style_t*>>> style_map;
   lv_theme_t theme_;
+
 };
 }  // namespace themes
 }  // namespace ui
diff --git a/src/ui/modal.cpp b/src/ui/modal.cpp
index 88f6d3ef..ec541914 100644
--- a/src/ui/modal.cpp
+++ b/src/ui/modal.cpp
@@ -41,8 +41,6 @@ Modal::Modal(Screen* host)
   lv_obj_set_style_bg_opa(root_, LV_OPA_COVER, 0);
   lv_obj_set_style_bg_color(root_, lv_color_white(), 0);
 
-  themes::Theme::instance()->ApplyStyle(root_, themes::Style::kPopup);
-
   host_->modal_group(group_);
 }
 
diff --git a/src/ui/screen.cpp b/src/ui/screen.cpp
index aafc982c..a39aaf7e 100644
--- a/src/ui/screen.cpp
+++ b/src/ui/screen.cpp
@@ -33,7 +33,7 @@ Screen::Screen()
   lv_obj_center(alert_);
 
   lv_obj_set_style_bg_opa(modal_content_, LV_OPA_TRANSP, 0);
-  lv_obj_set_style_bg_color(modal_content_, lv_color_black(), 0);
+  lv_obj_set_style_bg_opa(alert_, LV_OPA_TRANSP, 0);
 
   lv_obj_set_scrollbar_mode(root_, LV_SCROLLBAR_MODE_OFF);
   lv_obj_set_scrollbar_mode(content_, LV_SCROLLBAR_MODE_OFF);
diff --git a/src/ui/screen_lua.cpp b/src/ui/screen_lua.cpp
index 55eef119..d43c7ee7 100644
--- a/src/ui/screen_lua.cpp
+++ b/src/ui/screen_lua.cpp
@@ -9,6 +9,7 @@
 #include "core/lv_obj_tree.h"
 #include "lua.h"
 #include "lua.hpp"
+#include "themes.hpp"
 
 #include "lua_thread.hpp"
 #include "luavgl.h"
@@ -16,7 +17,9 @@
 namespace ui {
 namespace screens {
 
-Lua::Lua() : s_(nullptr), obj_ref_() {}
+Lua::Lua() : s_(nullptr), obj_ref_() {
+  themes::Theme::instance()->ApplyStyle(root_, "root");
+}
 
 Lua::~Lua() {
   if (s_ && obj_ref_) {
diff --git a/src/ui/themes.cpp b/src/ui/themes.cpp
index f8390570..b13f226a 100644
--- a/src/ui/themes.cpp
+++ b/src/ui/themes.cpp
@@ -19,84 +19,6 @@ static void theme_apply_cb(lv_theme_t* th, lv_obj_t* obj) {
 }
 
 Theme::Theme() {
-  lv_style_init(&base_style_);
-  lv_style_set_bg_opa(&base_style_, LV_OPA_TRANSP);
-  lv_style_set_text_font(&base_style_, &font_fusion_12);
-  lv_style_set_text_color(&base_style_, lv_color_black());
-
-  lv_style_init(&base_focused_style_);
-  lv_style_set_bg_opa(&base_focused_style_, LV_OPA_COVER);
-  lv_style_set_bg_color(&base_focused_style_,
-                        lv_palette_lighten(LV_PALETTE_BLUE, 5));
-
-  lv_style_init(&button_style_);
-  lv_style_set_pad_left(&button_style_, 2);
-  lv_style_set_pad_right(&button_style_, 2);
-  lv_style_set_pad_top(&button_style_, 1);
-  lv_style_set_pad_bottom(&button_style_, 1);
-  lv_style_set_bg_color(&button_style_, lv_color_white());
-  lv_style_set_radius(&button_style_, 5);
-
-  lv_style_init(&bar_style_);
-  lv_style_set_bg_opa(&bar_style_, LV_OPA_COVER);
-  lv_style_set_radius(&bar_style_, LV_RADIUS_CIRCLE);
-
-  lv_style_init(&slider_indicator_style_);
-  lv_style_set_radius(&slider_indicator_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_bg_color(&slider_indicator_style_,
-                        lv_palette_main(LV_PALETTE_BLUE));
-
-  lv_style_init(&slider_knob_style_);
-  lv_style_set_radius(&slider_knob_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_pad_all(&slider_knob_style_, 2);
-  lv_style_set_bg_color(&slider_knob_style_, lv_color_white());
-  lv_style_set_shadow_width(&slider_knob_style_, 5);
-  lv_style_set_shadow_opa(&slider_knob_style_, LV_OPA_COVER);
-
-  lv_style_init(&slider_knob_focused_style_);
-  lv_style_set_bg_color(&slider_knob_focused_style_,
-                        lv_palette_lighten(LV_PALETTE_BLUE, 4));
-
-  lv_style_init(&switch_style_);
-  lv_style_set_width(&switch_style_, 28);
-  lv_style_set_height(&switch_style_, 18);
-  lv_style_set_radius(&switch_style_, LV_RADIUS_CIRCLE);
-
-  lv_style_init(&switch_knob_style_);
-  lv_style_set_pad_all(&switch_knob_style_, -2);
-  lv_style_set_radius(&switch_knob_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_bg_opa(&switch_knob_style_, LV_OPA_COVER);
-  lv_style_set_bg_color(&switch_knob_style_, lv_color_white());
-
-  lv_style_init(&slider_knob_focused_style_);
-  lv_style_set_bg_color(&slider_knob_focused_style_,
-                        lv_palette_lighten(LV_PALETTE_BLUE, 4));
-
-  lv_style_init(&switch_indicator_style_);
-  lv_style_set_radius(&switch_indicator_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_bg_opa(&switch_indicator_style_, LV_OPA_COVER);
-  lv_style_set_bg_color(&switch_indicator_style_,
-                        lv_palette_main(LV_PALETTE_GREY));
-
-  lv_style_init(&switch_indicator_checked_style_);
-  lv_style_set_bg_color(&switch_indicator_checked_style_,
-                        lv_palette_main(LV_PALETTE_BLUE));
-
-  lv_style_init(&dropdown_style_);
-  lv_style_set_radius(&dropdown_style_, 2);
-  lv_style_set_pad_all(&dropdown_style_, 2);
-  lv_style_set_border_width(&dropdown_style_, 1);
-  lv_style_set_border_color(&dropdown_style_, lv_palette_main(LV_PALETTE_BLUE));
-  lv_style_set_border_side(&dropdown_style_, LV_BORDER_SIDE_FULL);
-
-  lv_style_init(&dropdown_list_style_);
-  lv_style_set_radius(&dropdown_list_style_, 2);
-  lv_style_set_border_width(&dropdown_list_style_, 1);
-  lv_style_set_border_color(&dropdown_list_style_, lv_palette_main(LV_PALETTE_BLUE_GREY));
-  lv_style_set_bg_opa(&dropdown_list_style_, LV_OPA_COVER);
-  lv_style_set_bg_color(&dropdown_list_style_, lv_color_white());
-  lv_style_set_pad_all(&dropdown_list_style_, 2);
-
   lv_theme_t* parent_theme = lv_disp_get_theme(NULL);
   theme_ = *parent_theme;
   theme_.user_data = this;
@@ -111,91 +33,46 @@ void Theme::Apply(void) {
 }
 
 void Theme::Callback(lv_obj_t* obj) {
-  lv_obj_add_style(obj, &base_style_, LV_PART_MAIN);
-  lv_obj_add_style(obj, &base_focused_style_, LV_PART_SELECTED);
-  lv_obj_add_style(obj, &base_focused_style_, LV_STATE_FOCUSED);
+  // Find and apply base styles
+  if (auto search = style_map.find("base"); search != style_map.end()) {
+      for (const auto& pair : search->second) {
+        lv_obj_add_style(obj, pair.second, pair.first);
+      }
+  }
 
+  // Determine class name
+  std::string class_name;
   if (lv_obj_check_type(obj, &lv_btn_class)) {
-    lv_obj_add_style(obj, &button_style_, LV_PART_MAIN);
+    class_name = "button";
+  } else if (lv_obj_check_type(obj, &lv_list_btn_class)) {
+    class_name = "listbutton";
   } else if (lv_obj_check_type(obj, &lv_bar_class)) {
-    lv_obj_add_style(obj, &bar_style_, LV_PART_MAIN);
+    class_name = "bar";
   } else if (lv_obj_check_type(obj, &lv_slider_class)) {
-    lv_obj_add_style(obj, &bar_style_, LV_PART_MAIN);
-    lv_obj_add_style(obj, &slider_indicator_style_, LV_PART_INDICATOR);
-    lv_obj_add_style(obj, &slider_knob_style_, LV_PART_KNOB);
-    lv_obj_add_style(obj, &slider_knob_focused_style_, LV_STATE_FOCUSED);
+    class_name = "slider";
   } else if (lv_obj_check_type(obj, &lv_switch_class)) {
-    lv_obj_add_style(obj, &switch_style_, LV_PART_MAIN);
-    lv_obj_add_style(obj, &switch_indicator_style_, LV_PART_INDICATOR);
-    lv_obj_add_style(obj, &switch_indicator_checked_style_,
-                     LV_PART_INDICATOR | LV_STATE_CHECKED);
-    lv_obj_add_style(obj, &switch_knob_style_, LV_PART_KNOB);
+    class_name = "switch";
   } else if (lv_obj_check_type(obj, &lv_dropdown_class)) {
-    lv_obj_add_style(obj, &dropdown_style_, LV_PART_MAIN);
+    class_name = "dropdown";
   } else if (lv_obj_check_type(obj, &lv_dropdownlist_class)) {
-    lv_obj_add_style(obj, &dropdown_list_style_, LV_PART_MAIN);
+    class_name = "dropdownlist";
   }
-}
-
-void Theme::ApplyStyle(lv_obj_t* obj, Style style) {
-  switch (style) {
-    case Style::kTopBar:
-      lv_obj_set_style_pad_bottom(obj, 1, LV_PART_MAIN);
-
-      lv_obj_set_style_shadow_width(obj, 6, LV_PART_MAIN);
-      lv_obj_set_style_shadow_opa(obj, LV_OPA_COVER, LV_PART_MAIN);
-      lv_obj_set_style_shadow_ofs_x(obj, 0, LV_PART_MAIN);
-      break;
-    case Style::kPopup:
-      lv_obj_set_style_shadow_width(obj, 6, LV_PART_MAIN);
-      lv_obj_set_style_shadow_opa(obj, LV_OPA_COVER, LV_PART_MAIN);
-      lv_obj_set_style_shadow_ofs_x(obj, 0, LV_PART_MAIN);
-      lv_obj_set_style_shadow_ofs_y(obj, 0, LV_PART_MAIN);
-
-      lv_obj_set_style_radius(obj, 5, LV_PART_MAIN);
-
-      lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, LV_PART_MAIN);
-      lv_obj_set_style_bg_color(obj, lv_color_white(), LV_PART_MAIN);
 
-      lv_obj_set_style_pad_top(obj, 2, LV_PART_MAIN);
-      lv_obj_set_style_pad_bottom(obj, 2, LV_PART_MAIN);
-      lv_obj_set_style_pad_left(obj, 2, LV_PART_MAIN);
-      lv_obj_set_style_pad_right(obj, 2, LV_PART_MAIN);
-      break;
-    case Style::kTab:
-      lv_obj_set_style_radius(obj, 0, LV_PART_MAIN);
-
-      lv_obj_set_style_border_width(obj, 1, LV_STATE_CHECKED);
-      lv_obj_set_style_border_color(obj, lv_palette_main(LV_PALETTE_BLUE),
-                                    LV_STATE_CHECKED);
-      lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_BOTTOM,
-                                   LV_STATE_CHECKED);
-      break;
-    case Style::kButtonPrimary:
-      lv_obj_set_style_border_width(obj, 1, LV_PART_MAIN);
-      lv_obj_set_style_border_color(obj, lv_palette_main(LV_PALETTE_BLUE),
-                                    LV_PART_MAIN);
-      lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_FULL, LV_PART_MAIN);
-      break;
-    case Style::kMenuSubheadFirst:
-    case Style::kMenuSubhead:
-      lv_obj_set_style_text_color(obj, lv_palette_darken(LV_PALETTE_GREY, 3),
-                                  LV_PART_MAIN);
-      lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);
+  // Apply all styles from class
+  if (auto search = style_map.find(class_name); search != style_map.end()) {
+      for (const auto& pair : search->second) {
+        lv_obj_add_style(obj, pair.second, pair.first);
+      }
+  }
 
-      lv_obj_set_style_border_width(obj, 1, LV_PART_MAIN);
-      lv_obj_set_style_border_color(obj, lv_palette_lighten(LV_PALETTE_GREY, 3),
-                                    LV_PART_MAIN);
+}
 
-      if (style == Style::kMenuSubhead) {
-        lv_obj_set_style_border_side(
-            obj, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN);
-      } else {
-        lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN);
+void Theme::ApplyStyle(lv_obj_t* obj, std::string style_key) {
+  if (auto search = style_map.find(style_key); search != style_map.end()) {
+      for (const auto& pair : search->second) {
+        lv_obj_remove_style(obj, pair.second, pair.first);
+        lv_obj_add_style(obj, pair.second, pair.first);
       }
-      break;
-    default:
-      break;
   }
 }
 
@@ -204,5 +81,15 @@ auto Theme::instance() -> Theme* {
   return &sTheme;
 }
 
+void Theme::AddStyle(std::string key, int selector, lv_style_t* style) {
+  style_map.try_emplace(key, std::vector<std::pair<int, lv_style_t*>>{});
+  if (auto search = style_map.find(key); search != style_map.end()) {
+    // Key exists
+    auto &vec = search->second;
+    // Add it to the list
+    vec.push_back(std::make_pair(selector, style));
+  }
+}
+
 }  // namespace themes
 }  // namespace ui
diff --git a/src/ui/ui_fsm.cpp b/src/ui/ui_fsm.cpp
index acc1bf10..835da19e 100644
--- a/src/ui/ui_fsm.cpp
+++ b/src/ui/ui_fsm.cpp
@@ -489,6 +489,7 @@ void Lua::entry() {
     sAlertTimer = xTimerCreate("ui_alerts", pdMS_TO_TICKS(1000), false, NULL,
                                alert_timer_callback);
     sAlertContainer = lv_obj_create(sCurrentScreen->alert());
+    lv_obj_set_style_bg_opa(sAlertContainer, LV_OPA_TRANSP, 0);
 
     auto& registry = lua::Registry::instance(*sServices);
     sLua = registry.uiThread();