Load shedding card using the EskomSePush API

iff i try to add interation i get the error : This integration does not support configuration via the UI. If you followed this link from the Home Assistant website, make sure you run the latest version of Home Assistant.

I would like to hide loadshedding related cards in the dashboard when there is no load shedding.
Since the sensor.load_shedding_stage_eskom sensor provides the current loadshedding stage in an attribute, and attributes can’t be used as a condition under the Visibility tab of dashboard cards, is there a workaround to hide/show cards according to the current loadshedding state? (I.e., only show card if Loadshedding stage > 0)
Or would it be possible for the developer of the loadshedding integration to add a sensor providing the current loadshedding stage as part of the sensor state (I’m not sure what the correct terminology is)?
Thank you

I use this in my cards

visibility:
  - condition: numeric_state
    entity: sensor.loadshedding_national_status
    above: 0

Here is an example of the full card Im using

type: custom:html-template-card
ignore_line_breaks: true
content: >
  {% set area_sensor = "sensor.load_shedding_area_capetown_6_durbanville" %} {%
  set number_of_days = 4 %} {% set show_day_borders = false %} {% set
  show_end_times = false %} {% set timeslots = 48 %} <style>
      @media (prefers-color-scheme: light) {
          {% if show_day_borders %}
          .day_container {
              background-color: #fbeff3 !important;
          }
          {% endif %}

          .current_time_indicator_text,
          .current_slot_indicator_start_text,
          .current_slot_indicator_end_text {
              color: #785551 !important;
          }

          .current_time_indicator,
          .current_slot_indicator_start,
          .current_slot_indicator_end {
              background-color: #785551 !important;
          }

          .slot {
              background-color: #f5ddd9 !important;
          }
      }

      .day_container {
          {% if show_day_borders %}
          background-color: #2b2120;
          border-radius: 0.75rem;
          {% endif %}
          padding-top: 0.5rem;
          padding-bottom: 1.75rem;
          margin: 0.25rem 0;
      }

      h3.day_heading,
      .current_time_indicator_text,
      .current_slot_indicator_start_text,
      .current_slot_indicator_end_text {
          font-family: Roboto, Ubuntu, sans-serif;
          font-weight: 600;
      }

      h3.day_heading {
          font-size: 1.0rem;
          margin: 0 0 0 1rem;
      }

      .slot_container {
          display: grid;
          grid-template-columns: repeat({{ timeslots }}, 1fr);
          gap: 0.0625rem;
          width: calc(100% - 2rem);
          margin: 0 1rem;
          line-height: 0.9375rem;
          position: relative;
      }

      .slot_container .slot:first-of-type {
          border-top-left-radius: 50%;
          border-bottom-left-radius: 50%;
      }

      .slot_container .slot:last-of-type {
          border-top-right-radius: 50%;
          border-bottom-right-radius: 50%;
      }

      .slot {
          border-radius: 15%;
          background-color: #534341;
      }

      .active_slot_stage_1 {
          background-color: #f6a829 !important;
      }

      .active_slot_stage_2 {
          background-color: #f8980d !important;
      }

      .active_slot_stage_3 {
          background-color: #e66e0e !important;
      }

      .active_slot_stage_4 {
          background-color: #e3493f !important;
      }

      .active_slot_stage_5 {
          background-color: #d93e3d !important;
      }

      .active_slot_stage_6 {
          background-color: #cf3131 !important;
      }

      .active_slot_stage_7 {
          background-color: #b21e1d !important;
      }

      .active_slot_stage_8 {
          background-color: black !important;
      }

      div.active_slot {
          background-color: black;
      }

      div.fade_slot {
          opacity:0.2;
      }

      .current_time_indicator {
          width: 0.125rem;
          position: absolute;
          height: 120%;
          top: -10%;
          border-radius: 15%;
          transform: translate(-50%, 0);
          background-color: #e6bdb7;
      }

      .current_time_indicator_text {
          position: absolute;
          bottom: 140%;
          transform: translate(-50%, 0);
          color: #e6bdb7;
      }

      .current_slot_indicator_start {
          width: 0.125rem;
          position: absolute;
          height: 40%;
          top: 100%;
          border-radius: 15%;
          transform: translate(-50%, 0);
          background-color: #e6bdb7;
      }

      .current_slot_indicator_start_text {
          position: absolute;
          top: 150%;
          transform: translate(-50%, 0);
          color: #e6bdb7;
      }

      .current_slot_indicator_end {
          width: 0.125rem;
          position: absolute;
          height: 40%;
          bottom: 100%;
          border-radius: 15%;
          transform: translate(-50%, 0);
          background-color: #e6bdb7;
      }

      .current_slot_indicator_end_text {
          position: absolute;
          bottom: 150%;
          transform: translate(-50%, 0);
          color: #e6bdb7;
      }
  </style> {% set area_schedule = state_attr(area_sensor, "forecast") %} {% if
  area_schedule is none %}{% set area_schedule = [] %}{% endif %} {% for
  day_offset_idx in range(number_of_days) %}
      {% set today_datetime_midnight = now().replace(hour=0,minute=0,second=0,microsecond=0) + timedelta(days=day_offset_idx) %}
      <div class="day_container">
          <h3 class="day_heading"
              style="{% if day_offset_idx == 0 or show_end_times %} margin-bottom: 1.5rem;
                  {% else %} margin-bottom: 0.5rem;
                  {% endif %}">{{ today_datetime_midnight.strftime("%A, %B %-d") }}</h3>
          <div class="slot_container">
              {% set ns = namespace(active_class_name="", last_slot_was_active=false, current_slot_was_activated=false) %}
              {% for half_hour_time_slot_idx in range(timeslots) %}
                  {% set half_hour_time_slot = today_datetime_midnight + timedelta(minutes=30*half_hour_time_slot_idx) %}
                  {% set ns.active_class_name = "" %}
                  {% set ns.current_slot_was_activated = false %}
                  {% for loadshedding in area_schedule %}
                      {% if not ns.current_slot_was_activated %}
                          {% if loadshedding["start_time"] <= half_hour_time_slot < loadshedding["end_time"] %}
                              {% if not ns.last_slot_was_active %}
                                  {% set percentage_of_region = (half_hour_time_slot_idx/timeslots)*100 %}
                                  <span class="current_slot_indicator_start" style="left:{{ percentage_of_region }}%">&nbsp;</span>
                                  <span class="current_slot_indicator_start_text" style="left:{{ percentage_of_region }}%;
                                              {% if half_hour_time_slot.hour == 0 %}transform: none;{% elif half_hour_time_slot.hour == 23 %}transform: translate(-100%,0);{% endif %}">{{ half_hour_time_slot.strftime("%H:%M") }}</span>
                              {% endif %}
                              {% set ns.current_slot_was_activated = true %}
                              {% set ns.last_slot_was_active = true %}
                              {% set ns.active_class_name = "active_slot active_slot_" + loadshedding['stage']|lower|replace(' ','_') %}
                          {% endif %}
                      {% endif %}
                  {% endfor %}
                  {% if not ns.current_slot_was_activated %}
                      {% if show_end_times and ns.last_slot_was_active %}
                          {% set percentage_of_region = (half_hour_time_slot_idx/timeslots)*100 %}
                          <span class="current_slot_indicator_end"
                              style="left:{{ percentage_of_region }}%">&nbsp;</span>
                          <span class="current_slot_indicator_end_text"
                              style="left:{{ percentage_of_region }}%;
                                      {% if half_hour_time_slot.hour == 0 %}transform: none;{% elif half_hour_time_slot.hour == 23 %}transform: translate(-100%,0);{% endif %}">{{ half_hour_time_slot.strftime("%H:%M") }}</span>
                      {% endif %}
                      {% set ns.last_slot_was_active = false %}
                  {% endif %}
                  <div class="slot {% if now() > half_hour_time_slot + timedelta(minutes=30) %}fade_slot{% endif %} {{ ns.active_class_name }}">&nbsp;</div>
              {% endfor %}
              {% if day_offset_idx == 0 %}
                  {% set current_time_indicator_progress = now().hour*2 + now().minute/30 %}
                  {% set percentage_of_region = (current_time_indicator_progress/timeslots)*100 %}
                  <span class="current_time_indicator"
                      style="left:{{ percentage_of_region }}%">&nbsp;</span>
                  {% if not show_end_times %}
                    <span class="current_time_indicator_text"
                        style="left:{{ percentage_of_region }}%">Now</span>
                  {% endif %}
              {% endif %}
          </div>
      </div>
  {% endfor %}
visibility:
  - condition: numeric_state
    entity: sensor.loadshedding_national_status
    above: 0

This comes from the eskom integration

Thank you, I’ll try that tonight.

On second glance, I realised that you’re using the Eskom Integration and not Werner’s integration for the card. The Eskom Integration stopped working for me (maybe due to the name), and I haven’t been able to reinstall it. I noticed on GitHub that other people had the same issue for some time.
I’m using Werner’s Loadshedding integration as well for some of the stuff, but for me, it was easier to use the Eskom integration to configure cards and automation (especially the visibility conditions). Since I can’t get the Eskom integration again, I’ll redo my automations to make use loadshedding integration. I don’t have any programming knowledge, so I was thinking of setting an Input boolean to indicate if load shedding is active via an automation and use the boolean as the condition to set the visibility of cards.
I

I use both integrations and both work for me, if your using Werners, then the sensor for your conditional card would be

visibility:
  - condition: numeric_state
    entity: sensor.loadshedding_local_status
    above: 0

or

visibility:
  - condition: numeric_state
    entity: sensor.loadshedding_national_status
    above: 0

for local or national respectively

1 Like

I can’t this to work. As stated above, I know nothing about coding, but can this work? The State of the entity is e.g. “Stage 2” (not just “2”), or am I mistaken? Looking at the entity data, is the stage not contained in an entity attribute:

Sorry if I’m stupid.

Id suggest then trying to get the Eskom Loadshedding Interface integration going then as the status sensors there have numeric valus for easy conditional card visibility.

If not, you would need to get more technical with a template.