A different take on designing a Lovelace UI

He guys, can anyone help me with setting up calendar items in the sidebar?
I’m looking to get a list of all the items from two different calendars for the current day.
I’ve been reading through this topic and found some code that shows the first upcoming item but that is not exactly what I’m looking for;
image

I feel it should be quite straight forward but I’m really bad at coding these kind of template items.
Also since the items should be for the current day only there is no need for the date. To fit the sidebar better it would be good if just the time (without seconds) would show.

Add this to based.yaml

  styles:
    card:
      - box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2)

Show your sidebar.yaml for the date

still no one that can help me figure this out? :slight_smile: thanks!

Are you talking about me? Here’s the code.
This code is located in the base.yaml file of the button card template file and is called
styles:
- box-shadow: >
[[[
return variables.state_on
? ‘inset -4px 4px 4px 0 rgba(0,0,0,.7),inset 2px -2px 2px 0 rgba(255,255,255,.15)’
: ‘4px 4px 4px 0 rgba(0,0,0,.6),-1px -1px 2px 0 rgba(255,255,255,.08)’;
]]]

Thanks,
Maybe you can upload the code properly?

Here you go;

- sensor:
    - unique_id: sidebar
      state: template
      attributes:
        time: >
          {% set hours = now().strftime('%H') %}
          {% set minutes = now().strftime('%M') %}
          <span class="time">
            {{ hours }}<span class="time-colon">:</span>{{ minutes }}
          </span>
        date: >
          <font color='#6a7377'><b>
          {% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
          {% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
          {% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
          'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
            {{ days[now().weekday()] }}<br>
            {{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
          {% endif %}
          </b></font>
        greet: >
          <b>
          {% set time = now().hour %}
          {% if time <= 1 %} Welteruste {{'\U0001F611'}}
          {% elif time <= 3 %} Welteruste {{'\U0001F62A'}}
          {% elif time <= 5 %} Welteruste {{'\U0001F634'}}
          {% elif time <= 7 %} Goeie merge {{'\U0001F4A9'}}
          {% elif time <= 9 %} Goeie merge {{'\u2615\uFE0F'}}
          {% elif time <= 10 %} Goeie merge {{'\U0001F642'}}
          {% elif time <= 13 %} Goeiendag {{'\U0001F60A'}}
          {% elif time <= 15 %} Goeiendag {{'\U0001F60E'}}
          {% elif time <= 17 %} Goeiendag {{'\U0001F44B\U0001F3FB'}}
          {% elif time <= 19 %} Goeie navond {{'\U0001F44B\U0001F3FB'}}
          {% elif time <= 22 %} Goeie navond {{'\U0001F60C'}}
          {% elif time <= 23 %} Goeie navond {{'\U0001F974'}}
          {% else %} Goeie navond {{'\U0001F974'}}
          {% endif %}
          </b>
        weather: >
          <b>
          {% set entity = 'weather.slingerwood' %}
          {% if not is_state(entity, 'unknown') %}
            {% set temp = state_attr(entity, 'temperature') | round %}
            {% set precip = state_attr(entity, 'forecast')[0]['precipitation'] | round %}
              Voelt als {{ temp }}°, {{ 'geen kans op regen' if precip == 0
              else precip | string + 'mm regen \u2614\uFE0F' }}
          {% else %}
            Kan het weer niet laden...
          {% endif %}
          </b>
        active: >
          {% set lights = [
            states.light.kitchen_lights,
            states.light.wall_light_1,
            states.light.wall_light_2,
            states.light.bathroom_lights,
            states.light.lights_hallway_downstairs,
            states.light.lights_hallway_upstairs_1,
            states.light.lights_hallway_upstairs_2,
            states.light.outside_lights_front,
            states.light.outside_lights_back,
            states.light.outside_lights_path,
            states.light.outside_lights_driveway,
          ] %}

          {% set devices = [
            states.switch.ps5_542_power,
            states.switch.vaatwasser_power,
            states.media_player.cc_ut_rooie_kontgat,
            states.media_player.sony_tv_3,
          ] %}

          {% set lights_on = lights | selectattr('state','eq','on') | list %}
          {% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}

          {% set devices_on = devices | selectattr('state','search','(on|cool|fan_only|playing)') | list %}
          {% set devices_name = devices_on | map(attribute='name') | join(', ') %}

          {% if (lights_on | length == 0) and (devices_on | length > 0) %}
            {{ devices_name | regex_replace(',([^,]*)$',' en\\1') }} staan aan

          {% elif (lights_on | length == 1) and (devices_on | length == 1) %}
            {{ lights_name }} en {{devices_name }} staan aan

          {% elif (lights_on | length == 1) and (devices_on | length > 1) %}
            {{ lights_name }}, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} staan aan

          {% elif (lights_on | length > 1) and (devices_on | length == 1) %}
            {{ lights_on | length }} lampen en {{ devices_name }} staan aan

          {% elif (lights_on | length > 1) and (devices_on | length > 1) %}
            {{ lights_on | length }} lampen, {{ devices_name | regex_replace(',([^,]*)$',' en\\1') }} staan aan

          {% elif (lights_on | length == 1) and (devices_on | length == 0) %}
            {{ lights_name }} staan aan

          {% elif (lights_on | length > 1) and (devices_on | length == 0) %}
            {{ lights_on | length }} lampen staan aan

          {% else %}
            <font color='#6a7377'>Alles is uitgeschakeld</font>
          {% endif %}
        calendar: >
            {{state_attr('calendar.gezin', 'start_time')}}
            {{state_attr('calendar.gezin', 'message')}}
1 Like

Hello everyone,

Small stupid question I would like to know how to modify the space between the texts of my sidebar

Merci

Just adding this here for anyone using ha-dockermon.

5 Likes

If anyone else is trying to adapt device class binary sensors like doors and windows I have a solution I’m fairly happy with.

Add translations to button_card_templates/settings.yaml (if you require it)

...
    translate_open: Open
    translate_closed: Closed

Edit your button_card_templates/icons.yaml to include state_display for both windows and doors.

...
icon_door:
  state_display: >
    [[[
      const stateDict = {
        'on': variables.translate_open,
        'off': variables.translate_closed,
      };
      if (variables.state === true) return variables.translate_unknown;
      return stateDict[variables.state];
    ]]]
  styles:
...

icon_window:
  state_display: >
    [[[
      const stateDict = {
        'on': variables.translate_open,
        'off': variables.translate_closed,
      };
      if (variables.state === true) return variables.translate_unknown;
      return stateDict[variables.state];
    ]]]
  styles:

image

7 Likes

Hi All,

Update. 2023.6 bricks the UI.

My dashboard was working for many months until this update, maybe I missed the solution in previous posts.

Currently installed a backup: 2023.2.3 all is fine there.

“Configuring Command Line sensor using YAML has moved.”

Consult the documentation to move your YAML configuration to integration key and restart Home Assistant to fix this issue.

1 Like

Any recommendations/examples/code for Tesla Card, including icons, integrations etc. that I could use?
TIA.

Use this integration GitHub - alandtse/tesla: Tesla custom integration for Home Assistant. This requires a refresh token be generated by third-party apps to login.
and then configure the card for yourself. I don’t have a Tesla so I don’t know what sensors are and what can be presented.

1 Like
2 Likes

Thank you !

I have the same issue as well.

have you tried this?

Yes. Thanks!!