From 0662bb037b94ffc50ee7ce313c348cbe6b7f6e4c Mon Sep 17 00:00:00 2001 From: ailurux Date: Thu, 15 Aug 2024 16:14:18 +1000 Subject: [PATCH] Some UI/themes tweaks --- lua/images.lua | 1 + lua/img/back.png | Bin 0 -> 7254 bytes lua/settings.lua | 3 --- lua/theme_dark.lua | 29 ++++++++++++++++++++++++++--- lua/theme_light.lua | 38 +++++++++++++++++++++++++------------- lua/widgets.lua | 9 ++++++--- 6 files changed, 58 insertions(+), 22 deletions(-) create mode 100644 lua/img/back.png diff --git a/lua/images.lua b/lua/images.lua index 1634bc44..8900233f 100644 --- a/lua/images.lua +++ b/lua/images.lua @@ -1,6 +1,7 @@ local lvgl = require("lvgl") local img = { + back = lvgl.ImgData("//lua/img/back.png"), play = lvgl.ImgData("//lua/img/play.png"), play_small = lvgl.ImgData("//lua/img/playcirc.png"), pause = lvgl.ImgData("//lua/img/pause.png"), diff --git a/lua/img/back.png b/lua/img/back.png new file mode 100644 index 0000000000000000000000000000000000000000..0f34453b24e19862cd37ddabb288d949c814cfb0 GIT binary patch literal 7254 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 GkN6+`hRm=4 literal 0 HcmV?d00001 diff --git a/lua/settings.lua b/lua/settings.lua index 3033b36e..ff8a6e7f 100644 --- a/lua/settings.lua +++ b/lua/settings.lua @@ -227,7 +227,6 @@ local HeadphonesSettings = SettingsScreen:new { local balance = self.content:Slider { w = lvgl.PCT(100), - h = 5, range = { min = -100, max = 100 }, value = 0, } @@ -287,7 +286,6 @@ local DisplaySettings = SettingsScreen:new { local brightness = self.content:Slider { w = lvgl.PCT(100), - h = 5, range = { min = 0, max = 100 }, value = display.brightness:get(), } @@ -411,7 +409,6 @@ local InputSettings = SettingsScreen:new { local slider_scale = 4; -- Power steering local sensitivity = self.content:Slider { w = lvgl.PCT(90), - h = 5, range = { min = 0, max = 255 / slider_scale }, value = controls.scroll_sensitivity:get() / slider_scale, } diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index b9bcece2..20d64495 100644 --- a/lua/theme_dark.lua +++ b/lua/theme_dark.lua @@ -79,8 +79,6 @@ local theme_dark = { 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, @@ -92,6 +90,31 @@ local theme_dark = { bg_color = highlight_color, }}, }, + scrubber = { + {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 + bg_color = background_muted, + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + pad_all = 1, + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + }, switch = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), @@ -107,8 +130,8 @@ local theme_dark = { bg_color = background_color, }}, {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { - bg_color = highlight_color, bg_opa = lvgl.OPA(100), + bg_color = highlight_color, }}, {lvgl.PART.KNOB, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 96403de3..03d076f4 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -7,6 +7,7 @@ local text_color = "#2c2c2c" local highlight_color = "#ff82bc" local icon_enabled_color = "#ff82bc" local icon_disabled_color = "#999999" +local border_color = "#888888" local theme_light = { base = { @@ -43,7 +44,9 @@ local theme_light = { bg_color = background_color, image_recolor_opa = 180, image_recolor = highlight_color, - radius = 5, + radius = 4, + border_color = border_color, + border_width = 1, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), @@ -70,17 +73,21 @@ local theme_light = { bg_opa = lvgl.OPA(100), bg_color = background_muted, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + border_color = border_color, + border_width = 1, + height = 8, }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff bg_color = highlight_color, + border_color = border_color, + border_width = 1, }}, {lvgl.PART.KNOB, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff bg_color = background_muted, - shadow_width = 5, - shadow_opa = lvgl.OPA(100), - pad_all = 2, + border_color = border_color, + border_width = 1, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = background_muted, @@ -123,9 +130,6 @@ local theme_light = { width = 18, height = 10, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - bg_color = background_muted, - border_color = text_color, - border_width = 1, }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff @@ -138,9 +142,6 @@ local theme_light = { {lvgl.PART.KNOB, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff bg_opa = lvgl.OPA(100), - bg_color = background_color, - border_color = text_color, - border_width = 1, }}, {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = highlight_color, @@ -151,7 +152,7 @@ local theme_light = { radius = 2, pad_all = 2, border_width = 1, - border_color = background_muted, + border_color = border_color, border_side = 15, -- LV_BORDER_SIDE_FULL bg_color = background_color, }}, @@ -164,7 +165,7 @@ local theme_light = { radius = 2, pad_all = 2, border_width = 1, - border_color = highlight_color, + border_color = border_color, bg_opa = lvgl.OPA(100), bg_color = background_color }}, @@ -178,6 +179,17 @@ local theme_light = { image_recolor = highlight_color, }}, }, + back_button = { + {lvgl.PART.MAIN, lvgl.Style { + image_recolor_opa = 180, + image_recolor = icon_enabled_color, + pad_all = 0, + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + image_recolor_opa = 0, + image_recolor = "#ffffff", + }}, + }, settings_title = { {lvgl.PART.MAIN, lvgl.Style { pad_top = 2, @@ -211,7 +223,7 @@ local theme_light = { bg_opa = lvgl.OPA(100), radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff border_width = 1, - border_color = highlight_color, + border_color = border_color, border_side = 15, -- LV_BORDER_SIDE_FULL }}, }, diff --git a/lua/widgets.lua b/lua/widgets.lua index f830390f..2eab3af6 100644 --- a/lua/widgets.lua +++ b/lua/widgets.lua @@ -8,6 +8,7 @@ local styles = require("styles") local database = require("database") local theme = require("theme") local screen = require("screen") +local images = require("images") local img = { db = lvgl.ImgData("//lua/img/db.png"), @@ -112,10 +113,11 @@ function widgets.StatusBar(parent, opts) if opts.back_cb then local back = root:Button { w = lvgl.SIZE_CONTENT, - h = 12, + h = lvgl.SIZE_CONTENT, } - local label = back:Label({ text = "<", align = lvgl.ALIGN.CENTER }) - widgets.Description(label, "Back") + back:Image{src=images.back} + theme.set_style(back, "back_button") + widgets.Description(back, "Back") back:onClicked(opts.back_cb) back:onevent(lvgl.EVENT.FOCUSED, function() local first_view = parent.content @@ -136,6 +138,7 @@ function widgets.StatusBar(parent, opts) text = "", align = lvgl.ALIGN.CENTER, flex_grow = 1, + pad_left = 2, } if opts.title then title:set { text = opts.title }