Skip to content

Commit 0dc1512

Browse files
ThomasFarstrikeThomasFarstrike
committed
UI: fix on-screen keyboard button color on ESP32 in light mode
On ESP32, the keyboard buttons in light mode have no color, just white, which makes them hard to see on the white background. Probably a bug in the underlying LVGL or MicroPython or lvgl_micropython.
1 parent a42deed commit 0dc1512

File tree

4 files changed

+443
-0
lines changed

4 files changed

+443
-0
lines changed

‎internal_filesystem/builtin/apps/com.micropythonos.settings/assets/settings.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ def onCreate(self):
205205
self.keyboard = lv.keyboard(lv.layer_sys())
206206
self.keyboard.align(lv.ALIGN.BOTTOM_MID, 0, 0)
207207
self.keyboard.set_style_min_height(150, 0)
208+
mpos.ui.theme.fix_keyboard_button_style(self.keyboard) # Fix button visibility in light mode
208209
self.keyboard.add_flag(lv.obj.FLAG.HIDDEN)
209210
self.keyboard.add_event_cb(lambda *args: mpos.ui.anim.smooth_hide(self.keyboard), lv.EVENT.READY, None)
210211
self.keyboard.add_event_cb(lambda *args: mpos.ui.anim.smooth_hide(self.keyboard), lv.EVENT.CANCEL, None)

‎internal_filesystem/builtin/apps/com.micropythonos.wifi/assets/wifi.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
import mpos.config
1010
import mpos.ui.anim
11+
import mpos.ui.theme
1112
import mpos.wifi
1213

1314
have_network = True
@@ -261,6 +262,7 @@ def onCreate(self):
261262
self.keyboard.align(lv.ALIGN.BOTTOM_MID,0,0)
262263
self.keyboard.set_textarea(self.password_ta)
263264
self.keyboard.set_style_min_height(160, 0)
265+
mpos.ui.theme.fix_keyboard_button_style(self.keyboard) # Fix button visibility in light mode
264266
self.keyboard.add_event_cb(lambda *args: self.hide_keyboard(), lv.EVENT.READY, None)
265267
self.keyboard.add_event_cb(lambda *args: self.hide_keyboard(), lv.EVENT.CANCEL, None)
266268
self.keyboard.add_flag(lv.obj.FLAG.HIDDEN)

‎internal_filesystem/lib/mpos/ui/theme.py‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,67 @@
11
import lvgl as lv
22
import mpos.config
33

4+
# Global style for keyboard button fix
5+
_keyboard_button_fix_style = None
6+
_is_light_mode = True
7+
8+
def get_keyboard_button_fix_style():
9+
"""
10+
Get the keyboard button fix style for light mode.
11+
12+
The LVGL default theme applies bg_color_white to keyboard buttons,
13+
which makes them white-on-white (invisible) in light mode.
14+
This function returns a custom style to override that.
15+
16+
Returns:
17+
lv.style_t: Style to apply to keyboard buttons, or None if not needed
18+
"""
19+
global _keyboard_button_fix_style, _is_light_mode
20+
21+
# Only return style in light mode
22+
if not _is_light_mode:
23+
return None
24+
25+
# Create style if it doesn't exist
26+
if _keyboard_button_fix_style is None:
27+
_keyboard_button_fix_style = lv.style_t()
28+
_keyboard_button_fix_style.init()
29+
30+
# Set button background to light gray (matches LVGL's intended design)
31+
# This provides contrast against white background
32+
# Using palette_lighten gives us the same gray as used in the theme
33+
gray_color = lv.palette_lighten(lv.PALETTE.GREY, 2)
34+
_keyboard_button_fix_style.set_bg_color(gray_color)
35+
_keyboard_button_fix_style.set_bg_opa(lv.OPA.COVER)
36+
37+
return _keyboard_button_fix_style
38+
39+
# On ESP32, the keyboard buttons in light mode have no color, just white,
40+
# which makes them hard to see on the white background. Probably a bug in the
41+
# underlying LVGL or MicroPython or lvgl_micropython.
42+
def fix_keyboard_button_style(keyboard):
43+
"""
44+
Apply keyboard button visibility fix to a keyboard instance.
45+
46+
Call this function after creating a keyboard to ensure buttons
47+
are visible in light mode.
48+
49+
Args:
50+
keyboard: The lv.keyboard instance to fix
51+
"""
52+
style = get_keyboard_button_fix_style()
53+
if style:
54+
keyboard.add_style(style, lv.PART.ITEMS)
55+
print(f"Applied keyboard button fix for light mode to keyboard instance")
56+
457
def set_theme(prefs):
58+
global _is_light_mode
59+
560
# Load and set theme:
661
theme_light_dark = prefs.get_string("theme_light_dark", "light") # default to a light theme
762
theme_dark_bool = ( theme_light_dark == "dark" )
63+
_is_light_mode = not theme_dark_bool # Track for keyboard button fix
64+
865
primary_color = lv.theme_get_color_primary(None)
966
color_string = prefs.get_string("theme_primary_color")
1067
if color_string:
@@ -18,3 +75,7 @@ def set_theme(prefs):
1875

1976
lv.theme_default_init(mpos.ui.main_display._disp_drv, primary_color, lv.color_hex(0xFBDC05), theme_dark_bool, lv.font_montserrat_12)
2077
#mpos.ui.main_display.set_theme(theme) # not needed, default theme is applied immediately
78+
79+
# Recreate keyboard button fix style if mode changed
80+
global _keyboard_button_fix_style
81+
_keyboard_button_fix_style = None # Force recreation with new theme colors

0 commit comments

Comments
 (0)