diff --git a/lib/luavgl/src/luavgl.h b/lib/luavgl/src/luavgl.h index b26bb5c7..c76a6493 100644 --- a/lib/luavgl/src/luavgl.h +++ b/lib/luavgl/src/luavgl.h @@ -157,6 +157,11 @@ LUALIB_API int luavgl_obj_getuserdatauv(lua_State *L, int idx); */ LUALIB_API lv_obj_t *luavgl_to_obj(lua_State *L, int idx); +/** + * @brief Get lvgl style from stack + */ +LUALIB_API lv_style_t *luavgl_to_style(lua_State *L, int idx); + /** * @brief Convert value to integer * diff --git a/lib/luavgl/src/util.c b/lib/luavgl/src/util.c index 2042a6d9..7fb86906 100644 --- a/lib/luavgl/src/util.c +++ b/lib/luavgl/src/util.c @@ -272,6 +272,17 @@ LUALIB_API lv_obj_t *luavgl_to_obj(lua_State *L, int idx) return lobj->obj; } +LUALIB_API lv_style_t *luavgl_to_style(lua_State *L, int idx) +{ + luavgl_style_t *lsty = luavgl_check_style(L, idx); + if (lsty == NULL) { + luaL_argerror(L, idx, "expect lua lvgl style, got null"); + return NULL; + } + + return &lsty->style; +} + LUALIB_API int luavgl_tointeger(lua_State *L, int idx) { int v = 0; diff --git a/lib/lvgl/src/misc/lv_style.c b/lib/lvgl/src/misc/lv_style.c index 419c29e4..baf135ad 100644 --- a/lib/lvgl/src/misc/lv_style.c +++ b/lib/lvgl/src/misc/lv_style.c @@ -92,9 +92,11 @@ const uint8_t _lv_style_builtin_prop_flag_lookup_table[_LV_STYLE_NUM_BUILT_IN_PR [LV_STYLE_SHADOW_COLOR] = 0, [LV_STYLE_SHADOW_OPA] = LV_STYLE_PROP_EXT_DRAW, - [LV_STYLE_IMG_OPA] = 0, - [LV_STYLE_IMG_RECOLOR] = 0, - [LV_STYLE_IMG_RECOLOR_OPA] = 0, + // Image style inheritance + // https://github.com/lvgl/lvgl/pull/4664 + [LV_STYLE_IMG_OPA] = LV_STYLE_PROP_INHERIT, + [LV_STYLE_IMG_RECOLOR] = LV_STYLE_PROP_INHERIT, + [LV_STYLE_IMG_RECOLOR_OPA] = LV_STYLE_PROP_INHERIT, [LV_STYLE_LINE_WIDTH] = LV_STYLE_PROP_EXT_DRAW, [LV_STYLE_LINE_DASH_WIDTH] = 0, diff --git a/lua/browser.lua b/lua/browser.lua index 5577d4df..924381ea 100644 --- a/lua/browser.lua +++ b/lua/browser.lua @@ -4,8 +4,9 @@ local backstack = require("backstack") local font = require("font") local queue = require("queue") local playing = require("playing") -local theme = require("theme") +local styles = require("styles") local playback = require("playback") +local theme = require("theme") local screen = require("screen") return screen:new { @@ -42,9 +43,10 @@ return screen:new { pad_right = 4, pad_bottom = 2, bg_opa = lvgl.OPA(100), - bg_color = "#fafafa", scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF, } + theme.set_style(header, "header") + header:Label { text = self.breadcrumb, @@ -89,7 +91,7 @@ return screen:new { local back = self.list:add_btn(nil, "< Back") back:onClicked(backstack.pop) - back:add_style(theme.list_item) + back:add_style(styles.list_item) self.focused_item = 0 self.last_item = 0 @@ -119,7 +121,7 @@ return screen:new { self.add_item(self.iterator()) end end) - btn:add_style(theme.list_item) + btn:add_style(styles.list_item) end for _ = 1, 8 do diff --git a/lua/img/db.png b/lua/img/db.png index 3952ded2..6245fab2 100644 Binary files a/lua/img/db.png and b/lua/img/db.png differ diff --git a/lua/img/enqueue.png b/lua/img/enqueue.png index 9f720969..b5136a77 100644 Binary files a/lua/img/enqueue.png and b/lua/img/enqueue.png differ diff --git a/lua/img/next.png b/lua/img/next.png index 1b22a509..1f6f044b 100644 Binary files a/lua/img/next.png and b/lua/img/next.png differ diff --git a/lua/img/next_disabled.png b/lua/img/next_disabled.png deleted file mode 100644 index c8ff06b2..00000000 Binary files a/lua/img/next_disabled.png and /dev/null differ diff --git a/lua/img/pause.png b/lua/img/pause.png index 29fa4b90..e7011821 100644 Binary files a/lua/img/pause.png and b/lua/img/pause.png differ diff --git a/lua/img/play.png b/lua/img/play.png index cc10cab5..a3b8a5af 100644 Binary files a/lua/img/play.png and b/lua/img/play.png differ diff --git a/lua/img/play_small.png b/lua/img/play_small.png index 3fc7032e..ac29aa98 100644 Binary files a/lua/img/play_small.png and b/lua/img/play_small.png differ diff --git a/lua/img/prev.png b/lua/img/prev.png index f17e6162..b445c75a 100644 Binary files a/lua/img/prev.png and b/lua/img/prev.png differ diff --git a/lua/img/prev_disabled.png b/lua/img/prev_disabled.png deleted file mode 100644 index accebe23..00000000 Binary files a/lua/img/prev_disabled.png and /dev/null differ diff --git a/lua/img/repeat.png b/lua/img/repeat.png index 9a4da7fd..40a7564e 100644 Binary files a/lua/img/repeat.png and b/lua/img/repeat.png differ diff --git a/lua/img/repeat_disabled.png b/lua/img/repeat_disabled.png deleted file mode 100644 index 20b6ab59..00000000 Binary files a/lua/img/repeat_disabled.png and /dev/null differ diff --git a/lua/img/shuffle.png b/lua/img/shuffle.png index b54e359d..4a65635b 100644 Binary files a/lua/img/shuffle.png and b/lua/img/shuffle.png differ diff --git a/lua/img/shuffle_disabled.png b/lua/img/shuffle_disabled.png deleted file mode 100644 index 912d0e95..00000000 Binary files a/lua/img/shuffle_disabled.png and /dev/null differ diff --git a/lua/licenses.lua b/lua/licenses.lua index fb0e5702..1fa392cf 100644 --- a/lua/licenses.lua +++ b/lua/licenses.lua @@ -1,7 +1,7 @@ local backstack = require("backstack") local widgets = require("widgets") local font = require("font") -local theme = require("theme") +local styles = require("styles") local screen = require("screen") local function show_license(text) @@ -103,7 +103,7 @@ return function() w = lvgl.PCT(100), h = lvgl.SIZE_CONTENT, } - row:add_style(theme.list_item) + row:add_style(styles.list_item) row:Label { text = name, flex_grow = 1 } local button = row:Button {} button:Label { text = license, text_font = font.fusion_10 } diff --git a/lua/main.lua b/lua/main.lua index 4291c3da..dc73c964 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -1,13 +1,17 @@ local font = require("font") local vol = require("volume") +local theme = require("theme") local controls = require("controls") local time = require("time") local lock_time = time.ticks() +local theme_dark = require("theme_dark") +theme.set(theme_dark) + -- Set up property bindings that are used across every screen. GLOBAL_BINDINGS = { - -- Show an alert with the current volume whenver the volume changes. + -- Show an alert with the current volume whenever the volume changes vol.current_pct:bind(function(pct) require("alerts").show(function() local container = lvgl.Object(nil, { @@ -19,11 +23,10 @@ GLOBAL_BINDINGS = { align_items = "center", align_content = "center", }, - bg_opa = lvgl.OPA(100), - bg_color = "#fafafa", radius = 8, pad_all = 2, }) + theme.set_style(container, "pop_up") container:Label { text = string.format("Volume %i%%", pct), text_font = font.fusion_10 diff --git a/lua/main_menu.lua b/lua/main_menu.lua index 7d47b785..ac9190be 100644 --- a/lua/main_menu.lua +++ b/lua/main_menu.lua @@ -4,7 +4,7 @@ local database = require("database") local backstack = require("backstack") local browser = require("browser") local playing = require("playing") -local theme = require("theme") +local styles = require("styles") local screen = require("screen") return screen:new { @@ -21,7 +21,7 @@ return screen:new { now_playing:onClicked(function() backstack.push(playing:new()) end) - now_playing:add_style(theme.list_item) + now_playing:add_style(styles.list_item) local indexes = database.indexes() for _, idx in ipairs(indexes) do @@ -32,14 +32,14 @@ return screen:new { iterator = idx:iter(), }) end) - btn:add_style(theme.list_item) + btn:add_style(styles.list_item) end local settings = menu.list:add_btn(nil, "Settings") settings:onClicked(function() backstack.push(require("settings"):new()) end) - settings:add_style(theme.list_item) + settings:add_style(styles.list_item) return menu end, diff --git a/lua/playing.lua b/lua/playing.lua index a0b9fde3..3368f590 100644 --- a/lua/playing.lua +++ b/lua/playing.lua @@ -5,22 +5,22 @@ local font = require("font") local playback = require("playback") local queue = require("queue") local screen = require("screen") +local theme = require("theme") local img = { play = lvgl.ImgData("//lua/img/play.png"), pause = lvgl.ImgData("//lua/img/pause.png"), next = lvgl.ImgData("//lua/img/next.png"), - next_disabled = lvgl.ImgData("//lua/img/next_disabled.png"), prev = lvgl.ImgData("//lua/img/prev.png"), - prev_disabled = lvgl.ImgData("//lua/img/prev_disabled.png"), shuffle = lvgl.ImgData("//lua/img/shuffle.png"), - shuffle_disabled = lvgl.ImgData("//lua/img/shuffle_disabled.png"), - repeat_enabled = lvgl.ImgData("//lua/img/repeat.png"), - repeat_disabled = lvgl.ImgData("//lua/img/repeat_disabled.png"), + repeat_src = lvgl.ImgData("//lua/img/repeat.png"), -- repeat is a reserved word } local is_now_playing_shown = false +local icon_enabled_class = "icon_enabled" +local icon_disabled_class = "icon_disabled" + return screen:new { createUi = function(self) self.root = lvgl.Object(nil, { @@ -146,11 +146,14 @@ return screen:new { repeat_btn:onClicked(function() queue.repeat_track:set(not queue.repeat_track:get()) end) - local repeat_img = repeat_btn:Image { src = img.repeat_enabled } + local repeat_img = repeat_btn:Image { src = img.repeat_src } + theme.set_style(repeat_img, icon_enabled_class) + local prev_btn = controls:Button {} prev_btn:onClicked(queue.previous) - local prev_img = prev_btn:Image { src = img.prev_disabled } + local prev_img = prev_btn:Image { src = img.prev } + theme.set_style(prev_img, icon_disabled_class) local play_pause_btn = controls:Button {} play_pause_btn:onClicked(function() @@ -158,16 +161,19 @@ return screen:new { end) play_pause_btn:focus() local play_pause_img = play_pause_btn:Image { src = img.pause } + theme.set_style(play_pause_img, icon_enabled_class) local next_btn = controls:Button {} next_btn:onClicked(queue.next) - local next_img = next_btn:Image { src = img.next_disabled } + local next_img = next_btn:Image { src = img.next } + theme.set_style(next_img, icon_disabled_class) local shuffle_btn = controls:Button {} shuffle_btn:onClicked(function() queue.random:set(not queue.random:get()) end) local shuffle_img = shuffle_btn:Image { src = img.shuffle } + theme.set_style(shuffle_img, icon_enabled_class) controls:Object({ flex_grow = 1, h = 1 }) -- spacer @@ -208,26 +214,19 @@ return screen:new { if not pos then return end playlist_pos:set { text = tostring(pos) } - next_img:set_src( - pos < queue.size:get() and img.next or img.next_disabled + theme.set_style( + next_img, pos < queue.size:get() and icon_enabled_class or icon_disabled_class ) - prev_img:set_src( - pos > 1 and img.prev or img.prev_disabled + + theme.set_style( + prev_img, pos > 1 and icon_enabled_class or icon_disabled_class ) end), queue.random:bind(function(shuffling) - if shuffling then - shuffle_img:set_src(img.shuffle) - else - shuffle_img:set_src(img.shuffle_disabled) - end + theme.set_style(shuffle_img, shuffling and icon_enabled_class or icon_disabled_class) end), queue.repeat_track:bind(function(en) - if en then - repeat_img:set_src(img.repeat_enabled) - else - repeat_img:set_src(img.repeat_disabled) - end + theme.set_style(repeat_img, en and icon_enabled_class or icon_disabled_class) end), queue.size:bind(function(num) if not num then return end diff --git a/lua/settings.lua b/lua/settings.lua index fe36fe02..d19a6180 100644 --- a/lua/settings.lua +++ b/lua/settings.lua @@ -1,11 +1,12 @@ local lvgl = require("lvgl") local backstack = require("backstack") local widgets = require("widgets") -local theme = require("theme") +local styles = require("styles") local volume = require("volume") local display = require("display") local controls = require("controls") local bluetooth = require("bluetooth") +local theme = require("theme") local database = require("database") local screen = require("screen") local usb = require("usb") @@ -23,7 +24,7 @@ local function SettingsScreen(title) align_items = "flex-start", align_content = "flex-start", }, - w = lvgl.PCT(100), + w = lvgl.PCT(90), flex_grow = 1, pad_left = 4, pad_right = 4, @@ -53,10 +54,10 @@ local BluetoothSettings = screen:new { bluetooth.enabled:set(enabled) end) - self.menu.content:Label { - text = "Paired Device", - pad_bottom = 1, - }:add_style(theme.settings_title) + theme.set_style(self.menu.content:Label { + text = "Paired Device", + pad_bottom = 1, + }, "settings_title") local paired_container = self.menu.content:Object { flex = { @@ -79,10 +80,10 @@ local BluetoothSettings = screen:new { bluetooth.paired_device:set() end) - self.menu.content:Label { - text = "Nearby Devices", - pad_bottom = 1, - }:add_style(theme.settings_title) + theme.set_style(self.menu.content:Label { + text = "Nearby Devices", + pad_bottom = 1, + }, "settings_title") local devices = self.menu.content:List { w = lvgl.PCT(100), @@ -122,9 +123,9 @@ local HeadphonesSettings = screen:new { createUi = function(self) self.menu = SettingsScreen("Headphones") - self.menu.content:Label { - text = "Maximum volume limit", - }:add_style(theme.settings_title) + theme.set_style(self.menu.content:Label { + text = "Maxiumum volume limit", + }, "settings_title") local volume_chooser = self.menu.content:Dropdown { options = "Line Level (-10 dB)\nCD Level (+6 dB)\nMaximum (+10dB)", @@ -137,9 +138,9 @@ local HeadphonesSettings = screen:new { volume.limit_db:set(limits[selection]) end) - self.menu.content:Label { - text = "Left/Right balance", - }:add_style(theme.settings_title) + theme.set_style(self.menu.content:Label { + text = "Left/Right balance", + }, "settings_title") local balance = self.menu.content:Slider { w = lvgl.PCT(100), @@ -185,19 +186,20 @@ local DisplaySettings = screen:new { createUi = function(self) self.menu = SettingsScreen("Display") - local brightness_title = self.menu.content:Object { - flex = { - flex_direction = "row", - justify_content = "flex-start", - align_items = "flex-start", - align_content = "flex-start", - }, - w = lvgl.PCT(100), - h = lvgl.SIZE_CONTENT, - } - brightness_title:Label { text = "Brightness", flex_grow = 1 } - local brightness_pct = brightness_title:Label {} - brightness_pct:add_style(theme.settings_title) + local brightness_title = self.menu.content:Object { + flex = { + flex_direction = "row", + justify_content = "flex-start", + align_items = "flex-start", + align_content = "flex-start", + }, + w = lvgl.PCT(100), + h = lvgl.SIZE_CONTENT, + + } + brightness_title:Label { text = "Brightness", flex_grow = 1 } + local brightness_pct = brightness_title:Label {} + theme.set_style(brightness_pct, "settings_title") local brightness = self.menu.content:Slider { w = lvgl.PCT(100), @@ -221,9 +223,9 @@ local InputSettings = screen:new { createUi = function(self) self.menu = SettingsScreen("Input Method") - self.menu.content:Label { - text = "Control scheme", - }:add_style(theme.settings_title) + theme.set_style(self.menu.content:Label { + text = "Control scheme", + }, "settings_title") local schemes = controls.schemes() local option_to_scheme = {} @@ -259,9 +261,9 @@ local InputSettings = screen:new { controls.scheme:set(scheme) end) - self.menu.content:Label { - text = "Scroll Sensitivity", - }:add_style(theme.settings_title) + theme.set_style(self.menu.content:Label { + text = "Scroll Sensitivity", + }, "settings_title") local slider_scale = 4; -- Power steering local sensitivity = self.menu.content:Slider { @@ -331,19 +333,19 @@ local DatabaseSettings = screen:new { widgets.Row(self.menu.content, "Schema version", db.version()) widgets.Row(self.menu.content, "Size on disk", string.format("%.1f KiB", db.size() / 1024)) - local actions_container = self.menu.content:Object { - w = lvgl.PCT(100), - h = lvgl.SIZE_CONTENT, - flex = { - flex_direction = "row", - justify_content = "center", - align_items = "space-evenly", - align_content = "center", - }, - pad_top = 4, - pad_column = 4, - } - actions_container:add_style(theme.list_item) + local actions_container = self.menu.content:Object { + w = lvgl.PCT(100), + h = lvgl.SIZE_CONTENT, + flex = { + flex_direction = "row", + justify_content = "center", + align_items = "space-evenly", + align_content = "center", + }, + pad_top = 4, + pad_column = 4, + } + actions_container:add_style(styles.list_item) local update = actions_container:Button {} update:Label { text = "Update" } @@ -381,16 +383,20 @@ return screen:new { flex_grow = 1, } - local function section(name) - self.list:add_text(name):add_style(theme.list_heading) - end + local function section(name) + local elem = self.list:Label { + text = name, + pad_left = 4, + } + theme.set_style(elem, "settings_title") + end local function submenu(name, class) local item = self.list:add_btn(nil, name) item:onClicked(function() backstack.push(class:new()) end) - item:add_style(theme.list_item) + item:add_style(styles.list_item) end section("Audio") diff --git a/lua/theme.lua b/lua/styles.lua similarity index 68% rename from lua/theme.lua rename to lua/styles.lua index 9c808946..fd45263e 100644 --- a/lua/theme.lua +++ b/lua/styles.lua @@ -1,7 +1,7 @@ local lvgl = require("lvgl") local font = require("font") -local theme = { +local styles = { list_item = lvgl.Style { pad_left = 4, pad_right = 4, @@ -13,11 +13,6 @@ local theme = { text_font = font.fusion_10, text_align = lvgl.ALIGN.CENTER, }, - settings_title = lvgl.Style { - pad_top = 2, - pad_bottom = 4, - text_font = font.fusion_10, - } } -return theme +return styles diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua new file mode 100644 index 00000000..be5feeaa --- /dev/null +++ b/lua/theme_dark.lua @@ -0,0 +1,176 @@ +local lvgl = require("lvgl") +local font = require("font") + +local background_color = "#5a5474" +local background_muted = "#464258" +local text_color = "#eeeeee" +local highlight_color = "#9773d3" +local icon_enabled_color = "#eeeeee" +local icon_disabled_color = "#6d6d69" + +local theme_dark = { + base = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(0), + text_font = font.fusion_12, + }}, + }, + root = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_color, -- Root background color + bg_grad_dir = 1, + bg_grad_color = "#1d0e38", + text_color = text_color + }}, + }, + header = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + }, + pop_up = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + }, + button = { + {lvgl.PART.MAIN, lvgl.Style { + pad_left = 2, + pad_right = 2, + pad_top = 1, + pad_bottom = 1, + bg_color = background_color, + img_recolor_opa = 180, + img_recolor = highlight_color, + radius = 5, + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + img_recolor_opa = 0, + }}, + }, + listbutton = { + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, + }, + 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), + bg_color = background_muted, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = highlight_color, + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_color = background_muted, + shadow_width = 5, + shadow_opa = lvgl.OPA(100) + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + switch = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + width = 28, + height = 8, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = background_muted, + border_color = highlight_color, + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = background_muted, + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + dropdown = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = background_muted, + border_side = 15, -- LV_BORDER_SIDE_FULL + bg_color = background_color, + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + border_color = highlight_color, + }}, + }, + dropdownlist = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = highlight_color, + bg_opa = lvgl.OPA(100), + bg_color = background_color + }}, + {lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + database_indicator = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = highlight_color, + }}, + }, + settings_title = { + {lvgl.PART.MAIN, lvgl.Style { + pad_top = 2, + pad_bottom = 4, + text_font = font.fusion_10, + text_color = highlight_color, + }}, + }, + icon_disabled = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = icon_disabled_color, + }}, + }, + icon_enabled = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = icon_enabled_color, + }}, + }, + +} + +return theme_dark diff --git a/lua/theme_light.lua b/lua/theme_light.lua new file mode 100644 index 00000000..e0a4468f --- /dev/null +++ b/lua/theme_light.lua @@ -0,0 +1,174 @@ +local lvgl = require("lvgl") +local font = require("font") + +local background_color = "#ffffff" +local background_muted = "#fafafa" +local text_color = "#000000" +local highlight_color = "#ce93d8" +local icon_enabled_color = "#2c2c2c" +local icon_disabled_color = "#999999" + +local theme_light = { + base = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(0), + text_font = font.fusion_12, + }}, + }, + root = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_color, -- Root background color + text_color = text_color + }}, + }, + header = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + }, + pop_up = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + }, + button = { + {lvgl.PART.MAIN, lvgl.Style { + pad_left = 2, + pad_right = 2, + pad_top = 1, + pad_bottom = 1, + bg_color = background_color, + img_recolor_opa = 180, + img_recolor = highlight_color, + radius = 5, + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + img_recolor_opa = 0, + }}, + }, + listbutton = { + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, + }, + 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), + bg_color = background_muted, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = highlight_color, + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_color = background_muted, + shadow_width = 5, + shadow_opa = lvgl.OPA(100) + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + switch = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + width = 28, + height = 8, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = background_muted, + border_color = highlight_color, + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = background_muted, + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + dropdown = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = background_muted, + border_side = 15, -- LV_BORDER_SIDE_FULL + bg_color = background_color, + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + border_color = highlight_color, + }}, + }, + dropdownlist = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = highlight_color, + bg_opa = lvgl.OPA(100), + bg_color = background_color + }}, + {lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + database_indicator = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = highlight_color, + }}, + }, + settings_title = { + {lvgl.PART.MAIN, lvgl.Style { + pad_top = 2, + pad_bottom = 4, + text_font = font.fusion_10, + text_color = highlight_color, + }}, + }, + icon_disabled = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = icon_disabled_color, + }}, + }, + icon_enabled = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = icon_enabled_color, + }}, + }, + +} + +return theme_light diff --git a/lua/widgets.lua b/lua/widgets.lua index 87e3f5fd..fa991758 100644 --- a/lua/widgets.lua +++ b/lua/widgets.lua @@ -3,8 +3,9 @@ local power = require("power") local bluetooth = require("bluetooth") local font = require("font") local backstack = require("backstack") -local theme = require("theme") +local styles = require("styles") local database = require("database") +local theme = require("theme") local img = { db = lvgl.ImgData("//lua/img/db.png"), @@ -55,7 +56,7 @@ function widgets.Row(parent, left, right) w = lvgl.PCT(100), h = lvgl.SIZE_CONTENT, } - container:add_style(theme.list_item) + container:add_style(styles.list_item) container:Label { text = left, flex_grow = 1 } container:Label { text = right } end @@ -80,10 +81,7 @@ function widgets.StatusBar(parent, opts) } if not opts.transparent_bg then - status_bar.root:set { - bg_opa = lvgl.OPA(100), - bg_color = "#fafafa", - } + theme.set_style(status_bar.root, "header"); end if opts.back_cb then @@ -108,6 +106,7 @@ function widgets.StatusBar(parent, opts) end status_bar.db_updating = status_bar.root:Image { src = img.db } + theme.set_style(status_bar.db_updating, "database_indicator") status_bar.bluetooth = status_bar.root:Image {} status_bar.battery = status_bar.root:Image {} status_bar.chg = status_bar.battery:Image { src = img.chg } 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 + * + * 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 + * + * SPDX-License-Identifier: GPL-3.0-only + */ + +#include "lua_version.hpp" + +#include + +#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 +#include +#include #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>> 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>{}); + 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();