Please share the awesome dashboard designs you have been building with this tool! :) #85
Pinned
koosoli
started this conversation in
Show and tell
Replies: 7 comments 4 replies
-
|
Got my first page build with the designer and got it running on an "unsupported" display. Really good work on this designer! Keep up the great work! |
Beta Was this translation helpful? Give feedback.
3 replies
-
|
cool! If you share your yaml i can bring support for the device :-) |
Beta Was this translation helpful? Give feedback.
-
esphome:
name: REDACTED
friendly_name: REDACTED
esp32:
variant: esp32s3
cpu_frequency: 240MHz
flash_size: 16MB
framework:
type: esp-idf
logger:
psram:
mode: octal
speed: 80MHz
api:
encryption:
key: "REDACTED"
ota:
- platform: esphome
password: "REDACTED"
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
output:
- platform: ledc
pin: GPIO16
id: backlight_pwm
light:
- platform: monochromatic
output: backlight_pwm
name: "Display Backlight"
id: back_light
restore_mode: ALWAYS_ON
# SPI configuration for display
spi:
clk_pin: GPIO12
mosi_pin: GPIO11
miso_pin: GPIO13
# Display configuration for ILI9488
display:
- id: my_display
platform: ili9xxx
model: ili9488
cs_pin: GPIO10
dc_pin: GPIO9
reset_pin: GPIO8
invert_colors: false
rotation: 90 # 0, 90, 180, or 270
lambda: |-
const auto COLOR_WHITE = Color(255, 255, 255);
const auto COLOR_BLACK = Color(0, 0, 0);
const auto COLOR_RED = Color(255, 0, 0);
const auto COLOR_GREEN = Color(0, 255, 0);
const auto COLOR_BLUE = Color(0, 0, 255);
const auto COLOR_YELLOW = Color(255, 255, 0);
const auto COLOR_ORANGE = Color(255, 165, 0);
auto color_off = COLOR_WHITE;
auto color_on = COLOR_BLACK;
auto extract_time = [](const char* iso_str) -> std::string {
// Expected format: YYYY-MM-DDTHH:MM:SS or similar
std::string s(iso_str);
if (s.length() >= 16) return s.substr(11, 5);
return "";
};
int currentPage = id(display_page);
if (currentPage == 0) {
// page:name "Page 1"
// page:dark_mode "inherit"
// page:refresh_type "interval"
// page:refresh_time ""
// Clear screen for this page
it.fill(COLOR_BLACK);
color_off = COLOR_BLACK;
color_on = COLOR_WHITE;
// widget:datetime id:w_mjofugcwe7kao type:datetime x:0 y:0 w:300 h:61 format:time_only time_size:60 date_size:16 color:white text_align:CENTER italic:false font_family:"Roboto"
{
auto now = id(ha_time).now();
it.strftime(0 + 300/2, 0, id(font_roboto_700_60), COLOR_WHITE, TextAlign::TOP_CENTER, "%H:%M", now);
}
// widget:sensor_text id:w_mjog2idwx8lft type:sensor_text x:173 y:137 w:307 h:116 ent:sensor.althermasensors_watertanktemperature entity_2: title:"Watertanktemperature" format:value_only label_font:1 value_font:80 color:white label_align:TOP_LEFT value_align:TOP_LEFT precision:2 unit:"" hide_unit:false prefix:"" postfix:"" separator:" ~ " local:false text_sensor:false font_family:"Roboto" font_weight:400 italic:false
{
char buf1[32];
snprintf(buf1, sizeof(buf1), "%.2f", id(sensor_althermasensors_watertanktemperature).state);
std::string val1 = buf1;
std::string sensorValue = val1;
std::string fullValue = "" + sensorValue + "°C" + "";
it.printf(173, 137, id(font_roboto_400_80), COLOR_WHITE, TextAlign::TOP_LEFT, "%s", fullValue.c_str());
}
// widget:line id:w_mjog8jfgxvobo type:line x:0 y:59 w:480 h:3 stroke:3 color:white orientation:horizontal
it.filled_rectangle(0, 59, 480, 3, COLOR_WHITE);
// widget:icon id:w_mjog9x7c5s87l type:icon x:0 y:0 w:60 h:60 code:F0150 size:40 color:white
it.printf(0, 0, id(font_material_design_icons_400_40), COLOR_WHITE, "%s", "\U000F0150");
// widget:icon id:w_mjogf0ays3p89 type:icon x:0 y:130 w:132 h:129 code:F1A86 size:121 color:white
it.printf(0, 130, id(font_material_design_icons_400_121), COLOR_WHITE, "%s", "\U000F1A86");
// widget:datetime id:w_mjpk8skdpalyz type:datetime x:227 y:1 w:253 h:60 format:weekday_day_month time_size:28 date_size:25 color:white text_align:CENTER italic:false font_family:"Roboto"
{
auto now = id(ha_time).now();
it.strftime(227 + 253/2, 1, id(font_roboto_400_25), COLOR_WHITE, TextAlign::TOP_CENTER, "%A %d %B", now);
}
}
globals:
- id: display_page
type: int
restore_value: true
initial_value: '0'
- id: page_refresh_default_s
type: int
restore_value: true
initial_value: '60'
- id: page_refresh_current_s
type: int
restore_value: false
initial_value: '60'
http_request:
verify_ssl: false
timeout: 20s
time:
- platform: homeassistant
id: ha_time
sensor:
- platform: homeassistant
id: sensor_althermasensors_watertanktemperature
entity_id: sensor.althermasensors_watertanktemperature
internal: true
font:
- file:
type: gfonts
family: Roboto
weight: 400
id: font_roboto_400_20
size: 20
glyphs: ["\U00000020", "\U00000021", "\U00000022", "\U00000023", "\U00000024", "\U00000025", "\U00000026", "\U00000027", "\U00000028", "\U00000029", "\U0000002a", "\U0000002b", "\U0000002c", "\U0000002d", "\U0000002e", "\U0000002f", "\U00000030", "\U00000031", "\U00000032", "\U00000033", "\U00000034", "\U00000035", "\U00000036", "\U00000037", "\U00000038", "\U00000039", "\U0000003a", "\U0000003b", "\U0000003c", "\U0000003d", "\U0000003e", "\U0000003f", "\U00000040", "\U00000041", "\U00000042", "\U00000043", "\U00000044", "\U00000045", "\U00000046", "\U00000047", "\U00000048", "\U00000049", "\U0000004a", "\U0000004b", "\U0000004c", "\U0000004d", "\U0000004e", "\U0000004f", "\U00000050", "\U00000051", "\U00000052", "\U00000053", "\U00000054", "\U00000055", "\U00000056", "\U00000057", "\U00000058", "\U00000059", "\U0000005a", "\U0000005b", "\U0000005c", "\U0000005d", "\U0000005e", "\U0000005f", "\U00000060", "\U00000061", "\U00000062", "\U00000063", "\U00000064", "\U00000065", "\U00000066", "\U00000067", "\U00000068", "\U00000069", "\U0000006a", "\U0000006b", "\U0000006c", "\U0000006d", "\U0000006e", "\U0000006f", "\U00000070", "\U00000071", "\U00000072", "\U00000073", "\U00000074", "\U00000075", "\U00000076", "\U00000077", "\U00000078", "\U00000079", "\U0000007a", "\U0000007b", "\U0000007c", "\U0000007d", "\U0000007e", "\U000000B0", "\U000000B1", "\U000000B2", "\U000000B3", "\U000000B5", "\U000000A3", "\U000000A5", "\U000000A9", "\U000000AE", "\U000000D7", "\U000000F7", "\U000003BC", "\U000003A9", "\U000020AC", "\U00002122"]
- file:
type: gfonts
family: Roboto
weight: 700
id: font_roboto_700_60
size: 60
glyphs: ["\U00000020", "\U00000021", "\U00000022", "\U00000023", "\U00000024", "\U00000025", "\U00000026", "\U00000027", "\U00000028", "\U00000029", "\U0000002a", "\U0000002b", "\U0000002c", "\U0000002d", "\U0000002e", "\U0000002f", "\U00000030", "\U00000031", "\U00000032", "\U00000033", "\U00000034", "\U00000035", "\U00000036", "\U00000037", "\U00000038", "\U00000039", "\U0000003a", "\U0000003b", "\U0000003c", "\U0000003d", "\U0000003e", "\U0000003f", "\U00000040", "\U00000041", "\U00000042", "\U00000043", "\U00000044", "\U00000045", "\U00000046", "\U00000047", "\U00000048", "\U00000049", "\U0000004a", "\U0000004b", "\U0000004c", "\U0000004d", "\U0000004e", "\U0000004f", "\U00000050", "\U00000051", "\U00000052", "\U00000053", "\U00000054", "\U00000055", "\U00000056", "\U00000057", "\U00000058", "\U00000059", "\U0000005a", "\U0000005b", "\U0000005c", "\U0000005d", "\U0000005e", "\U0000005f", "\U00000060", "\U00000061", "\U00000062", "\U00000063", "\U00000064", "\U00000065", "\U00000066", "\U00000067", "\U00000068", "\U00000069", "\U0000006a", "\U0000006b", "\U0000006c", "\U0000006d", "\U0000006e", "\U0000006f", "\U00000070", "\U00000071", "\U00000072", "\U00000073", "\U00000074", "\U00000075", "\U00000076", "\U00000077", "\U00000078", "\U00000079", "\U0000007a", "\U0000007b", "\U0000007c", "\U0000007d", "\U0000007e", "\U000000B0", "\U000000B1", "\U000000B2", "\U000000B3", "\U000000B5", "\U000000A3", "\U000000A5", "\U000000A9", "\U000000AE", "\U000000D7", "\U000000F7", "\U000003BC", "\U000003A9", "\U000020AC", "\U00002122"]
- file:
type: gfonts
family: Roboto
weight: 400
id: font_roboto_400_16
size: 16
glyphs: ["\U00000020", "\U00000021", "\U00000022", "\U00000023", "\U00000024", "\U00000025", "\U00000026", "\U00000027", "\U00000028", "\U00000029", "\U0000002a", "\U0000002b", "\U0000002c", "\U0000002d", "\U0000002e", "\U0000002f", "\U00000030", "\U00000031", "\U00000032", "\U00000033", "\U00000034", "\U00000035", "\U00000036", "\U00000037", "\U00000038", "\U00000039", "\U0000003a", "\U0000003b", "\U0000003c", "\U0000003d", "\U0000003e", "\U0000003f", "\U00000040", "\U00000041", "\U00000042", "\U00000043", "\U00000044", "\U00000045", "\U00000046", "\U00000047", "\U00000048", "\U00000049", "\U0000004a", "\U0000004b", "\U0000004c", "\U0000004d", "\U0000004e", "\U0000004f", "\U00000050", "\U00000051", "\U00000052", "\U00000053", "\U00000054", "\U00000055", "\U00000056", "\U00000057", "\U00000058", "\U00000059", "\U0000005a", "\U0000005b", "\U0000005c", "\U0000005d", "\U0000005e", "\U0000005f", "\U00000060", "\U00000061", "\U00000062", "\U00000063", "\U00000064", "\U00000065", "\U00000066", "\U00000067", "\U00000068", "\U00000069", "\U0000006a", "\U0000006b", "\U0000006c", "\U0000006d", "\U0000006e", "\U0000006f", "\U00000070", "\U00000071", "\U00000072", "\U00000073", "\U00000074", "\U00000075", "\U00000076", "\U00000077", "\U00000078", "\U00000079", "\U0000007a", "\U0000007b", "\U0000007c", "\U0000007d", "\U0000007e", "\U000000B0", "\U000000B1", "\U000000B2", "\U000000B3", "\U000000B5", "\U000000A3", "\U000000A5", "\U000000A9", "\U000000AE", "\U000000D7", "\U000000F7", "\U000003BC", "\U000003A9", "\U000020AC", "\U00002122"]
- file:
type: gfonts
family: Roboto
weight: 400
id: font_roboto_400_1
size: 1
glyphs: ["\U00000020", "\U00000021", "\U00000022", "\U00000023", "\U00000024", "\U00000025", "\U00000026", "\U00000027", "\U00000028", "\U00000029", "\U0000002a", "\U0000002b", "\U0000002c", "\U0000002d", "\U0000002e", "\U0000002f", "\U00000030", "\U00000031", "\U00000032", "\U00000033", "\U00000034", "\U00000035", "\U00000036", "\U00000037", "\U00000038", "\U00000039", "\U0000003a", "\U0000003b", "\U0000003c", "\U0000003d", "\U0000003e", "\U0000003f", "\U00000040", "\U00000041", "\U00000042", "\U00000043", "\U00000044", "\U00000045", "\U00000046", "\U00000047", "\U00000048", "\U00000049", "\U0000004a", "\U0000004b", "\U0000004c", "\U0000004d", "\U0000004e", "\U0000004f", "\U00000050", "\U00000051", "\U00000052", "\U00000053", "\U00000054", "\U00000055", "\U00000056", "\U00000057", "\U00000058", "\U00000059", "\U0000005a", "\U0000005b", "\U0000005c", "\U0000005d", "\U0000005e", "\U0000005f", "\U00000060", "\U00000061", "\U00000062", "\U00000063", "\U00000064", "\U00000065", "\U00000066", "\U00000067", "\U00000068", "\U00000069", "\U0000006a", "\U0000006b", "\U0000006c", "\U0000006d", "\U0000006e", "\U0000006f", "\U00000070", "\U00000071", "\U00000072", "\U00000073", "\U00000074", "\U00000075", "\U00000076", "\U00000077", "\U00000078", "\U00000079", "\U0000007a", "\U0000007b", "\U0000007c", "\U0000007d", "\U0000007e", "\U000000B0", "\U000000B1", "\U000000B2", "\U000000B3", "\U000000B5", "\U000000A3", "\U000000A5", "\U000000A9", "\U000000AE", "\U000000D7", "\U000000F7", "\U000003BC", "\U000003A9", "\U000020AC", "\U00002122"]
- file:
type: gfonts
family: Roboto
weight: 400
id: font_roboto_400_80
size: 80
glyphs: ["\U00000020", "\U00000021", "\U00000022", "\U00000023", "\U00000024", "\U00000025", "\U00000026", "\U00000027", "\U00000028", "\U00000029", "\U0000002a", "\U0000002b", "\U0000002c", "\U0000002d", "\U0000002e", "\U0000002f", "\U00000030", "\U00000031", "\U00000032", "\U00000033", "\U00000034", "\U00000035", "\U00000036", "\U00000037", "\U00000038", "\U00000039", "\U0000003a", "\U0000003b", "\U0000003c", "\U0000003d", "\U0000003e", "\U0000003f", "\U00000040", "\U00000041", "\U00000042", "\U00000043", "\U00000044", "\U00000045", "\U00000046", "\U00000047", "\U00000048", "\U00000049", "\U0000004a", "\U0000004b", "\U0000004c", "\U0000004d", "\U0000004e", "\U0000004f", "\U00000050", "\U00000051", "\U00000052", "\U00000053", "\U00000054", "\U00000055", "\U00000056", "\U00000057", "\U00000058", "\U00000059", "\U0000005a", "\U0000005b", "\U0000005c", "\U0000005d", "\U0000005e", "\U0000005f", "\U00000060", "\U00000061", "\U00000062", "\U00000063", "\U00000064", "\U00000065", "\U00000066", "\U00000067", "\U00000068", "\U00000069", "\U0000006a", "\U0000006b", "\U0000006c", "\U0000006d", "\U0000006e", "\U0000006f", "\U00000070", "\U00000071", "\U00000072", "\U00000073", "\U00000074", "\U00000075", "\U00000076", "\U00000077", "\U00000078", "\U00000079", "\U0000007a", "\U0000007b", "\U0000007c", "\U0000007d", "\U0000007e", "\U000000B0", "\U000000B1", "\U000000B2", "\U000000B3", "\U000000B5", "\U000000A3", "\U000000A5", "\U000000A9", "\U000000AE", "\U000000D7", "\U000000F7", "\U000003BC", "\U000003A9", "\U000020AC", "\U00002122"]
- file: "fonts/materialdesignicons-webfont.ttf"
id: font_material_design_icons_400_40
size: 40
glyphs: ["\U000F0150"]
- file: "fonts/materialdesignicons-webfont.ttf"
id: font_material_design_icons_400_121
size: 121
glyphs: ["\U000F1A86"]
- file:
type: gfonts
family: Roboto
weight: 700
id: font_roboto_700_28
size: 28
glyphs: ["\U00000020", "\U00000021", "\U00000022", "\U00000023", "\U00000024", "\U00000025", "\U00000026", "\U00000027", "\U00000028", "\U00000029", "\U0000002a", "\U0000002b", "\U0000002c", "\U0000002d", "\U0000002e", "\U0000002f", "\U00000030", "\U00000031", "\U00000032", "\U00000033", "\U00000034", "\U00000035", "\U00000036", "\U00000037", "\U00000038", "\U00000039", "\U0000003a", "\U0000003b", "\U0000003c", "\U0000003d", "\U0000003e", "\U0000003f", "\U00000040", "\U00000041", "\U00000042", "\U00000043", "\U00000044", "\U00000045", "\U00000046", "\U00000047", "\U00000048", "\U00000049", "\U0000004a", "\U0000004b", "\U0000004c", "\U0000004d", "\U0000004e", "\U0000004f", "\U00000050", "\U00000051", "\U00000052", "\U00000053", "\U00000054", "\U00000055", "\U00000056", "\U00000057", "\U00000058", "\U00000059", "\U0000005a", "\U0000005b", "\U0000005c", "\U0000005d", "\U0000005e", "\U0000005f", "\U00000060", "\U00000061", "\U00000062", "\U00000063", "\U00000064", "\U00000065", "\U00000066", "\U00000067", "\U00000068", "\U00000069", "\U0000006a", "\U0000006b", "\U0000006c", "\U0000006d", "\U0000006e", "\U0000006f", "\U00000070", "\U00000071", "\U00000072", "\U00000073", "\U00000074", "\U00000075", "\U00000076", "\U00000077", "\U00000078", "\U00000079", "\U0000007a", "\U0000007b", "\U0000007c", "\U0000007d", "\U0000007e", "\U000000B0", "\U000000B1", "\U000000B2", "\U000000B3", "\U000000B5", "\U000000A3", "\U000000A5", "\U000000A9", "\U000000AE", "\U000000D7", "\U000000F7", "\U000003BC", "\U000003A9", "\U000020AC", "\U00002122"]
- file:
type: gfonts
family: Roboto
weight: 400
id: font_roboto_400_25
size: 25
glyphs: ["\U00000020", "\U00000021", "\U00000022", "\U00000023", "\U00000024", "\U00000025", "\U00000026", "\U00000027", "\U00000028", "\U00000029", "\U0000002a", "\U0000002b", "\U0000002c", "\U0000002d", "\U0000002e", "\U0000002f", "\U00000030", "\U00000031", "\U00000032", "\U00000033", "\U00000034", "\U00000035", "\U00000036", "\U00000037", "\U00000038", "\U00000039", "\U0000003a", "\U0000003b", "\U0000003c", "\U0000003d", "\U0000003e", "\U0000003f", "\U00000040", "\U00000041", "\U00000042", "\U00000043", "\U00000044", "\U00000045", "\U00000046", "\U00000047", "\U00000048", "\U00000049", "\U0000004a", "\U0000004b", "\U0000004c", "\U0000004d", "\U0000004e", "\U0000004f", "\U00000050", "\U00000051", "\U00000052", "\U00000053", "\U00000054", "\U00000055", "\U00000056", "\U00000057", "\U00000058", "\U00000059", "\U0000005a", "\U0000005b", "\U0000005c", "\U0000005d", "\U0000005e", "\U0000005f", "\U00000060", "\U00000061", "\U00000062", "\U00000063", "\U00000064", "\U00000065", "\U00000066", "\U00000067", "\U00000068", "\U00000069", "\U0000006a", "\U0000006b", "\U0000006c", "\U0000006d", "\U0000006e", "\U0000006f", "\U00000070", "\U00000071", "\U00000072", "\U00000073", "\U00000074", "\U00000075", "\U00000076", "\U00000077", "\U00000078", "\U00000079", "\U0000007a", "\U0000007b", "\U0000007c", "\U0000007d", "\U0000007e", "\U000000B0", "\U000000B1", "\U000000B2", "\U000000B3", "\U000000B5", "\U000000A3", "\U000000A5", "\U000000A9", "\U000000AE", "\U000000D7", "\U000000F7", "\U000003BC", "\U000003A9", "\U000020AC", "\U00002122"]
script:
- id: manage_run_and_sleep
mode: restart
then:
- logger.log: "Waiting for sync (Generic/E1001)..."
- wait_until:
condition:
lambda: 'return id(ha_time).now().is_valid() && api_is_connected();'
timeout: 60s
- delay: 5s # Grace period for data propagation
- lambda: |-
if (!id(ha_time).now().is_valid()) {
ESP_LOGW("script", "Time sync failed/invalid! Sleeping for 1 hour to retry.");
return;
}
# Night Mode Check (23:00 - 05:00)
- if:
condition:
lambda: |-
auto now = id(ha_time).now();
if (!now.is_valid()) return false;
return (now.hour >= 23 || now.hour < 5);
then:
- logger.log: "Night Mode: Sleeping until next hour boundary."
- lambda: |-
auto now = id(ha_time).now();
// Calculate seconds until the top of the next hour
int seconds_to_next_hour = 3600 - (now.minute * 60 + now.second);
if (seconds_to_next_hour < 60) seconds_to_next_hour = 3600; // Case for exactly on the hour
id(page_refresh_current_s) = seconds_to_next_hour;
- delay: !lambda 'return id(page_refresh_current_s) * 1000;'
- script.execute: manage_run_and_sleep
# Active Mode
else:
- lambda: |-
int page = id(display_page);
int interval = id(page_refresh_default_s);
switch (page) {
default:
break;
}
if (interval < 60) {
interval = 60;
}
id(page_refresh_current_s) = interval;
ESP_LOGI("refresh", "Next refresh in %d seconds for page %d", interval, page);
- component.update: my_display
- delay: !lambda 'return id(page_refresh_current_s) * 1000;'
- script.execute: manage_run_and_sleep
``` |
Beta Was this translation helpful? Give feedback.
-
|
It works, not the most logical sequence of code. This is just my proof of concept, now working on adding more pages and making it nicer with colors etc. Also want to add the auto page switcher based on a time interval. |
Beta Was this translation helpful? Give feedback.
-
|
3 page display on reTerminal E1001 display: |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
cool! oh one more thing, could you share how it looks in the canvas preview compared to how it looks ondevice? |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Of course! Just added a screenshot. It is so cool, it looks exacly the same. Great!! |
Beta Was this translation helpful? Give feedback.
-
|
pre_0.9b329 results, designer canvas vs display results. Notice the quote in the canvas is centered but left justified on the display. The number of calendar entries differed because I manually edited the yaml code (this is noted in a previous issue post). 
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
This is a HUB75 based 128x64 screen driven by a Huidu HD-WF1 (or WF2). On the right side Samus is running (animated gif). The black line is just a refresh-rate vs camera issue and not visible to the human eye.
As for the fonts, I use - file: https://static.wfonts.com/data/2015/12/15/pixelmix/pixelmix.ttf
id: digit_font_8
size: 8
glyphs: |-
! "#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz°
- file: https://github.com/trip5/Matrix-Fonts/raw/refs/heads/main/6-series/MatrixLight6.bdf
id: matrix_light_6
glyphs: |-
! "#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz° |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Just a basic one |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Please share the awesome dashboard designs you have been building with this tool! :)
Beta Was this translation helpful? Give feedback.
All reactions