From dc422c6b9ea0fa3076f555a297b2047146baf982 Mon Sep 17 00:00:00 2001 From: nick Date: Wed, 10 Jun 2026 02:52:55 -0600 Subject: [PATCH] dashboard: add dimensional relay button styling --- .../esp32-s3-dashboard/dashboard_config.h | 2 +- .../esp32-s3-dashboard/esp32-s3-dashboard.ino | 39 ++++++++++++++++--- 2 files changed, 34 insertions(+), 7 deletions(-) diff --git a/firmware/esp32-s3-dashboard/dashboard_config.h b/firmware/esp32-s3-dashboard/dashboard_config.h index 51bfe9a..be97d8d 100644 --- a/firmware/esp32-s3-dashboard/dashboard_config.h +++ b/firmware/esp32-s3-dashboard/dashboard_config.h @@ -1,6 +1,6 @@ #pragma once -static const char *DASHBOARD_VERSION = "0.1.31-boot-version"; +static const char *DASHBOARD_VERSION = "0.1.32-3d-relay-buttons"; // Update these if your Cargo ESP AP credentials are different. static const char *CARGO_WIFI_SSID = "OverlandController"; diff --git a/firmware/esp32-s3-dashboard/esp32-s3-dashboard.ino b/firmware/esp32-s3-dashboard/esp32-s3-dashboard.ino index ee1e0da..de0a44c 100644 --- a/firmware/esp32-s3-dashboard/esp32-s3-dashboard.ino +++ b/firmware/esp32-s3-dashboard/esp32-s3-dashboard.ino @@ -315,15 +315,30 @@ static void update_relay_buttons() } if (relay_states[i]) { - lv_obj_set_style_bg_color(relay_buttons[i], lv_color_hex(0x027A48), 0); - lv_obj_set_style_border_color(relay_buttons[i], lv_color_hex(0x32D583), 0); - lv_obj_set_style_border_width(relay_buttons[i], 2, 0); + lv_obj_set_style_bg_color(relay_buttons[i], lv_color_hex(0x32D583), 0); + lv_obj_set_style_bg_grad_color(relay_buttons[i], lv_color_hex(0x027A48), 0); + lv_obj_set_style_bg_grad_dir(relay_buttons[i], LV_GRAD_DIR_VER, 0); + lv_obj_set_style_border_color(relay_buttons[i], lv_color_hex(0x6CE9A6), 0); + lv_obj_set_style_shadow_color(relay_buttons[i], lv_color_hex(0x32D583), 0); } else { - lv_obj_set_style_bg_color(relay_buttons[i], lv_color_hex(0x26313D), 0); - lv_obj_set_style_border_color(relay_buttons[i], lv_color_hex(0x3A4652), 0); - lv_obj_set_style_border_width(relay_buttons[i], 2, 0); + lv_obj_set_style_bg_color(relay_buttons[i], lv_color_hex(0x3B4754), 0); + lv_obj_set_style_bg_grad_color(relay_buttons[i], lv_color_hex(0x1F2933), 0); + lv_obj_set_style_bg_grad_dir(relay_buttons[i], LV_GRAD_DIR_VER, 0); + lv_obj_set_style_border_color(relay_buttons[i], lv_color_hex(0x556270), 0); + lv_obj_set_style_shadow_color(relay_buttons[i], lv_color_hex(0x000000), 0); } + lv_obj_set_style_radius(relay_buttons[i], 16, 0); + lv_obj_set_style_border_width(relay_buttons[i], 2, 0); + lv_obj_set_style_shadow_width(relay_buttons[i], 14, 0); + lv_obj_set_style_shadow_opa(relay_buttons[i], LV_OPA_40, 0); + lv_obj_set_style_shadow_ofs_y(relay_buttons[i], 6, 0); + + lv_obj_set_style_bg_color(relay_buttons[i], lv_color_hex(0x17202A), LV_STATE_PRESSED); + lv_obj_set_style_bg_grad_color(relay_buttons[i], lv_color_hex(0x111820), LV_STATE_PRESSED); + lv_obj_set_style_shadow_width(relay_buttons[i], 4, LV_STATE_PRESSED); + lv_obj_set_style_shadow_ofs_y(relay_buttons[i], 2, LV_STATE_PRESSED); + lv_obj_set_style_text_color(relay_button_labels[i], lv_color_hex(0xFFFFFF), 0); } else { lv_obj_add_flag(relay_buttons[i], LV_OBJ_FLAG_HIDDEN); @@ -858,6 +873,18 @@ static void create_overland_overview_screen() reinterpret_cast(static_cast(i)) ); + // dashboard-relay-initial-3d-style + lv_obj_set_style_radius(relay_buttons[i], 16, 0); + lv_obj_set_style_border_width(relay_buttons[i], 2, 0); + lv_obj_set_style_border_color(relay_buttons[i], lv_color_hex(0x556270), 0); + lv_obj_set_style_bg_color(relay_buttons[i], lv_color_hex(0x3B4754), 0); + lv_obj_set_style_bg_grad_color(relay_buttons[i], lv_color_hex(0x1F2933), 0); + lv_obj_set_style_bg_grad_dir(relay_buttons[i], LV_GRAD_DIR_VER, 0); + lv_obj_set_style_shadow_color(relay_buttons[i], lv_color_hex(0x000000), 0); + lv_obj_set_style_shadow_width(relay_buttons[i], 14, 0); + lv_obj_set_style_shadow_opa(relay_buttons[i], LV_OPA_40, 0); + lv_obj_set_style_shadow_ofs_y(relay_buttons[i], 6, 0); + relay_button_labels[i] = lv_label_create(relay_buttons[i]); lv_label_set_text(relay_button_labels[i], "Output\n--"); lv_obj_set_style_text_font(relay_button_labels[i], &lv_font_montserrat_40, 0);