M5Stack Dial - ESP32-S3 Smart Rotary Knob

Hi @Squall290586 ,

Thnx for the code

I got errors on the colors. Do you have someting in your config that you can share

(venv) [richard@X360-G8 ~]$ esphome run m5dial.yaml
INFO ESPHome 2024.2.2
INFO Reading configuration m5dial.yaml...
INFO Updating https://github.com/dgaust/esphome.git@gc9a01
INFO Updating https://github.com/esphome/esphome.git@pull/6096/head
INFO Detected timezone 'Europe/Amsterdam'
Failed config

display.gc9a01: [source m5dial.yaml:494]
  platform: gc9a01
  id: touchscreen_lcd
  reset_pin:
    number: 8
    mode:
      output: True
      input: False
      open_drain: False
      pullup: False
      pulldown: False
    inverted: False
    ignore_strapping_warning: False
    drive_strength: 20.0
  cs_pin:
    number: 7
    mode:
      output: True
      input: False
      open_drain: False
      pullup: False
      pulldown: False
    inverted: False
    ignore_strapping_warning: False
    drive_strength: 20.0
  dc_pin:
    number: 4
    mode:
      output: True
      input: False
      open_drain: False
      pullup: False
      pulldown: False
    inverted: False
    ignore_strapping_warning: False
    drive_strength: 20.0
  rotation: 90
  update_interval: 1h
  pages:  [source m5dial.yaml:501]
    - id: lights

      Couldn't find ID 'activated_button_color'. Please check you have defined an ID with that name in your configuration.
      lambda: !lambda |-
        // Variables
        float screenheight = it.get_height();
        float screenwidth = it.get_width();
        float halfscreenheight = screenheight / 2;
        float halfscreenwidth = screenwidth / 2;
        it
          .image(
            halfscreenwidth,
            halfscreenheight,
            lights_icon,
            ImageAlign::CENTER,
            (id(lights_switch).state) ? id(activated_button_color) : id(desactivated_button_color));

        // Display the swith menu
        it.filled_circle(halfscreenwidth -6, 225, 3);
        it.circle(halfscreenwidth +6, 225, 3);
    - [source m5dial.yaml:501]
      id: climate

      Couldn't find ID 'dark_orange'. Please check you have defined an ID with that name in your configuration.
      lambda: !lambda |-
        // Variables
        float screenheight = it.get_height();
        float screenwidth = it.get_width();
        float halfscreenheight = screenheight / 2;
        float halfscreenwidth = screenwidth / 2;
        float currentTemperatureCircleAngle = (360 - id(climate_bottom_gauge_angle).state) * ((id(climate_current_temperature).state - id(climate_min_temperature).state) / (id(climate_max_temperature).state - id(climate_min_temperature).state));
        float targetTemperatureCircleAngle = (360 - id(climate_bottom_gauge_angle).state) * ((id(climate_new_temperature).state - id(climate_min_temperature).state) / (id(climate_max_temperature).state - id(climate_min_temperature).state));
        float startAngle = id(climate_bottom_gauge_angle).state / 2;
        float firstStepAngle = (currentTemperatureCircleAngle < targetTemperatureCircleAngle) ? currentTemperatureCircleAngle : targetTemperatureCircleAngle;
        float secondStepAngle = (currentTemperatureCircleAngle > targetTemperatureCircleAngle) ? firstStepAngle : targetTemperatureCircleAngle;
        float endAngle = 360 - id(climate_bottom_gauge_angle).state;

        // Display temperature arc circle
        it
          .filled_circle(
            halfscreenwidth + (halfscreenwidth - 10) * cos((90 + startAngle) * id(pi).state / 180),
            halfscreenheight + (halfscreenheight - 10) * sin((90 + startAngle) * id(pi).state / 180),
            5,
            id(dark_orange));
        it
          .filled_circle(
            halfscreenwidth + (halfscreenwidth - 10) * cos((90 + startAngle + endAngle) * id(pi).state / 180),
            halfscreenheight + (halfscreenheight - 10) * sin((90 + startAngle + endAngle) * id(pi).state / 180),
            5,
            id(gray));

        for (int i = startAngle; i <= startAngle + firstStepAngle; i++) {
          it
            .filled_triangle(
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + (i + 1)) * id(pi).state / 180),
              id(dark_orange));
          it
            .filled_triangle(
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + (i + 1)) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + (i + 1)) * id(pi).state / 180),
              id(dark_orange));
        }
        for (int i = startAngle + firstStepAngle; i <= startAngle + secondStepAngle; i++) {
          it
            .filled_triangle(
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + (i + 1)) * id(pi).state / 180),
              id(orange));
          it
            .filled_triangle(
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + (i + 1)) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + (i + 1)) * id(pi).state / 180),
              id(orange));
        }
        for (int i = startAngle + secondStepAngle; i <= startAngle + endAngle; i++) {
          it
            .filled_triangle(
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + (i + 1)) * id(pi).state / 180),
              id(gray));
          it
            .filled_triangle(
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + i) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + i) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 5) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 5) * sin((90 + (i + 1)) * id(pi).state / 180),
              halfscreenwidth + (halfscreenwidth - 15) * cos((90 + (i + 1)) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 15) * sin((90 + (i + 1)) * id(pi).state / 180),
              id(gray));
        }

        // Current temperature round
        it
          .filled_circle(
            halfscreenwidth + (halfscreenwidth - 10) * cos((90 + startAngle + currentTemperatureCircleAngle) * id(pi).state / 180),
            halfscreenheight + (halfscreenheight - 10) * sin((90 + startAngle + currentTemperatureCircleAngle) * id(pi).state / 180),
            2,
            id(white));

        // Start of the second step
        if (firstStepAngle < secondStepAngle) {
          it
            .filled_circle(
              halfscreenwidth + (halfscreenwidth - 10) * cos((90 + startAngle + firstStepAngle) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 10) * sin((90 + startAngle + firstStepAngle) * id(pi).state / 180),
              5,
              id(orange));
          it
            .filled_circle(
              halfscreenwidth + (halfscreenwidth - 10) * cos((90 + startAngle + firstStepAngle) * id(pi).state / 180),
              halfscreenheight + (halfscreenheight - 10) * sin((90 + startAngle + firstStepAngle) * id(pi).state / 180),
              2,
              id(dark_orange));
        }

        // Target temperature round
        it
          .filled_circle(
            halfscreenwidth + (halfscreenwidth - 10) * cos((90 + startAngle + targetTemperatureCircleAngle) * id(pi).state / 180),
            halfscreenheight + (halfscreenheight - 10) * sin((90 + startAngle + targetTemperatureCircleAngle) * id(pi).state / 180),
            7,
            id(orange));
        it
          .filled_circle(
            halfscreenwidth + (halfscreenwidth - 10) * cos((90 + startAngle + targetTemperatureCircleAngle) * id(pi).state / 180),
            halfscreenheight + (halfscreenheight - 10) * sin((90 + startAngle + targetTemperatureCircleAngle) * id(pi).state / 180),
            5,
            id(white));

        // Dislay icons
        it
          .image(
            halfscreenwidth + halfscreenwidth * id(climate_icon_distance_radius).state * cos((-90 - 1.5 * id(climate_icon_separation_angle).state) * id(pi).state / 180),
            halfscreenheight + halfscreenheight * id(climate_icon_distance_radius).state * sin((-90 - 1.5 * id(climate_icon_separation_angle).state) *id(pi).state / 180),
            climate_away_mode_icon,
            ImageAlign::CENTER,
            (strcmp(id(climate_mode).state.c_str(), "away") == 0) ? id(activated_button_color) : id(desactivated_button_color));
        it
          .image(
            halfscreenwidth + halfscreenwidth * id(climate_icon_distance_radius).state * cos((-90 - 0.5 * id(climate_icon_separation_angle).state) * id(pi).state / 180),
            halfscreenheight + halfscreenheight * id(climate_icon_distance_radius).state * sin((-90 - 0.5 * id(climate_icon_separation_angle).state) *id(pi).state / 180),
            climate_sleep_mode_icon,
            ImageAlign::CENTER,
            (strcmp(id(climate_mode).state.c_str(), "sleep") == 0) ? id(activated_button_color) : id(desactivated_button_color));
        it
          .image(
            halfscreenwidth + halfscreenwidth * id(climate_icon_distance_radius).state * cos((-90 + 0.5 * id(climate_icon_separation_angle).state) * id(pi).state / 180),
            halfscreenheight + halfscreenheight * id(climate_icon_distance_radius).state * sin((-90 + 0.5 * id(climate_icon_separation_angle).state) *id(pi).state / 180),
            climate_home_mode_icon,
            ImageAlign::CENTER,
            (strcmp(id(climate_mode).state.c_str(), "home") == 0) ? id(activated_button_color) : id(desactivated_button_color));
        it
          .image(
            halfscreenwidth + halfscreenwidth * id(climate_icon_distance_radius).state * cos((-90 + 1.5 * id(climate_icon_separation_angle).state) * id(pi).state / 180),
            halfscreenheight + halfscreenheight * id(climate_icon_distance_radius).state * sin((-90 + 1.5 * id(climate_icon_separation_angle).state)*id(pi).state / 180),
            climate_comfort_mode_icon,
            ImageAlign::CENTER,
            (strcmp(id(climate_mode).state.c_str(), "comfort") == 0) ? id(activated_button_color) : id(desactivated_button_color));

        // Display temperature
        it.printf(halfscreenwidth, halfscreenheight - id(climate_temperature_distance_from_center).state, id(roboto40), TextAlign::TOP_CENTER, "%2.1f", id(climate_new_temperature).state, id(white));
        it.printf(halfscreenwidth, halfscreenheight - id(climate_temperature_distance_from_center).state + 40, id(roboto20), TextAlign::TOP_CENTER, "%2.1f", id(climate_current_temperature).state, id(white));
        it
          .image(
            halfscreenwidth - 40,
            halfscreenheight - id(climate_temperature_distance_from_center).state + 42,
            climate_thermometer_icon,
            ImageAlign::TOP_LEFT,
            id(white));
        it
          .image(
            halfscreenwidth + 20,
            halfscreenheight - id(climate_temperature_distance_from_center).state + 42,
            climate_celcius_icon,
            ImageAlign::TOP_LEFT,
            id(white));
        it
          .image(
            halfscreenwidth,
            halfscreenheight - id(climate_temperature_distance_from_center).state + 92,
            climate_fire_icon,
            ImageAlign::CENTER,
            (id(climate_new_temperature).state > id(climate_current_temperature).state) ? id(red) : id(gray));

        // Display the swith menu
        it.circle(halfscreenwidth - 6, 225, 3);
        it.filled_circle(halfscreenwidth + 6, 225, 3); [source m5dial.yaml:522]
  auto_clear_enabled: True
  width: 240
  height: 240
  offset_y: 0
  offset_x: 0
  eight_bit_color: False
Couldn't find ID 'dark_orange'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'dark_orange'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'orange'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'orange'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'gray'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'gray'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'white'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'orange'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'dark_orange'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'orange'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'white'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'activated_button_color'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'desactivated_button_color'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'activated_button_color'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'desactivated_button_color'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'activated_button_color'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'desactivated_button_color'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'activated_button_color'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'desactivated_button_color'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'white'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'white'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'white'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'white'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'red'. Please check you have defined an ID with that name in your configuration.

Couldn't find ID 'gray'. Please check you have defined an ID with that name in your configuration.