From dc74bc1de9dd56c4146232622140b56e90dcc43d Mon Sep 17 00:00:00 2001 From: ailurux Date: Thu, 7 Mar 2024 15:46:42 +1100 Subject: [PATCH] Add other styles to lua theme --- lua/main.lua | 77 +++++++++++++++++++++++++++++++++++++++--- src/ui/themes.cpp | 85 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 155 insertions(+), 7 deletions(-) diff --git a/lua/main.lua b/lua/main.lua index 5cfba47b..6cdef17d 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -41,22 +41,89 @@ local my_theme = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(0), text_font = font.fusion_12, - text_color = "#ff0000", -- Red to check it applies + text_color = "#000000", }}, {lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), - bg_color = "#0000ff", -- ew - text_color = "#ff0000", -- Red to check it applies + bg_color = "#E3F2FD", }}, }, button = { + {lvgl.PART.MAIN, lvgl.Style { + pad_left = 2, + pad_right = 2, + pad_top = 1, + pad_bottom = 1, + bg_color = "#ffffff", + radius = 5, + }}, + }, + bar = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + }, + slider = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = "#2196F3", + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_color = "#ffffff", + shadow_width = 5, + shadow_opa = lvgl.OPA(100) + }}, {lvgl.STATE.FOCUSED, lvgl.Style { - bg_color = "#00ff00", + bg_color = "#BBDEFB", }}, + }, + switch = { {lvgl.PART.MAIN, lvgl.Style { - bg_color = "#00ff00", + bg_opa = lvgl.OPA(100), + width = 28, + height = 18, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = "#9E9E9E", + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = "#2196F3", + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_opa = lvgl.OPA(100), + bg_color = "#ffffff", }}, }, + dropdown = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = "#2196F3", + border_side = 15, -- LV_BORDER_SIDE_FULL + }} + }, + dropdownlist = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = "#607D8B", + bg_opa = lvgl.OPA(100), + bg_color = "#ffffff" + }} + } } theme.set(my_theme) diff --git a/src/ui/themes.cpp b/src/ui/themes.cpp index 87b1f92b..4fd477ab 100644 --- a/src/ui/themes.cpp +++ b/src/ui/themes.cpp @@ -40,11 +40,92 @@ void Theme::Callback(lv_obj_t* obj) { } } - // TODO: Apply widget style + // Determine class name + std::string class_name; + if (lv_obj_check_type(obj, &lv_btn_class)) { + class_name = "button"; + } else if (lv_obj_check_type(obj, &lv_bar_class)) { + class_name = "bar"; + } else if (lv_obj_check_type(obj, &lv_slider_class)) { + class_name = "slider"; + } else if (lv_obj_check_type(obj, &lv_switch_class)) { + class_name = "switch"; + } else if (lv_obj_check_type(obj, &lv_dropdown_class)) { + class_name = "dropdown"; + } else if (lv_obj_check_type(obj, &lv_dropdownlist_class)) { + class_name = "dropdownlist"; + } + + // 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); + } + } } -void Theme::ApplyStyle(lv_obj_t* obj, Style style) {} +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); + + 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); + } + break; + default: + break; + } +} auto Theme::instance() -> Theme* { static Theme sTheme{};