A different take on designing a Lovelace UI

[saschar (Sascha)]

Hej.
First of all. Great Work –– Mattias and all the others.

I try to modify “my” dashboard with your base.
I would like to have the persons in the sidebar under the “date” and remove it from the “Hemma” section.
But the should also have that button function – means if TAP it, I should get the pop-up.
The should have a state-view, too –– if the person is present then 100% opacity and if not than 50% or similar, could also be different images.

Do anybody have a solution for that?

I tried and at the moment I have the icons on the bottom (in the ui-lovelace.yaml not the sidebar.yaml).

The other icons in the sidebar are only a state overview, for example the speaker if a media_player is on or the door if a door/window is open.

Thanks for some ideas or solutions.

Best
Sascha

[robbert.langeraar]

Could you share the yaml-code of this card?

[masoncrawford1994 (mason)]

@Laffer

I could test this out for you if you’d like.

if you could that would be helpful. (only if you have the time, I don’t want to take you away from imposing that amazing dashboard of yours)

im getting that info from the Apple TV integration page.

however giving it a 2ed look it may just be a poor choice of example script for the remote and something that can be done via Select source.

If that is the case I would be 50/50 shield or Apple TV. The shield for the better Plex or Apple TV for the better reliability.

[masoncrawford1994 (mason)]

as built the sidebar is 1 template, you could split the template and add the person cards between.
however that would be a fair amount of work on the css side to get them positioned nicely and a new custom button for the persons cards as the base cards won’t look right. You could use the footer buttons as a base for the new person cards

look for this code in the ui-lovelace.yaml

          - type: custom:button-card
            entity: sensor.template_sidebar
            template: sidebar

and then add above and your person cards between them

          - type: custom:button-card
            entity: sensor.template_sidebar_time
            template: sidebar

in sidebar.yaml remove the time and date attributes and add them attributes to a new template sensor named template_sidebar_time

 - unique_id: sidebar_time
      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 = ['Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag', 'Söndag'] %}
          {% set months = ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
          'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'] %}
            {{ days[now().weekday()] }}<br>
            {{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
          {% endif %}
          </b></font>

That should get you started but without more information I can’t help more than that

[weaverprojects]

Hi Sascha, would you share the code from your sidebar? These state icons look very interesting…

thx

[Laffer (André)]

Heheh - you’re funny, but thank you The credit has to go to Mattias, but you know that

I can confirm that Select source does in fact launch the selected app. Worked great.

In case you’re unaware, the Apple TV (with the Infuse app, and some others) does support Atmos. Just not lossless Atmos.
If your media file contains an audio track with EAC Atmos, Infuse will be able to play that.
It is also able to play TrueHD and DTS-HD, for example. But then the Atmos metadata is lost.

[nullae (null)]

Cheers that’s a step forward, partly fixes the mobile app (aside from the graph being too wide on mobile).
However this code causes my portrait view on pc to wonk out as it shares similar a width of under 800px (previously displaying correctly)

Strange inconsistency. At least I have a better idea of what to fiddle with, but I wonder what has caused this change to begin with…

[pantomath]

Hey @Br3b - Echoing what others have said. Love your weather button. Can you share the setup?

[htpc2308 (lulu)]

@Mattias_Persson

is it possible to style the scrollbar in the popups?

i read something about this, but i dont know where to put it in

body::-webkit-scrollbar {
          scrollbar-width: thin;         
          scrollbar-color: blue orange;   
        }

actually is ugly as hell

[wjbridge]

Hi @Laffer!

Thanks for the response. Sadly, I am not seeing those details with my Nvidia Shield + Google Cast built into Home Assistant. Did you do anything special to get that info?

[wjbridge]

I was hoping to get a live feed by using the following attributes for the button card but sadly I can’t get it to work…experimenting though

show_live_stream: true
show_entity_picture: true

[saschar (Sascha)]

@masoncrawford1994 ––– Thanks. That sounds like a easy solution.

[saschar (Sascha)]

Hi,
here the code but I’m still on testing or better playing.
The states are for a quickview …

- sensor:
    - unique_id: sidebar_time
      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'>
          {% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
          {% set days = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'] %}
          {% set months = ['Januar', 'Feber', 'März', 'April', 'Mai', 'Juni',
          'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'] %}
            {{ days[now().weekday()] }}<br>
            {{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
          {% endif %}
          </font>
        greet: >
          <b>
          {% set time = now().hour %}
          {% if time <= 1 %} Gute Nacht {{'\U0001F611'}}
          {% elif time <= 3 %} Gute Nacht {{'\U0001F62A'}}
          {% elif time <= 5 %} Gute Nacht {{'\U0001F634'}}
          {% elif time <= 9 %} Guten Morgen {{'\U0001F642'}}
          {% elif time <= 11 %} Guten Tag {{'\U0001F60E'}}          
          {% elif time <= 13 %} Mahlzeit {{'\U0001F60A'}}
          {% elif time <= 18 %} Guten Tag {{'\U0001F60E'}}
          {% elif time <= 19 %} Guten Abend {{'\U0001F44B\U0001F3FB'}}
          {% elif time <= 22 %} Guten Abend {{'\U0001F60C'}}
          {% elif time <= 23 %} Guten Abend {{'\U0001F974'}}
          {% else %} Guten Abend {{'\U0001F974'}}
          {% endif %}
          </b>
        weather: >
            {% set temperature = states('sensor.openweathermap_feels_like_temperature') %}
            {% set temperaturemax = states('sensor.openweathermap_forecast_temperature') %}
            {% set temperaturecondition = states('weather.openweathermap') %}
            {% set apparent = states('sensor.openweathermap_feels_like_temperature') | round %}
            {% set precip = states('sensor.openweathermap_forecast_precipitation') | round %}
            {% if not is_state('sensor.openweathermap_temperature', 'unknown') %}
              {% if temperature | float(default=0) <= 0.0 %}
                {{ apparent }}° / {{ (temperaturemax) | round  }}° {% if precip | float(default=0) != 0 %} {{ precip }}% {{'\u2744\uFE0F'}} {% endif %}<br />{{ temperaturecondition }}
              {% elif temperature | float(default=0) > 0.0 %}
                {{ apparent}}° / {{ (temperaturemax) | round  }}° {% if precip | float(default=0) != 0 %}{{ precip }}% {{ '\u2614\uFE0F' if precip == 0 }}{% endif %}<br />{{ temperaturecondition }}
              {% endif %}
            {% else %}
              Kann die Wetterinformationen nicht lesen...
            {% endif %}
    - unique_id: sidebar
      state: template
      attributes:
        transport: >
          <br style="clear:both; height: 5px;">
          Work: {{ states('sensor.work') }}<br>
          VS Markt: {{ states('sensor.vsmarkt') }}<br>
          IT: {{ states('sensor.milano') }}<br>
          IRR: {{ states('sensor.irr') }}
        couldtakethebike: >
            {% set rain = states('sensor.openweathermap_forecast_precipitation') | round %}
            {% if rain <= 20 %}
              <div style='background:#333; color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:bike"></ha-icon></div>
            {% else %}
              <div style='background:rgb(139, 51, 51); color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 30px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:bicycle"></ha-icon></div>
              <div style='display:none;background:rgb(139, 51, 51); color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:bike-fast"></ha-icon></div>
            {% endif %}
          
        waste_collection: |
          <br style="clear:both;"><br>
          {%- set start_time = state_attr('calendar.ics', 'start_time') %}
          {%- set end_time = state_attr('calendar.ics', 'end_time') %}
          {%- set abfall = state_attr('calendar.ics', 'message') %}
          {%- if start_time != None %}
            {%- set time = as_timestamp(start_time) | timestamp_custom('%H:%M') %}
            {%- set time_end = as_timestamp(end_time) | timestamp_custom('%H:%M') %}
            {%- set hours = as_timestamp(start_time) | timestamp_custom('%H') | int(default=0) / 24 %}
            {%- set count = (as_timestamp(start_time) - as_timestamp(now())) / 86400 - hours %}
            <ha-icon icon="mdi:delete-empty" style="width:24px;"></ha-icon>
            {%- if count <= 0.0 %}
              <b>Heute ist {{ abfall | replace('Abfuhr: ', '') }}.</b>
            {% elif count <= 1.0 %}
              Morgen ist {{ abfall | replace('Abfuhr: ', '') }}.
            {%- else %}
              In {{ (count + hours) | round }} Tagen ist {{ abfall | replace('Abfuhr: ', '') }}. 
            {%- endif %}
          {%- endif %}           

        active: >
          {% set lights = [
            states.switch.shelly_shsw_l_84cca8a76843,
            states.switch.shelly_shsw_25_c45bbe75a525_1,
            states.switch.shelly_shsw_l_e8db84ab0fbf,
            states.switch.shelly_shsw_l_84cca8ae345e,
            states.switch.shelly_shsw_l_84cca8ad1f3d,
            states.switch.shelly_shsw_l_84cca8accb43,
            states.switch.shelly_shsw_25_c45bbe756dca_1,
            states.switch.shelly_shsw_l_8caab56187b6,
            states.light['0008da498fd781'],
            states.switch['00089be9a169b4']
          ] %}

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

          {% if (lights_on | length >= 1)  %}
            <div style='background:#C7983E; color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:lightbulb"></ha-icon></div>
          {% else %}
            <font color='#6a7377'></font>
          {% endif %}
        active2: >
          {% set devices = [
            states.switch.imac,
            states.media_player.the_frame,
            states.media_player.beam,
            states.media_player.terrasse,
            states.media_player.kinderzimmer,
            states.media_player.buro_2,
            states.media_player.buro,
            states.media_player.enigma,
            states.media_player.spotify
          ] %}

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


          {% if (devices_on | length >= 1)  %}
            <div style='background:#333; color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:speaker"></ha-icon></div>
          {% else %}
            <font color='#6a7377'></font>
          {% endif %}  
        window: >
          {% set window = [
            states.binary_sensor['burofenster_access_control_window_door_is_open'],
            states.binary_sensor['schlafzimmerre_access_control_window_door_is_open'],
            states.binary_sensor['schlafzimmerfensterli_access_control_window_door_is_open'],
            states.binary_sensor['kinderzimmerfenster_access_control_window_door_is_open_2'],
            states.binary_sensor['wcfenster_access_control_window_door_is_open'],
            states.binary_sensor['0000dd89b24e98_state'],
            states.binary_sensor['0000dd89b23193_state'],
            states.binary_sensor['0000dd89b24284_state']
          ] %}
          {% set window_on = window | selectattr('state','search','(on)') | list %}
          {% set window_name = window_on | map(attribute='name') | join(', ') %}

          {% if (window_on | length == 0) %}
            {{ window_name | regex_replace(',([^,]*)$',' och\\1') }}
          {% elif (window_on | length >= 1) %}
            <div style='background:rgb(139, 51, 51); color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:door-open"></ha-icon></div>
            <p style="display:none">{{ window_name }}</p>
          {% else %}
            <font color='#6a7377'>Alles zu</font>
          {% endif %}

        switch: >
          {% set switch = [
            states.switch.shelly_shsw_25_c45bbe756dca_2,
            states.binary_sensor['meine_waschmaschine'],
            states.sensor['geschirrspuler_status'],
            states.fan.pure_cool_link,
            states.binary_sensor['meq1007743_1'],
            states.switch.ikea_of_sweden_tradfri_control_outlet_27804cfe_on_off
          ] %}
          {% set switches_on = switch | selectattr('state','search','(on|In Betrieb|cool|fan_only|playing)') | list %}
          {% set switches_name = switches_on | map(attribute='name') | join(', ') %}

          {% if (switches_on | length == 0) %}
            <div style='display:none;background:olive; color: #fff; padding: 10px; width: 100px;text-align:center; border-radius: 10px;'>Aus</div>
            {{ switches_name | regex_replace(',([^,]*)$',' och\\1') }}
          {% elif (switches_on | length >= 1) %}
            <div style='background:#666; color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:power-plug"></ha-icon></div>
            <p style="display:none">{{ switches_name }}</p>
          {% else %}
            <font color='#6a7377'>Alles aus</font>
          {% endif %}

        persons: >
          {% set persons = [
            states.person.caroline,
            states.person.sascha
          ] %}

          {% set persons_on = persons | selectattr('state','search','(on|home)') | list %}
          {% set persons_name = persons_on | map(attribute='name') | join(', ') %}

          {% if (persons_on | length == 1)  %}
            <div style='background:olive; color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:account"></ha-icon></div>
          {% elif (persons_on | length == 2) %}
            <div style='background:olive; color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:account-multiple"></ha-icon></div>
          {% elif (persons_on | length >= 3) %}
            <div style='background:olive; color: #fff;padding:7px;width:25px;height:25px;margin:0 5px 5px 0;text-align:center; border-radius: 50%;float:left;'><ha-icon icon="mdi:account-group"></ha-icon></div>
         {% else %}
            
          {% endif %} 

[saschar (Sascha)]

THANKS for you help – It works but the Persons are not aligned to the other templates.

Sascha

[weaverprojects]

thank you… works great

[saschar (Sascha)]

How you implemented the birthdays?

Best
Sascha

[weaverprojects]

it’s a google calendar and that’s the code…

birthdays: >
            {%- set start_time = state_attr('calendar.geburtstage', 'start_time') %}
            {%- set end_time = state_attr('calendar.geburtstage', 'end_time') %}
            {%- set geburtstag = state_attr('calendar.geburtstage', 'message') %}
            {%- if start_time != None %}
              {%- set time = as_timestamp(start_time) | timestamp_custom('%H:%M') %}
              {%- set time_end = as_timestamp(end_time) | timestamp_custom('%H:%M') %}
              {%- set hours = as_timestamp(start_time) | timestamp_custom('%H') | int(default=0) / 24 %}
              {%- set count = (as_timestamp(start_time) - as_timestamp(now())) / 86400 - hours %}
            
              {%- if count <= 0.0 %}
                <b>Heute hat {{ geburtstag }}</b> {{'🎉'}}
              {% elif count <= 1.0 %}
                Morgen hat {{ geburtstag }} {{'🎂'}}
              {%- else %}
                In {{ (count + hours) | round }} Tagen hat 
                {{ geburtstag }} {{'🎂'}}
              {%- endif %}
            {%- endif %}

[saschar (Sascha)]

Thanks … will try …

[weaverprojects]

you’re welcome

[saschar (Sascha)]

Hej. Does that work on your side? If I try that, the button on the dashboard will always have a ON state.

For demonstration I’ve two cards, the left is the normal “light”-button it toggle the shelly switch and the right button has the entity of the bulb and as a tap-action the shelly.

If I switch the light on – both are state on.

If I click again the left one has the OFF state and the right one has the on state from the bulb.

The tap on the right works, so if I click the it will controll the shelly, but the state of the button is the IKEA bulb.

Any Idea?

Best
Sascha