i cant make lovelace work, can someone can make a tutorial how to start with the lovelace feature?
https://developers.home-assistant.io/docs/en/lovelace_index.html
- Create a yaml file
<config>/ui-lovelace.yaml - Insert new interface configuration (you have to start from scratch, like rewriting your “groups.yaml” file with the new structure)
- go to
http://<homeassistant-ip>:8123/lovelaceand start tinkering.
Not sure if you saw this from the release, but this has some great examples as well
Moved docs to: https://home-assistant.io/lovelace
Update: Change URL to official docs that now have the same content
there’s any way to add lovelace as a panel_custom on the sidebar?
There will be in 0.73 a way to use overview for it: https://github.com/ciotlosm/docs-lovelace/tree/0.73.0#overview-binding
Update: Starting with 0.73.1 you will get Lovelace as Overview when setting it as default in dev-info panel
what I dont seem to understand is the premise of input.boolean. The docs say to add entries to your conifg.yaml. so does that mean for every entity I want in my UI I need an input.boolean entry in the lovelace.yaml and config.yamil? What am I not understanding here? Thanks.
-end user dummy
Nope, that is only for demonstration purpose. You don’t need to change your configuration.yaml, but you have to add your entities in the lovelace.yaml file. Think of it as an analogous of your current groups.yaml file.
totally. that makes sense. dont understand why that instruction is there
Noticed you’re managing the github - any idea why when navigating to ha.url:8123/lovelace I get a 404: not found error now? Any help is appreciated!
Figured this out, cannot add an iframe for lovelace or it will fail to load
question regarding the picture elements card. is there a limit on image size? Resolution? Does it resize it? Thanks
playing with it
1 Like
Could anybody tell me how to format my yaml, to have some of this appear on the same page.
I can’t seem to figure it out.
title: Maxim House
resources:
- url: /local/custom_ui/dark-sky-weather-card.js?v=6
type: js
- url: /local/custom_ui/plan-coordinates.js
type: js
- url: /local/custom_ui/bignumber_card.js
type: js
- url: /local/kiosk.js
type: js
background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
#excluded_entities:
views:
- title: Floor Plan
background: radial-gradient(crimson, skyblue)
panel: true
theme: dark-mode
cards:
- type: vertical-stack
cards:
- type: custom:bignumber-card
entity: sensor.time
scale: 40px
- type: custom:bignumber-card
entity: sensor.date
scale: 20px
- type: custom:plan-coordinates
- type: picture-elements
image: /local/floorplan/house.png
elements:
- type: state-icon
entity: light.cabinet
tap_action: toggle
style:
top: 37%
left: 50%
- type: state-icon
entity: switch.flower_lamp
tap_action: toggle
style:
top: 58%
left: 36%
- type: state-icon
entity: group.kitchen_ceiling_lights
tap_action: toggle
style:
top: 45%
left: 41.5%
- type: state-icon
entity: input_boolean.fireplace
tap_action: toggle
style:
top: 41%
left: 15%
- type: state-icon
entity: input_boolean.television
tap_action: toggle
style:
top: 72%
left: 34%
- type: state-icon
entity: light.floor_lamp
tap_action: toggle
style:
top: 87%
left: 56%
- type: state-icon
entity: light.hallway
tap_action: toggle
style:
top: 56%
left: 65%
- type: state-icon
entity: light.hue_g
tap_action: toggle
style:
top: 27%
left: 16%
- type: state-icon
entity: light.hue_iris
tap_action: toggle
style:
top: 92%
left: 34%
- type: state-icon
entity: sensor.dark_sky_temperature
tap_action: state-label
style:
top: 7%
left: 25%
- type: state-icon
entity: switch.dining_room_fan
tap_action: toggle
style:
top: 34%
left: 21%
- type: state-icon
entity: switch.living_room_fan
tap_action: toggle
style:
top: 72%
left: 47%
- type: state-icon
entity: light.backyard
tap_action: toggle
style:
top: 13%
left: 41%
- type: state-icon
entity: light.bathroom
tap_action: toggle
style:
top: 33%
left: 59%
- type: state-icon
entity: light.bed_lamp_2
tap_action: toggle
style:
top: 28%
left: 87%
- type: state-icon
entity: light.bed_lamp_1
tap_action: toggle
style:
top: 50%
left: 87%
- type: state-icon
entity: light.bed_lamp_2
tap_action: toggle
style:
top: 75%
left: 86%
- type: state-icon
entity: light.cj_floor_lamp
tap_action: toggle
style:
top: 66%
left: 70%
- type: state-icon
entity: light.dimmer_dining_room
tap_action: toggle
style:
top: 51%
left: 36%
- type: state-icon
entity: light.hutch
tap_action: toggle
style:
top: 88%
left: 35%
- type: state-label
entity: sensor.living_room_thermostat_temperature
tap_action: toggle
style:
top: 53%
left: 57%
- title: TV
cards:
- type: entities
entities:
- input_select.tv_inputs
- input_select.tv_channels
- input_select.digital_frame
- media_player.fire_speaker
- type: picture-entity
entity: input_boolean.television
tap_action: toggle
image: /local/icons/tv.jpg
state_image:
'on': /local/icons/tv.jpg
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: custom:bignumber-card
entity: sensor.time
- type: custom:bignumber-card
entity: sensor.date
- title: Weather
cards:
- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_daily_summary
entity_current_conditions: sensor.dark_sky_icon
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_temperature: sensor.dark_sky_temperature
entity_visibility: sensor.dark_sky_visibility
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.dark_sky_wind_speed
entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
entity_forecast_icon_1: sensor.dark_sky_icon_1
entity_forecast_icon_2: sensor.dark_sky_icon_2
entity_forecast_icon_3: sensor.dark_sky_icon_3
entity_forecast_icon_4: sensor.dark_sky_icon_4
entity_forecast_icon_5: sensor.dark_sky_icon_5
- title: At Home
panel: true
cards:
- type: horizontal-stack
cards:
- type: picture-entity
entity: binary_sensor.corey_home
tap_action: toggle
image: /local/icons/corey.png
state_image:
'on': /local/icons/corey.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.wendy_home
tap_action: toggle
image: /local/icons/wendy.png
state_image:
'on': /local/icons/wendy.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.cameron_home
tap_action: toggle
image: /local/icons/cameron.png
state_image:
'on': /local/icons/cameron.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.morgan_home
tap_action: toggle
image: /local/icons/morgan.png
state_image:
'on': /local/icons/morgan.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.courtney_home
tap_action: toggle
image: /local/icons/courtney.png
state_image:
'on': /local/icons/courtney.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.mom_home
tap_action: toggle
image: /local/icons/mom.png
state_image:
'on': /local/icons/mom.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- title: Guests
cards:
- type: horizontal-stack
cards:
- type: picture-entity
entity: binary_sensor.jasmine_home
tap_action: toggle
image: /local/icons/jasmine.png
state_image:
'on': /local/icons/jasmine.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.brandon_home
tap_action: toggle
image: /local/icons/brandon.png
state_image:
'on': /local/icons/brandon.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.andy_home
tap_action: toggle
image: /local/icons/andy.png
state_image:
'on': /local/icons/andy.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- title: Home Security
cards:
- type: entities
show_header_toggle: false
entities:
- binary_sensor.door_window_sensor_158d000227976c
- binary_sensor.motion_sensor_158d0002227665what do you mean some of this. you posted a huge yaml file.
I don’t need it all just want to know how to put anything together, it’s hard to find good examples to put things on one page. I have been trying for hours
maybe this and this.
- title: At Home
panel: true
cards:
- type: horizontal-stack
cards:
- type: picture-entity
entity: binary_sensor.corey_home
tap_action: toggle
image: /local/icons/corey.png
state_image:
'on': /local/icons/corey.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.wendy_home
tap_action: toggle
image: /local/icons/wendy.png
state_image:
'on': /local/icons/wendy.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.cameron_home
tap_action: toggle
image: /local/icons/cameron.png
state_image:
'on': /local/icons/cameron.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.morgan_home
tap_action: toggle
image: /local/icons/morgan.png
state_image:
'on': /local/icons/morgan.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.courtney_home
tap_action: toggle
image: /local/icons/courtney.png
state_image:
'on': /local/icons/courtney.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.mom_home
tap_action: toggle
image: /local/icons/mom.png
state_image:
'on': /local/icons/mom.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- title: Guests
cards:
- type: horizontal-stack
cards:
- type: picture-entity
entity: binary_sensor.jasmine_home
tap_action: toggle
image: /local/icons/jasmine.png
state_image:
'on': /local/icons/jasmine.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.brandon_home
tap_action: toggle
image: /local/icons/brandon.png
state_image:
'on': /local/icons/brandon.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
- type: picture-entity
entity: binary_sensor.andy_home
tap_action: toggle
image: /local/icons/andy.png
state_image:
'on': /local/icons/andy.png
state_filter:
'on': drop-shadow(-5px 0 10px gold)
'off': brightness(80%) saturate(0.8)
Maybe to show on one page, but be separated by people that live here and guests. And is there a way to get rid of the names at the bottom? On my phone the names take up a lot of space.
I mean, I have no clue what you are talking about because I can’t see your interface. If you want things on one page, then place them into a single view:
if you want to remove names on picture-entity cards, use the remove names attribute:
I’m having an issue where in hass.io, loading lovelace says “Error while loading this panel”.
It was working the other day, now it’s not. I’ve made no changes to my working lovelace config file.
HomeAssistant 0.75.1
Hass.io supervisor Version 123
1 Like
Update: On a whim I decided to remove my default_view group from groups.yaml, reloaded groups, and now lovelace is working again.
There was only 1 breaking change in 0.75. The discord chat server has link to the changes. It had to do with entity card I believe.
Is there a way to combine filters or conditions with picture element? I want a page with a background that shows things that are on, open, home etc.
Or maybe make the cards transparent and the image can be a background?
Thanks