M5Stack Dial - ESP32-S3 Smart Rotary Knob

How big are the images you’re including?

2 Likes

Not so many but maybe they were too big…
I just didn’t think a sec to this point.

It’s OK now, thank you… forced a resize to 120x120px, as this is just for testing.

  - id: img_startup
    file: m5dial_files/cs_smiley.png
    type: RGBA
    resize: 120x120 #added to save flash memory

image

So, after lot of digging in this post and espHome documentation: here’s my code.
Just a base for what i want to do, i only achieved the welcome page.

Code
wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password
  manual_ip:
    static_ip: !secret ip_m5stack_dial
    gateway: !secret wifi_gtw
    subnet: !secret wifi_sub
  ap:
    ssid: "m5stack-dial-fallback"
    password: !secret wifi_ap_password

ota:
  password: !secret ota_password

logger:
  level: DEBUG

api:
  encryption:
    key: !secret api_encryption_key

esp32:
  board: esp32-s3-devkitc-1
  framework:
    type: arduino

esphome:
  name: ${name}
  friendly_name: ${friendly_name}
  on_boot:
    then:
      - light.turn_on: backlight
      - delay: 3s
      - display.page.show: page_01
      - pcf8563.read_time: my_time
      
external_components:
  - source: github://dgaust/esphome@gc9a01
    components: [ gc9a01, ft3267 ]
    refresh: 0s

<<: !include m5dial_files/colors_and_fonts.yaml
<<: !include m5dial_files/images.yaml

spi: #required by display.ili9xxx
  mosi_pin: GPIO5
  clk_pin: GPIO6

i2c:
  - id: bus_internal #required by touchscreen.ft3267
    sda: GPIO11
    scl: GPIO12
    scan: false

rc522_i2c: # RFiD
  i2c_id:  bus_internal
  address: 0x28
  on_tag:
    then:
      - rtttl.play: 'two_short:d=4,o=5,b=100:16e6,16e6'
      - homeassistant.tag_scanned: !lambda 'return x;'

rtttl: # buzzer
  output: rtttl_out
  id: my_rtttl

output:
  - id: lcdbacklight # screen backlight
    platform: ledc
    pin: GPIO9
    min_power: 0
    max_power: 1
  - platform: ledc # buzzer
    pin: GPIO3
    id: rtttl_out

substitutions:
  name: tab-m5stack-dial
  friendly_name: M5Stack Dial
  lux_sensor_id: sensor.ip030_mmw_aqara_living_luminance
  alarm_panel_id: alarm_control_panel.alarme_maison
  gate_sensor_id: binary_sensor.tplt_gate_open_too_long
  windows_group_id: binary_sensor.windows_upstairs

# ======================================================================================
# ======================================================================================
# ================================================================================= time

time:
  - platform: pcf8563
    id: my_time
    address: 0x38
    update_interval: never # repeated synchronization is not necessary unless the external RTC is much more accurate than the internal clock
  - platform: homeassistant
    on_time_sync: # instead try to synchronize via network repeatedly ...
      then:
        - pcf8563.write_time: my_time # ... and update the RTC when the synchronization was successful
        - logger.log: "time synced"

# ======================================================================================
# ======================================================================================
# =============================================================================== lights

light:

  # ------------------------------------------------------------------ backlight
  - platform: monochromatic
    id: backlight
    name: "Backlight"
    output: lcdbacklight
    default_transition_length: 500ms

# ======================================================================================
# ======================================================================================
# ============================================================================== selects

select:
  - platform: template
    name: Page Selector
    id: page_selector
    options:
     - "page_off" # index 0
     - "page_00" # index 1
     - "page_01" # index 2
     - "page_a1" # index 3
     - "page_b1" # index 4
     - "page_c1" # index 5
     - "page_d1" # index 6
    initial_option: "page_00"
    optimistic: true
    on_value:
      - if:
          condition:
            - lambda: 'return id(page_selector).state == "page_off";'
          then:
            - light.turn_off: backlight
          else:
            - if:
                condition:
                  - light.is_off: backlight
                then:
                  - light.turn_on: backlight
                  - display.page.show: page_01
            - if:
                condition:
                  - lambda: 'return id(page_selector).state == "page_00";'
                then:
                  - display.page.show: page_00
            - if:
                condition:
                  - lambda: 'return id(page_selector).state == "page_01";'
                then:
                  - display.page.show: page_01
            - if:
                condition:
                  - lambda: 'return id(page_selector).state == "page_a1";'
                then:
                  - display.page.show: page_a1
            - if:
                condition:
                  - lambda: 'return id(page_selector).state == "page_b1";'
                then:
                  - display.page.show: page_b1
            - if:
                condition:
                  - lambda: 'return id(page_selector).state == "page_c1";'
                then:
                  - display.page.show: page_c1
            - if:
                condition:
                  - lambda: 'return id(page_selector).state == "page_d1";'
                then:
                  - display.page.show: page_d1

# ======================================================================================
# ======================================================================================
# ====================================================================== display + pages

touchscreen:
  platform: ft3267
  on_touch:
    then:
      - logger.log:
          format: 'Touch ID: %d at _____________________ (%d, %d)'
          args: [touch.id, touch.x, touch.y]
      - if:
          condition:
            - light.is_off: backlight
          then:
            - light.turn_on: backlight

display:
  - platform: ili9xxx
    model: gc9a01a
    reset_pin: GPIO8
    id: screen
    cs_pin: GPIO7
    dc_pin: GPIO4
    dimensions:
      height: 240
      width: 240
    on_page_change:
      - to: page_00
        then:
          - select.set:
              id: page_selector
              option: page_00
      - to: page_01
        then:
          - select.set:
              id: page_selector
              option: page_01
      - to: page_a1
        then:
          - select.set:
              id: page_selector
              option: page_a1
      - to: page_b1
        then:
          - select.set:
              id: page_selector
              option: page_b1
      - to: page_c1
        then:
          - select.set:
              id: page_selector
              option: page_c1
      - to: page_d1
        then:
          - select.set:
              id: page_selector
              option: page_d1
    pages:

      # _____________________________________________________ startup page
      - id: page_00
        lambda: |-
          it.image(120, 120, img_00, ImageAlign::CENTER);

      # ___________________________________________________ welcome page
      - id: page_01
        lambda: |-
          // variables =========================================================
          float screenheight = it.get_height();
          float screenwidth = it.get_width();
          float halfscreenheight = screenheight / 2;
          float halfscreenwidth = screenwidth /2;
          // background draws ==================================================
          it.filled_rectangle(0, 0, halfscreenwidth, halfscreenheight, pri_color);
          it.filled_rectangle(halfscreenwidth, halfscreenheight, 155, 155, pri_color);
          it.filled_rectangle(0, halfscreenheight, halfscreenwidth, 155, pri_color);
          it.filled_rectangle(halfscreenwidth, 0, 155, halfscreenheight, pri_color);     
          it.line(0, halfscreenheight, screenwidth, halfscreenheight, off_color);
          it.line(halfscreenwidth, 0, halfscreenwidth, screenheight, off_color);
          // icons =============================================================
          // alarm icon ----------------------------------------------------
          if (id(alarm_text).state == "armed_away") {
          it.image(65, 75, mdi_shield_lock, ImageAlign::CENTER, nova_color);
          } else if (id(alarm_text).state == "armed_night") {
          it.image(65, 75, mdi_shield_moon, ImageAlign::CENTER, nova_color);
          } else if (id(alarm_text).state == "armed_home") {
          it.image(65, 75, mdi_shield_account, ImageAlign::CENTER, blue_color);
          } else if (id(alarm_text).state == "arming") {
          it.image(65, 75, mdi_shield_sync, ImageAlign::CENTER, text_color);
          } else if (id(alarm_text).state == "pending") {
          it.image(65, 75, mdi_shield_lock_open, ImageAlign::CENTER, yellow_color);
          } else if (id(alarm_text).state == "triggered") {
          it.image(65, 75, mdi_shield_alert, ImageAlign::CENTER, red_color);
          } else {
          it.image(65, 75, mdi_shield_off, ImageAlign::CENTER, off_color);
          }
          // gate icon -----------------------------------------------------
          if (id(gate_text).state == "closed") {
          it.image(175, 75, mdi_gate_closed, ImageAlign::CENTER, text_color);
          } else if (id(gate_text).state == "open") {
          it.image(175, 75, mdi_gate_open, ImageAlign::CENTER, blue_color);
          } else {
          it.image(175, 75, mdi_gate_alert, ImageAlign::CENTER, yellow_color);
          }
          // thermostat icon -----------------------------------------------
          it.image(65, 165, mdi_thermostat, ImageAlign::CENTER, text_color);
          // other icon ----------------------------------------------------
          if (id(windows_text).state == "off") {
          it.image(175, 165, mdi_window_closed, ImageAlign::CENTER, text_color);
          } else {
          it.image(175, 165, mdi_window_open, ImageAlign::CENTER, blue_color);
          }
          // foreground draws ==================================================
          it.filled_regular_polygon(halfscreenwidth, halfscreenheight -220, 144, EDGES_OCTAGON, VARIATION_FLAT_TOP, sec_color);
          it.filled_regular_polygon(halfscreenwidth, halfscreenheight +220, 144, EDGES_OCTAGON, VARIATION_FLAT_TOP, sec_color);
          it.regular_polygon(halfscreenwidth, halfscreenheight -220, 145, EDGES_OCTAGON, VARIATION_FLAT_TOP, off_color);
          it.regular_polygon(halfscreenwidth, halfscreenheight +220, 145, EDGES_OCTAGON, VARIATION_FLAT_TOP, off_color);
          // top text draw =====================================================
          it.strftime(halfscreenwidth, 20, id(roboto_16_with_icons), orange_color, TextAlign::CENTER, "%d/%m %X", id(my_time).now());
          // bottom text draw ==================================================
          it.print(halfscreenwidth, screenheight -20, id(roboto_16_with_icons), orange_color, TextAlign::CENTER, "\U000F0046 ETEINDRE");

      # ___________________________________________________ alarm page
      - id: page_a1
        lambda: |-
          // variables ======================================================
          float screenheight = it.get_height();
          float screenwidth = it.get_width();
          float halfscreenheight = screenheight / 2;
          float halfscreenwidth = screenwidth /2;
          // text draw ==================================================
          it.print(halfscreenwidth, halfscreenheight, id(roboto_16_with_icons), orange_color, TextAlign::CENTER, "A1 PAGE");

      # ___________________________________________________ gate page
      - id: page_b1
        lambda: |-
          // variables ======================================================
          float screenheight = it.get_height();
          float screenwidth = it.get_width();
          float halfscreenheight = screenheight / 2;
          float halfscreenwidth = screenwidth /2;
          // text draw ==================================================
          it.print(halfscreenwidth, halfscreenheight, id(roboto_16_with_icons), orange_color, TextAlign::CENTER, "B1 PAGE");

      # ___________________________________________________ thermostat page
      - id: page_c1
        lambda: |-
          // variables ======================================================
          float screenheight = it.get_height();
          float screenwidth = it.get_width();
          float halfscreenheight = screenheight / 2;
          float halfscreenwidth = screenwidth /2;
          // text draw ==================================================
          it.print(halfscreenwidth, halfscreenheight, id(roboto_16_with_icons), orange_color, TextAlign::CENTER, "C1 PAGE");

      # ___________________________________________________ windows page
      - id: page_d1
        lambda: |-
          // variables ======================================================
          float screenheight = it.get_height();
          float screenwidth = it.get_width();
          float halfscreenheight = screenheight / 2;
          float halfscreenwidth = screenwidth /2;
          // text draw ==================================================
          it.print(halfscreenwidth, halfscreenheight, id(roboto_16_with_icons), orange_color, TextAlign::CENTER, "D1 PAGE");

# ======================================================================================
# ======================================================================================
# ============================================================================== sensors

sensor:

  # ----------------------------------------------------------------- lux sensor
  - platform: homeassistant
    entity_id: $lux_sensor_id
    name: "Lux Sensor"
    id: sensor_lux
    accuracy_decimals: 0
    on_value:
      - logger.log: 
          format: "$lux_sensor_id: %.0f"
          args: [ 'id(sensor_lux).state' ]
      - if:
          condition:
            - light.is_on: backlight
          then:
            - lambda: |- 
                float lux = id(sensor_lux).state;
                if (lux < 10) { 
                  id(lcdbacklight).set_level(0.1);
                }
                else if (lux < 40) {
                  id(lcdbacklight).set_level(0.3);
                }
                else if (lux < 80) {
                  id(lcdbacklight).set_level(0.5);
                }
                else {
                  id(lcdbacklight).set_level(0.7);
                }

  # ------------------------------------------------------------- rotary encoder
  - platform: rotary_encoder
    name: Rotary Encoder
    id: rotaryencoder
    resolution: 1
    pin_a:
      number: GPIO40
      mode:
       input: true
       pullup: true
    pin_b:
      number: GPIO41
      mode:
       input: true
       pullup: true
    accuracy_decimals: 0
    # accuracy_decimals: 1
    on_clockwise:
      - logger.log: "rotary_encoder : _____________________ turned_clockwise"
      - if:
          <<: &select_off
            condition:
              - lambda: 'return id(page_selector).state == "page_off";'
            then:
              - select.set:
                  id: page_selector
                  option: page_01
    on_anticlockwise:
      - logger.log: "rotary_encoder : _____________________ turned_ANTIclockwise"
      - if:
          <<: *select_off

# ======================================================================================
# ======================================================================================
# ======================================================================= binary sensors

binary_sensor:

  # --------------------------------------------------------------------- button
  - platform: gpio
    pin:
      number: GPIO42
      inverted: true
    name: M5 Button
    on_press:
      - logger.log: "button_pushed _____________________ button_pushed"
      - if:
          condition:
            - lambda: 'return id(page_selector).state == "page_00";'
          then:
            - select.set:
                id: page_selector
                option: page_off
          else:
            - if:
                condition:
                  - lambda: 'return id(page_selector).state == "page_01";'
                then:
                  - select.set:
                      id: page_selector
                      option: page_00
                else:
                  - select.set:
                      id: page_selector
                      option: page_01

# ================================================================= touch inputs
  # -------------------------------------------------------------- startup
  - platform: touchscreen
    id: touch_00
    internal: true
    x_min: 0
    x_max: 240
    y_min: 0
    y_max: 240
    page_id: page_00
    on_press:
      - logger.log: "touch_input OVER page_00 : _____________________ startup"
    on_release:
      - if:
          condition:
            - light.is_on: backlight
          then:
            - display.page.show: page_01

  # -------------------------------------------------------------- welcome
  - platform: touchscreen
    id: touch_01_tl
    internal: true
    x_min: 0
    x_max: 118
    y_min: 0
    y_max: 118
    page_id: page_01
    on_press:
      - logger.log: "touch_input OVER page_01 : _____________________ top_left"
    on_release:
      - if:
          condition:
            - light.is_on: backlight
          then:
            - display.page.show: page_a1
  - platform: touchscreen
    id: touch_01_tr
    internal: true
    x_min: 122
    x_max: 240
    y_min: 0
    y_max: 118
    page_id: page_01
    on_press:
      - logger.log: "touch_input OVER page_01 : _____________________ top_right"
    on_release:
      - if:
          condition:
            - light.is_on: backlight
          then:
            - display.page.show: page_b1
  - platform: touchscreen
    id: touch_01_bl
    internal: true
    x_min: 0
    x_max: 118
    y_min: 122
    y_max: 240
    page_id: page_01
    on_press:
      - logger.log: "touch_input OVER page_01 : _____________________ bottom_left"
    on_release:
      - if:
          condition:
            - light.is_on: backlight
          then:
            - display.page.show: page_c1
  - platform: touchscreen
    id: touch_01_br
    internal: true
    x_min: 122
    x_max: 240
    y_min: 122
    y_max: 240
    page_id: page_01
    on_press:
      - logger.log: "touch_input OVER page_01 : _____________________ bottom_right"
    on_release:
      - if:
          condition:
            - light.is_on: backlight
          then:
            - display.page.show: page_d1

# ======================================================================================
# ======================================================================================
# ============================================================================== numbers

number:
  - platform: template
    id: color_hue
    initial_value: 0
    min_value: 0
    max_value: 359.9
    step: 0.1
    optimistic: True
  - platform: template
    id: color_saturation
    initial_value: 0
    min_value: 0
    max_value: 100
    step: 0.1
    optimistic: True
  - platform: template
    id: dimmer_value
    initial_value: 0
    min_value: 0
    max_value: 1
    step: 0.001
    optimistic: True

# ======================================================================================
# ======================================================================================
# ============================================================================== scripts

script:
  - id: update_touch_script
    mode: restart
    parameters:
      x: int
      y: int
    then:
      - lambda: |-
          // adjust center or coordinate plane to (120, 120)
          float polar_x = x - 120;
          float polar_y = 120 - y; // Screen y is opposite of cartesian.
          // convert to polar coords
          float r = sqrt(pow(polar_x, 2) + pow(polar_y, 2));
          float theta = atan(polar_y / polar_x);
          if (polar_x < 0) {
            theta += M_PI;  // Adjust atan for quadrants 2 & 3.
          } else if (polar_y < 0) {
            theta += 2 * M_PI;  // Make quadrant 4 value positive.
          }
          // Update dimmer value.
          float min_theta = M_PI * 310 / 180;
          float max_theta = M_PI * 590 / 180;
          // Normalize the relative positioning of the values.
          float test_theta = theta;
          if (test_theta < min_theta) {
            test_theta += M_PI * 2;
          }
          ESP_LOGD("THETA", "%f < %f < %f", min_theta, test_theta, max_theta);

          // page interactions
          if (id(screen).get_active_page() == id(page_00)) {
            id(color_hue).publish_state(360 - theta / M_PI * 180);
            id(color_saturation).publish_state(min(r, (float)100));
          }
          if (id(screen).get_active_page() == id(page_01)) {
            id(color_hue).publish_state(360 - theta / M_PI * 180);
            id(color_saturation).publish_state(min(r, (float)100));
          }
      # - component.update: screen

# ======================================================================================
# ======================================================================================
# ==============================================================================  text sensors

text_sensor:
  - platform: homeassistant
    id: alarm_text
    entity_id: $alarm_panel_id
  - platform: homeassistant
    id: gate_text
    entity_id: $gate_sensor_id
    attribute: esphome_text_sensor
  - platform: homeassistant
    id: windows_text
    entity_id: $windows_group_id

I didn’t find the way to reduce those parts with lambdas… Any guess?
Select component

    on_value:
      - if:
          condition:
            - lambda: 'return id(page_selector).state == "page_off";'
          then:
            - light.turn_off: backlight
          else:
            - if:
                condition:
                  - light.is_off: backlight
                then:
                  - light.turn_on: backlight
                  - display.page.show: page_01
            - if:
                condition:
                  - lambda: 'return id(page_selector).state == "page_00";'
                then:
                  - display.page.show: page_00
            - if:
                condition:
                  - lambda: 'return id(page_selector)....... etc etc etc

Display component:

    on_page_change:
      - to: page_00
        then:
          - select.set:
              id: page_selector
              option: page_00
      - to: page_01
        then:
          - select.set:
              id: page_selector
              option: page_01
      - to: page_a1.......  etc etc etc
2 Likes

In the video I shared a few posts up, the guy ‘Volos Projects’ has made not only a nice looking, but very responsive UI. I am not sure how he implemented it, but I am pretty sure he shares his code somewhere, maybe you could look at it and see?

This videos are only in German but the github repo is in english:
SmartHome-yourself/m5-dial-for-esphome
But has added touch switch between entities (swiping left and right) and switch between modes (swiping up and down)

https://www.youtube.com/watch?v=4dE7YONEYVk <= lights
https://www.youtube.com/watch?v=7TZfAWmYNzo <= update with more entities

2 Likes

Hello, has anyone already managed to operate the NFC tag via the M5Stack dial? I would like to perform this option with him. Thanks in advance

I’ve now started looking at the lvgl component that is in development for esphome

It’s only early days of bringing things across, but it’s a lot faster than the lambda display method that we needed to use

edit: updated with a loading screen and a little more visible due to colour changes (still can’t work out how to change the blue colour for the arc :frowning:)

edit 2: I figured out how to change the blue colour 32s after posting the initial edit :man_facepalming:)

4 Likes

Yeah… Look at post #48!

that’s awesome ! could you share the code ? i have been looking on how to implement a squareline studio ui to the M5 for so long and feel like you have found the way !

You didn’t reply to anyone specific, but some of the code I use in this thread is here

The dial_lvgl is essentially what is in the video above.

1 Like

Do you have something to share from Squareline?

Hey all. I’m very close to finishing up programming my first Dial. I have pages working with the dial, etc. I am basically setting up a timer that is “supposed” to buzz when it expires. For whatever reason, the buzzer isn’t making any sound. I went back to the default firmware and I can hear it beep when I click on things, so I don’t think it’s a hardware issue.

output:
  - platform: ledc
    pin: GPIO3
    id: buzzer

sensor:
  - platform: rotary_encoder
    id: encoder
    pin_a: GPIO40
    pin_b: GPIO41
    on_clockwise: 
      then:
        - output.turn_on: buzzer
        - logger.log: "Next page"
    on_anticlockwise: 
      then:
        - output.turn_off: buzzer
        - logger.log: "Previous page"

I tried the above code just to simply test the buzzer, but nothing happens. In the past, I’ve used ESP dev boards and attached passive buzzers to pins and that is how I turned them on/off. Does anyone have any experiences with the buzzer on the Dial? Any thoughts/tips?

The buzzer needs to be controlled with rtttl
https://esphome.io/components/rtttl.html

on_clockwise: 
  - rtttl.play: quick_e:d=4,o=5,b=100:16e6    

Unfortunately, there is a fair bit of blocking code so it doesn’t work perfectly.

Gotcha. I was hoping to use it without rttl. I need something that will continue to make noise until a user interacts with it. I’ll play with it though. Thanks for the response.

Any idea if there is a way to start rtttl from inside a lambda? With my countdown, it tests for the end of the countdown and takes actions inside lambdas. Oddly, Google isn’t helping me much.

Here is the section of yaml. I commented where I need the rtttl to start (and hopefully continue non-stop until the user presses a button).

        lambda: |-
          int mins = 0;
          int secs = 0;
          if (id(esptime).now().day_of_week == 1) { // it's Sunday, do nothing.
            it.fill(id(Color::WHITE));
            it.image(120, 60, id(cfa_logo), ImageAlign::CENTER);
            it.print(120, 120, id(roboto20), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "It's a day of rest!");
            it.print(120, 160, id(roboto20), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "No alarms until tomorrow.");
            id(backlight_output).set_level(0.2);
          } else if (id(esptime).now().hour < id(starttime) || id(esptime).now().hour > id(endtime)) { // After Hours
            it.fill(id(Color::WHITE));
            it.image(120, 60, id(cfa_logo), ImageAlign::CENTER);
            it.print(120, 120, id(roboto20), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "Good night!");
            it.print(120, 160, id(roboto20), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "No alarms");
            it.print(120, 180, id(roboto20), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "until tomorrow.");
            id(countdown) = ${countdown_length};
            id(backlight_output).set_level(0.2);
          } else if (id(countdown) > 0) { // Countdown is active
            id(countdown)--;
            secs = id(countdown) % 60;
            mins = (id(countdown) - secs) / 60;
            it.fill(id(Color::WHITE));
            it.image(120, 60, id(cfa_logo), ImageAlign::CENTER);
            it.printf(120, 120, id(roboto32), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "%2d:%02d", mins, secs);
            it.print(120, 175, id(roboto20), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "Current Time");
            it.strftime(120, 200, id(roboto20), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "%I:%M %p", id(esptime).now());
            id(backlight_output).set_level(0.6);
          } else { // Countdown has expired. Let's make some noise!
            id(alarming) = "true";
            // start rtttl
            it.fill(id(Color::WHITE));
            it.image(120, 60, id(cfa_logo), ImageAlign::CENTER);
            it.print(120, 120, id(roboto32), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "Time to clean!");
            it.print(120, 195, id(roboto16), id(cfa_black), TextAlign::CENTER_HORIZONTAL, "Rotate for tasks");
            id(backlight_output).set_level(1.0);
          }

Without going through all that code, I would think something like

id(my_rtttl).play("success:d=24,o=5,b=100:c,g,b");

Replace my_rtttl with whatever the id of your rtttl component is, and the string is the audio that is played

That should work, but if I was thinking about doing it, I’d create a script that plays the rtttl (and anything else I needed to do at the expiry of the countdown) and then just put

id(my_script).execute();

in the lambda.

Hi there,
is someone managed to reproduce or approach the sound that rotary encoder do on stock M5dial firmware.
I’m using this one for my tests, but it sounds like the 80’s …

rtttl.play: 'one_short:d=32,o=4,b=900:a'

I made some progress on LVGL component, and this is FASTEEEEEEEEEER than lambdas, and even look better to me!

Here's the LVGL code part (WIP):
lvgl:

  # -------------------------------------------------------------------- general
  displays:
    - my_display
  touchscreens:
    - my_touchscreen
  rotary_encoders:
    sensor: rotaryencoder
    enter_button: m5_button
  theme:
    obj:
      scrollbar_mode: "OFF"
      scrollable: false
      bg_color: pri_color
      border_width: 0
      border_color: orange_color
      radius: 10
    arc:
      arc_color: pri_color
      knob:
        bg_color: nova_color
      indicator:
        arc_color: dark_nova_color
    btn:
      bg_color: pri_color
      checked:
        bg_color: nova_color
    label:
      align: CENTER
      text_font: montserrat_18
      text_color: text_color
      clickable: false
  on_idle:
    timeout: !lambda "return (id(backlight_timeout).state * 1000);"
    then:
      - logger.log: "LVGL is idle"
      - light.turn_off: backlight
      - lvgl.pause:

  # ------------------------------------------------------------------ top layer
  top_layer:
    widgets:
      - obj:
          id: boot_screen
          width: SIZE_CONTENT 
          height: SIZE_CONTENT 
          bg_color: 0x000000
          bg_opa: COVER
          radius: 0
          pad_all: 0
          border_width: 0
          on_press:
            - lvgl.widget.hide: boot_screen
          widgets:

            - img:
                align: CENTER
                src: boot_logo
                y: -30

            - spinner:
                align: CENTER
                y: 70
                height: 50
                width: 50
                spin_time: 2s
                arc_length: 60deg
                arc_rounded: true
                arc_color: sec_color
                arc_width: 7
                indicator:
                  arc_color: blue_color
                  arc_width: 7

  # ---------------------------------------------------------------------- pages
  pages:
  
    # _____________________________________________________ page welcome
    - id: page_welcome
      <<: &page_config
        bg_color: sec_color
        scrollbar_mode: "OFF"
        scrollable: false
      widgets:
        # time
        - label:
            id: label_rtc_time
            align: TOP_MID
            text: "Heure"
            y: 5

        # date
        - label:
            id: label_rtc_date
            align: TOP_MID
            text_font: montserrat_16
            text: "Date"
            y: 28

        # MIDDLE_CONTAINER
        - obj:
            id: object_alarm_state
            align: BOTTOM_MID
            x: 0
            y: -150
            width: 250
            height: 36
            # clickable: true
            # on_press:
            #   - lvgl.page.show: page_alarm
            #   - homeassistant.service:
            #       service: input_select.select_option
            #       data:
            #         entity_id: $ha_page_selector
            #         option: page_alarm
            widgets:
              - label:
                  id: label_alarm_text
                  
                  text: "Alarme"
                  text_color: sec_color

        # LEFT_CONTAINER_1
        - obj:
            width: 150
            height: 95
            align: TOP_RIGHT
            x: -101
            y: 98
            widgets:

              ######################### COLUMN 01
              # garage
              - label:
                  id: icon_garage_state
                  <<: &icon_40_config
                    clickable: true
                    text_font: grandstander_40_regular
                    text: "x"
                  <<: &column_01
                    x: -60
                  <<: &row_01
                    align: TOP_RIGHT
                    y: -8
                  clickable: false
                  # on_long_press:
                  #   - <<: &bip
                  #       rtttl.play: 'one_short:d=32,o=4,b=900:a'

              # cargate
              - label:
                  id: icon_cargate_text
                  <<: *icon_40_config
                  <<: *column_01
                  <<: &row_02
                    align: BOTTOM_RIGHT
                    y: 2
                  clickable: false
                  # on_long_press:
                  #   - <<: *bip

              ######################### COLUMN 02
              # light
              - label:
                  id: icon_light_cour
                  <<: *icon_40_config
                  <<: &column_02
                    x: 0
                  <<: *row_01
                  on_long_press:
                    - <<: &bip
                        rtttl.play: 'one_short:d=24,o=5,b=100:g'
                    - homeassistant.service:
                        service: light.toggle
                        data:
                          entity_id: $ha_light_cour

              # handgate
              - label:
                  id: icon_handgate_text
                  <<: *icon_40_config
                  <<: *column_02
                  <<: *row_02
                  y: 4 # SPE handgate
                  on_long_press:
                    - <<: *bip
                    - homeassistant.service:
                        service: lock.unlock
                        data_template:
                          entity_id: lock.gate

        # LEFT_CONTAINER_2                          
        - obj:
            bg_opa: TRANSP
            border_opa: TRANSP
            width: 150
            height: 45
            align: TOP_RIGHT
            x: -100
            y: 195
            widgets:

              # outside temperature
              - label:
                  id: label_outside_temperature
                  x: 41
                  text_font: montserrat_20
                  text: "Temp"

              # meteo
              - label:
                  id: icon_weather_sensor
                  x: 41
                  text_font: grandstander_36_regular
                  text: "x"

        # RIGHT_1_CONTAINER
        - obj:
            bg_opa: TRANSP
            border_opa: TRANSP
            width: 110
            height: 45
            align: TOP_LEFT
            x: 147
            y: 98
            widgets:

              - label:
                  id: icon_front_door
                  <<: &icon_36_config
                    text_font: grandstander_36_regular
                    text: "x"
                  align: LEFT_MID
                  x: -5

              - label:
                  id: icon_window_group
                  <<: *icon_36_config
                  align: LEFT_MID
                  x: 40

        # RIGHT_2_CONTAINER
        - obj:
            width: 110
            height: 100
            align: TOP_LEFT
            x: 147
            y: 151
            on_long_press:
              - <<: *bip
              - lvgl.page.show: page_thermostat
              - homeassistant.service:
                  service: input_select.select_option
                  data:
                    entity_id: $ha_page_selector
                    option: page_thermostat
              - homeassistant.service:
                  service: climate.set_hvac_mode
                  data:
                    entity_id: $ha_climate_heating
                    hvac_mode: heat
            widgets:

              # temp
              - label:
                  id: label_climate_heating_current_0
                  y: -5
                  align: TOP_LEFT
                  text_font: montserrat_20
                  text: "Temp"

              # climate icon
              - label:
                  id: icon_climate_heating
                  align: TOP_LEFT
                  x: -3
                  y: 22
                  text_font: grandstander_32_regular
                  text: "x"
                    
    # __________________________________________________ page thermostat
    - id: page_thermostat
      <<: *page_config
      widgets:
        - meter:
            id: meter_climate_heating_target
            width: 210
            height: 210
            align: CENTER
            bg_opa: TRANSP
            border_width: 0
            text_color: text_color
            scales:
              range_from: 16 # = template_sensor, and arc values
              range_to: 24 # = template_sensor, and arc values
              angle_range: 250
              rotation: 145 # = arc start_angle
              ticks:
                count: 9
                width: 1
                length: 3
                color: sec_color
                major:
                  stride: 1
                  length: 1
                  color: dark_nova_color
                  label_gap: 18

        - arc:
            id: arc_climate_heating_target
            width: 210
            height: 210
            align: CENTER
            start_angle: 145 # = meter rotation value
            end_angle: 35
            min_value: 160 # idem meter range_from value * 10
            max_value: 240 # idem meter range_to value * 10
            adjustable: false

        - obj:
            id: button_climate_state_off
            align: CENTER
            width: 60
            height: 60
            radius: 60
            on_long_press:
              - <<: *bip
              - lvgl.page.show: page_welcome
              - homeassistant.service:
                  service: input_select.select_option
                  data:
                    entity_id: $ha_page_selector
                    option: page_welcome
              - homeassistant.service:
                  service: climate.set_hvac_mode
                  data:
                    entity_id: $ha_climate_heating
                    hvac_mode: "off"
            widgets:
              - label:
                  <<: *icon_36_config
                  text: "\U000F0425" # mdi:power

        - label:
            id: label_climate_heating_current_1
            text: ""
            y: 70
            text_font: montserrat_26

image
image

Have to work on the alarm page now.
EDIT : Done

4 Likes

Here’s the main part of the code (had to split code to post here):

Code
packages:
  wifi: !include common/esp_common_wifi.yaml
  device_base: !include common/esp_common_device_base.yaml

<<: !include m5dial_files/colors_and_fonts.yaml
# <<: !include m5dial_files/lvgl_images_and_icons.yaml
# ----------------------------------------------------------------------- images
image:
  - id: boot_logo
    file: m5dial_files/cs_smiley.png
    type: RGB565
    use_transparency: true
    resize: 100x100
      
wifi:
  manual_ip:
    static_ip: 192.168.2.63
  ap:
    ssid: "ip063-tab-m5stack-dial-fallback"

esphome:
  on_boot: 
    priority: 600
    then:
      - pcf8563.read_time: rtc_time
      - light.turn_on: backlight

esp32:
  board: esp32-s3-devkitc-1
  framework:
    type: arduino

api:
  on_client_connected:
    - if:
        condition:
          lambda: 'return (0 == client_info.find("Home Assistant "));'
        then:
          - delay: 1s
          - lvgl.widget.hide: boot_screen
          - lvgl.page.show: page_welcome
          - homeassistant.service:
              service: input_select.select_option
              data:
                entity_id: $ha_page_selector
                option: page_welcome
  on_client_disconnected:
    - if:
        condition:
          lambda: 'return (0 == client_info.find("Home Assistant "));'
        then:
          - lvgl.widget.show: boot_screen

external_components:
 - source: github://clydebarrow/esphome@lvgl
   refresh: 10min
   components: [ lvgl ]

# ======================================================================================
# ======================================================================================
# =========================================================================== components

i2c:
  - id: bus_internal #required by touchscreen.ft5x06
    sda: GPIO11
    scl: GPIO12
    scan: False

touchscreen:
  platform: ft5x06
  address: 0x38
  id: my_touchscreen
  on_release:
    - if:
        condition: lvgl.is_paused
        then: &lvgl_resume
          - logger.log: "LVGL resuming"
          - lvgl.resume:
          - lvgl.widget.redraw:
          - light.turn_on: backlight

uart:
  tx_pin: GPIO2
  rx_pin: GPIO1
  baud_rate: 256000
  parity: NONE
  stop_bits: 1

spi:
  mosi_pin: GPIO5
  clk_pin: GPIO6

display:
  - platform: ili9xxx
    model: gc9a01a
    auto_clear_enabled: false
    update_interval: never
    reset_pin: GPIO8
    id: my_display
    cs_pin: GPIO7
    dc_pin: GPIO4
    dimensions: 
      height: 240
      width: 240

output:
  - platform: ledc
    id: lcd_backlight
    pin: GPIO9
    min_power: 0
    max_power: 1
  - platform: ledc
    id: rtttl_out
    pin: GPIO3

light:
  - platform: monochromatic
    id: backlight
    name: "Backlight"
    output: lcd_backlight
    default_transition_length: 250ms

rtttl:
  output: rtttl_out
  id: my_rtttl

# ======================================================================================
# ======================================================================================
# ============================================================================= specials

  # -------------------------------------------------------------- substitutions
substitutions:
  name: ip063_tab_m5stack_dial
  friendly_name: M5Stack Dial
  comment: M5stack Dial / esp32-s3 (lvgl)
  log_level: DEBUG # NONE / ERROR / WARN / INFO / DEBUG (default) / VERBOSE / VERY_VERBOSE (not recommended)

  ha_presence_sensor: binary_sensor.ip030_mmw_aqara_living_presence_sensor_6
  ha_light_cour: light.shelly_one_cour
  ha_climate_heating: climate.heatpump_sdgs_ebusd
  ha_weather_sensor: weather.84_main_city
  ha_outside_temperature: sensor.ebusd_bass2_displayedoutsidetemp_tempv
  ha_page_selector: input_select.tab_m5stack_dial_page_selector
  ha_alarm_text: sensor.tplt_alarmo
  ha_alarm_state: alarm_control_panel.alarme_maison
  ha_front_door: binary_sensor.magnet_aqara_front_door_contact
  ha_window_group: binary_sensor.windows_upstairs_bedrooms
  ha_handgate_text: binary_sensor.tplt_gate_open_too_long
  ha_cargate_text: input_boolean.test
  ha_garage_state: binary_sensor.io_frient_garage_09c6_input_1

  # -------------------------------------------------------------------- globals
globals:
  - id: lambda_nova_color
    type: lv_color_t
    restore_value: no
    initial_value: 'lv_color_hex(0xe38de3)'

  - id: lambda_blue_color
    type: lv_color_t
    restore_value: no
    initial_value: 'lv_color_hex(0x6b93e3)'

  - id: lambda_green_color
    type: lv_color_t
    restore_value: no
    initial_value: 'lv_color_hex(0xa6da95)'

  - id: lambda_yellow_color
    type: lv_color_t
    restore_value: no
    initial_value: 'lv_color_hex(0xffd17a)'

  - id: lambda_orange_color
    type: lv_color_t
    restore_value: no
    initial_value: 'lv_color_hex(0xe0752b)'

  - id: lambda_red_color
    type: lv_color_t
    restore_value: no
    initial_value: 'lv_color_hex(0xede455c)'

  - id: lambda_off_color
    type: lv_color_t
    restore_value: no
    initial_value: 'lv_color_hex(0x85b6078)'

  - id: lambda_text_color
    type: lv_color_t
    restore_value: no
    initial_value: 'lv_color_hex(0xcad3f5)'

# ======================================================================================
# ======================================================================================
# =============================================================================== number
number:

  # __________________________________________________ backlight timeout
  - platform: template
    name: Backlight Timeout
    optimistic: true
    id: backlight_timeout
    unit_of_measurement: "s"
    initial_value: 30
    restore_value: true
    min_value: 10
    max_value: 90
    step: 10
    mode: auto # auto / box / slider

# ======================================================================================
# ======================================================================================
# ================================================================================= time

switch:
  - platform: template
    id: switch_antiburn
    icon: mdi:television-shimmer
    optimistic: true
    entity_category: "config"
    turn_on_action:
      - logger.log: "Starting Antiburn"
      - if:
          condition: lvgl.is_paused
          then:
            - lvgl.resume:
            - lvgl.widget.redraw:
            - delay: 1s
      - lvgl.pause:
          show_snow: true
    turn_off_action:
      - logger.log: "Stopping Antiburn"
      - if:
          condition: lvgl.is_paused
          then:
            - lvgl.resume:
            - lvgl.widget.redraw:
            - delay: 1s
            - lvgl.pause:

# ======================================================================================
# ======================================================================================
# =============================================================================== switch

time:
  - platform: homeassistant
    on_time_sync:
      then:
        - pcf8563.write_time: rtc_time
        - logger.log: "Time Synced"
  - platform: pcf8563
    id: rtc_time
    address: 0x38
    update_interval: never
    on_time:
      - minutes: '*'
        seconds: 0
        then:
          - script.execute: time_update
      - hours: 2,3,4,5
        minutes: 5
        seconds: 0
        then:
          - switch.turn_on: switch_antiburn
      - hours: 2,3,4,5
        minutes: 35
        seconds: 0
        then:
          - switch.turn_off: switch_antiburn
      - minutes: '*'
        seconds: 0,10,20,30,40,50
        then:
          - lvgl.widget.hide: label_outside_temperature
          - lvgl.widget.show: icon_weather_sensor
      - minutes: '*'
        seconds: 5,15,25,35,45,55
        then:
          - lvgl.widget.show: label_outside_temperature
          - lvgl.widget.hide: icon_weather_sensor

# ======================================================================================
# ======================================================================================
# =============================================================================== script

script:
  - id: time_update
    then:
      - lvgl.label.update:
          id: label_rtc_time
          text: !lambda |-
            static char time_buf[10];
            auto now = id(rtc_time).now();
            int hour = now.hour;
            int minute = now.minute;
            snprintf(time_buf, sizeof(time_buf), "%02d:%02d", hour, minute);
            return time_buf;
      - lvgl.label.update:
          id: label_rtc_date
          text: !lambda |-
            static const char * const month_names[] = {"Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Sept.", "Oct.", "Nov.", "Dec."};
            static const char * const day_names[] = {"Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"};
            static char combined_buf[20];
            auto now = id(rtc_time).now();
            snprintf(combined_buf, sizeof(combined_buf), "%s %2d %s", day_names[now.day_of_week - 1] , now.day_of_month , month_names[now.month-1]);
            return combined_buf;
            
  - id: climate_set_target_temperature
    mode: restart
    then:
      - delay: 5s
      - homeassistant.service:
          service: climate.set_temperature
          data:
            entity_id: $ha_climate_heating
            temperature: !lambda "return id(climate_heating_new_target).state;"

# ======================================================================================
# ======================================================================================
# ========================================================================== text sensor
text_sensor:

  # ------------------------------------------------------------- home assistant

  # ______________________________________________________ page selector
  - platform: homeassistant
    id: page_selector_state
    entity_id: $ha_page_selector
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - if:
          condition:
            - lambda: 'return id(page_selector_state).state == "page_welcome";'
          then:
            - lvgl.page.show: page_welcome
      - if:
          condition:
            - lambda: 'return id(page_selector_state).state == "page_thermostat";'
          then:
            - lvgl.page.show: page_thermostat

  # ________________________________________________________ alarm state
  - platform: homeassistant
    id: alarm_state
    entity_id: $ha_alarm_state
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lvgl.widget.update:
          id: object_alarm_state
          bg_color: !lambda |-
            if (x == "armed_away") {
              return id(lambda_nova_color);
            } else if (x == "armed_home") {
              return id(lambda_blue_color);
            } else if (x == "armed_night") {
              return id(lambda_nova_color);
            } else if (x == "arming" or x == "pending") {
              return id(lambda_yellow_color);
            } else if (x == "triggered") {
              return id(lambda_red_color);
            } else if (x == "disarmed") {
              return id(lambda_text_color);
            } else {
              return id(lambda_off_color);
            }

  # _________________________________________________________ alarm text
  - platform: homeassistant
    id: alarm_text
    entity_id: $ha_alarm_text
    on_value:
      - lvgl.label.update:
          id: label_alarm_text
          text:
            format: "%s"
            args: [ 'x.c_str()' ]
    
  # ___________________________________________________ front door state
  - platform: homeassistant
    id: front_door # off / on
    entity_id: $ha_front_door
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lvgl.widget.update:
          id: icon_front_door
          text_color: !lambda |-
            if (x == "off") {
              return id(lambda_text_color);
            } else if (x == "on") {
              return id(lambda_blue_color);
            } else {
              return id(lambda_off_color);
            }
      - lvgl.label.update:
          id: icon_front_door
          text: !lambda |-
            if (x == "off") {
              return "\U000F10AF"; // mdi:door-closed-lock
            } else if (x == "on") {
              return "\U000F081C"; // mdi:door-open
            } else {
              return "x";
            }
    
  # _________________________________________________ window group state
  - platform: homeassistant
    id: window_group # off / on
    entity_id: $ha_window_group
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lvgl.widget.update:
          id: icon_window_group
          text_color: !lambda |-
            if (x == "off") {
              return id(lambda_text_color);
            } else if (x == "on") {
              return id(lambda_yellow_color);
            } else {
              return id(lambda_off_color);
            }
      - lvgl.label.update:
          id: icon_window_group
          text: !lambda |-
            if (x == "off") {
              return "\U000F11DB"; // mdi:window-closed-variant
            } else if (x == "on") {
              return "\U000F11DC"; // mdi:window-open-variant
            } else {
              return "x";
            }

  # _______________________________________________________ garage state
  - platform: homeassistant
    id: garage_state # off / on
    entity_id: $ha_garage_state
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lvgl.widget.update:
          id: icon_garage_state
          text_color: !lambda |-
            if (x == "off") {
              return id(lambda_text_color);
            } else if (x == "on") {
              return id(lambda_yellow_color);
            } else {
              return id(lambda_off_color);
            }
      - lvgl.label.update:
          id: icon_garage_state
          text: !lambda |-
            if (x == "off") {
              return "\U000F12D3"; // mdi:garage-variant
            } else if (x == "on") {
              return "\U000F12D4"; // mdi:garage-open-variant
            } else {
              return "x";
            }

  # ______________________________________________________ cargate state
  - platform: homeassistant
    id: cargate_text # off / on
    entity_id: $ha_cargate_text
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lvgl.widget.update:
          id: icon_cargate_text
          text_color: !lambda |-
            if (x == "off") {
              return id(lambda_text_color);
            } else if (x == "on") {
              return id(lambda_yellow_color);
            } else {
              return id(lambda_off_color);
            }
      - lvgl.label.update:
          id: icon_cargate_text
          text: !lambda |-
            if (x == "off") {
              return "\U000F0E8B"; // mdi:boom-gate-outline
            } else if (x == "on") {
              return "\U000F0E87"; // mdi:boom-gate-alert
            } else {
              return "x";
            }

  # ______________________________________________________ handgate text
  - platform: homeassistant
    id: handgate_text # closed / open / alert
    entity_id: $ha_handgate_text
    attribute: esphome_text_sensor
    filters:
      - map:
        - closed -> Ferme
        - open -> Ouvert
        - alert -> Defaut
    on_raw_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lvgl.label.update:
          id: icon_handgate_text
          text: !lambda |-
            if (x == "closed") {
              return "\U000F0299"; // mdi:gate
            } else if (x == "open") {
              return "\U000F116A"; // mdi:gate-open
            } else if (x == "alert") {
              return "\U000F17F8"; // mdi:gate-alert
            } else {
              return "x";
            }
      - lvgl.widget.update:
          id: icon_handgate_text
          text_color: !lambda |-
            if (x == "closed") {
              return id(lambda_text_color);
            } else if (x == "open") {
              return id(lambda_yellow_color);
            } else if (x == "alert") {
              return id(lambda_red_color);
            } else {
              return id(lambda_off_color);
            }

  # ______________________________________________________ climate state
  - platform: homeassistant
    id: climate_heating_state
    entity_id: $ha_climate_heating
    on_value:
      - lvgl.label.update:
          id: icon_climate_heating
          text: !lambda |-
            if (x == "auto") {
              return "\U000F1B17"; // mdi:thermostat-auto
            } else if (x == "heat") {
              return "\U000F0238"; // mdi:fire
            } else if (x == "off") {
              return "\U000F0AD8"; // mdi:radiator-off
            } else {
              return "x";
            }
      - lvgl.widget.update:
          id: icon_climate_heating
          text_color: !lambda |-
            if (x == "auto") {
              return id(lambda_green_color);
            } else if (x == "heat") {
              return id(lambda_orange_color);
            } else if (x == "off") {
              return id(lambda_text_color);
            } else {
              return id(lambda_off_color);
            }

  # _____________________________________________________ weather sensor
  - platform: homeassistant
    id: weather_sensor
    entity_id: $ha_weather_sensor
    on_value:
      - lvgl.label.update:
          id: icon_weather_sensor
          text: !lambda |-
            if (x == "clear-night") {
              return "\U000F0594";
            } else if (x == "cloudy") {
              return "\U000F0590";
            } else if (x == "exceptional") {
              return "\U000F0F2F";
            } else if (x == "fog") {
              return "\U000F0591";
            } else if (x == "hail") {
              return "\U000F0592";
            } else if (x == "lightning") {
              return "\U000F0593";
            } else if (x == "lightning-rainy") {
              return "\U000F067E";
            } else if (x == "partlycloudy") {
              return "\U000F0595";
            } else if (x == "pouring") {
              return "\U000F0596";
            } else if (x == "rainy") {
              return "\U000F0597";
            } else if (x == "snowy") {
              return "\U000F0598";
            } else if (x == "snowy-rainy") {
              return "\U000F067F";
            } else if (x == "sunny") {
              return "\U000F0599";
            } else if (x == "windy") {
              return "\U000F059D";
            } else if (x == "windy-variant") {
              return "\U000F059E";
            } else if (x == "sunny-off") {
              return "\U000F14E4";
            } else {
              return "x";
            }

  # _________________________________________________________ light cour
  - platform: homeassistant
    id: light_cour
    entity_id: $ha_light_cour
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lvgl.label.update:
          id: icon_light_cour
          text: !lambda |-
            if (x == "on") {
              return "\U000F06E8"; // mdi:lightbulb-on
            } else if (x == "off") {
              return "\U000F0336"; // mdi:lightbulb-outline
            } else {
              return "x";
            }
      - lvgl.widget.update:
          id: icon_light_cour
          text_color: !lambda |-
            if (x == "on") {
              return id(lambda_yellow_color);
            } else if (x == "off") {
              return id(lambda_text_color);
            } else {
              return id(lambda_off_color);
            }

# ======================================================================================
# ======================================================================================
# ======================================================================== binary sensor

binary_sensor:

  # --------------------------------------------------------------------- button
  - platform: gpio
    pin:
      number: GPIO42
      inverted: true
    id: m5_button
    name: M5 Button
    on_press:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lvgl.page.show: page_welcome
      - homeassistant.service:
          service: input_select.select_option
          data:
            entity_id: $ha_page_selector
            option: page_welcome

  # ------------------------------------------------------------- home assistant

  # ____________________________________________________ presence sensor
  - platform: homeassistant
    id: presence_sensor
    entity_id: $ha_presence_sensor
    publish_initial_state: true
    on_state:
      - if:
          condition:
            - binary_sensor.is_on: presence_sensor
          then:
            - if:
                condition: lvgl.is_paused
                then: *lvgl_resume
            - lvgl.page.show: page_welcome
            - homeassistant.service:
                service: input_select.select_option
                data:
                  entity_id: $ha_page_selector
                  option: page_welcome

# ======================================================================================
# ======================================================================================
# =============================================================================== sensor
sensor:

  # ------------------------------------------------------------- rotary encoder
  - platform: rotary_encoder
    id: rotaryencoder
    resolution: 1
    pin_a: 
      number: GPIO40
      mode:
       input: true
       pullup: true
    pin_b: 
      number: GPIO41
      mode:
       input: true
       pullup: true
    accuracy_decimals: 0
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume

    # ________________________________________________________ clockwise
    on_clockwise:
      - if:
          condition:
            - lambda: 'return id(page_selector_state).state == "page_thermostat";'
          then:
            - lambda: |-
                return id(climate_heating_new_target).publish_state(id(climate_heating_new_target).state + 0.5);

    # ___________________________________________________ anti-clockwise
    on_anticlockwise:
      - if:
          condition:
            - lambda: 'return id(page_selector_state).state == "page_thermostat";'
          then:
            - lambda: |-
                return id(climate_heating_new_target).publish_state(id(climate_heating_new_target).state - 0.5);

  # ------------------------------------------------------------- home assistant

  # _____________________________________________ climate heating target
  - platform: homeassistant
    id: climate_heating_target
    entity_id: $ha_climate_heating
    attribute: temperature
    on_value:
      - if:
          condition: lvgl.is_paused
          then: *lvgl_resume
      - lambda: |-
          id(climate_heating_new_target).publish_state(x);

  # ____________________________________________ climate new targetvalue
  - platform: template
    id: climate_heating_new_target
    icon: mdi:thermometer-lines
    filters:
      - clamp:
          min_value: 16 # idem meter range_from value
          max_value: 24 # idem meter range_from value
    on_value:
      - lvgl.arc.update:
          id: arc_climate_heating_target
          value: !lambda return x * 10;
      - script.execute: climate_set_target_temperature

  # ____________________________________________ climate heating current
  - platform: homeassistant
    id: climate_heating_current
    entity_id: $ha_climate_heating
    attribute: current_temperature
    on_value:
      - lvgl.label.update:
          id: label_climate_heating_current_0
          text:
            format: "%2.1f°C"
            args: [ 'x' ]
      - lvgl.label.update:
          id: label_climate_heating_current_1
          text:
            format: "%2.1f°C"
            args: [ 'x' ]

  # ________________________________________________ outside temperature
  - platform: homeassistant
    id: outside_temperature
    entity_id: $ha_outside_temperature
    on_value:
      - lvgl.label.update:
          id: label_outside_temperature
          text:
            format: "%2.1f°C"
            args: [ 'x' ]
<<: !include m5dial_files/colors_and_fonts.yaml
color:
  # Nova Colors
  - id: nova_color # pink
    hex: "e38de3"
  - id: dark_nova_color # pink
    hex: "764a76"

  - id: pri_color # light (mantle)
    hex: "24273a"
  - id: sec_color # dark (crust)
    hex: "181926"

  - id: text_color
    hex: "cad3f5"
  - id: off_color
    hex: "5b6078"

  # Color Colors
  - id: blue_color
    hex: "6b93e3"
  - id: dark_blue_color
    hex: "344b79"

  - id: green_color
    hex: "a6da95"
  - id: dark_green_color
    hex: "374825"

  - id: yellow_color
    hex: "ffd17a"

  - id: orange_color
    hex: "e0752b"
  - id: dark_orange_color
    hex: "5f3e25"

  - id: red_color
    hex: "de455c"
  - id: dark_red_color
    hex: "642b2b"

font:
  - id: roboto_16_bold
    file:
      type: gfonts
      family: Roboto
      weight: bold
    size: 16
    <<: &extras
      extras:
        - file: "fonts/materialdesignicons-webfont.ttf"
          glyphs: [
            "\U000F1999", # mdi:rotate-360
            "\U000F0741", # mdi:gesture-tap
            "\U000F0046", # mdi:arrow-down-thick
            "\U000F0594", # clear-night
            "\U000F0590", # cloudy
            "\U000F0F2F", # exceptional
            "\U000F0591", # fog
            "\U000F0592", # hail
            "\U000F0593", # lightning
            "\U000F067E", # lightning-rainy
            "\U000F0595", # partlycloudy
            "\U000F0596", # pouring
            "\U000F0597", # rainy
            "\U000F0598", # snowy
            "\U000F067F", # snowy-rainy
            "\U000F0599", # sunny
            "\U000F059D", # windy
            "\U000F059E", # windy-variant
            "\U000F14E4", # sunny-off
            "\U000F073A", # mdi:cancel
            "\U000F0425", # mdi:power
            "\U000F0238", # mdi:fire
            "\U000F1B17", # mdi:thermostat-auto
            "\U000F0AD8", # mdi:radiator-off
            "\U000F0299", # mdi:gate
            "\U000F116A", # mdi:gate-open
            "\U000F17F8", # mdi:gate-alert
            "\U000F0E8B", # mdi:boom-gate-outline
            "\U000F0E87", # mdi:boom-gate-alert
            "\U000F10AF", # mdi:door-closed-lock
            "\U000F081C", # mdi:door-open
            "\U000F11DB", # mdi:window-closed-variant
            "\U000F11DC", # mdi:window-open-variant
            "\U000F12D3", # mdi:garage-variant
            "\U000F12D4", # mdi:garage-open-variant
            "\U000F06E8", # mdi:lightbulb-on
            "\U000F0336", # mdi:lightbulb-outline
            ]
  - id: roboto_20_regular
    file:
      type: gfonts
      family: Roboto
      weight: regular
    size: 20
    <<: *extras
  - id: roboto_20_bold
    file:
      type: gfonts
      family: Roboto
      weight: bold
    size: 20
    <<: *extras
  - id: roboto_24_regular
    file: 
      type: gfonts
      family: Roboto
      weight: regular
    size: 24
    <<: *extras
  - id: roboto_24_bold
    file: 
      type: gfonts
      family: Roboto
      weight: bold
    size: 24
    <<: *extras
  - id: roboto_48_bold
    file: 
      type: gfonts
      family: Roboto
      weight: bold
    size: 48
    <<: *extras


  - id: grandstander_32_regular
    file: 
      type: gfonts
      family: Grandstander
      weight: regular
    size: 32
    <<: *extras
  - id: grandstander_36_regular
    file: 
      type: gfonts
      family: Grandstander
      weight: regular
    size: 36
    <<: *extras
  - id: grandstander_40_regular
    file: 
      type: gfonts
      family: Grandstander
      weight: regular
    size: 40
    <<: *extras
2 Likes

Hello! I have this simplified code in which I need to use the internal bus and the A bus.

i2c:
  - id: busi
    sda: GPIO11
    scl: GPIO12
    scan: True
    frequency: 400kHz

  - id: busa
    sda: GPIO13
    scl: GPIO15
    scan: True
    frequency: 400kHz


sensor:
  - platform: vl53l0x
    i2c_id: busa
    name: "VL53L0x Distance"
    update_interval: 1s


touchscreen:
  platform: ft5x06
  i2c_id: busi
  address: 0x38

spi:
  mosi_pin: GPIO5
  clk_pin: GPIO6

display:
  - platform: ili9xxx
    model: gc9a01a
    reset_pin: GPIO8
    cs_pin: GPIO7
    dc_pin: GPIO4

When I run it and it reaches the device on the A bus, it restarts.

[14:12:28][I][app:029]: Running through setup()...
[14:12:28][I][i2c.arduino:218]: Performing I2C bus recovery
[14:12:28][I][i2c.arduino:218]: Performing I2C bus recovery
[14:12:28][D][spi:039]: Setting up SPI bus...
[14:12:28][D][ili9xxx:034]: Setting up ILI9xxx
[14:12:28][D][spi_device:379]: mode 0, data_rate 40000kHz
[14:12:28][D][ili9xxx:030]: Wrote MADCTL 0x48
[14:12:28][D][vl53l0x:034]: 'VL53L0x Distance' - setup BEGIN
[14:12:33]E (6003) task_wdt: Task watchdog got triggered. The following tasks did not reset the watchdog in time:
[14:12:33]E (6003) task_wdt:  - loopTask (CPU 1)
[14:12:33]E (6003) task_wdt: Tasks currently running:
[14:12:33]E (6003) task_wdt: CPU 0: IDLE
[14:12:33]E (6003) task_wdt: CPU 1: IDLE
[14:12:33]E (6003) task_wdt: Aborting.
[14:12:33]ESP-ROM:esp32s3-20210327
[14:12:33]Build:Mar 27 2021
[14:12:33]rst:0xc (RTC_SW_CPU_RST),boot:0x2b (SPI_FAST_FLASH_BOOT)
[14:12:33]Saved PC:0x4037793c
WARNING Decoded 0x4037793c: esp_restart_noos at /Users/ficeto/Desktop/ESP32/ESP32S2/esp-idf-public/components/esp_system/port/soc/esp32s3/system_internal.c:143 (discriminator 1)
[14:12:33]SPIWP:0xee
[14:12:33]mode:DIO, clock div:1
[14:12:33]load:0x3fce3808,len:0x43c
[14:12:33]load:0x403c9700,len:0xbec
[14:12:33]load:0x403cc700,len:0x2a3c
[14:12:33]entry 0x403c98d8
[14:12:34]E (188) psram: PSRAM ID read error: 0x00ffffff

If I remove the touch, it doesn’t work. Then, if I remove the display, it doesn’t work. Finally, when I remove SPI, it works.

[14:22:54][I][app:029]: Running through setup()...
[14:22:54][I][i2c.arduino:218]: Performing I2C bus recovery
[14:22:54][I][i2c.arduino:218]: Performing I2C bus recovery
[14:22:54][D][vl53l0x:034]: 'VL53L0x Distance' - setup BEGIN
[14:22:54][D][vl53l0x:258]: 'VL53L0x Distance' - setup END
[14:22:54][D][vl53l0x:310]: 'VL53L0x Distance' - Got distance 0.054 m
[14:22:54][D][sensor:094]: 'VL53L0x Distance': Sending state 0.05400 m with 2 decimals of accuracy
[14:22:55][D][vl53l0x:310]: 'VL53L0x Distance' - Got distance 0.052 m

Please help, I don’t know what else to do.