HUB-75 Matrix Display Album Artwork Viewer for ESPHome / Home Assistant

led-hub-matrix-test.yaml

########## I hesitate to post this, but perhaps someone will find it interesting enough to make it better / more robust....
########## See comments for the most minimal of explanation

###################################################
###                                             ###
###     The current version of ESPHome          ###
###     2025.7.0 MIGHT NOT WORK! I used         ###
###     2025.5.0 and it works.                  ###
###                                             ###
###################################################

substitutions:
  device_name: album-art-living-room
  device_friendly_name: Album Art - Living Room
  board: esp32-s3-devkitc-1
  device_variant: ESP32S3
  framework: arduino
  flash_size: 8MB
  album_art_url_sensor: sensor.album_art_living_url
  api_encryption_key: !secret album-art-living-room-key
  ha_hostname: homeassistant.local:8123 # Home Assistant hostname and port
  psram_mode: octal
  psram_speed: 80MHz

esphome:
  name: ${device_name}
  friendly_name: ${device_friendly_name}

  ####### - ESP32-S3 DevKit only????
  platformio_options:
    board_build.arduino.memory_type: dio_opi

esp32:
  board: ${board}
  variant: ${device_variant}
  flash_size: ${flash_size}
  framework:
    type: ${framework}

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: ${api_encryption_key}

ota:
  - platform: esphome
    id: my_ota
    password: !secret ota_password

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: ${device_name}
    password: !secret ap_wifi_pw

captive_portal:

#################### IMAGE URL PORTION ########################

text_sensor:
  - platform: homeassistant
    id: playing_track_artwork
    entity_id: ${album_art_url_sensor}
    on_value:
      then:
        - homeassistant.action:
            action: image_resizer.resize_image
            data:
              quality: "95"
              method: lanczos
              source: "{{ states('${album_art_url_sensor}') }}"
              width: "64"
              height: "64"
              keep_aspect_ratio: "False"
              format: JPEG
              destination: "/config/www/${device_name}.jpg"
        - delay: 5s
        - component.update: album_image

http_request:
  verify_ssl: false
  timeout: 10s
  useragent: ESPHome/Album-Art

online_image:
  - url: "http://${ha_hostname}/local/${device_name}.jpg"
    format: jpg
    id: album_image
    type: RGB
    update_interval: never # Only update when explicitly requested
    on_download_finished:
      then:
        - logger.log: "Image downloaded successfully"
        - component.update: album_artwork_display

#################### DISPLAY PORTION FOR ESP32-S3 DEVKIT ########################

psram:
  mode: ${psram_mode}
  speed: ${psram_speed}

external_components:
  - source: github://funkfinger/[email protected]_SCHEMA-deprecation

font:
  - file: "gfonts://Roboto"
    id: roboto
    size: 10

display:
  - platform: hub75_matrix_display
    id: album_artwork_display
    width: 64
    height: 64

    # esp32-s3 devkit board pinout
    R1_pin: 4
    G1_pin: 1

    B1_pin: 5
    #gnd pin 2

    R2_pin: 6
    G2_pin: 42

    B2_pin: 7
    E_pin: 41

    A_pin: 15
    B_pin: 40

    C_pin: 16
    D_pin: 39

    CLK_pin: 17
    LAT_pin: 38

    OE_pin: 18
    #gnd pin 9

    lambda: |-
      if (id(album_image).get_width() == 0 || id(album_image).get_height() == 0) {
        it.printf(2, 32, id(roboto), "No Album Art");
      }
      else {
        it.image(0, 0, id(album_image));
      }

switch:
  - platform: gpio
    pin: 2
    id: gnd1
    internal: true
    restore_mode: ALWAYS_OFF

  - platform: gpio
    pin: 9
    id: gnd2
    internal: true
    restore_mode: ALWAYS_OFF

  - platform: hub75_matrix_display
    matrix_id: album_artwork_display
    name: "${device_name} Power"
    id: power
    restore_mode: ALWAYS_ON

number:
  - platform: hub75_matrix_display
    matrix_id: album_artwork_display
    name: "${device_name} Brightness"
    id: brightness
###############################################################

I'm handling the resize of the album artwork using a custom component that I created (using AI) - If you want to look at it and use it at your own risk, it's here - You'll also need to create a template helper that looks something like this:

http://homeassistant.local:8123{{states.media_player.sonos_play5.attributes.entity_picture}}

some images for reference... the soldering was made as easy as possible because I just used the pin lineups that mostly matched the HUB-75 interface.