St7735 Backlight Brightness control in HA

Hi everybody!

I’m having some issues with my esphome config. I have a st7735 Display running on the ili9xxx component. Everything works finde so gar but i cannot find a solution for a dimmable backlight that can be Controller from HA.

When i Set up my device, i can switch the backlight on and off, but that’s all.

My yaml looks like this:

esphome:
  name: skynet-alarm
  friendly_name: Skynet Alarm

esp32:
  board: esp32dev

# Enable logging
logger:
   level: ERROR

# Enable Home Assistant API
api:
  encryption:
    key: ""

ota:
  - platform: esphome
    password: ""

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password
  domain: .home.arpa
  manual_ip:
    static_ip: 10.10.13.100
    gateway: 10.10.13.1
    subnet: 255.255.255.0
  power_save_mode: none


  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Alarm-Clock Fallback Hotspot"
    password: "okNWp9x0bX2B"

captive_portal:

time:
    platform: homeassistant
    id: esptime

sensor:
  - platform: homeassistant
    id: temp_sz
    entity_id: sensor.temperatursensor_schlafzimmer_temperature
    
  - platform: homeassistant
    id: hum_sz
    entity_id: sensor.temperatursensor_schlafzimmer_humidity
    
  - platform: homeassistant
    id: out_temp
    entity_id: sensor.outdoor_weather_sensor_temperature

  - platform: homeassistant
    id: temperature
    entity_id: sensor.temp_today

  - platform: homeassistant
    id: rain
    entity_id: sensor.rain_today
  
  - platform: homeassistant
    id: uv
    entity_id: sensor.uv_today


text_sensor:
  - platform: homeassistant
    id: condition
    entity_id: sensor.condition_today

spi:
 clk_pin: GPIO15
 mosi_pin: GPIO23
 miso_pin: GPIO19

color:
  - id: my_white
    red: 1.000
    green: 1.000
    blue: 1.000

display:
  - platform: ili9xxx
    model: ST7735
    color_order: rgb
    rotation: 90
    dimensions: 
      height: 160
      width: 128
      offset_height: 0
      offset_width: 0
    ## The panels will redraw themselves completely.
    cs_pin: GPIO05
    dc_pin: GPIO02
    reset_pin: GPIO04
    invert_colors: False
    id: tft
    lambda: |-
      // Map weather states to MDI characters.
      std::map<std::string, std::string> weather_icon_map {
          {"cloudy", "\U000F0590"},
          {"cloudy-alert", "\U000F0F2F"},
          {"cloudy-arrow-right", "\U000F0E6E"},
          {"fog", "\U000F0591"},
          {"hail", "\U000F0592"},
          {"hazy", "\U000F0F30"},
          {"hurricane", "\U000F0898"},
          {"lightning", "\U000F0593"},
          {"lightning-rainy", "\U000F067E"},
          {"clear-night", "\U000F0594"},
          {"night-partly-cloudy", "U000F0F31"},
          {"partlycloudy", "\U000F0595"},
          {"partly-lightning", "\U000F0F32"},
          {"partly-rainy", "\U000F0F33"},
          {"partly-snowy", "\U000F0F34"},
          {"partly-snowy-rainy", "\U000F0F35"},
          {"pouring", "\U000F0596"},
          {"rainy", "\U000F0597"},
          {"snowy", "\U000F0598"},
          {"snowy-heavy", "\U000F0F36"},
          {"snowy-rainy", "\U000F067F"},
          {"sunny", "\U000F0599"},
          {"sunny-alert", "\U000F0F37"},
          {"sunny-off", "\U000F14E4"},
          {"sunset", "\U000F059A"},
          {"sunset-down", "\U000F059B"},
          {"sunset-up", "\U000F059C"},
          {"tornado", "\U000F0F38"},
          {"windy", "\U000F059D"},
          {"windy-variant", "\U000F059E"}
        }; 
      it.strftime(it.get_width()/2, it.get_height()/2, id(font25), id(my_white), TextAlign::CENTER, "%H:%M", id(esptime).now());
      it.print(0, 2, id(icons10), id(my_white), TextAlign::TOP_LEFT, "\U000F050F");
      it.printf(8, 0, id(font10), id(my_white), TextAlign::TOP_LEFT, "%.1f °C", id(temp_sz).state);
      it.print(0, 16, id(icons10), id(my_white), "\U000F0E0A");
      it.printf(10, 13, id(font10), id(my_white), "%.1f %%", id(hum_sz).state);
      it.strftime(it.get_width(), 0, id(font10), id(my_white), TextAlign::TOP_RIGHT, "%d.%m.%Y", id(esptime).now());
      it.line(0, (it.get_height()-20), it.get_width(), (it.get_height()-20));
      it.printf(2, it.get_height(), id(icons18), id(my_white), TextAlign::BOTTOM_LEFT, weather_icon_map[id(condition).state.c_str()].c_str());
      it.printf(21, (it.get_height()-2), id(font10), id(my_white), TextAlign::BOTTOM_LEFT, "%.0f°C", id(temperature).state);
      it.print(((it.get_width()/2)-2), it.get_height(), id(icons18), id(my_white), TextAlign::BOTTOM_CENTER, "\U000F0597");
      it.printf(((it.get_width()/2)+25), (it.get_height()-2), id(font10), id(my_white), TextAlign::BOTTOM_CENTER, "%.0f%%", id(rain).state);
      it.print(149, it.get_height(), id(icons18), id(my_white), TextAlign::BOTTOM_RIGHT, "\U000F0F37");
      it.printf(158, (it.get_height()-2), id(font10), id(my_white), TextAlign::BOTTOM_RIGHT, "%.0f", id(uv).state);

output:
    - platform: ledc
      pin: GPIO32
      id: backlight_pwm
     # Define a monochromatic, dimmable light for the backlight
light:
  - platform: monochromatic
    output: backlight_pwm
    name: "Display Backlight"
    id: back_light
    restore_mode: ALWAYS_ON

font:

  - file: "gfonts://Roboto"
    id: roboto_20
    size: 20

  - file: 'fonts/verdana.ttf'
    id: font40
    size: 40
    glyphs: °.0123456789-%d
              
  - file: 'fonts/verdana.ttf'
    id: font_spot_time
    size: 12
    glyphs: :0123456789
                            
  - file: 'fonts/verdana.ttf'
    id: font25
    size: 25
    glyphs: ['&', '@', '<', '>', '$', '!', ',', '.', '?', '"', '%', '(', ')', '+', '-', '_', ':', '°', '0',
             '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E',
             'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
             'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ' ', 'a', 'b', 'c', 'd', 'e', 'f',
             'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
             'u', 'v', 'w', 'x', 'y', 'z','å', 'Ä', 'ä', 'Ö', 'ö', 'Ü', 'ü', '/', '\', '\xab', '\xc3', '\xaf', '''', 'ß' ]
                                               
  - file: 'fonts/verdana.ttf'
    id: font18
    size: 18   
    glyphs: ['&', '@', '<', '>', '$', '!', ',', '.', '?', '"', '%', '(', ')', '+', '-', '_', ':', '°', '0',
             '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E',
             'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
             'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ' ', 'a', 'b', 'c', 'd', 'e', 'f',
             'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
             'u', 'v', 'w', 'x', 'y', 'z','å', 'Ä', 'ä', 'Ö', 'ö', 'Ü', 'ü', '/', '\', '''', 'ß' ]
  - file: 'fonts/verdana.ttf'
    id: font10
    size: 10
    glyphs: ['&', '@', '!', ',', '.', '?', '"', '%', '(', ')', '+', '-', '_', ':', '°', '0',
             '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E',
             'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
             'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ' ', 'a', 'b', 'c', 'd', 'e', 'f',
             'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
             'u', 'v', 'w', 'x', 'y', 'z','å', 'Ä', 'ä', 'Ö', 'ö', 'Ü', 'ü', '/', '\', '''', 'ß' ]
  - file: 'fonts/verdana.ttf'
    id: font12
    size: 12
    glyphs: ['&', '@', '!', ',', '.', '?', '"', '%', '(', ')', '+', '-', '_', ':', '°', '0',
             '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E',
             'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
             'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ' ', 'a', 'b', 'c', 'd', 'e', 'f',
             'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
             'u', 'v', 'w', 'x', 'y', 'z','å', 'Ä', 'ä', 'Ö', 'ö', 'Ü', 'ü', '/', '\', '''', 'ß' ]
  
  - file: 'fonts/materialdesignicons-webfont.ttf'    
    id: icons10
    size: 10
    glyphs: 
      - "\U000F050F"
      - "\U000F0E0A"
      - "\U000F0F37"

  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icons18
    size: 18
    glyphs:
      - "\U000F0590" # mdi-weather-cloudy
      - "\U000F0F2F" # mdi-weather-cloudy-alert
      - "\U000F0E6E" # mdi-weather-cloudy-arrow-right
      - "\U000F0591" # mdi-weather-fog
      - "\U000F0592" # mdi-weather-hail
      - "\U000F0F30" # mdi-weather-hazy
      - "\U000F0898" # mdi-weather-hurricane
      - "\U000F0593" # mdi-weather-lightning
      - "\U000F067E" # mdi-weather-lightning-rainy
      - "\U000F0594" # mdi-weather-clear-night
      - "\U000F0F31" # mdi-weather-night-partly-cloudy
      - "\U000F0595" # mdi-weather-partly-cloudy
      - "\U000F0F32" # mdi-weather-partly-lightning
      - "\U000F0F33" # mdi-weather-partly-rainy
      - "\U000F0F34" # mdi-weather-partly-snowy
      - "\U000F0F35" # mdi-weather-partly-snowy-rainy
      - "\U000F0596" # mdi-weather-pouring
      - "\U000F0597" # mdi-weather-rainy
      - "\U000F0598" # mdi-weather-snowy
      - "\U000F0F36" # mdi-weather-snowy-heavy
      - "\U000F067F" # mdi-weather-snowy-rainy
      - "\U000F0599" # mdi-weather-sunny
      - "\U000F0F37" # mdi-weather-sunny-alert
      - "\U000F14E4" # mdi-weather-sunny-off
      - "\U000F059A" # mdi-weather-sunset
      - "\U000F059B" # mdi-weather-sunset-down
      - "\U000F059C" # mdi-weather-sunset-up
      - "\U000F0F38" # mdi-weather-tornado
      - "\U000F059D" # mdi-weather-windy
      - "\U000F059E" # mdi-weather-windy-variant
      - "\U000F10AF" # mdi-door-closed-lock
      - "\U000F081C" # mdi-door-open

i2s_audio:
  - id: i2s_out
    i2s_lrclk_pin: GPIO26 #WSEL on 1334A
    i2s_bclk_pin: GPIO27 #BCLK on 1334A

media_player:
  - platform: i2s_audio
    name: ESPHome I2S Media Player
    dac_type: external
    i2s_audio_id: i2s_out
    i2s_dout_pin: GPIO25 #DIN on 1334A
    mode: stereo   

In HA, I have this entity:

I thought about adding a numbrr_inpu5 in HA from 1 to 100% to kinda trigger the backlight brightness, but nothing works.

Can anybode help me out?

Regards!

But how does the control of that light look like in HA?

Because a monochromatic light should be dimmable.

You would only need that if you wanted to do some fancy automation.

In HA it should show up as a light entity - add it to a dashboard.

This is a ST7735 backlight added using 3 different cards:

Screenshot 2024-10-23 at 20.50.54

Oh my god. It’s not a switch When i open the card, but a sliderswitch.
Rookie mistake, but thank you very much.
Problem solved.