MightyPork
/
tangara-fw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some UI/themes tweaks

Browse Source
custom
ailurux 8 months ago
parent 98cc3edb01
commit 0662bb037b
6 changed files with 58 additions and 22 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      lua/images.lua
  2. BIN
      lua/img/back.png
  3. 3
      lua/settings.lua
  4. 29
      lua/theme_dark.lua
  5. 38
      lua/theme_light.lua
  6. 9
      lua/widgets.lua

1
lua/images.lua
Unescape View File

@ -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"),

BIN
lua/img/back.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

3
lua/settings.lua
Unescape View File

@ -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,
}

29
lua/theme_dark.lua
Unescape View File

@ -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

38
lua/theme_light.lua
Unescape View File

@ -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
}},
},

9
lua/widgets.lua
Unescape View File

@ -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 }

Write Preview
Loading…
Cancel
Save