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 00000000..0f34453b Binary files /dev/null and b/lua/img/back.png differ 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 }