Flashing boxes on ILI9341 TFT LCD

ESPHome
1

Hello,

I am wondering if what I have in mind is actually possible and if yes how I would go about implementing it on an ESP32 with ILI9341 TFT LCD.

I am using LEDs and Addresable LEDs as lights with pulse effect for status indication purposes. For example a LED would be off if the climate component is in state off, on when idle and flashing when heating.

Here the light related example:

output:
  - platform: sx1509
    sx1509_id: sx1509_hub1
    id: 'sx1509_out_13'
    pin: 13
    inverted: true

light:
  - platform: monochromatic
    id: LED0
    name: "LED Red 0"
    output: sx1509_out_13
    effects:
      - pulse:
      - pulse:
          name: "Fast Pulse"
          transition_length: 0.5s
          update_interval: 0.5s
      - pulse:
          name: "Slow Pulse"
          update_interval: 2s

I would be calling for the light in an automation in Home Asistant, that part would not be done on the ESP32. I am hoping to replace the LED based status indication by the above mentioned LCD display and instead of having the LEDs flashing have a filled rectangle alternate between either background color and rectangle color or else replace a yellow rectangle with a black rectangle of the same size at the same position to have a flashing effect.

SPI_Display
SPI_Display382×640 72.3 KB

I have a few of such rectangles drawn on the screen above at the bottom left. Could this be implemented in the same way that with the LEDs to have a light with an effect like pulsing/blinking/flashing. I do not need any gradual changes or fadein and out stuff. a straight red/black or yellow/black change would be more desirable for me.

I am not in any form fluent with yaml or the lambda stuff, I have been luck so far gathering stuff from the forums and the internet and adapt to my needs on a trial and error bases. If anybody has done something like that I would appreciate any input or links to projects and other forum posts that could be helpful.

I have considered animated gifs for the purpose but hope to not have to go down that route.

Kind Regards
Jan P.

3

Hi again,

I am able to do something with the state of an entity by using binary sensors and if else in lambda like this:

(Only the sensor and lambda shown)

binary_sensor:
  - platform: homeassistant
    id: heatstate
    entity_id: switch.heat_pump
    internal: true
  - platform: homeassistant
    id: immersionstate
    entity_id: switch.hotwater
    internal: true

    lambda: |-

      it.fill(COLOR_BLACK);
      
      if (id(heatstate).state) {
        it.filled_rectangle(121, 25, 119, 24, id(red));
        it.print(121, 23, id(roboto), id(white), TextAlign::TOP_LEFT, "HP ON");
      } else {
        it.filled_rectangle(121, 25, 119, 24, id(green));
        it.print(121, 23, id(roboto), id(black), TextAlign::TOP_LEFT, "HP OFF");
      }

      if (id(immersionstate).state) {
        it.filled_rectangle(121, 49, 119, 24, id(red));
        it.print(121, 48, id(roboto), id(white), TextAlign::TOP_LEFT, "HW ON");
      } else {
        it.filled_rectangle(121, 49, 119, 24, id(green));
        it.print(121, 48, id(roboto), id(black), TextAlign::TOP_LEFT, "HW OFF");
      }

This requires that I have a binary state and I can not call this as an action from an automation in Home Assistant. Is there a way to formulate the above lambda to have the red rectange rather than being static redraw the same location black and red with an interval of 0.5 - 1s ?

Kind Regards
Jan P.

4

Hi,

I have a partial solution now based on some example lambda from the documentation:

Flashing colon symbol in clock

With a few additions I am able to get almost what I am looking for. The frequency of blinking appears to depend on the display update interval.

    lambda: |-

      it.filled_rectangle(0, 0, 240, 230, id(black));

      if (id(heatstate).state) {
        static int i = 0;
        i++;
        if ((i % 2) == 0)
          it.filled_rectangle(121, 25, 119, 23, id(red));
        else
          it.filled_rectangle(121, 25, 119, 23, id(black));
      it.print(121, 23, id(roboto), id(white), TextAlign::TOP_LEFT, "Heatpump");
      } else {
        it.filled_rectangle(121, 25, 119, 23, id(green));
        it.print(121, 23, id(roboto), id(black), TextAlign::TOP_LEFT, "Heatpump");
      }

      if (id(immersionstate).state) {
        static int i = 0;
        i++;
        if ((i % 2) == 0)
          it.filled_rectangle(121, 49, 119, 23, id(red));
        else
          it.filled_rectangle(121, 49, 119, 23, id(black));
      it.print(121, 47, id(roboto), id(white), TextAlign::TOP_LEFT, "Immersion");
      } else {
        it.filled_rectangle(121, 49, 119, 23, id(green));
        it.print(121, 47, id(roboto), id(black), TextAlign::TOP_LEFT, "Immersion");
      }

This will do me for now, I am probably revisiting this again at some stage but I feel I have to go through a lot more of the lambda examples to see what can be done and how.

Thank you!
Jan P.