How to display dynamic list on CYD?

ESPHome
1

Hi,
I have a CYD (with esphome) hanging in the kitchen that shows various things, including the current PV yield and things like that.

I have reminders for to-dos sent to my cell phone, e.g. washing machine finished, dishwasher finished, taking out the trash, flushing the water connection, etc.
Each of these to-dos generates a sticky/persistent notification on the cell phone, which has a callback action to delete the sticky notification again after it has been completed.
In addition, each to-do counts up a counter helper so that I can see how many to-dos are still open.
Completing a to-do reduces the counter accordingly.

On my CYD I have a tile that shows the number of unfinished to-dos, and the LED is red as long as the counter is > 0.

I would now like to configure a button on the counter tile that shows/opens a second page in the CYD.
So far, no problem.

But on this second page, a dynamic list of open to-dos should now be displayed. And that’s where I’m stuck.
I’m thinking that every new to-do should be written/added to an array or a JSON, for example.
I then read this out with an input_text helper as a template sensor and pass the list to esphome for displaying.
I’m still not sure if that’s even possible.
The problem is, for example, when I complete a to-do, it has to be removed from the array. How do I do that? So how can I delete a certain string from the array that is always in a different position?

Does anyone have any better ideas on how I can generate and display a dynamic list of to-dos on the CYD?

Many thanks!

2

WTH is a CYD?

1 Like
3

Oh, I taught this is a common term :sweat_smile:

It’s the Cheap Yellow Display, a nickname for a ESP32-2432S028R.
It’s a cheap 2.8" Display (+/- 15 USD on AliExpress), which you can use with esphome.
There are a couple of Blogs, GitHub projects out there…

4

Not sure where you are in your endeavour, but I guess the todo service to get the open items should be a starting point

5

LOL I googled harder and found it. Thanks. In fact I have one in my in tray.

Have you tried openhasp?

6

Well, didn’t know openhasp, but seems interessting, I’ll have a look into that as well.

But I finally managed it, thanks to @koying 's hint, which poked me in the right direction.

In case, one is interessted:

I have already automations which trigger a todo (see above describtion, i.e. a push). In those automations I added the todo.add_item service call to put a respective item on a todo list.
I created a template sensor, which extracts all open items from this todo list (using todo.get_items service), separate them with a comma and put all that in the sensor value.

template:
- trigger:
    - platform: state
      entity_id: todo.haushalt
  action:
    - service: todo.get_items
      data:
        status: needs_action
      target:
        entity_id: todo.haushalt
      response_variable: items
  sensor:
    - name: Todo Haushalt Items
      unique_id: todo_haushalt_items
      state: "{{ (items.values() | list)[0]['items'] | map(attribute='summary') | list | join(',') | truncate(255) }}"

In ESPhome I added a sensor, which gets to count of the todo list and a text sensor, which mirrors the state of the todo items sensor.
In the display component I then check if the count is >0 to color the icon and by pressing the icon it opens page2, which displays the text_sensor. Within this, I substitute the comma with a newline, to get a nice list on the screen:

sensor:
# Get open ToDo count
  - platform: homeassistant
    id: todo_haushalt_count
    entity_id: todo.haushalt
    internal: true

text_sensor:
# Get open ToDos
  - platform: homeassistant
    id: todo_haushalt
    entity_id: sensor.todo_haushalt_items
    internal: true 

display:
  - platform: ili9xxx
    id: cyd01_display
    model: ili9341
    spi_id: tft
    cs_pin: GPIO15
    dc_pin: GPIO2
    rotation: 0
    pages:
      - id: page1
        lambda: |-
          it.fill(id(Color::BLACK));
[...]
          it.rectangle(20, 120, 80, 80, id(ha_blue));
          if (id(todo_haushalt_count).state > 0) {
            it.print(60, 160, id(mdi48), id(todo_orange), TextAlign::CENTER, "\U000F0756");
          } else {
            it.print(60, 160, id(mdi48), id(off_blue), TextAlign::CENTER, "\U000F0756");
          }
[...]
      - id: page2
        lambda: |-
          it.fill(id(Color::BLACK));
          std::string str1 = id(todo_haushalt).state; 
          int xPos1 = 5, yPos1 = 5, lineHeight1 = 20;
          std::string delimiter1 = ",";
          std::size_t curPos1 = 0, commaPos1 = 0;
          while (commaPos1 != std::string::npos) {
              commaPos1 = str1.find(delimiter1, curPos1);
              it.print(xPos1, yPos1, id(roboto20), todo_white, str1.substr(curPos1, commaPos1 - curPos1).c_str());
              yPos1 += lineHeight1;
              curPos1 = commaPos1 + delimiter1.size();
          }
          it.rectangle(200, 280, 40, 40, id(ha_blue));
          it.print(210, 290, id(mdi24), id(todo_white), TextAlign::CENTER, "\U000F104D");
1 Like
7

Can you share a bit more detail about how your are showing solar information on the CYD?

8

There are two ways. Esphome or openhasp. The esphome code is in the post immediately above yours.

9

Well,
I have several pages. On the default page, I display the current yield, as well as the powersource (grid, battery, solar) with icons and the current batterylevel plus outdoor temp.
Depending on the yield in relation to the house consumption the letters/icons change color.
Left corner I have the ToDo list, which was topic here and right corner I have a Settingsbutton, which opens another page, where I have some controls like switch on/off the automatic closing of shutters, depending on the sun, or switc on the waterheating, etc…

image
image655×903 56.4 KB