From 6f4ace1dd4b9b34f95af1ba365b68624e209d147 Mon Sep 17 00:00:00 2001 From: ailurux Date: Mon, 28 Aug 2023 14:59:29 +1000 Subject: [PATCH] Custom themes and top bar styling --- src/ui/include/themes.hpp | 12 +++++++++++- src/ui/lvgl_task.cpp | 3 +-- src/ui/themes.cpp | 31 ++++++++++++++++++++++++++----- src/ui/widget_top_bar.cpp | 7 +++++-- 4 files changed, 43 insertions(+), 10 deletions(-) diff --git a/src/ui/include/themes.hpp b/src/ui/include/themes.hpp index 9af80c0d..ef0e719c 100644 --- a/src/ui/include/themes.hpp +++ b/src/ui/include/themes.hpp @@ -4,14 +4,24 @@ namespace ui { namespace themes { + + enum class Style { + kMenuItem, + kTopBar + }; class Theme { public: - Theme(); + void Apply(void); void Callback(lv_obj_t* obj); + void ApplyStyle(lv_obj_t* obj, Style style); + + static auto instance() -> Theme*; private: + Theme(); lv_style_t button_style_; + lv_style_t button_style_focused_; lv_theme_t theme_; }; } // namespace themes diff --git a/src/ui/lvgl_task.cpp b/src/ui/lvgl_task.cpp index a9af0900..9952d0bb 100644 --- a/src/ui/lvgl_task.cpp +++ b/src/ui/lvgl_task.cpp @@ -70,8 +70,7 @@ void LvglMain(std::weak_ptr weak_touch_wheel, lv_theme_t* base_theme = lv_theme_basic_init(NULL); lv_disp_set_theme(NULL, base_theme); - static themes::Theme sTheme{}; - sTheme.Apply(); + themes::Theme::instance()->Apply(); TouchWheelEncoder encoder(weak_touch_wheel); diff --git a/src/ui/themes.cpp b/src/ui/themes.cpp index ecb1d434..bcbf01f2 100644 --- a/src/ui/themes.cpp +++ b/src/ui/themes.cpp @@ -1,6 +1,7 @@ #include "themes.hpp" #include "core/lv_obj.h" #include "misc/lv_color.h" +#include "esp_log.h" LV_FONT_DECLARE(font_fusion); @@ -14,10 +15,11 @@ static void theme_apply_cb(lv_theme_t* th, lv_obj_t* obj) { Theme::Theme() { /*Initialize the styles*/ lv_style_init(&button_style_); - lv_style_set_bg_color(&button_style_, lv_palette_main(LV_PALETTE_GREEN)); - lv_style_set_border_color(&button_style_, - lv_palette_darken(LV_PALETTE_GREEN, 3)); - lv_style_set_border_width(&button_style_, 1); + lv_style_set_pad_all(&button_style_, 2); + lv_style_set_bg_color(&button_style_, lv_color_white()); + + lv_style_init(&button_style_focused_); + lv_style_set_bg_color(&button_style_focused_, lv_palette_lighten(LV_PALETTE_BLUE_GREY, 2)); lv_theme_t* parent_theme = lv_disp_get_theme(NULL); theme_ = *parent_theme; @@ -33,13 +35,32 @@ void Theme::Apply(void) { } void Theme::Callback(lv_obj_t* obj) { + ESP_LOGI("Theme", "Callback called on object %p", obj); lv_obj_set_style_text_font(obj, &font_fusion, 0); lv_obj_set_style_text_color(obj, lv_color_black(), 0); if (lv_obj_check_type(obj, &lv_btn_class) || lv_obj_check_type(obj, &lv_list_btn_class)) { - lv_obj_add_style(obj, &button_style_, LV_PART_MAIN | LV_STATE_FOCUSED); + lv_obj_add_style(obj, &button_style_, LV_PART_MAIN); + lv_obj_add_style(obj, &button_style_focused_, LV_PART_MAIN | LV_STATE_FOCUSED); + } +} + +void Theme::ApplyStyle(lv_obj_t* obj, Style style) { + ESP_LOGI("Theme", "Apply style called on object %p", obj); + if (style == Style::kTopBar) { + lv_obj_set_style_border_color(obj, lv_palette_darken(LV_PALETTE_BLUE_GREY, 2), LV_PART_MAIN); + lv_obj_set_style_border_width(obj, 1, LV_PART_MAIN); + lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_BOTTOM|LV_BORDER_SIDE_TOP, 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); } } + +auto Theme::instance() -> Theme* { + static Theme sTheme{}; + return &sTheme; +} + } // namespace themes } // namespace ui diff --git a/src/ui/widget_top_bar.cpp b/src/ui/widget_top_bar.cpp index 7d4ef98c..458038a2 100644 --- a/src/ui/widget_top_bar.cpp +++ b/src/ui/widget_top_bar.cpp @@ -15,6 +15,7 @@ #include "ui_fsm.hpp" #include "widgets/lv_img.h" #include "widgets/lv_label.h" +#include "themes.hpp" namespace ui { namespace widgets { @@ -25,10 +26,12 @@ static void back_click_cb(lv_event_t* ev) { TopBar::TopBar(lv_obj_t* parent, const Configuration& config) { container_ = lv_obj_create(parent); - lv_obj_set_size(container_, lv_pct(100), 14); + lv_obj_set_size(container_, lv_pct(100), 18); lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_ROW); - lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, + lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_END); + + themes::Theme::instance()->ApplyStyle(container_, themes::Style::kTopBar); if (config.show_back_button) { back_button_ = lv_btn_create(container_);