Displaying images according to attibute

Hello, this is my first post here.

I am trying to build a different kind of bin day indicator with a changing icon on the front of a 3d printed wheely bin. And I am looking to have it lit when the attribute “Days until” of the 4 sensors for every kind of bin is 1 or lower. So it should show the image of the respective bin on the day before pickup and on the day itself.

I am trying to display the different images on an OLED display connected to an ESP8266.

So far I have succeeded in displaying an image correctly on my OLED display.

But I want either a button in Home assistant that can switch between 4 images on the ESP Home device. Or I want it to readout the state of the attribute of the sensors in home assistant.

I have been googling for about a day now. But I think I am just looking in the wrong direction.

esphome:
  name: afval-display
  friendly_name: Afval-Display

esp8266:
  board: nodemcuv2

# Enable logging
logger:

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

ota:
  - platform: esphome
    password: "XXXXXXXXX"

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

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Afval-Display Fallback Hotspot"
    password: "XXXXXXXXXX"

captive_portal:

image:
  - file: "GFT_bw.png"
    id: GFT_image
  - file: "PMD_bw.png"
    id: PMD_image
  - file: "papier_bw.png"
    id: papier_image
  - file: "restafval_bw.png"
    id: restafval_image

i2c:
  sda: D1
  scl: D2

sensor.areareiniging_restafval

display:
  - platform: ssd1306_i2c
    model: "SH1106 128x64"
    address: 0x3C
    lambda: |-
      it.image(0, 0, id(GFT_image));

Added the code I have so far.

You could for example make template number as your variable:

number:
  - platform: template
    name: Image nro
    id: tempnum
    min_value: 1
    max_value: 4
    step: 1
    optimistic: true

Then replace your display component lambda with this

lambda: |-
  if (id(tempnum).state == 1)  {
    it.image(0, 0, id(GFT_image));
    } else if (id(tempnum).state == 2)  {
    it.image(0, 0, id(PMD_image));
    } else if (id(tempnum).state == 3)  {
    it.image(0, 0, id(papier_image));
    } else {
    it.image(0, 0, id(restafval_image));
    }

Then just update the template number in your automation (or do it with the slider).

Thanks. This was the solution. There was just a little typo in it (found out by trial and error). I also added an extra line for a blank image.

display:
  - platform: ssd1306_i2c
    model: "SH1106 128x64"
    address: 0x3C
    lambda: |-
      if (id(tempnum).state == 1)  {
        it.image(0, 0, id(GFT_image));
        } else if (id(tempnum).state == 2)  {
        it.image(0, 0, id(PMD_image));
        } else if (id(tempnum).state == 3)  {
        it.image(0, 0, id(papier_image));
        } else if (id(tempnum).state == 4)  {
        it.image(0, 0, id(restafval_image));
        } else {
        it.image(0, 0, id(blank_image));
        }


number:
  - platform: template
    name: Container
    id: tempnum
    min_value: 1
    max_value: 5
    step: 1
    optimistic: true

Good, you can sign it solved. I didn’t test it, else if of course…

Marked.
And thanks again. Just getting started with this kind of application. ESP home has nice documentation for sensors etc. Also for text of OLED displays. But it lacks quite a bit for showing images on OLED displays.

And since I’m just getting started with ESP home I could not have figured this one out by myself.

Esphome is awesome, but the documentation is not quite on that level.
Thankfully this forum is nice and helpful.

1 Like