Shabbat & "Red Alert" Combined Dashboard

Hi everyone!

I know that there are very few issues within the world of home automation that are in any way politically contentious. This might veer slightly towards that territory, but I just ask for people’s patience and tolerance in seeing this as a non-political post.

Here in Israel we have a national alert system called Red Alert which is used to warn civilians of national emergencies including drone infiltrations and rocket alerts. A couple of excellent Home Assistant add-ons have integrated it.

The majority of the population in Israel is Jewish and a portion of them are religiously observant and observe the weekly Jewish practice of Shabbat during which religious Jews typically refrain from using electricity.

During certain times, this creates an uneasy dynamic. People want to stay abreast of these alerts, but to still avoid technology as far as possible.

I’ve used Home Assistant extensively for creating Shabbat automations, for which it is wonderful. But I also wanted to share a dashboard I built that tries to honour a Shabbat-friendly environment while providing the alerts front and centre.

Because I’m terrible at editing YAML, I used AI in order to help me create styled cards for the safety sensors. This is how they look in my weekday dashboard:

Weekday Dashboard Version

Shabbat Dashboard

I have my Shabbat dashboard running on a pretty basic Android tablet. Of course, with Home Assistant, just about anything is possible. So with Fully Kiosk Mode the tablet can be even be configured to turn itself on and off in sync with the Shabbat schedule.

Here’s ;the dashboard:

Integrations & Add-Ons

I’ve used three add-ons and integrations to build this dashboard:

The various elements are below.

Styled Shabbat Times

type: grid
title: Shabbat Times
titleColor: white
columns: 1
square: false
cards:
  - type: entity
    entity: sensor.hebcal_start_of_shabbat
    name: Shabbat In
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(120deg, #2980b9, #6dd5fa);
          border-radius: 15px;
          padding: 15px;
        }
        .card-content {
          color: white !important;
        }
        .primary {
          font-size: 1.8em;
          font-weight: bold;
          color: white !important;
        }
        .secondary {
          font-size: 1.2em;
          color: white !important;
        }
        :host {
          --primary-text-color: white;
          --secondary-text-color: white;
        }
  - type: entity
    entity: sensor.hebcal_end_of_shabbat
    name: Shabbat Out
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(120deg, #2980b9, #6dd5fa);
          border-radius: 15px;
          padding: 15px;
        }
        .card-content {
          color: white !important;
        }
        .primary {
          font-size: 1.8em;
          font-weight: bold;
          color: white !important;
        }
        .secondary {
          font-size: 1.2em;
          color: white !important;
        }
        :host {
          --primary-text-color: white;
          --secondary-text-color: white;
        }
  - type: entity
    entity: sensor.time
    name: Current Time (Jerusalem)
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(120deg, #2980b9, #6dd5fa);
          border-radius: 15px;
          padding: 15px;
        }
        .card-content {
          color: white !important;
        }
        .primary {
          font-size: 1.8em;
          font-weight: bold;
          color: white !important;
        }
        .secondary {
          font-size: 1.2em;
          color: white !important;
        }
        :host {
          --primary-text-color: white;
          --secondary-text-color: white;
        }

Styled Red Alert Sensor Displays

square: false
type: grid
columns: 2
cards:
  - type: custom:button-card
    entity: binary_sensor.oref_alert_jerusalem_all_areas
    name: Jerusalem All Areas
    icon: mdi:check-circle
    styles:
      card:
        - padding: 12px
      name:
        - font-weight: bold
        - color: white
      state:
        - color: white
      icon:
        - color: white
        - width: 24px
        - height: 24px
    state:
      - value: "on"
        name: Jerusalem All Areas (UNSAFE)
        icon: mdi:alert-octagram
        styles:
          card:
            - background-color: "#ea4335"
          icon:
            - animation: blink 1s ease infinite
      - value: "off"
        name: Jerusalem All Areas (Safe)
        styles:
          card:
            - background-color: "#34a853"
      - value: unavailable
        styles:
          card:
            - background-color: "#ffa500"
  - type: custom:button-card
    entity: binary_sensor.oref_alert
    name: Jerusalem Center
    icon: mdi:check-circle
    styles:
      card:
        - padding: 12px
      name:
        - font-weight: bold
        - color: white
      state:
        - color: white
      icon:
        - color: white
        - width: 24px
        - height: 24px
    state:
      - value: "on"
        name: Jerusalem Center (UNSAFE)
        icon: mdi:alert-octagram
        styles:
          card:
            - background-color: "#ea4335"
          icon:
            - animation: blink 1s ease infinite
      - value: "off"
        name: Jerusalem Center (Safe)
        styles:
          card:
            - background-color: "#34a853"
      - value: unavailable
        styles:
          card:
            - background-color: "#ffa500"
title: Red Alerts

Markdown Card Showing Shabbat Schedule

Finally, this is just a markdown card showing the Shabbat schedule intended as a reminder. Needless to say, this could be done more intelligently by displaying the actual scenes and their activation times.

square: false
type: grid
columns: 1
cards:
  - square: false
    type: grid
    columns: 1
    cards:
      - type: markdown
        content: |
          ## Shabbat Schedule

          🌅 **Start of Shabbat** Shabbat Mode Active
          🌙 **00:00** Bedtime Mode
          ☀️ **09:00** Morning Lights
          🌤️ **14:30** Afternoon Lights
        style: |
          ha-card {
            padding: 16px;
            background: var(--card-background-color);
            border-radius: var(--ha-card-border-radius);
          }
          h2 {
            color: var(--primary-text-color);
            border-bottom: 1px solid var(--divider-color);
            padding-bottom: 8px;
            margin-bottom: 8px;
          }

Version With News Montioring

It also creates a second version of the dashboard which integrates a news feed during times when you want to have that information provided. You can use a RSS feed or a news widget element to add an intake. If you’re doing this and putting this dashboard on an Android display (etc), you should turn on the auto-refresh option in kiosk mode.