From b393e8d7044073c90d2711a73236d8ac3fee055b Mon Sep 17 00:00:00 2001 From: nick Date: Wed, 10 Jun 2026 23:33:47 -0600 Subject: [PATCH] dashboard: redesign temperature overview card --- .../esp32-s3-dashboard/dashboard_config.h | 2 +- .../esp32-s3-dashboard/esp32-s3-dashboard.ino | 119 +++++++++++++----- 2 files changed, 87 insertions(+), 34 deletions(-) diff --git a/firmware/esp32-s3-dashboard/dashboard_config.h b/firmware/esp32-s3-dashboard/dashboard_config.h index 10f8c3f..fc29ba2 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.35-current-nudge-up"; +static const char *DASHBOARD_VERSION = "0.1.36-temp-tiles"; // 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 ff5785a..b38887a 100644 --- a/firmware/esp32-s3-dashboard/esp32-s3-dashboard.ino +++ b/firmware/esp32-s3-dashboard/esp32-s3-dashboard.ino @@ -19,8 +19,10 @@ static lv_obj_t *battery_charge_pulse_arc = nullptr; static lv_obj_t *battery_current_label = nullptr; static lv_obj_t *battery_estimate_label = nullptr; static lv_obj_t *battery_soc_label = nullptr; -static lv_obj_t *inside_temp_label = nullptr; -static lv_obj_t *outside_temp_label = nullptr; +static lv_obj_t *inside_temp_value_label = nullptr; +static lv_obj_t *inside_temp_name_label = nullptr; +static lv_obj_t *outside_temp_value_label = nullptr; +static lv_obj_t *outside_temp_name_label = nullptr; static lv_obj_t *system_status_label = nullptr; static lv_obj_t *wifi_icon_label = nullptr; static lv_obj_t *wifi_bars_obj[4] = {nullptr}; @@ -58,8 +60,10 @@ static bool pending_relay_previous_state = false; static String last_battery_current_text; static String last_battery_estimate_text; static String last_battery_soc_text; -static String last_inside_temp_text; -static String last_outside_temp_text; +static String last_inside_temp_value_text; +static String last_inside_temp_name_text; +static String last_outside_temp_value_text; +static String last_outside_temp_name_text; static String last_system_status_text; static int last_wifi_bar_count = -1; static bool last_cargo_api_ok = false; @@ -69,6 +73,21 @@ static String on_off(bool value) return value ? "ON" : "OFF"; } + +static String compact_temp_name(const char *raw_name) +{ + String name = raw_name && raw_name[0] ? String(raw_name) : String("Inside"); + + name.replace(" Area", ""); + name.replace(" Zone", ""); + + if (name.length() > 14) { + name = name.substring(0, 14); + } + + return name; +} + static String format_hours(float hours) { if (hours <= 0.0 || isnan(hours) || isinf(hours)) { @@ -592,8 +611,10 @@ static void parse_status_json(const String &body) } if (doc["temps"].is()) { - String inside = "Inside\n--"; - String outside = "Outside\n--"; + String inside_name = "Inside"; + String inside_value = "--"; + String outside_name = "Outside"; + String outside_value = "--"; for (JsonObject temp : doc["temps"].as()) { bool enabled = temp["enabled"] | false; @@ -605,18 +626,22 @@ static void parse_status_json(const String &body) } String value = String((float)(temp["temperature_f"] | 0.0), 1); - value += " F"; + value += "°"; if (weather) { - outside = "Outside\n" + value; + outside_name = "Outside"; + outside_value = value; } else { const char *name = temp["name"] | "Inside"; - inside = String(name) + "\n" + value; + inside_name = compact_temp_name(name); + inside_value = value; } } - set_label_text_if_changed(inside_temp_label, last_inside_temp_text, inside); - set_label_text_if_changed(outside_temp_label, last_outside_temp_text, outside); + set_label_text_if_changed(inside_temp_value_label, last_inside_temp_value_text, inside_value); + set_label_text_if_changed(inside_temp_name_label, last_inside_temp_name_text, inside_name); + set_label_text_if_changed(outside_temp_value_label, last_outside_temp_value_text, outside_value); + set_label_text_if_changed(outside_temp_name_label, last_outside_temp_name_text, outside_name); } if (doc["relays"].is()) { @@ -839,31 +864,59 @@ static void create_overland_overview_screen() lv_obj_align(battery_current_label, LV_ALIGN_TOP_MID, 0, 161); lv_obj_add_flag(battery_current_label, LV_OBJ_FLAG_HIDDEN); - inside_temp_label = lv_label_create(temp_card); - lv_label_set_text(inside_temp_label, "Inside\n--"); - lv_obj_set_style_text_font( - inside_temp_label, - &lv_font_montserrat_30, - 0 - ); + lv_obj_t *inside_tile = lv_obj_create(temp_card); + lv_obj_set_size(inside_tile, 236, 132); + lv_obj_align(inside_tile, LV_ALIGN_TOP_MID, 0, 22); + lv_obj_set_style_radius(inside_tile, 18, 0); + lv_obj_set_style_bg_color(inside_tile, lv_color_hex(0x17202A), 0); + lv_obj_set_style_border_color(inside_tile, lv_color_hex(0x2F3A46), 0); + lv_obj_set_style_border_width(inside_tile, 2, 0); + lv_obj_set_style_pad_all(inside_tile, 0, 0); + lv_obj_clear_flag(inside_tile, LV_OBJ_FLAG_SCROLLABLE); + lv_obj_set_scrollbar_mode(inside_tile, LV_SCROLLBAR_MODE_OFF); - lv_obj_set_style_text_color(inside_temp_label, lv_color_hex(0xFFFFFF), 0); - lv_obj_set_style_text_font(inside_temp_label, &lv_font_montserrat_40, 0); - lv_obj_set_width(inside_temp_label, 260); - lv_obj_align(inside_temp_label, LV_ALIGN_TOP_LEFT, 0, 42); + inside_temp_value_label = lv_label_create(inside_tile); + lv_label_set_text(inside_temp_value_label, "--"); + lv_obj_set_style_text_color(inside_temp_value_label, lv_color_hex(0xFFFFFF), 0); + lv_obj_set_style_text_font(inside_temp_value_label, &lv_font_montserrat_48, 0); + lv_obj_set_width(inside_temp_value_label, 220); + lv_obj_set_style_text_align(inside_temp_value_label, LV_TEXT_ALIGN_CENTER, 0); + lv_obj_align(inside_temp_value_label, LV_ALIGN_TOP_MID, 0, 18); - outside_temp_label = lv_label_create(temp_card); - lv_label_set_text(outside_temp_label, "Outside\n--"); - lv_obj_set_style_text_font( - outside_temp_label, - &lv_font_montserrat_30, - 0 - ); + inside_temp_name_label = lv_label_create(inside_tile); + lv_label_set_text(inside_temp_name_label, "Inside"); + lv_obj_set_style_text_color(inside_temp_name_label, lv_color_hex(0xB8C0C8), 0); + lv_obj_set_style_text_font(inside_temp_name_label, &lv_font_montserrat_26, 0); + lv_obj_set_width(inside_temp_name_label, 220); + lv_obj_set_style_text_align(inside_temp_name_label, LV_TEXT_ALIGN_CENTER, 0); + lv_obj_align(inside_temp_name_label, LV_ALIGN_TOP_MID, 0, 84); - lv_obj_set_style_text_color(outside_temp_label, lv_color_hex(0xFFFFFF), 0); - lv_obj_set_style_text_font(outside_temp_label, &lv_font_montserrat_40, 0); - lv_obj_set_width(outside_temp_label, 260); - lv_obj_align(outside_temp_label, LV_ALIGN_TOP_LEFT, 0, 172); + lv_obj_t *outside_tile = lv_obj_create(temp_card); + lv_obj_set_size(outside_tile, 236, 132); + lv_obj_align(outside_tile, LV_ALIGN_BOTTOM_MID, 0, -22); + lv_obj_set_style_radius(outside_tile, 18, 0); + lv_obj_set_style_bg_color(outside_tile, lv_color_hex(0x17202A), 0); + lv_obj_set_style_border_color(outside_tile, lv_color_hex(0x2F3A46), 0); + lv_obj_set_style_border_width(outside_tile, 2, 0); + lv_obj_set_style_pad_all(outside_tile, 0, 0); + lv_obj_clear_flag(outside_tile, LV_OBJ_FLAG_SCROLLABLE); + lv_obj_set_scrollbar_mode(outside_tile, LV_SCROLLBAR_MODE_OFF); + + outside_temp_value_label = lv_label_create(outside_tile); + lv_label_set_text(outside_temp_value_label, "--"); + lv_obj_set_style_text_color(outside_temp_value_label, lv_color_hex(0xFFFFFF), 0); + lv_obj_set_style_text_font(outside_temp_value_label, &lv_font_montserrat_48, 0); + lv_obj_set_width(outside_temp_value_label, 220); + lv_obj_set_style_text_align(outside_temp_value_label, LV_TEXT_ALIGN_CENTER, 0); + lv_obj_align(outside_temp_value_label, LV_ALIGN_TOP_MID, 0, 18); + + outside_temp_name_label = lv_label_create(outside_tile); + lv_label_set_text(outside_temp_name_label, "Outside"); + lv_obj_set_style_text_color(outside_temp_name_label, lv_color_hex(0xB8C0C8), 0); + lv_obj_set_style_text_font(outside_temp_name_label, &lv_font_montserrat_26, 0); + lv_obj_set_width(outside_temp_name_label, 220); + lv_obj_set_style_text_align(outside_temp_name_label, LV_TEXT_ALIGN_CENTER, 0); + lv_obj_align(outside_temp_name_label, LV_ALIGN_TOP_MID, 0, 84); lv_obj_t *vehicle_label = lv_label_create(vehicle_card); lv_label_set_text(vehicle_label, "Vehicle\n\nOffline\n\nFuture:\nCoolant\nTrans Temp\n4WD\nTilt/Roll");