A different take on designing a Lovelace UI

Hi there

I have followed the instructions and restarted my HA. I get this error:

in "/config/ui-lovelace.yaml", line 141, column 15: Unable to read file /config/popup/vardagsrum_tv.yaml

Can you help please? thanks.

Hi,

Check if you have copied the popup directory from Matt’s repo to the config directory in your Home Assistant instance and if the file the error complains about is there, which should be the case if you have copied the entire directory recursively.

1 Like

I dont have it working, I do not use the update popup.

I didn’t have space for in my footer and I didn’t think the info was as useful as what I added.

But I know what the issue might be, A different take on designing a Lovelace UI - #4028 by masoncrawford1994

1 Like

Hi @Renator

I downloaded the popup directory from Matt’s repo as a zip, extracted it and literally dragged and dropped it in my HA directory. Is that incorrect?

That should work. As long as it is in the /config directory it should be able to find it.

ok got it working basically, the line in ui-lovelace.yaml should be !include popup/popup/vardagsrum_tv.yaml or just remove the preceding directory i.e. popup

quick question if I wanted to get rid and undo whatever I did and restore my original ui-lovelace, how do I do that?

I would remove the preceding pop-up directory, keep the structure simple

1 Like

you can use “standard” lovelace next to yaml-based dashboards like matt’s dashboard. Check this post and the preceeding and following posts around it.

1 Like

thanks will look into it

did you manage to resolve this? can you please share your config? thanks.

That did the trick, never would have thought to enable that. Thanks for the heads up.

1 Like

Hi, friend. The playstation card in my case appears but the background image is not visible. What part of the code could you review?
I don’t have the entity title_name
Thank you

image

Hello! This was originally designed for the ps5-mqtt integration. Which may or may not work with the PS4 (I’m not sure). If you were going to use a different integration, that integration would need to provide a title and a game image. It looks like instead of title_name your integration’s attribute is media_title for the game name, which means it’s using the standard conditional card, and not the additions I added. The trouble is that it doesn’t look like the integration provides an image.

The logic built into my additions is reliant on the game image being present. It could be swapped around, but there wouldn’t be much of a point since your playstation integration appears to use the standard media_player attributes.

Okay. I understand. Thank you so much. It only remains for me depending on the game to show an image saved in a folder. Thank you

Hi everybody,

I was wondering if there is a possibility to cast this dashboard to a Google Home Hub.

I succeed in casting, but this does not include the theme and the dashboard does not work properly.

is there a way to force the dashboard to have the “Tablet” theme?

Or another way to get this done?

try looking back at older post or searching in this thread, iv seen this asked a few times and each time the method to fix it was different.

1 Like

Hi

Quite new on HA (a Homey user) but using for setting up dashboards around the house and love this UI,

A question though, I have added a popup for on of the buttons to a ev charger card. I would like the button to light up when the car is connected.

I can not wrap my head around on how to do that. Any good ideas what I am doing wrong?

iu-lovelace.yaml:

          - type: custom:button-card
            entity: sensor.easee_home_38980_status
            name: Laddare
            tap_action:
             !include popup/utomhus_easee.yaml
            variables:
              state_on: >
                [[[ return ['Detecting', 'Washing', 'Rinsing', 'Completed'].indexOf(!entity || entity.state) !== -1; ]]]
            template:
              - base
              - icon_ev

popup/utomhus_easee.yaml:

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Laddare
    card_mod:
      style:
        #popup header
        .:
    content:
      type: vertical-stack
      cards:
        - type: custom:charger-card
          customCardTheme: theme_custom
          chargerImage: White
          brand: easee
          entity: sensor.easee_home_38980_status
          show_leds: true
          details:
            status:
              entity_id: sensor.easee_home_38980_status
            substatus:
              entity_id: sensor.easee_home_38980_status
            smartcharging:
              entity_id: switch.easee_home_38980_smart_charging
            currentlimits:
              - 0
              - 6
              - 10
              - 16
              - 20
              - 25
              - 32
            statetext:
              disconnected: Ej ansluten
              awaiting_start: Förbereder start
              charging: Laddar
              completed: Klar
              error: Fel!
              ready_to_charge: Redo för laddning
            collapsiblebuttons:
              group1:
                text: Hastighet
                icon: mdi:speedometer
              group2:
                text: Information
                icon: mdi:information
              group3:
                text: COG
                icon: mdi:cog
            info_left:
              - entity_id: binary_sensor.easee_home_38980_online
                text: Online
            info_right:
              - entity_id: sensor.easee_home_38980_voltage
                text: Volt
                unit_show: true
              - entity_id: sensor.easee_home_38980_power
                text: power
                unit_show: true
            group1:
              - entity_id: sensor.easee_home_38980_dynamic_charger_limit
                text: dyn_charger_limit
                service: easee.set_charger_dynamic_limit
                service_data:
                  charger_id: CHARGERID
                  current: '#SERVICEVAL#'
              - entity_id: sensor.easee_home_38980_dynamic_circuit_limit
                text: dyn_circuit_limit
                service: easee.set_charger_circuit_dynamic_limit
                service_data:
                  charger_id: CHARGERID
                  currentP1: '#SERVICEVAL#'
              - entity_id: sensor.easee_home_38980_max_charger_limit
                text: max_charger_limit
                service: easee.set_charger_max_limit
                service_data:
                  charger_id: CHARGERID
                  current: '#SERVICEVAL#'
              - entity_id: sensor.easee_home_38980_max_circuit_limit
                text: max_circuit_limit
                service: easee.set_circuit_max_limit
                service_data:
                  charger_id: CHARGERID
                  currentP1: '#SERVICEVAL#'
              - entity_id: sensor.easee_home_38980_offline_circuit_limit
                text: offline_circuit_limit
                service: easee.set_charger_circuit_offline_limit
                service_data:
                  charger_id: CHARGERID
                  currentP1: '#SERVICEVAL#'
            group2:
              - entity_id: binary_sensor.easee_home_38980_online
                text: online
              - entity_id: sensor.easee_home_38980_voltage
                text: voltage
                unit_show: true
              - entity_id: sensor.easee_home_38980_power
                text: power
                unit_show: true
              - entity_id: sensor.easee_home_38980_current
                text: charger_current
                unit_show: true
              - entity_id: sensor.easee_home_38980_circuit_current
                text: circuit_current
                unit_show: true
              - entity_id: sensor.easee_home_38980_energy_per_hour
                text: energy_per_hour
                unit_show: true
              - entity_id: sensor.easee_home_38980_session_energy
                text: session_energy
                unit_show: true
              - entity_id: sensor.easee_home_38980_lifetime_energy
                text: lifetime_energy
                unit_show: true
            group3:
              - entity_id: switch.easee_home_38980_is_enabled
                text: enabled
              - entity_id: switch.easee_home_38980_enable_idle_current
                text: idle_current
              - entity_id: binary_sensor.easee_home_38980_cable_locked
                text: cable_locked
              - entity_id: switch.easee_home_38980_cable_locked_permanently
                text: perm_cable_locked
              - entity_id: switch.easee_home_38980_smart_charging
                text: smart_charging
              - entity_id: sensor.easee_home_38980_cost_per_kwh
                text: cost_per_kwh
              - entity_id: binary_sensor.easee_home_38980_update_available
                text: update_available
              - entity_id: binary_sensor.easee_home_38980E_basic_schedule
                text: schedule
            stats:
              default:
                - entity_id: sensor.easee_home_38980_session_energy
                  text: Senaste session
                  unit_show: true
                - entity_id: switch.easee_home_38980_cable_locked_permanently
                  text: Kabel låst
                - entity_id: binary_sensor.easee_home_38980_basic_schedule
                  text: Schema
              disconnected:
                - entity_id: sensor.easee_home_38980_session_energy
                  text: Senaste session
                  unit_show: true
                - entity_id: switch.easee_home_38980_cable_locked_permanently
                  text: Kabel låst
                - entity_id: switch.easee_home_38980_smart_charging
                  text: Smart laddning
                  unit: A
                  unit_show: true
                  calc_function: min
                  calc_entities:
                    - entity_id: sensor.easee_home_38980_dynamic_charger_limit
                    - entity_id: sensor.easee_home_38980_dynamic_circuit_limit
                    - entity_id: sensor.easee_home_38980_max_charger_limit
                    - entity_id: sensor.easee_home_38980_max_circuit_limit
                    - entity_id: sensor.easee_home_38980_offline_circuit_limit
              awaiting_start:
                - entity_id: sensor.easee_home_38980_session_energy
                  text: Senaste session
                  unit_show: true
                - entity_id: binary_sensor.easee_home_38980_basic_schedule
                  text: Schema
                - entity_id: switch.easee_home_38980_smart_charging
                  text: Smart laddning
                - entity_id: calculated
                  text: used_limit
                  unit: A
                  unit_show: true
                  calc_function: min
                  calc_entities:
                    - entity_id: sensor.easee_home_38980_dynamic_charger_limit
                    - entity_id: sensor.easee_home_38980_dynamic_circuit_limit
                    - entity_id: sensor.easee_home_38980_max_charger_limit
                    - entity_id: sensor.easee_home_38980_max_circuit_limit
                    - entity_id: sensor.easee_home_38980_offline_circuit_limit
              charging:
                - entity_id: sensor.easee_home_38980_session_energy
                  text: Nuvarande session
                  unit_show: true
                - entity_id: sensor.easee_home_38980_energy_per_hour
                  text: per timma
                  unit_show: true
                - entity_id: sensor.easee_home_38980_circuit_current
                  text: circuit_current
                  unit_show: true
                - entity_id: sensor.easee_home_38980_output_limit
                  text: Begränsning
                  unit_show: true
                - entity_id: sensor.easee_home_38980_current
                  text: Spånning
                  unit_show: true
                - entity_id: sensor.easee_home_38980_power
                  text: Ström
                  unit_show: true
              completed:
                - entity_id: sensor.easee_home_38980_session_energy
                  text: Senaste session
                  unit_show: true
                - entity_id: binary_sensor.easee_home_38980_basic_schedule
                  text: Schema
                - entity_id: calculated
                  text: used_limit
                  unit: A
                  unit_show: true
                  calc_function: min
                  calc_entities:
                    - entity_id: sensor.easee_home_38980_dynamic_charger_limit
                    - entity_id: sensor.easee_home_38980_dynamic_circuit_limit
                    - entity_id: sensor.easee_home_38980_max_charger_limit
                    - entity_id: sensor.easee_home_38980_max_circuit_limit
                    - entity_id: sensor.easee_home_38980_offline_circuit_limit
              error:
                - entity_id: sensor.easee_home_38980_session_energy
                  text: Senaste session
                  unit_show: true
                - entity_id: binary_sensor.easee_home_38980_basic_schedule
                  text: Schema
              ready_to_charge:
                - entity_id: sensor.easee_home_38980_session_energy
                  text: Senaste session
                  unit_show: true
                - entity_id: binary_sensor.easee_home_38980_basic_schedule
                  text: Schema
                - entity_id: calculated
                  text: used_limit
                  unit: A
                  unit_show: true
                  calc_function: min
                  calc_entities:
                    - entity_id: sensor.easee_home_38980_dynamic_charger_limit
                    - entity_id: sensor.easee_home_38980_dynamic_circuit_limit
                    - entity_id: sensor.easee_home_38980_max_charger_limit
                    - entity_id: sensor.easee_home_38980_max_circuit_limit
                    - entity_id: sensor.easee_home_38980_offline_circuit_limit
            toolbar_left:
              default:
                - {}
              disconnected:
                - {}
              awaiting_start:
                - service: easee.stop
                  service_data:
                    charger_id: CHARGERID
                  text: stop
                  icon: hass:stop
                - service: easee.resume
                  service_data:
                    charger_id: CHARGERID
                  text: resume
                  icon: hass:play
                - service: easee.override_schedule
                  service_data:
                    charger_id: CHARGERID
                  text: override
                  icon: hass:motion-play
              charging:
                - service: easee.stop
                  service_data:
                    charger_id: CHARGERID
                  text: stop
                  icon: hass:stop
                - service: easee.pause
                  service_data:
                    charger_id: CHARGERID
                  text: pause
                  icon: hass:pause
              completed:
                - service: easee.stop
                  service_data:
                    charger_id: CHARGERID
                  text: stop
                  icon: hass:stop
                - service: easee.override_schedule
                  service_data:
                    charger_id: CHARGERID
                  text: override
                  icon: hass:motion-play
              error:
                - service: easee.reboot
                  service_data:
                    charger_id: CHARGERID
                  text: reboot
                  icon: hass:restart
              ready_to_charge:
                - service: easee.stop
                  service_data:
                    charger_id: CHARGERID
                  text: stop
                  icon: hass:stop
                - service: easee.override_schedule
                  service_data:
                    charger_id: CHARGERID
                  text: override
                  icon: hass:motion-play


template icon_ev:

    icon: >
      [[[
        let state = variables.state_on && variables.timeout < 2000 ? 'Awaiting start' : null;
        return `
          <svg viewBox="0 0 24 24">
            <style>
              @keyframes on {
                0% {
                  transform: scale(0.85);
                }
                20% {
                  transform: scale(1.1);
                }
                40% {
                  transform: scale(0.95);
                }
                60% {
                  transform: scale(1.03);
                }
                80% {
                  transform: scale(0.97);
                }
                100% {
                  transform: scale(1);
                }
              }
              .on {
                animation: on 0.8s;
                transform-origin: center;
              }
            </style>         
            <path class="${state} light-color" d="M19.77,7.23L19.78,7.22L16.06,3.5L15,4.56L17.11,6.67C16.17,7.03 15.5,7.93 15.5,9A2.5,2.5 0 0,0 18,11.5C18.36,11.5 18.69,11.42 19,11.29V18.5A1,1 0 0,1 18,19.5A1,1 0 0,1 17,18.5V14A2,2 0 0,0 15,12H14V5A2,2 0 0,0 12,3H6A2,2 0 0,0 4,5V21H14V13.5H15.5V18.5A2.5,2.5 0 0,0 18,21A2.5,2.5 0 0,0 20.5,18.5V9C20.5,8.31 20.22,7.68 19.77,7.23M18,10A1,1 0 0,1 17,9A1,1 0 0,1 18,8A1,1 0 0,1 19,9A1,1 0 0,1 18,10M8,18V13.5H6L10,6V11H12L8,18Z" />
         
         </svg>
        `;
      ]]]

For now I just set “Awaiting start” since the charger reports that before it enables the charging due to smart charging via Tibber

hi,

state_on is the correct thing to use in this case, with what you have, if the state of sensor.easee_home_38980_status is Detecting or Washing or Rinsing or Completed then the button will light up.

this is important.
You’ll have to look and see what the entity state is when it’s running vs when it’s off to figure out what states you should add.

1 Like

Thank you @masoncrawford1994 :+1:

Changed that variables in the base.yaml and removed from my section in ui.lovelace.yaml
Works fine now