Skip to content

Styling fixes for paper displays #514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KenVanHoeylandt merged 2 commits into from
Mar 14, 2026
Merged

Styling fixes for paper displays #514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d75828
styling fixes for paper
Shadowtrance Mar 8, 2026
27d6172
clean up duplicate
Shadowtrance Mar 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions Modules/lvgl-module/source/symbols.c
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,5 +435,7 @@ const struct ModuleSymbol lvgl_module_symbols[] = {
// lv_binfont
DEFINE_MODULE_SYMBOL(lv_binfont_create),
DEFINE_MODULE_SYMBOL(lv_binfont_destroy),
// lv_style_gen
DEFINE_MODULE_SYMBOL(lv_style_set_text_font),
MODULE_SYMBOL_TERMINATOR
};
6 changes: 0 additions & 6 deletions Tactility/Source/app/addgps/AddGps.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,6 @@ class AddGpsApp final : public App {
lv_dropdown_set_options(uartDropdown, uart_options.c_str());
lv_obj_align(uartDropdown, LV_ALIGN_TOP_RIGHT, 0, 0);
lv_obj_set_width(uartDropdown, LV_PCT(50));
lv_obj_set_style_border_color(uartDropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(uartDropdown, 1, LV_PART_MAIN);

auto* uart_label = lv_label_create(uart_wrapper);
lv_obj_align(uart_label, LV_ALIGN_TOP_LEFT, 0, 10);
Expand All @@ -144,8 +142,6 @@ class AddGpsApp final : public App {
lv_dropdown_set_options(modelDropdown, model_options.c_str());
lv_obj_align(modelDropdown, LV_ALIGN_TOP_RIGHT, 0, 0);
lv_obj_set_width(modelDropdown, LV_PCT(50));
lv_obj_set_style_border_color(modelDropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(modelDropdown, 1, LV_PART_MAIN);

auto* model_label = lv_label_create(model_wrapper);
lv_obj_align(model_label, LV_ALIGN_TOP_LEFT, 0, 10);
Expand All @@ -164,8 +160,6 @@ class AddGpsApp final : public App {
lv_dropdown_set_options(baudDropdown, baudRatesDropdownValues);
lv_obj_align(baudDropdown, LV_ALIGN_TOP_RIGHT, 0, 0);
lv_obj_set_width(baudDropdown, LV_PCT(50));
lv_obj_set_style_border_color(baudDropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(baudDropdown, 1, LV_PART_MAIN);

auto* baud_rate_label = lv_label_create(baud_wrapper);
lv_obj_align(baud_rate_label, LV_ALIGN_TOP_LEFT, 0, 10);
Expand Down
8 changes: 6 additions & 2 deletions Tactility/Source/app/chat/ChatView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ void ChatView::addMessageToList(lv_obj_t* list, const StoredMessage& msg) {
lv_obj_set_style_pad_all(label, 2, 0);

if (msg.isOwn) {
lv_obj_set_style_text_color(label, lv_color_hex(0x80C0FF), 0);
if (lv_display_get_color_format(lv_obj_get_display(label)) != LV_COLOR_FORMAT_L8) {
lv_obj_set_style_text_color(label, lv_color_hex(0x80C0FF), 0);
}
}
}

Expand Down Expand Up @@ -155,7 +157,9 @@ void ChatView::init(AppContext& appContext, lv_obj_t* parent) {
msgList = lv_list_create(parent);
lv_obj_set_flex_grow(msgList, 1);
lv_obj_set_width(msgList, LV_PCT(100));
lv_obj_set_style_bg_color(msgList, lv_color_hex(0x262626), 0);
if (lv_display_get_color_format(lv_obj_get_display(parent)) != LV_COLOR_FORMAT_L8) {
lv_obj_set_style_bg_color(msgList, lv_color_hex(0x262626), 0);
}
lv_obj_set_style_border_width(msgList, 0, 0);
lv_obj_set_style_pad_ver(msgList, 2, 0);
lv_obj_set_style_pad_hor(msgList, 4, 0);
Expand Down
4 changes: 3 additions & 1 deletion Tactility/Source/app/development/Development.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,9 @@ class DevelopmentApp final : public App {
lv_label_set_text(warning_label, "This feature is experimental and uses an unsecured http connection.");
lv_obj_set_width(warning_label, LV_PCT(100));
lv_label_set_long_mode(warning_label, LV_LABEL_LONG_WRAP);
lv_obj_set_style_text_color(warning_label, lv_color_make(0xff, 0xff, 00), LV_STATE_DEFAULT);
if (lv_display_get_color_format(lv_obj_get_display(parent)) != LV_COLOR_FORMAT_L8) {
lv_obj_set_style_text_color(warning_label, lv_color_make(0xff, 0xff, 0x00), LV_STATE_DEFAULT);
}

updateViewState();

Expand Down
6 changes: 0 additions & 6 deletions Tactility/Source/app/display/Display.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,6 @@ class DisplayApp final : public App {
// Note: order correlates with settings::display::Orientation item order
lv_dropdown_set_options(orientation_dropdown, "Landscape\nPortrait Right\nLandscape Flipped\nPortrait Left");
lv_obj_align(orientation_dropdown, LV_ALIGN_RIGHT_MID, 0, 0);
lv_obj_set_style_border_color(orientation_dropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(orientation_dropdown, 1, LV_PART_MAIN);
lv_obj_add_event_cb(orientation_dropdown, onOrientationSet, LV_EVENT_VALUE_CHANGED, this);
// Set the dropdown to match current orientation enum
lv_dropdown_set_selected(orientation_dropdown, static_cast<uint16_t>(displaySettings.orientation));
Expand Down Expand Up @@ -240,8 +238,6 @@ class DisplayApp final : public App {
timeoutDropdown = lv_dropdown_create(timeout_select_wrapper);
lv_dropdown_set_options(timeoutDropdown, "15 seconds\n30 seconds\n1 minute\n2 minutes\n5 minutes\nNever");
lv_obj_align(timeoutDropdown, LV_ALIGN_RIGHT_MID, 0, 0);
lv_obj_set_style_border_color(timeoutDropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(timeoutDropdown, 1, LV_PART_MAIN);
lv_obj_add_event_cb(timeoutDropdown, onTimeoutChanged, LV_EVENT_VALUE_CHANGED, this);
// Initialize dropdown selection from settings
uint32_t ms = displaySettings.backlightTimeoutMs;
Expand Down Expand Up @@ -276,8 +272,6 @@ class DisplayApp final : public App {
// Note: order correlates with settings::display::ScreensaverType enum order
lv_dropdown_set_options(screensaverDropdown, "None\nBouncing Balls\nMystify\nMatrix Rain");
lv_obj_align(screensaverDropdown, LV_ALIGN_RIGHT_MID, 0, 0);
lv_obj_set_style_border_color(screensaverDropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(screensaverDropdown, 1, LV_PART_MAIN);
lv_obj_add_event_cb(screensaverDropdown, onScreensaverChanged, LV_EVENT_VALUE_CHANGED, this);
lv_dropdown_set_selected(screensaverDropdown, static_cast<uint16_t>(displaySettings.screensaverType));
if (!displaySettings.backlightTimeoutEnabled) {
Expand Down
2 changes: 0 additions & 2 deletions Tactility/Source/app/i2cscanner/I2cScanner.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,6 @@ void I2cScannerApp::onShow(AppContext& app, lv_obj_t* parent) {
lv_dropdown_set_options(port_dropdown, dropdown_items.c_str());
lv_obj_set_width(port_dropdown, LV_PCT(48));
lv_obj_align(port_dropdown, LV_ALIGN_TOP_RIGHT, 0, 0);
lv_obj_set_style_border_color(port_dropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(port_dropdown, 1, LV_PART_MAIN);
lv_obj_add_event_cb(port_dropdown, onSelectBusCallback, LV_EVENT_VALUE_CHANGED, this);
auto selected_bus = getLastBusIndex();
lv_dropdown_set_selected(port_dropdown, selected_bus);
Expand Down
2 changes: 0 additions & 2 deletions Tactility/Source/app/keyboard/KeyboardSettings.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,6 @@ class KeyboardSettingsApp final : public App {
timeoutDropdown = lv_dropdown_create(timeout_select_wrapper);
lv_dropdown_set_options(timeoutDropdown, "15 seconds\n30 seconds\n1 minute\n2 minutes\n5 minutes\nNever");
lv_obj_align(timeoutDropdown, LV_ALIGN_RIGHT_MID, 0, 0);
lv_obj_set_style_border_color(timeoutDropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(timeoutDropdown, 1, LV_PART_MAIN);
lv_obj_add_event_cb(timeoutDropdown, onTimeoutChanged, LV_EVENT_VALUE_CHANGED, this);
// Initialize dropdown selection from settings
lv_dropdown_set_selected(timeoutDropdown, timeoutMsToIndex(kbSettings.backlightTimeoutMs));
Expand Down
19 changes: 13 additions & 6 deletions Tactility/Source/app/notes/Notes.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,6 @@ class NotesApp final : public App {
lv_dropdown_set_text(uiDropDownMenu, "Menu");
lv_dropdown_set_symbol(uiDropDownMenu, LV_SYMBOL_DOWN);
lv_dropdown_set_selected_highlight(uiDropDownMenu, false);
lv_obj_set_style_border_color(uiDropDownMenu, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(uiDropDownMenu, 1, LV_PART_MAIN);
lv_obj_align(uiDropDownMenu, LV_ALIGN_RIGHT_MID, 0, 0);
lv_obj_add_event_cb(uiDropDownMenu,
[](lv_event_t* e) {
Expand All @@ -153,24 +151,33 @@ class NotesApp final : public App {
lv_obj_set_height(wrapper, LV_PCT(100));
lv_obj_set_style_pad_all(wrapper, 0, LV_PART_MAIN);
lv_obj_set_style_pad_row(wrapper, 0, LV_PART_MAIN);
lv_obj_set_style_border_width(wrapper, 0, 0);
lv_obj_set_style_border_width(wrapper, 0, LV_PART_MAIN);
lv_obj_remove_flag(wrapper, LV_OBJ_FLAG_SCROLLABLE);

uiNoteText = lv_textarea_create(wrapper);
lv_obj_set_width(uiNoteText, LV_PCT(100));
lv_obj_set_height(uiNoteText, LV_PCT(86));
lv_textarea_set_password_mode(uiNoteText, false);
lv_obj_set_style_bg_color(uiNoteText, lv_color_hex(0x262626), LV_PART_MAIN);
if (lv_display_get_color_format(lv_obj_get_display(parent)) != LV_COLOR_FORMAT_L8) {
lv_obj_set_style_bg_color(uiNoteText, lv_color_hex(0x262626), LV_PART_MAIN);
}
lv_textarea_set_placeholder_text(uiNoteText, "Notes...");

lv_obj_t* footer = lv_obj_create(wrapper);
lv_obj_set_flex_flow(footer, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(footer, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_bg_color(footer, lv_color_hex(0x262626), LV_PART_MAIN);
if (lv_display_get_color_format(lv_obj_get_display(parent)) == LV_COLOR_FORMAT_L8) {
lv_obj_set_style_bg_color(footer, lv_color_hex(0xEEEEEE), LV_PART_MAIN);
lv_obj_set_style_border_width(footer, 1, LV_PART_MAIN);
lv_obj_set_style_border_color(footer, lv_theme_get_color_secondary(footer), LV_PART_MAIN);
lv_obj_set_style_border_side(footer, LV_BORDER_SIDE_TOP, LV_PART_MAIN);
} else {
lv_obj_set_style_bg_color(footer, lv_color_hex(0x262626), LV_PART_MAIN);
lv_obj_set_style_border_width(footer, 0, LV_PART_MAIN);
}
lv_obj_set_width(footer, LV_PCT(100));
lv_obj_set_height(footer, LV_PCT(14));
lv_obj_set_style_pad_all(footer, 0, LV_PART_MAIN);
lv_obj_set_style_border_width(footer, 0, 0);
lv_obj_remove_flag(footer, LV_OBJ_FLAG_SCROLLABLE);

uiCurrentFileName = lv_label_create(footer);
Expand Down
2 changes: 0 additions & 2 deletions Tactility/Source/app/screenshot/Screenshot.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,6 @@ void ScreenshotApp::createModeSettingWidgets(lv_obj_t* parent) {
modeDropdown = lv_dropdown_create(mode_wrapper);
lv_dropdown_set_options(modeDropdown, "Timer\nApp start");
lv_obj_align_to(modeDropdown, mode_label, LV_ALIGN_OUT_RIGHT_MID, 8, 0);
lv_obj_set_style_border_color(modeDropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(modeDropdown, 1, LV_PART_MAIN);
lv_obj_add_event_cb(modeDropdown, onModeSetCallback, LV_EVENT_VALUE_CHANGED, nullptr);
service::screenshot::Mode mode = service->getMode();
if (mode == service::screenshot::Mode::Apps) {
Expand Down
2 changes: 0 additions & 2 deletions Tactility/Source/app/trackball/TrackballSettings.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,6 @@ class TrackballSettingsApp final : public App {
trackballModeDropdown = lv_dropdown_create(tb_mode_wrapper);
lv_dropdown_set_options(trackballModeDropdown, "Encoder\nPointer");
lv_obj_align(trackballModeDropdown, LV_ALIGN_RIGHT_MID, 0, 0);
lv_obj_set_style_border_color(trackballModeDropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
lv_obj_set_style_border_width(trackballModeDropdown, 1, LV_PART_MAIN);
lv_dropdown_set_selected(trackballModeDropdown, modeToDropdownIndex(tbSettings.trackballMode));
lv_obj_add_event_cb(trackballModeDropdown, onTrackballModeChanged, LV_EVENT_VALUE_CHANGED, this);

Expand Down
15 changes: 11 additions & 4 deletions Tactility/Source/app/webserversettings/WebServerSettings.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,11 @@ class WebServerSettingsApp final : public App {
lv_label_set_text(labelUrl, "Web Server URL:");

labelUrlValue = lv_label_create(url_wrapper);
lv_obj_set_style_text_color(labelUrlValue, lv_palette_main(LV_PALETTE_BLUE), 0);
if (lv_display_get_color_format(lv_obj_get_display(parent)) == LV_COLOR_FORMAT_L8) {
lv_obj_set_style_text_color(labelUrlValue, lv_theme_get_color_secondary(labelUrlValue), LV_PART_MAIN);
} else {
lv_obj_set_style_text_color(labelUrlValue, lv_palette_main(LV_PALETTE_BLUE), 0);
}

updateUrlDisplay();

Expand All @@ -347,12 +351,13 @@ class WebServerSettingsApp final : public App {

auto* sync_label = lv_label_create(sync_wrapper);
lv_label_set_text(sync_label, "Asset Synchronization");
lv_obj_set_style_text_font(sync_label, &lv_font_montserrat_14, 0);

auto* sync_info = lv_label_create(sync_wrapper);
lv_label_set_long_mode(sync_info, LV_LABEL_LONG_WRAP);
lv_obj_set_width(sync_info, LV_PCT(95));
lv_obj_set_style_text_color(sync_info, lv_palette_main(LV_PALETTE_GREY), 0);
if (lv_display_get_color_format(lv_obj_get_display(parent)) != LV_COLOR_FORMAT_L8) {
lv_obj_set_style_text_color(sync_info, lv_palette_main(LV_PALETTE_GREY), 0);
}
lv_label_set_text(sync_info, "Sync web assets between Data partition and SD card backup");

auto* sync_button = lv_btn_create(sync_wrapper);
Expand All @@ -366,7 +371,9 @@ class WebServerSettingsApp final : public App {
auto* info_label = lv_label_create(main_wrapper);
lv_label_set_long_mode(info_label, LV_LABEL_LONG_WRAP);
lv_obj_set_width(info_label, LV_PCT(95));
lv_obj_set_style_text_color(info_label, lv_palette_main(LV_PALETTE_GREY), 0);
if (lv_display_get_color_format(lv_obj_get_display(parent)) != LV_COLOR_FORMAT_L8) {
lv_obj_set_style_text_color(info_label, lv_palette_main(LV_PALETTE_GREY), 0);
}
lv_label_set_text(info_label,
"WiFi Station credentials are managed separately.\n"
"Use the WiFi menu to connect to networks.\n\n"
Expand Down
7 changes: 7 additions & 0 deletions Tactility/Source/lvgl/Toolbar.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,7 @@ lv_obj_t* toolbar_add_switch_action(lv_obj_t* obj) {

lv_obj_t* widget = lv_switch_create(wrapper);
lv_obj_set_align(widget, LV_ALIGN_CENTER);

return widget;
}

Expand All @@ -238,6 +239,12 @@ lv_obj_t* toolbar_add_spinner_action(lv_obj_t* obj) {

auto* spinner = spinner_create(wrapper);
lv_obj_set_align(spinner, LV_ALIGN_CENTER);

if (lv_display_get_color_format(lv_obj_get_display(obj)) == LV_COLOR_FORMAT_L8) {
lv_obj_set_style_image_recolor(spinner, lv_theme_get_color_secondary(obj), LV_STATE_DEFAULT);
lv_obj_set_style_image_recolor_opa(spinner, LV_OPA_COVER, LV_STATE_DEFAULT);
}

return spinner;
}

Expand Down
7 changes: 7 additions & 0 deletions Tactility/Source/lvgl/wrappers/dropdown.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@ lv_obj_t* __wrap_lv_dropdown_create(lv_obj_t* parent) {
lv_obj_set_style_pad_all(dropdown, 2, LV_STATE_DEFAULT);
}

lv_obj_set_style_border_width(dropdown, 1, LV_PART_MAIN);
if (lv_display_get_color_format(lv_obj_get_display(parent)) == LV_COLOR_FORMAT_L8) {
lv_obj_set_style_border_color(dropdown, lv_theme_get_color_secondary(parent), LV_PART_MAIN);
} else {
lv_obj_set_style_border_color(dropdown, lv_color_hex(0xFAFAFA), LV_PART_MAIN);
}

return dropdown;
}

Expand Down
4 changes: 4 additions & 0 deletions Tactility/Source/lvgl/wrappers/switch.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ lv_obj_t* __wrap_lv_switch_create(lv_obj_t* parent) {
lv_obj_set_style_size(widget, 25, 15, LV_STATE_DEFAULT);
}

if (lv_display_get_color_format(lv_obj_get_display(parent)) == LV_COLOR_FORMAT_L8) {
lv_obj_set_style_bg_color(widget, lv_theme_get_color_secondary(parent), LV_PART_MAIN);
}

return widget;
}

Expand Down
5 changes: 5 additions & 0 deletions Tactility/Source/lvgl/wrappers/textarea.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ lv_obj_t* __wrap_lv_textarea_create(lv_obj_t* parent) {
gui_service->keyboardAddTextArea(textarea);
}

if (lv_display_get_color_format(lv_obj_get_display(parent)) == LV_COLOR_FORMAT_L8) {
lv_obj_set_style_border_width(textarea, 1, LV_PART_MAIN);
lv_obj_set_style_border_color(textarea, lv_theme_get_color_secondary(parent), LV_PART_MAIN);
}

return textarea;
}

Expand Down
Loading