A different take on designing a Lovelace UI

Hey, yes on the latest version.

Which part errors for you? As mentioned above, happy to share my code.

@weaverprojects @djoaza

This is an extract from my includes/templates.yaml

- 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 != null %}
        {% set days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] %}
        {% set months = ['January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', '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 %} Good night {{'\U0001F611'}}
        {% elif time <= 3 %} Good night {{'\U0001F62A'}}
        {% elif time <= 5 %} Good night {{'\U0001F634'}}
        {% elif time <= 7 %} Good morning {{'\U0001F4A9'}}
        {% elif time <= 9 %} Good morning {{'\u2615\uFE0F'}}
        {% elif time <= 10 %} Good morning {{'\U0001F642'}}
        {% elif time <= 13 %} Good afternoon {{'\U0001F60A'}}
        {% elif time <= 15 %} Good afternoon {{'\U0001F60E'}}
        {% elif time <= 17 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
        {% elif time <= 19 %} Good evening {{'\U0001F44B\U0001F3FB'}}
        {% elif time <= 22 %} Good evening {{'\U0001F60C'}}
        {% elif time <= 23 %} Good evening {{'\U0001F974'}}
        {% else %} Good evening {{'\U0001F974'}}
        {% endif %}
        </b>
      active: >
        <b>
        {% set lights = [
          states.light.living_room_light,
          states.light.bedroom_light,
          states.light.REDACTED_light,
          states.light.girls_light,
          states.light.pickaxe,
          states.light.office_leds,
          states.light.REDACTED_leds,
          states.light.status_light,
          states.switch.alfie_lamp,
          states.switch.floor_lamp,
          states.switch.kitchen_light,
          states.switch.basking_lamp
        ] %}
        {% set switches = [
          states.switch.basking_lamp
        ] %}
        {% set media_players = [
          states.media_player.bedroom_tv,
          states.media_player.virgin_tv
        ] %}
        {% set lights_on = lights | selectattr('state','eq','on') | list %}
        {% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}

        {% set switches_on = switches | selectattr('state','eq','on') | list %}
        {% set media_players_playing = media_players | selectattr('state','eq','playing') | list %}
        {% set append = switches_on + media_players_playing %}
        {% set switches_name = append | map(attribute='name') | join(', ') %}

        {% if (lights_on | length == 0) and (switches_on | length > 0) %}
          {{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} are on

        {% elif (lights_on | length == 1) and (switches_on | length == 1) %}
          {{ lights_name }}, {{switches_name }} are on

        {% elif (lights_on | length == 1) and (switches_on | length > 1) %}
          {{ lights_name }}, {{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} are on

        {% elif (lights_on | length > 1) and (switches_on | length == 1) %}
          {{ lights_on | length }} lights and {{ switches_name }} are on

        {% elif (lights_on | length > 1) and (switches_on | length > 1) %}
          {{ lights_on | length }} lights, {{ switches_name | regex_replace(',([^,]*)$',' and\\1') }} are on

        {% elif (lights_on | length == 1) and (switches_on | length == 0) %}
          {{ lights_name }} are on

        {% elif (lights_on | length > 1) and (switches_on | length == 0) %}
          {{ lights_on | length }} lights are on
          
        {% else %}
          <font color='#6a7377'>Everything is off</font>
        {% endif %}
        </b>
      weather: >
        {% set temperature = states('sensor.openweathermap_temperature') %}
        {% set apparent = states('sensor.openweathermap_feels_like_temperature') | round %}
        {% set precip = states('sensor.openweathermap_forecast_precipitation_probability') | round %}
        {% if not is_state('sensor.openweathermap_temperature', 'unknown') %}
          {% if temperature | float(default=0) <= 0.0 %}
            Feels like {{ apparent }}° with {{ precip }}% risk of snow {{'\u2744\uFE0F'}}
          {% elif temperature | float(default=0) > 0.0 %}
            Feels like {{ apparent}}° with {{ precip }}% risk of rain {{ '\u2614\uFE0F' if precip > 30 }}
          {% endif %}
        {% else %}
          Unable to load weather information ...
        {% endif %}
      transport: >
        Commute to work is {{ states('sensor.commute_to_work') }} mins
      battery: >
        {% set entities = states.sensor
          | selectattr('entity_id', 'search', 'level')
          | rejectattr('entity_id', 'search', 'REDACTED')
          | map(attribute = 'entity_id') | list %}
        {% for sensor in entities if states(sensor) != 'unknown' and states(sensor) !=
        'unavailable' and states(sensor) != 'None' and states(sensor) | int(default=0) <= 20 %}
          {% if loop.first %} {{'\u26A0\uFE0F'}} {% else %}| {% endif %}
          {{ state_attr(sensor, 'friendly_name') }} {{ states(sensor) }}%
        {% endfor %}
      internet: >
        {% if is_state('binary_sensor.archer_ax11000_wan_status', 'off') %}
          {{'\u26A0\uFE0F'}} Check Internet Access
        {% endif %}

  - unique_id: hass_version
    state: >
      {{ 'Latest' if states('sensor.template_hass_version') ==
      states('sensor.template_hass_version') else states('sensor.template_hass_version') }}
    attributes:
      friendly_name: >
        Installed {{ states('sensor.template_hass_version') }}
      icon: mdi:home-assistant

  - unique_id: hass_dev_release
    state: >
      {% set start_time = state_attr('calendar.home_assistant_devs', 'start_time') %}
      {{ (as_timestamp(start_time, default=0) + 60*60*20.5) | timestamp_local(default) }}
    attributes:
      friendly_name: >
        {% set release = state_attr('calendar.home_assistant_devs','message') %}
        {% if release == 'Home Assistant Core Beta Release' %}
          Next beta
        {% elif release == 'Home Assistant Core Release' %}
          Next release
        {% else %}
          {{ release }}
        {% endif %}
      icon: mdi:dev-to
      device_class: timestamp

I’m interested in the popup / footer / update.yaml file

This is my current popup/footer/updater.yaml

action: fire-dom-event
browser_mod:
  command: popup
  title: Updates
  style:
    .: |
      :host .content {
        width: 100%;
      }
    hui-grid-card:
      $: |
        button-card:nth-child(2),
        button-card:nth-child(4) {
          margin: 0.6em 0 2.1em 0.8em;
        }
        button-card:nth-child(6) {
          margin: 0.6em 0 0.5em 0.8em;
        }
        #root {
          grid-gap: 0 !important;
          padding: var(--card-content-padding);
          width: max-content;
        }
  card:
    type: grid
    columns: 1
    square: false
    cards:
      - type: custom:button-card
        entity: sensor.template_hass_version
        template: updater_hass

      - type: custom:button-card
        entity: sensor.template_hass_version
        triggers_update:
          - sensor.template_hass_version
          - sensor.template_hass_dev_version
        name: Update HASS
        icon: mdi:update
        styles:
          card:
            - width: max-content
            - filter: >
                [[[
                  return `[[[
                    if (entity) {
                      return entity.state === states['sensor.template_hass_version'].state ||
                        entity.state === states['sensor.template_hass_dev_version'].state
                          ? 'opacity(30%)'
                          : 'drop-shadow(3px 3px 5px #00000050)';
                    }
                  ]]]`
                ]]]
            - display: >
                [[[
                  return `[[[
                    return entity
                      ? 'flex'
                      : 'none';
                  ]]]`
                ]]]
        tap_action:
          services: |
            [[[
              return `[[[
                hass.callService('browser_mod', 'toast', {
                  message: 'Start watchtower...'
                });
                hass.callService('switch', 'turn_on', {
                  entity_id: 'switch.docker_watchtower'
                });
              ]]]`
            ]]]
        template: icon_name

      - type: custom:button-card
        entity: sensor.hacs
        template: updater_hacs

      - type: custom:button-card
        entity: sensor.hacs
        name: Open HACS
        icon: mdi:open-in-new
        styles:
          card:
            - width: max-content
            - filter: >
                [[[
                  return `[[[
                    if (entity) {
                      return entity.state === '0'
                        ? 'opacity(30%)'
                        : 'drop-shadow(3px 3px 5px #00000050)';
                    }
                  ]]]`
                ]]]
            - display: >
                [[[
                  return `[[[
                    return entity && entity.state !== 'unknown'
                      ? 'flex'
                      : 'none';
                  ]]]`
                ]]]
        template: >
          [[[
            return window.navigator.userAgent.match(/iPhone/i)
              ? 'hacs_navigate_ios'
              : 'hacs_iframe';
          ]]]

      # - type: custom:button-card
      #   entity: sensor.template_updates
      #   template: updater_other

Do you have switch.docker_watchtower ? It doesn’t work for me. I have a watchtower installed

how would i fix the scaling on the solarcard

      #################################################
      #                                               #
      #                     SOLAR                     #
      #                                               #
      #################################################
      - type: grid
        title: Solar & Power
        view_layout:
          grid-area: solar
        columns: 1
        cards:


          - type: 'custom:tesla-style-solar-power-card'


            generation_icon: 'mdi:solar-power'
            house_without_appliances_values: 1
            show_w_not_kw: 1
            show_gap: true

###Grid Power###
            grid_to_house_entity: sensor.solax_apf_grid2house
            grid_to_battery_entity: sensor.solax_apf_grid2batt
###Solar Power###
            generation_to_grid_entity: sensor.solax_apf_solar2grid
            generation_to_battery_entity: sensor.solax_apf_solar2batt
            generation_to_house_entity: sensor.solax_apf_solar2house
            
###Battery Power###
            battery_to_house_entity: sensor.solax_apf_batt2house
            battery_to_grid_entity: sensor.solax_apf_batt2grid
            grid_entity: sensor.solax_measured_power
            house_entity: sensor.solax_apf_real_house_load
            house_extra_entity: sensor.solax_inverter_temperature
            generation_entity: sensor.solax_pv_total_power_2
            generation_extra_entity: sensor.solax_apf_mode_short
            battery_entity: sensor.solax_battery_power_charge
            battery_extra_entity: sensor.solax_battery_capacity

            # extra values to show as text above icons
            #battery_extra_entity: sensor.solax_x1h_batpower
            
            generation_extra_entity: sensor.openweathermap_cloud_coverage
            grid_extra_entity: sensor.electric_cost_today
            
            # optional appliances with consumption and extra values
            appliance1_consumption_entity: sensor.psl_247045_current_energy_2
            appliance1_extra_entity: sensor.i3_120_remaining_battery_percent
            appliance2_consumption_entity: sensor.psl_247045_current_energy_2
            appliance2_extra_entity: sensor.i3_120_remaining_battery_percent
            appliance2_icon: 'mdi:car-sports'
            
            # optional 4 main bubble icons for clickable entities
            #grid_entity: sensor.smart_meter_electricity_import
            #house_entity: sensor.solax_house_load
            #generation_entity: sensor.solax_inverter_power
            #battery_entity: sensor.solax_x1h_batpower
                         
            
            
            
            template:
              - base
                    

No, unfortunately this is not something I am using atm

You don’t need to always use SVGs. Here’s an example on how to use just a simple icon:

chandelier_icon:
  styles:
    custom_fields:
      icon:
        - width: 78%
        - margin-left: -5%
        - color: >
            [[[ return variables.state === 'on' ? '#000000' : '#9da0a2'; ]]]
  custom_fields:
    icon: >
      <ha-icon icon="mdi:chandelier"></ha-icon>
1 Like

someone has a way to update HASS from the update.yaml panel?

hi @AlfieJ04 my sidebar is completely missing on the latest version. the code looks the same as yours.

I don’t know what to do anymore…

I had the same problem. When I put the system back, it works

put the system back means?

This is exactly what I was looking for! Thank you

Have you checked the ha log and tried developer tools on your dashboard to check for any errors?

If I remember correctly, there was an earlier post that mentioned about renaming the sidebar template temporarily and then changing it back

EDIT: Added link to post

I put the whole HA system up again

Did you fix it ? I am having the same Issue.
THX a lot

Without restoring any backup? That‘s a lot of work… :flushed:

It shows me such an error for sensor.hacs_installed. Any idea?

VERY useful!!! :slight_smile:

Thanks, everyone for the ideas, still in progress but I have something working quite ok now. Much better than the original Lovelace UI as it was completely cluttered. As I have lots of devices and many rooms, I used 6 cards to collapse devices (e.g. lights) under a popup for each room/area. Some devices have their own card and I still have 6 empty spots that I haven’t decided what to put.

Finally, I got rid of the Philips Hue bridge and moved ±20 lights to ZHA after I found out about Mushroom cards. ZHA is much faster and smoother. Mushroom cards are very neat and awesome to control RGB-CCT led strips and lights when you have so many of them, all other light cards did not stick to me. One on the top controls all lights in a group with the ability to adjust individual lights. Would be awesome to have the ability to save scenes and better WLED lights support.

5 Likes

hi guys,
I have a problem with the background and screen usage.
I am using a Fire HD 10 tablet from 2017. the screen has a resolution of 1920x1200 says the internet.
However, on the tablet, the footer is not displayed completely and you have to scroll down to see it.
I have already tested various resolutions of the background images.
Also “background-size: cover” or “background-size: contain” in the themes.yaml do not help.
Is there a setting in Fully Kiosk that I may have forgotten?