A different take on designing a Lovelace UI

Share your Projects!
2031

The sidebar is able to show specific entites like battery ones.

        battery: |
          {% set entities = [
            'sensor.bad_fenster_links_batterie',
            'sensor.bad_heizung_batterie',
            'sensor.bad_temperatursensor_batterie', ] %}
          {%- for sensor in entities if states(sensor) | int(0) <= 30 and states(sensor) != 'unknown' %}
            {%- if loop.first %} {{-'\u26A0\uFE0F'}} Batteriealarm: {% else %}, {% endif -%}
            {{ state_attr(sensor, 'friendly_name') + ' ' +  states(sensor) + '%' }}
          {%- endfor %}

But I have to add every entitiy manually. Is there a way to add a template-name? All my battery entites end up with “_batterie”.

1 Like
2032

How many batteries do you have? :joy:

2 Likes
2033

From my old setup:

image
image790×1708 59 KB

:grimacing:

Easy way to keep track of all batteries, and which ones to keep in stock :slight_smile:

1 Like
2034

Do you need link the font folder in the configuration.yaml? And from the font.css it uses the file names SF-UI-Display-weight.otf, but I think Apple changed the file names to SF-Pro-Display-weight.otf

2035

hey there,

I am pretty sure I didn’t change anything by intention. But i do have problems with the color of the sidebar bottom buttons…

EDIT: It was already working before

themes.yaml:

          #conditional color
          "$hui-button-card:last-of-type$": |
            {% if is_state('binary_sensor.sidebar_update_color', 'on') %}

              ha-card, ha-icon {
                color: rgb(35, 78 ,106) !important;
                opacity: 1 !important;
                animation: update 1.5s ease-out infinite;
              }

              ha-card:hover {
                filter: brightness(130%);
                animation-play-state: paused;
              }

            {% endif %}

              @keyframes update {
                0% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1.08);
                }
                50% {
                  transform: scale(0.98);
                }
                55% {
                  transform: scale(1.02);
                }
                60% {
                  transform: scale(0.98);
                }
                100% {
                  transform: scale(1);
                }
              }

sidebar.sensor:
image

The animation is working, but not the color :confused: Any ideas, how to troubleshoot this?
image

Thanks in advance!

2036

How many? All! :rofl:

Thanks for the hint. It’s working for me. This was more because of forgetting to add a new sensor. But it also saves a few lines of code.

        battery: |
          {% set entities = states.sensor
          |selectattr("entity_id", "search", "batterie")
          |rejectattr("entity_id", "search", ".*indicator_led$")
          |map(attribute="entity_id")
          |list %}
          {%- for sensor in entities if states(sensor) | int(0) <= 30 and states(sensor) != 'unknown' %}
            {%- if loop.first %} {{-'\u26A0\uFE0F'}} Batteriealarm: {% else %}, {% endif -%}
            {{ state_attr(sensor, 'friendly_name') + ' ' +  states(sensor) + '%' }}
          {%- endfor %}
2037

You’re right, that is better :grin:

2038

ha-icon → ha-state-icon

1 Like
2039

Can you share the code for displaying the icons in one row?

2040

I just added additional "-button"s to the mattias grid.

type: vertical-stack
cards:
  - type: custom:button-card
    entity: sensor.template_sidebar
    template: sidebar_template
  - type: conditional
    conditions:
      - entity: timer.default
        state: active
    card:
      type: custom:button-card
      entity: timer.default
      template: laundry
  - type: grid
    cards:
      - type: button
        tap_action:
          action: call-service
          service: automation.toggle
          service_data:
            entity_id: automation.telegram_door_open
        entity: sensor.door_automation_status
        show_name: false
        show_state: false
        show_icon: true
      - type: button
        ...
      - type: button
        ...
      - type: button
        ...
      - type: button
2041

Hey @Mattias_Persson, is it possible to pair your buttoncard style with the slider-button-card from GitHub - mattieha/slider-button-card: A button card with integrated slider ?

2042

You can probably come close with slider-button-card#styles

EDIT:

or make your own… :sweat_smile:

type: custom:button-card
tap_action:
  slider: function
custom_fields:
  slider: >
    <input type="range">
2043

Screenshot 2021-11-11 at 19.16.21
Screenshot 2021-11-11 at 19.16.211920×1274 95.2 KB

I tried like you, but the icons doesn’t appear on the same line.

1 Like
2044

https://www.home-assistant.io/lovelace/grid/#columns

2045

@Mattias_Persson , I’m ashamed :see_no_evil:
But also I’m thankful because you give us, the beginners good advices!
Thank you very much!

2046

@Mattias_Persson why did you changed to apex-charts?

Do you have any additional benefits?

2047

Yes, just in the first example I used to use two template sensors adjusted with card mod over a mini graph card. Now it’s just a single apexcharts card :+1:

2048

:heart_eyes: Looks wonderful

Maybe when I have some spare time…

2049

I just got a fire HD 10 to complete my HA setup. Therefore I’m also integrating your tablet configuration.

The Entities Lovelace card says “wrong time format” :confused: Any hints on how to change the time format in a proper way? Thanks in advance :slight_smile:
image

    - unique_id: fullykiosk_last_app_start
      icon: mdi:update
      device_class: timestamp
      state: >
        {{ states('sensor.fire_tablet_last_app_start') | replace(' ','T') | replace('.','-') }}

EDIT: I tried to solve it by replacing 12.11.21 to 12-11-21 but it’s not enough. Probably need 2021-11-12

2050

Yeah, mine’s like that

1

strptime → timestamp_custom?

{% set time = '12-11-21 12:19:54' %}
{{ strptime(time, '%d-%m-%y %H:%M:%S') | timestamp_custom | replace(' ','T') }}
2 Likes