LED Matrix Slideshow Example

Big thanks to Jesse Hills for helping work out the syntax for this. This will do an animated slideshow of GIFs on an RGB LED matrix. If you have an 8x8 panel be sure to choose small GIFs, like the ones you find on Awtrix or LaMetric devices.

The gif files can be stored in the esphome directory of your Home Assistant installation.

If you have a larger panel you can adjust the width and height and resize parameters to match your device. The slideshow will start with the second item in the list because of the first iteration of the timer loop.

time:
  - platform: homeassistant
    id: esptime

light:
  - platform: fastled_clockless
    chipset: WS2812B
    pin: GPIO18
    num_leds: 64
    rgb_order: GRB
    name: "led_matrix"
    id: led_matrix_light
    default_transition_length: 0s
    color_correct: [75%, 75%, 75%]
    restore_mode: ALWAYS_ON

animation:
  - file: "fireworks.gif"
    id: fireworks
    type: RGB565
    resize: 8x8

  - file: "audioviz.gif"
    id: audioviz
    type: RGB565
    resize: 8x8

  - file: "beer.gif"
    id: beer
    type: RGB565
    resize: 8x8

  - file: "alien.gif"
    id: alien
    type: RGB565
    resize: 8x8

  - file: "moon.gif"
    id: moon
    type: RGB565
    resize: 8x8

  - file: "sun.gif"
    id: sun
    type: RGB565
    resize: 8x8

  - file: "rainy.gif"
    id: rainy
    type: RGB565
    resize: 8x8

  - file: "tetris.gif"
    id: tetris
    type: RGB565
    resize: 8x8

  - file: "animated_eye.gif"
    id: animated_eye
    type: RGB565
    resize: 8x8

  - file: "clock.gif"
    id: ledclock
    type: RGB565
    resize: 8x8

  - file: "matrix.gif"
    id: matrix
    type: RGB565
    resize: 8x8

  - file: "heart.gif"
    id: heart
    type: RGB565
    resize: 8x8

  - file: "christmas.gif"
    id: christmas
    type: RGB565
    resize: 8x8

  - file: "fire.gif"
    id: fire
    type: RGB565
    resize: 8x8

  - file: "link_zelda.gif"
    id: link_zelda
    type: RGB565
    resize: 8x8

  - file: "pastel_rainbow.gif"
    id: pastel_rainbow
    type: RGB565
    resize: 8x8

  - file: "cappuccino.gif"
    id: cappuccino
    type: RGB565
    resize: 8x8

  - file: "pacman_and_ghosts.gif"
    id: pacman_and_ghosts
    type: RGB565
    resize: 8x8

  - file: "beach.gif"
    id: beach
    type: RGB565
    resize: 8x8

globals:
  - id: current
    type: int
    restore_value: no
    initial_value: '0'
  - id: last_loop_time
    type: uint32_t
    restore_value: no
    initial_value: '0'
  - id: gifs
    type: std::vector<esphome::display::Animation*>
    restore_value: no

display:
  - platform: addressable_light
    id: led_matrix_display
    addressable_light_id: led_matrix_light
    width: 8
    height: 8
    rotation: 180°
    update_interval: 16ms
    lambda: |-
      uint32_t current_time = id(esptime).now().timestamp;
      uint32_t elapsed_time = current_time - id(last_loop_time);

      // If 60 seconds have elapsed, move to the next item in the list and wrap around to the 0th item if we've reached the end of the list
      if (elapsed_time >= 60) {
        id(current) = (id(current) + 1) % id(gifs).size();
        id(last_loop_time) = current_time;
      }

      it.image(0, 0, id(gifs)[id(current)], COLOR_ON, COLOR_OFF);

interval:
  - interval: 0.4s
    then:
      lambda: |-
        id(gifs) = {
          id(cappuccino),
          id(fireworks),
          id(audioviz),
          id(beer),
          id(alien),
          id(moon), 
          id(sun),
          id(rainy),
          id(tetris),
          id(animated_eye),
          id(ledclock),
          id(matrix),
          id(heart),
          id(christmas),
          id(fire),
          id(link_zelda),
          id(pastel_rainbow),
          id(pacman_and_ghosts),
          id(beach)};
        id(gifs)[id(current)]->next_frame();
1 Like

And here’s a fun pixel editor so you can create your own animated icons:

https://www.piskelapp.com/p/create/sprite

1 Like

Thank you soo much I was able to make my own gif :slight_smile: