Please share the awesome dashboard designs you have been building with this tool! :)

[koosoli]

Please share the awesome dashboard designs you have been building with this tool! :)

[Arigoldzld]

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!

[koosoli]

cool! If you share your yaml i can bring support for the device :-)

[Arigoldzld]

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
         ```   

[Arigoldzld]

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.

[scottbarninger]

3 page display on reTerminal E1001 display:



reterminal E1001.bearswamp.yaml

[kleinerwolf77]

[koosoli]

cool! oh one more thing, could you share how it looks in the canvas preview compared to how it looks ondevice?
thank you!

[kleinerwolf77]

Of course! Just added a screenshot. It is so cool, it looks exacly the same. Great!!

[scottbarninger]

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).

[sehraf]

This is a HUB75 based 128x64 screen driven by a Huidu HD-WF1 (or WF2). On the right side Samus is running (animated gif).
I used the designer to arrange the text and icons and then updated everything by hand to work with the board/display (e.g fonts, RTC, gif animation)

The black line is just a refresh-rate vs camera issue and not visible to the human eye.

---

As for the fonts, I use matrix fonts for size 6 and pixelmix for size 8

  - 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°

[veetek22]

Just a basic one

[koosoli]

Don't forget that there is now a drop shadow option for almost all widgets

[silywalks]

Thank you for this great tool! Next trying drop shdows ... :-)

[kleinerwolf77]

Nice! What's the icon in the upper right corner for? And where does it come from? Any new widget I didn't discover, yet?

[silywalks]

The icon is from MDI https://pictogrammers.com/library/mdi/icon/lan-connect/
It's a binary_sensor indicating a wireless link is up or down. I tried to overlay another icon https://pictogrammers.com/library/mdi/icon/lan-disconnect/ (preferably in grey) and switch visibilty depending on on/off state but ESPHome renders a black box when stacking two icons at the same place.

[greytuk]

Here's my first attempt. Using a Waveshare PhotoPainter 6 color display. I stained the frame so that the color matched my decor.

[fgiovagit]

meteo for hour is dynamic from current time, and not fixed to the one inserted in editor

[fgiovagit]

meteo for hour is dynamic from current time, and not fixed to the one inserted in editor (v2) 🙂

[harleking]

I never became it to work with Daily Weather and Relative Hourly Forecast. Would you mind to share your yaml code from configuration?
Here is how mine looks so far.

[fgiovagit]

very nice your layout

so.. for the hourly forecast...
the code is very long (if you want i attach it all), but i have extract the info only for hourly forecast setup, i hope is clear to understand.

Only one thing, i have done it with previous vr of the ESPHomeDesigner, i think the v1.0.0-rc.11, and by modify some little thing in generated code (char or position... and some think in the hour to show), so i don't remember if is a perfect copy of the generated one.

################################################################################################################
# yaml in template of HA -- extract temperature and condition for 24h
################################################################################################################
  - trigger:
      - platform: time_pattern
        hours: "/1"
      - platform: homeassistant
        event: start
    action:
      - service: weather.get_forecasts
        target:
          entity_id: weather.forecast_casa
        data:
          type: hourly
        response_variable: hourly_data
    sensor:
      - name: "Weather Forecast +1h"
        unique_id: weather_forecast_plus_1h_high
        unit_of_measurement: "°C"
        state: >
          {% set target = (now() + timedelta(hours = 1)).replace(minute=0, second=0, microsecond=0) %}
          {% set res = namespace(temp='N/A') %}{% for f in hourly_data['weather.forecast_casa'].forecast %}{% if f.datetime | as_datetime == target %}{% set res.temp = f.temperature %}{% endif %}{% endfor %}{{ res.temp }}
        attributes:
          condizione: >
            {% set target = (now() + timedelta(hours = 1)).replace(minute=0, second=0, microsecond=0) %}
            {% set res = namespace(cond='unknown') %}{% for f in hourly_data['weather.forecast_casa'].forecast %}{% if f.datetime | as_datetime == target %}{% set res.cond = f.condition %}{% endif %}{% endfor %}{{ res.cond }}

      - name: "Weather Forecast +2h"
        unique_id: weather_forecast_plus_2h_high
        unit_of_measurement: "°C"
        state: >
          {% set target = (now() + timedelta(hours = 2)).replace(minute=0, second=0, microsecond=0) %}
          {% set res = namespace(temp='N/A') %}{% for f in hourly_data['weather.forecast_casa'].forecast %}{% if f.datetime | as_datetime == target %}{% set res.temp = f.temperature %}{% endif %}{% endfor %}{{ res.temp }}
        attributes:
          condizione: >
            {% set target = (now() + timedelta(hours = 2)).replace(minute=0, second=0, microsecond=0) %}
            {% set res = namespace(cond='unknown') %}{% for f in hourly_data['weather.forecast_casa'].forecast %}{% if f.datetime | as_datetime == target %}{% set res.cond = f.condition %}{% endif %}{% endfor %}{{ res.cond }}

[...]

      - name: "Weather Forecast +24h"
        unique_id: weather_forecast_plus_24h_high
        unit_of_measurement: "°C"
        state: >
          {% set target = (now() + timedelta(hours = 24)).replace(minute=0, second=0, microsecond=0) %}
          {% set res = namespace(temp='N/A') %}{% for f in hourly_data['weather.forecast_casa'].forecast %}{% if f.datetime | as_datetime == target %}{% set res.temp = f.temperature %}{% endif %}{% endfor %}{{ res.temp }}
        attributes:
          condizione: >
            {% set target = (now() + timedelta(hours = 24)).replace(minute=0, second=0, microsecond=0) %}
            {% set res = namespace(cond='unknown') %}{% for f in hourly_data['weather.forecast_casa'].forecast %}{% if f.datetime | as_datetime == target %}{% set res.cond = f.condition %}{% endif %}{% endfor %}{{ res.cond }}

################################################################################################################
# yaml code of ESP32 with e-paper -- get temperature and condition for 24h from HA
################################################################################################################

sensor:
  # Previsioni Temperatura da +1h a +24h con suffisso _high
  - platform: homeassistant
    id: weather_high_hplus1
    entity_id: sensor.weather_forecast_1h
    unit_of_measurement: '°C'
    internal: true
  - platform: homeassistant
    id: weather_high_hplus2
    entity_id: sensor.weather_forecast_2h
    unit_of_measurement: '°C'
    internal: true

[...]

  - platform: homeassistant
    id: weather_high_hplus24
    entity_id: sensor.weather_forecast_24h
    unit_of_measurement: '°C'
    internal: true

###########################################

text_sensor:
  # Previsioni Condizione leggendo l'attributo dai sensori _high
  - platform: homeassistant
    id: weather_cond_hplus1
    entity_id: sensor.weather_forecast_1h
    attribute: condizione
    internal: true
  - platform: homeassistant
    id: weather_cond_hplus2
    entity_id: sensor.weather_forecast_2h
    attribute: condizione
    internal: true

[...]

  - platform: homeassistant
    id: weather_cond_hplus24
    entity_id: sensor.weather_forecast_24h
    attribute: condizione
    internal: true

###########################################
# inside display code 
###########################################

display:
  - platform: waveshare_epaper
    id: epaper_display
    cs_pin: 15
    dc_pin: 27
    busy_pin: 25
    reset_pin: 26
    model: 7.50in-bV3
    update_interval: never
    lambda: |-

			[...]

            // ────────────────────────────────────────
            // widget:weather_forecast id:w_mn4zovo7h8vg6 type:weather_forecast x:0 y:11 w:438 h:103 entity:weather.forecast_casa days:4 icon_size:35 temp_font_size:20 day_font_size:20 color:"black" show_border:false forecast_mode:"hourly" start_offset:1 hourly_mode:"relative" relative_count:6
                    {
                      static std::map<std::string, const char*> weather_icons = {
                        {"clear-night", "\U000F0594"}, {"cloudy", "\U000F0590"},
                        {"exceptional", "\U000F0026"}, {"fog", "\U000F0591"},
                        {"hail", "\U000F0592"}, {"lightning", "\U000F0593"},
                        {"lightning-rainy", "\U000F067E"}, {"partlycloudy", "\U000F0595"},
                        {"pouring", "\U000F0596"}, {"rainy", "\U000F0597"},
                        {"snowy", "\U000F0598"}, {"snowy-rainy", "\U000F067F"},
                        {"sunny", "\U000F0599"}, {"windy", "\U000F059D"},
                        {"windy-variant", "\U000F059E"}
                      };
                      auto get_icon = [&](const std::string& cond_val) -> const char* {
                        return weather_icons.count(cond_val) ? weather_icons[cond_val] : "\U000F0590";
                      };
                      auto get_hour_label = [](int offset) -> std::string {
                        auto t = id(ha_time).now();
                        if (!t.is_valid()) return "---";
                        char buf[8]; sprintf(buf, "%02d:00", (t.hour + offset + 1) % 24);
                        return std::string(buf);
                      };
                      {
                        int dx = 0; int dy = 11 + 10;
                        it.printf(dx + 36, dy, id(font_shantell_sans_700_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_hour_label(1).c_str());
                        std::string cond_day = id(weather_cond_hplus2).state.c_str();
                        it.printf(dx + 36, dy + 24, id(font_material_design_icons_400_35), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_icon(cond_day));
                        float temp_val = id(weather_high_hplus2).state;
                        if (std::isnan(temp_val)) {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "--");
                        } else {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%.*f", 1, temp_val);
                        }
                      }
                      {
                        int dx = 73; int dy = 11 + 10;
                        it.printf(dx + 36, dy, id(font_shantell_sans_700_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_hour_label(3).c_str());
                        std::string cond_day = id(weather_cond_hplus4).state.c_str();
                        it.printf(dx + 36, dy + 24, id(font_material_design_icons_400_35), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_icon(cond_day));
                        float temp_val = id(weather_high_hplus4).state;
                        if (std::isnan(temp_val)) {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "--");
                        } else {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%.*f", 1, temp_val);
                        }
                      }
                      {
                        int dx = 146; int dy = 11 + 10;
                        it.printf(dx + 36, dy, id(font_shantell_sans_700_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_hour_label(6).c_str());
                        std::string cond_day = id(weather_cond_hplus7).state.c_str();
                        it.printf(dx + 36, dy + 24, id(font_material_design_icons_400_35), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_icon(cond_day));
                        float temp_val = id(weather_high_hplus7).state;
                        if (std::isnan(temp_val)) {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "--");
                        } else {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%.*f", 1, temp_val);
                        }
                      }
                      {
                        int dx = 219; int dy = 11 + 10;
                        it.printf(dx + 36, dy, id(font_shantell_sans_700_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_hour_label(9).c_str());
                        std::string cond_day = id(weather_cond_hplus10).state.c_str();
                        it.printf(dx + 36, dy + 24, id(font_material_design_icons_400_35), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_icon(cond_day));
                        float temp_val = id(weather_high_hplus10).state;
                        if (std::isnan(temp_val)) {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "--");
                        } else {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%.*f", 1, temp_val);
                        }
                      }
                      {
                        int dx = 292; int dy = 11 + 10;
                        it.printf(dx + 36, dy, id(font_shantell_sans_700_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_hour_label(12).c_str());
                        std::string cond_day = id(weather_cond_hplus13).state.c_str();
                        it.printf(dx + 36, dy + 24, id(font_material_design_icons_400_35), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_icon(cond_day));
                        float temp_val = id(weather_high_hplus13).state;
                        if (std::isnan(temp_val)) {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "--");
                        } else {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%.*f", 1, temp_val);
                        }
                      }
                      {
                        int dx = 365; int dy = 11 + 10;
                        it.printf(dx + 36, dy, id(font_shantell_sans_700_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_hour_label(15).c_str());
                        std::string cond_day = id(weather_cond_hplus16).state.c_str();
                        it.printf(dx + 36, dy + 24, id(font_material_design_icons_400_35), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_icon(cond_day));
                        float temp_val = id(weather_high_hplus16).state;
                        if (std::isnan(temp_val)) {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "--");
                        } else {
                          it.printf(dx + 36, dy + 63, id(font_shantell_sans_400_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%.*f", 1, temp_val);
                        }
                      }
                    }
            // ────────────────────────────────────────

for the most important part to draw the hourly forecast:
i have change the code to calculate data to show by hour

auto get_hour_label = [](int offset) -> std::string {
  const char* slots[] = {"06:00", "09:00", "12:00", "15:00", "18:00", "21:00"};
  if (offset >= 0 && offset < 6) return std::string(slots[offset]);
  return "---";
};

to dynamically get the next hour time

auto get_hour_label = [](int offset) -> std::string {
  auto t = id(ha_time).now();
  if (!t.is_valid()) return "---";
  char buf[8]; sprintf(buf, "%02d:00", (t.hour + offset + 1) % 24);
  return std::string(buf);
};

and the various step of meteo by hour displayed,

it.printf(dx + 36, dy, id(font_shantell_sans_700_20), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_hour_label(15).c_str()); <<< day hour
std::string cond_day = id(weather_cond_hplus16).state.c_str(); <<<< meteo condition....
it.printf(dx + 36, dy + 24, id(font_material_design_icons_400_35), COLOR_BLACK, TextAlign::TOP_CENTER, "%s", get_icon(cond_day)); <<<< ....to display image
float temp_val = id(weather_high_hplus16).state; <<<< temp

this to show not only the selected hour, but dynamically the various step of hour from now, and associated temp from the var given by homeassistant for 24h, updated every hour to align the array (ex... "next hour" is the next one in the array).
The step selected (1-3-6-9-12-15) is fixed in the code and to show the meteo of that hour x from now.

I hope what I explained is understandable 😅

[fgiovagit]

@koosoli
sorry for some think on this post,
I just remembered only now that this feature #341 was already indicated... and implemented. 🙃

[koosoli]

Haha, yes I guess it is easier to just do it with the editor itself ;)

[Greginkansas]

This is our kitchen 7in display. I'm working on to replace a android tablet.

[guineau]

Here's a kitchen display to control a few Govee lights.

[horkryzard-home]

Hello
Home designer:

In reality:

Few things was edited by hand like weather font thickness. Calendar to by properly displayed need to be "out of size" . BTC prize also custom function to put space after thousands.