From d719f9c5017ad8006c21b6d546a5d70e846e9502 Mon Sep 17 00:00:00 2001 From: ailurux Date: Mon, 12 Aug 2024 03:19:03 +0000 Subject: daniel/theme-setting (#87) - Themes can be loaded from disk and built-in - Themes can be selected in a new themes menu of the settings screen - Some touch-ups to existing themes - The saved theme is persisted in nvs Reviewed-on: https://codeberg.org/cool-tech-zone/tangara-fw/pulls/87 Reviewed-by: cooljqln Co-authored-by: ailurux Co-committed-by: ailurux --- lua/theme_light.lua | 78 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 65 insertions(+), 13 deletions(-) (limited to 'lua/theme_light.lua') diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 05b7d291..96403de3 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -2,10 +2,10 @@ 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 background_muted = "#f2f2f2" +local text_color = "#2c2c2c" +local highlight_color = "#ff82bc" +local icon_enabled_color = "#ff82bc" local icon_disabled_color = "#999999" local theme_light = { @@ -47,6 +47,7 @@ local theme_light = { }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), + text_color = "#ffffff", bg_color = highlight_color, image_recolor_opa = 0, }}, @@ -55,6 +56,7 @@ local theme_light = { {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = highlight_color, + text_color = "#ffffff" }}, }, bar = { @@ -75,16 +77,41 @@ local theme_light = { }}, {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) + shadow_opa = lvgl.OPA(100), + pad_all = 2, + }}, + {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, + }}, + }, + 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, @@ -93,24 +120,27 @@ local theme_light = { switch = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), - width = 28, - height = 8, + width = 18, + height = 10, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff bg_color = background_muted, - border_color = highlight_color, + border_color = text_color, + border_width = 1, }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - bg_color = background_muted, + bg_color = background_color, }}, {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_opa = lvgl.OPA(100), 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, + bg_color = background_color, + border_color = text_color, + border_width = 1, }}, {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = highlight_color, @@ -161,14 +191,36 @@ local theme_light = { image_recolor_opa = 180, image_recolor = icon_disabled_color, }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + image_recolor_opa = 0, + image_recolor = "#ffffff", + }}, }, icon_enabled = { {lvgl.PART.MAIN, lvgl.Style { image_recolor_opa = 180, image_recolor = icon_enabled_color, }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + image_recolor_opa = 0, + image_recolor = "#ffffff", + }}, + }, + now_playing = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + border_width = 1, + border_color = highlight_color, + border_side = 15, -- LV_BORDER_SIDE_FULL + }}, + }, + menu_icon = { + {lvgl.PART.MAIN, lvgl.Style { + pad_all = 4, + radius = 4 + }}, }, - } return theme_light -- cgit v1.2.3 From 0662bb037b94ffc50ee7ce313c348cbe6b7f6e4c Mon Sep 17 00:00:00 2001 From: ailurux Date: Thu, 15 Aug 2024 16:14:18 +1000 Subject: Some UI/themes tweaks --- lua/theme_light.lua | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) (limited to 'lua/theme_light.lua') 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 }}, }, -- cgit v1.2.3 From f203bfde606fab1f001b6085edb02a6f94e9fbdb Mon Sep 17 00:00:00 2001 From: ailurux Date: Thu, 15 Aug 2024 16:36:16 +1000 Subject: Add border to switch widget --- lua/theme_light.lua | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'lua/theme_light.lua') diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 03d076f4..9e35cf9e 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -130,6 +130,9 @@ local theme_light = { width = 18, height = 10, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = background_muted, + border_color = border_color, + border_width = 1, }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff @@ -142,6 +145,9 @@ local theme_light = { {lvgl.PART.KNOB, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff bg_opa = lvgl.OPA(100), + bg_color = background_muted, + border_color = border_color, + border_width = 1, }}, {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = highlight_color, -- cgit v1.2.3 From 3ed3f1dfeb7f83630f0e1d0633eaa5fbda9d37c7 Mon Sep 17 00:00:00 2001 From: jacqueline Date: Fri, 16 Aug 2024 11:42:32 +1000 Subject: Add cool skeumorphic embossing --- lua/theme_light.lua | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) (limited to 'lua/theme_light.lua') diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 9e35cf9e..ce728c7c 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -37,16 +37,18 @@ local theme_light = { }, button = { {lvgl.PART.MAIN, lvgl.Style { - pad_left = 2, - pad_right = 2, - pad_top = 1, - pad_bottom = 1, + pad_left = 1, + pad_right = 1, + margin_all = 1, bg_color = background_color, image_recolor_opa = 180, image_recolor = highlight_color, radius = 4, border_color = border_color, border_width = 1, + border_side = 9, + outline_color = border_color, + outline_width = 1, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), @@ -88,6 +90,9 @@ local theme_light = { bg_color = background_muted, border_color = border_color, border_width = 1, + border_side = 9, + outline_color = border_color, + outline_width = 1, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = background_muted, @@ -148,6 +153,9 @@ local theme_light = { bg_color = background_muted, border_color = border_color, border_width = 1, + border_side = 9, + outline_color = border_color, + outline_width = 1, }}, {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = highlight_color, @@ -157,10 +165,12 @@ local theme_light = { {lvgl.PART.MAIN, lvgl.Style{ radius = 2, pad_all = 2, - border_width = 1, - border_color = border_color, - border_side = 15, -- LV_BORDER_SIDE_FULL bg_color = background_color, + border_color = border_color, + border_width = 1, + border_side = 9, + outline_color = border_color, + outline_width = 1, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { border_color = highlight_color, @@ -228,9 +238,6 @@ local theme_light = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - border_width = 1, - border_color = border_color, - border_side = 15, -- LV_BORDER_SIDE_FULL }}, }, menu_icon = { -- cgit v1.2.3 From 0f9005626d2d919e6995809453b9b5ec3c72096b Mon Sep 17 00:00:00 2001 From: ailurux Date: Fri, 16 Aug 2024 16:56:58 +1000 Subject: Redesigned many icons, added styles for battery icon recolouring based on percentage --- lua/theme_light.lua | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'lua/theme_light.lua') diff --git a/lua/theme_light.lua b/lua/theme_light.lua index ce728c7c..e856c015 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -246,6 +246,30 @@ local theme_light = { radius = 4 }}, }, + battery = { + {lvgl.PART.MAIN, lvgl.Style { + image_recolor_opa = 180, + image_recolor = highlight_color, + }}, + }, + battery_0 = { + {lvgl.PART.MAIN, lvgl.Style { + image_recolor_opa = 180, + image_recolor = "#aa3333", + }}, + }, + battery_charging = { + {lvgl.PART.MAIN, lvgl.Style { + image_recolor_opa = 180, + image_recolor = "#33aa33", + }}, + }, + battery_charge_icon = { + {lvgl.PART.MAIN, lvgl.Style { + image_recolor_opa = 180, + image_recolor = "#fdd833", + }}, + }, } return theme_light -- cgit v1.2.3 From e0b057b3fa6ee1e8e8fd90d1abd6f201f73937ab Mon Sep 17 00:00:00 2001 From: ailurux Date: Tue, 27 Aug 2024 16:30:40 +1000 Subject: Various UI tweaks and improvements --- lua/theme_light.lua | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'lua/theme_light.lua') diff --git a/lua/theme_light.lua b/lua/theme_light.lua index e856c015..3da3de9b 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -46,7 +46,7 @@ local theme_light = { radius = 4, border_color = border_color, border_width = 1, - border_side = 9, + border_side = 9, -- Bottom right outline_color = border_color, outline_width = 1, }}, @@ -56,6 +56,10 @@ local theme_light = { bg_color = highlight_color, image_recolor_opa = 0, }}, + {lvgl.PART.MAIN | lvgl.STATE.PRESSED, lvgl.Style { + margin_left = 2, + border_width = 0, + }}, }, listbutton = { {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { @@ -100,6 +104,9 @@ local theme_light = { {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = highlight_color, }}, + {lvgl.PART.KNOB | lvgl.STATE.EDITED, lvgl.Style { + pad_all = 2, + }}, {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { bg_color = highlight_color, }}, @@ -125,6 +132,9 @@ local theme_light = { bg_color = highlight_color, pad_all = 1, }}, + {lvgl.PART.KNOB | lvgl.STATE.EDITED, lvgl.Style { + pad_all = 2, + }}, {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { bg_color = highlight_color, }}, -- cgit v1.2.3 From 20d5de38cc3b0c236e68b409ab1870dbb3812174 Mon Sep 17 00:00:00 2001 From: ailurux Date: Thu, 29 Aug 2024 16:08:11 +1000 Subject: Style regulatory icons so they are visible with the light theme --- lua/theme_light.lua | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'lua/theme_light.lua') diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 3da3de9b..275d06ca 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -280,6 +280,12 @@ local theme_light = { image_recolor = "#fdd833", }}, }, + regulatory_icons = { + {lvgl.PART.MAIN, lvgl.Style { + image_recolor_opa = 255, + image_recolor = text_color, + }}, + }, } return theme_light -- cgit v1.2.3