Styling fixes for paper displays (#514)

Modules/lvgl-module/source/symbols.c

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

Tactility/Source/app/addgps/AddGps.cpp

@@ -122,8 +122,6 @@ public:
         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);
@@ -144,8 +142,6 @@ public:
         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);
@@ -164,8 +160,6 @@ public:
         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);

Tactility/Source/app/chat/ChatView.cpp

@@ -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);
+        }
     }
 }
 
@@ -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);

Tactility/Source/app/development/Development.cpp

@@ -147,7 +147,9 @@ public:
         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();
 

Tactility/Source/app/display/Display.cpp

@@ -203,8 +203,6 @@ public:
         // 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));
@@ -240,8 +238,6 @@ public:
             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;
@@ -276,8 +272,6 @@ public:
             // 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) {

Tactility/Source/app/i2cscanner/I2cScanner.cpp

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

Tactility/Source/app/keyboard/KeyboardSettings.cpp

@@ -161,8 +161,6 @@ public:
         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));

Tactility/Source/app/notes/Notes.cpp

@@ -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) {
@@ -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);

Tactility/Source/app/screenshot/Screenshot.cpp

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

Tactility/Source/app/trackball/TrackballSettings.cpp

@@ -139,8 +139,6 @@ public:
         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);
 

Tactility/Source/app/webserversettings/WebServerSettings.cpp

@@ -333,7 +333,11 @@ public:
         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();
 
@@ -347,12 +351,13 @@ public:
         
         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);
@@ -366,7 +371,9 @@ public:
         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"

Tactility/Source/lvgl/Toolbar.cpp

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

Tactility/Source/lvgl/wrappers/dropdown.cpp

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

Tactility/Source/lvgl/wrappers/switch.cpp

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

Tactility/Source/lvgl/wrappers/textarea.cpp

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