ESP status bar view

[jpmeijers]

The ESP details page looks like this

I would like to make this a bit more compact and only show the status bars as a card on a lovelace dashboard, something like this:

Does anyone know how to do this?

[ribeirompl]

I got a bit nerd-sniped yesterday evening, thus I tried implementing the ESP design using HTML/CSS/Jinja template with the custom Lovelace HTML Jinja2 Template card.

Preview

Dark Mode	Light Mode

With day borders:

Dark Mode	Light Mode

With show_end_times enabled:

Limitations

The card determines the dark/light mode based on your device's dark mode settings (not your Home Assistant profile settings), thus the card might pick the wrong dark/light mode if your Home Assistant profile is set to a different dark/light mode than your device.

The ESP API, along with this integration, only provides load-shedding schedules for future events, therefore this card won't show events that happened earlier in the day. I decided then to fade out old time slots to not deceive the user that there weren't any outages earlier in the day.

ESP Design	This Design

Installation

1. Install the Lovelace HTML Jinja2 Template card, searchable within HACS -> Frontend.
2. Create a new "Manual" (YAML) card on your dashboard.
3. Copy the template code from the examples/dashboards/esp_status_bar.yaml file into the card.
4. Edit the 4 variables at the top of the content section:
   • area_sensor (sensor): this should be the sensor for your load-shedding area.
   • number_of_days (1-7): set how many days of the forecast you'd like to see.
   • show_day_borders (true/false): aesthetic option, if you'd like borders around each day.
   • show_end_times (true/false): whether to show the load shedding end times. (This removes the "Now" text).

[jpmeijers]

O wow this is really amazing! Thanks a lot @ribeirompl. Shout when you're in town and I'll buy you a beer/coffee.

[wernerhp]

Brilliant! Great job @ribeirompl! Thank you for sharing!

[wernerhp]

https://github.com/wernerhp/ha.integration.load_shedding/blob/master/examples/card5.yaml

[Viva57]

@ribeirompl Thanks for this card. It's such a nice addition to my dashboard!

I recently started getting an error with this card though. From my logs: Error while processing template. Apart from updating my home assistant to the latest version, nothing changed on my side.

Do you perhaps experience the same issue?

---

Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 568, in async_render
render_result = _render_with_context(self.template, compiled, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 2231, in _render_with_context
return template.render(**kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.11/site-packages/jinja2/environment.py", line 1301, in render
self.environment.handle_exception()
File "/usr/local/lib/python3.11/site-packages/jinja2/environment.py", line 936, in handle_exception
raise rewrite_traceback_stack(source=source)
File "", line 177, in top-level template code
TypeError: 'NoneType' object is not iterable

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 694, in async_render_to_info
render_info._result = self.async_render(
^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 570, in async_render
raise TemplateError(err) from err
homeassistant.exceptions.TemplateError: TypeError: 'NoneType' object is not iterable

[ribeirompl]

@Viva57 I believe that issue may have been fixed with an update on 28 September.
Check that you have the latest code: https://github.com/wernerhp/ha.integration.load_shedding/blob/master/examples/card5.yaml

The issue is likely due to having no upcoming scheduled loadshedding.
This was the fix for the issue: https://github.com/wernerhp/ha.integration.load_shedding/pull/81/files

Let me know if you come right 👍

[Viva57]

Ah, thanks @ribeirompl! I updated my code and tested it for a couple of days. All seems to be good again 🙌🏼

[surekqomi]

Not sure why but I simply cannot find that card in HACS in order to make use of this impressive example. Suggestions? I'm going to try to duplicate this using the Markdown Card to see if I can make that one work for a 2nd option.

Edit: The example code works flawlessly using the TailwindCSS Template Card from HACS as well

[tinuva]

Not sure why but I simply cannot find that card in HACS in order to make use of this impressive example. Suggestions? I'm going to try to duplicate this using the Markdown Card to see if I can make that one work for a 2nd option.

Edit: The example code works flawlessly using the TailwindCSS Template Card from HACS as well

Try searching for: HTML Jinja2 Template card
or in your HA url, go to: /hacs/repository/205261230

[FFJacot]

Real newbie here....
I've managed to install the Jinja2 Template card, step 1 of the installation process, but then get stuck on the very next step:
"Create a new "Manual" (YAML) card on your dashboard."

I've faffled around quite a bit and can't work out where/how to do this? What am I missing?

Thanks for any guidance!

[wernerhp]

@FFJacot

[FFJacot]

Bingo! That worked perfectly.... a great example of "a picture is worth a thousand words"!

Depressing viewing, though.

Thank you!

[FFJacot]

A further newbie question: I managed to work out how to give the card a title:

"title: Grahamstown 2 Load shedding"

But the title folds over in the displayed card. Is there a way of reducing the text size for the title?

[wernerhp]

Going to need a bit more info. Please share your code and/or 1000 word picture 😉

[FFJacot]

Here we go:

[ajscheid]

https://github.com/wernerhp/ha.integration.load_shedding/blob/master/examples/card5.yaml
errors out to 404.
Can someone provide me with the yaml file?
Thanks!

[wernerhp]

https://github.com/wernerhp/ha.integration.load_shedding?tab=readme-ov-file#cards

[ajscheid]

Thanks, Easy as py; sorry for not reading properly

…

On 12 Mar 2024, at 20:17, Werner Pieterson ***@***.***> wrote: https://github.com/wernerhp/ha.integration.load_shedding?tab=readme-ov-file#cards — Reply to this email directly, view it on GitHub <#72 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWOV5HHKR5VG7FKPHBEQ65DYX5BDHAVCNFSM6AAAAAA2KFVYO2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJSGI3TQOBUGE>. You are receiving this because you commented.