I need help navigating between displays with the buttons

ESPHome
1

Hi!, i am from Brazil. I need help navigating between the displays with the buttons, and then I want to add an LED to them, I couldn’t find much about that.

substitutions:
   esphome_name: esp32_ssd1306

esphome:
  name: "${esphome_name}"
  friendly_name: Esp1

esp32:
  board: esp32dev
  framework:
    type: arduino

logger:

api:
  encryption:
    key: "74DyYNMsRqP/KnbCC90/nsbUfpHdx/8ruhphmCaX1Js="

ota:
  password: "4c2bc4519a2c8d18c96b7765303be11b"

wifi:
  ssid: "SINAL"
  password: "22221313"

  ap:
    ssid: "Esp1 Fallback Hotspot"
    password: "WBd6JI5tBEzO"

captive_portal:

i2c:
  - id: bus_a
    sda: 21
    scl: 22
    scan: true

sensor:
  - platform: dht
    pin: GPIO13
    model: dht11
    temperature:
      name: "office_temperature"
      id: office_temperature
    humidity:
      name: "office_humidity"
      id: office_humidity
    update_interval: 20s
  - platform: bmp280
    temperature:
      name: "Outside Temperature"
      id: outside_temperature
      oversampling: 16x
    pressure:
      name: "Outside Pressure"
      id: outside_pressure
    address: 0x76
  - platform: uptime
    name: "${esphome_name} - Uptime Sensor"
  - platform: wifi_signal
    name: "${esphome_name} - WiFi Signal"
    update_interval: 60s

binary_sensor:
  - platform: gpio
    name: "Button 1"
    internal: true
    pin:
      number: GPIO4
      mode: INPUT_PULLUP
    on_press:
      - lambda: id(display1).turn_on();
      - delay: 2s
      - lambda: id(display1).turn_off();
  - platform: gpio
    name: "Button 2"
    internal: true
    pin:
      number: GPIO2
      mode: INPUT_PULLUP
    on_press:
      - lambda: id(display2).turn_on();
      - delay: 2s
      - lambda: id(display2).turn_off();
  - platform: gpio
    name: "Button 3"
    internal: true
    pin:
      number: GPIO15
      mode: INPUT_PULLUP
    on_press:
      - lambda: id(display3).turn_on();
      - delay: 2s
      - lambda: id(display3).turn_off();
  - platform: gpio
    name: "Button 4"
    internal: true
    pin:
      number: GPIO12
      mode: INPUT_PULLUP
    on_press:
      - lambda: id(display4).turn_on();
      - delay: 2s
      - lambda: id(display4).turn_off();
  - platform: gpio
    name: "Button 5"
    internal: true
    pin:
      number: GPIO14
      mode: INPUT_PULLUP
    on_press:
      - lambda: id(display5).turn_on();
      - delay: 2s
      - lambda: id(display5).turn_off();

font:
  - file: "/config/esphome/Arial.ttf"
    id: my_font
    size: 13

display:
  - platform: ssd1306_i2c
    model: "SSD1306 128x64"
    address: 0x3C
    id: "display1"
    lambda: |-
      it.printf(0, 16, id(my_font), "Acqua Callidus");
  - platform: ssd1306_i2c
    model: "SSD1306 128x64"
    address: 0x3C
    id: "display2"
    lambda: |-
      it.printf(0, 0, id(my_font), "Botão 3 - Umidade");
      it.printf(0, 16, id(my_font), "Botão 4 - Pressão");
      it.printf(0, 32, id(my_font), "Botão 5 - Temperatura");
  - platform: ssd1306_i2c
    model: "SSD1306 128x64"
    address: 0x3C
    id: "display3"
    lambda: |-
      it.printf(0, 16, id(my_font), "Humidity: %.2f%%", id(office_humidity).state);
  - platform: ssd1306_i2c
    model: "SSD1306 128x64"
    address: 0x3C
    id: "display4"
    lambda: |-
      it.printf(0, 32, id(my_font), "Pressure: %.2fhPa", id(outside_pressure).state);    
  - platform: ssd1306_i2c
    model: "SSD1306 128x64"
    address: 0x3C
    id: "display5"
    lambda: |-
      it.printf(0, 0, id(my_font), "Temperature: %.2f°C", id(office_temperature).state);    

switch:
  - platform: template
    name: "${esphome_name} - Onboard LED"
    id: onboard_led
    turn_on_action:
      - logger.log: "LED Ligado"
    turn_off_action:
      - logger.log: "LED Desligado"
1 Like
2

What’s the question?

3

The display is triggering the prints in a row, without me pressing the buttons.

4

I believe you should be using the Display Pages function. That way you create a number of pages and then use the button to scroll through them.

Portions of my code that may help you. My setup is for a heating thermostat but hopefully you get the idea.

Button section. My display has the id: oled

  - platform: gpio # Button to cycle through different display screens 
    pin:
      number: "${display_btn_pin}"
      inverted: true
      mode:
        input: true
        pullup: true
    id: display_button
    on_press:
      then:
        - display.page.show_next: oled
        - component.update: oled

My display pages section

display:
  - platform: ssd1306_i2c
    id: oled
    setup_priority: -100 # Delay dispaly setup to allow Wi-Fi to enable and connect
    model: "SSD1306 128x64"
    pages:
      - id: page1
        lambda: |-
         if (id(boost).state) {it.image(110, 0, id(timer));}
         if (id(water).state) {it.image(90, 0, id(boiler));}
         if (id(heat).state) {it.image(70, 0, id(radiator));}
         it.print(0, 0, id(opensansR10), TextAlign::TOP_LEFT, "House");
         it.printf(0, 10, id(opensansSB40), "%.1f°C", id(house_temperature).state);
      - id: page2
        lambda: |-
         if (id(boost).state) {it.image(110, 0, id(timer));}
         if (id(water).state) {it.image(90, 0, id(boiler));}
         if (id(heat).state) {it.image(70, 0, id(radiator));}       
         it.print(0, 0, id(opensansR10), TextAlign::TOP_LEFT, "Target");
         it.printf(0, 10, id(opensansSB40), "%.1f°C", id(esp_thermostat).target_temperature);
      - id: page3
        lambda: |-
         if (id(boost).state) {it.image(110, 0, id(timer));}
         if (id(water).state) {it.image(90, 0, id(boiler));}
         if (id(heat).state) {it.image(70, 0, id(radiator));}        
         it.print(0, 0, id(opensansR10), TextAlign::TOP_LEFT, "H/W Temp");
         it.printf(0, 10, id(opensansSB40), "%.1f°C", id(water_temperature).state);
      - id: page4
        lambda: |-
         if (id(boost).state) {it.image(110, 0, id(timer));}
         if (id(water).state) {it.image(90, 0, id(boiler));}
         if (id(heat).state) {it.image(70, 0, id(radiator));}          
         it.print(0, 0, id(opensansR10), TextAlign::TOP_LEFT, "H/W Target");
         it.printf(0, 10, id(opensansSB40), "%.1f°C", id(ha_water_target_temperature).state);
      - id: page5
        lambda: |-
         if (id(boost).state) {it.image(110, 0, id(timer));}
         if (id(water).state) {it.image(90, 0, id(boiler));}
         if (id(heat).state) {it.image(70, 0, id(radiator));}          
         if (id(boost).state) {it.print(0, 0, id(opensansR10), TextAlign::TOP_LEFT, "Boost Active");}
         else {it.print(0, 0, id(opensansR10), TextAlign::TOP_LEFT, "Boost Off");}
         if (id(boost).state) {it.printf(0, 10, id(opensansSB40), "%.0fMin", id(boost_timer).state);}
6

Thank you very much, did you only use one button?

7

Yes, one button cycles through the pages…

8

Thanks brother. I am going to try.