I’m using HA 0.92.1
I’m trying to get a simple custom card work using the developer documentation: https://developers.home-assistant.io/docs/en/lovelace_custom_card.html
To be honest, I don’t have any clue about the correlation of all these settings. However… I have a ui-lovelace.yaml in my HA Config directory which looks like this:
root@raspberrypi:/home/tst/homeassistant# ll
total 253M
-rw-r--r-- 1 homeassistant homeassistant 4.0K Mar 6 16:28 automations.yaml
-rw-r----- 1 homeassistant homeassistant 6.0K Jul 8 14:35 configuration.yaml
-rw-r--r-- 1 homeassistant homeassistant 3.5K Apr 10 09:03 customize.yaml
drwxr-xr-x 2 homeassistant homeassistant 4.0K Feb 5 2018 deps
-rw-r--r-- 1 homeassistant homeassistant 3.4K Apr 2 11:47 groups.yaml
-rw-r--r-- 1 homeassistant homeassistant 11K Jul 8 15:12 home-assistant.log
-rw-r--r-- 1 homeassistant homeassistant 253M Jul 8 15:13 home-assistant_v2.db
-rw-r--r-- 1 homeassistant homeassistant 1.4K Jun 18 07:22 known_devices.yaml
-rw-r--r-- 1 homeassistant homeassistant 1.1K Feb 10 2018 options.xml
-rw-r--r-- 1 homeassistant homeassistant 63K Jul 8 15:13 OZW_Log.txt
-rw-r--r-- 1 homeassistant homeassistant 74 Apr 21 2018 phue-00178862b1b0.conf
-rw-r--r-- 1 homeassistant homeassistant 32K Feb 10 2018 pyozw.sqlite
-rw-r--r-- 1 homeassistant homeassistant 115 Sep 11 2018 scripts.yaml
-rw-r--r-- 1 homeassistant homeassistant 157 Feb 5 2018 secrets.yaml
drwxr-xr-x 2 homeassistant homeassistant 4.0K Feb 5 19:50 themes
drwxr-xr-x 2 homeassistant homeassistant 4.0K Feb 5 2018 tts
-rw-r--r-- 1 homeassistant homeassistant 292 Jul 8 15:09 ui-lovelace.yaml
drwxr-xr-x 2 homeassistant homeassistant 4.0K Jul 8 14:54 www
-rw-r--r-- 1 homeassistant homeassistant 14K Jul 8 14:36 zwcfg_0xeef58bf4.xml
-rw-r--r-- 1 homeassistant homeassistant 108 Jul 8 14:36 zwscene.xml
root@raspberrypi:/home/tst/homeassistant# ls www/ -l
total 184
-rw-r--r-- 1 homeassistant homeassistant 97047 Jul 8 14:08 button-card.js
-rw-r--r-- 1 homeassistant homeassistant 1029 Apr 2 11:06 content-card-example.js
-rw-r--r-- 1 homeassistant homeassistant 83459 Jul 8 12:15 mini-media-player-bundle.js
root@raspberrypi:/home/tst/homeassistant# cat ui-lovelace.yaml
resources:
- url: /local/content-card-example.js
type: js
- url: /local/button-card.js
type: module
- url: /local/mini-media-player-bundle.js?v=1.2.2
type: module
My configuration.yaml contains only
lovelace:
Ist that right? Or do i have to set:
lovelace:
mode: yaml
If I do so, all of my “legacy” cards are disappearing???
If i go to the UI trying to add a manual card i only get:
I have tried many variations, the main problem is, that I have not found any kind of “migration guide” which explains how those configurations are working toghether. Any help is very much appreciated.
Are you trying to create a custom card to be used in your set up or are you just trying to use a custom card that already exists and was created by someone else?
Do you manage the lovelace frontend by using the UI or are you wanting to configure your frontend via a yaml file?
My setup is almost 2 years old,… I just want to add a custom card to the existing configuration, perferable via the UI. A custom card has never been added before. The configuration of the existing UI is done via the “old way” by using the configuration yaml, groups.yaml, customize.yaml and so on.
to use the yaml card you need this:
lovelace:
mode: yaml
Thanks, I’ve already tried that… but after doing so all of my “legacy” cards disappear - and it also seems not to work.
If I use this configuration in “ui-lovelace.yaml”:
resources:
- url: /local/content-card-example.js
type: js
- url: /local/button-card.js
type: module
- url: /local/mini-media-player-bundle.js?v=1.2.2
type: module
views:
- name: Example
cards:
- type: "custom:content-card-example"
entity: input_boolean.switch_tv
- type: custom:mini-media-player
entity: media_player.example
icon: mdi:spotify
artwork: cover
hide:
volume: true
source: true
power_state: false
I only see this:
Would i would like to approach is: Add a custom card to the existing configuration via the UI without having to reconfigure everything from scratch. Is that possible?
ludeeus
July 9, 2019, 6:48am
6
Remove that YAML mode from config, restart HA.
it is… remove the whole lovelace: section and restart Home Assistant. Then click 3 dots top right of main window and configure UI and take control when prompted. Then click 3 dots again and cut/paste the yaml file into there and save.
Note everything under views: has the wrong indenting…
Here is the top of my lovelace:
title: Home
resources:
- url: /community_plugin/lovelace-card-tools/card-tools.js
type: js
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
views:
- title: Home Assistant
icon: mdi:home-assistant
cards:
- type: vertical-stack
cards:
Ok, than I’m perfectly confused now, I got this snipped from the developer documentation? https://developers.home-assistant.io/docs/en/lovelace_custom_card.html
See section “Referencing your new card”
However, both ways are not working for me
They will all need the ?v= bit on them. Have you actually downloaded the card? Have you tried adding a card in the GUI?
tom-x1
July 9, 2019, 7:25am
10
Yes, I’ve downloaded and stored them into the www folder (see first post). There is nothing described in the developer documentation about an URL parameter for “content-card-example.js”?
Adding the card in the GUI is what I’m trying to do. I don’t really understand the question cause you can see that I’m posting screenshots of the UI editor? Let’s try to keep things simple, this is the 1:1 example from the developer documentation - so whats wrong here:
ludeeus
July 9, 2019, 7:27am
11
“No card type found” == you are missing type: "custom:content-card-example" in your card config.
tom-x1
July 9, 2019, 7:31am
12
I don’t understand? Did you take a look at my last screenshot. Line 7:
- type: "custom:content-card-example"
ludeeus
July 9, 2019, 7:34am
14
No…
You are trying to paste your entire lovelace config in a card configuration, don’t do that
Go to the menu at the top right, then select raw editor and paste the same thing there.
1 Like
tom-x1
July 9, 2019, 7:52am
15
You are trying to paste your entire lovelace config in a card configuration, don’t do that
Go to the menu at the top right, then select raw editor and paste the same thing there.
Halleluja, I think this was the key hint i needed.
title: Home
resources:
- url: /local/content-card-example.js
type: js
views:
- icon: 'mdi:home'
badges: []
panel: false
title: default_view
cards:
- entities:
- entity: sensor.temperature_158d00020267ed
- entity: sensor.humidity_158d00020267ed
- entity: sensor.illumination_158d0001e52526
- entity: binary_sensor.door_window_sensor_158d0001bb5353
- entity: binary_sensor.motion_sensor_158d0001e52526
- entity: switch.outdoorsteckdose
- entity: light.stiegenhaus_eg
- entity: light.veranda_eg
- entity: sensor.yr_symbol
- entity: sensor.feinstaub_pm10
- entity: sensor.feinstaub_pm2_5
- entity: input_select.camera_position
show_header_toggle: false
type: entities
title: Außen bzw. Eingang
- entity: camera.ipcam_ptz
type: picture-entity
- entity: camera.ipcam_eingang
type: picture-entity
- name: Letzte Bewegung
entity: camera.letzte_bewegung_img
type: picture-entity
- entities:
- sensor.pufferladestand
- sensor.abgastemperatur
- sensor.restsauerstoff
- sensor.warmwasserstatus
- sensor.brennerstatus
- sensor.tankinhalt
- sensor.tagesverbrauch
- sensor.vollaststunden_brenner
- sensor.vollaststunden_holzofen
show_header_toggle: false
type: entities
title: Heizung
- entities:
- entity: sensor.temperature_158d0001c2c180
- entity: sensor.fibaro_multisensor_temperature
- entity: sensor.humidity_158d0001c2c180
- entity: sensor.fibaro_multisensor_luminance
- entity: binary_sensor.motion_sensor_158d0001e51636
- entity: light.vorhaus_eg
show_header_toggle: false
type: entities
title: Erdgeschoss
- entities:
- entity: binary_sensor.motion_sensor_158d0001e574d7
- entity: sensor.illumination_158d0001e574d7
- entity: sensor.temperature_158d0001c14f15
- entity: sensor.humidity_158d0001c14f15
- entity: light.stiegenhaus_1_stock
- entity: sensor.temperature_158d0001c2cff9
- entity: sensor.humidity_158d0001c2cff9
show_header_toggle: false
type: entities
title: 1. Stock
- entities:
- entity: sensor.temperature_158d0001c2c204
- entity: sensor.temperature_158d0001c2c17d
- entity: sensor.temperature_158d0001c2c1fb
- entity: sensor.temperature_158d0001c1a650
- entity: sensor.humidity_158d0001c2c204
- entity: sensor.humidity_158d0001c2c17d
- entity: sensor.humidity_158d0001c2c1fb
- entity: sensor.humidity_158d0001c1a650
- entity: binary_sensor.door_window_sensor_158d0001c31217
- entity: binary_sensor.motion_sensor_158d0001e522a4
- entity: sensor.illumination_158d0001e522a4
show_header_toggle: false
type: entities
title: 2. Stock
path: default_view
- title: Monitoring
cards:
- entities:
- device_tracker.pc192168029
- device_tracker.etaheizung
- device_tracker.pc1921680150
- device_tracker.pc1921680141
- device_tracker.pc1921680124
- device_tracker.pc1921680121
- device_tracker.laptopgdn96oba
- device_tracker.pc192168015
- device_tracker.pc8c2505318888
- device_tracker.pc020fb53d16b9
- device_tracker.danielas_iphone
- device_tracker.pc192168023
- device_tracker.pc192168025_2
- device_tracker.pc1921680109
- device_tracker.laptopmama
- device_tracker.pc192168016
- device_tracker.fritzbox
- device_tracker.pcc67154e78862
- device_tracker.pc192168027
- device_tracker.pc192168024
- device_tracker.pc1921680115
- device_tracker.pcac63bea4a037
- device_tracker.pc1921680122
- device_tracker.pc19216805
- device_tracker.pc192168011_2
- device_tracker.pc192168030_2
- device_tracker.pc020fb5179811
- device_tracker.pc192168018
- device_tracker.pc020fb54e6632
- device_tracker.pc020fb562b1b0
- device_tracker.raspberrypi
- device_tracker.pc1921680142
- device_tracker.braviakdl42w805b
- device_tracker.pc192168028
- device_tracker.laptopdaniela
- device_tracker.pc020fb5253b03
- device_tracker.pc192168027_2
- device_tracker.pc020fb5442b18
- device_tracker.pc1921680145
- device_tracker.pc1921680150_2
- device_tracker.thomass_iphone
- device_tracker.pc192168019
- device_tracker.pc192168044
- device_tracker.pc1921680116
- device_tracker.pc1921680144
- device_tracker.pc192168030
- device_tracker.lumigatewayv3_miio78529795
- device_tracker.pc020000276632
- device_tracker.pc192168011
- device_tracker.iphone
- device_tracker.raspberry
- device_tracker.pc1921680109_2
- device_tracker.40es500series
- device_tracker.pc19216802
- device_tracker.pc020fb55ae4cc
- device_tracker.pc192168029_2
- device_tracker.pc020fb5d0cb04
- device_tracker.pc1921680112
- device_tracker.nicthomass
- device_tracker.pc020fb59aae5a
- device_tracker.pc1921680123
- device_tracker.pc192168026
- device_tracker.pc192168025
- device_tracker.pcc671540cba8d
- device_tracker.pc68c63a953da3
- device_tracker.danielasipad
- device_tracker.pc020fb5b7352a
- device_tracker.pc1921680254
- device_tracker.pc1921680113
- device_tracker.pcc671541cba8e
- device_tracker.40es500series_2
- device_tracker.pc020fb5c3cca6
- device_tracker.pcc471541cba8f
- device_tracker.pc192168024_2
- device_tracker.ps4267d2a
show_header_toggle: false
type: entities
title: all devices
- entities:
- history_graph.disk
title: History graph
type: entities
- type: 'custom:content-card-example'
entity: input_boolean.switch_tv
path: monitoring
badges:
- sensor.last_boot
- sensor.load_15m
Inside the view “Monitoring” I have now the custom card. Do I have to use the Raw Editor now every time? Or can I add a custom card also via > Add Manual Card? If it is also possible via “Manual Card” what do I have to paste there?
1 Like
ludeeus
July 9, 2019, 7:54am
16
You can define cards with manual card, but you need to add resources with raw editor.
This would work as a manual card:
type: "custom:content-card-example"
entity: input_boolean.switch_tv
2 Likes
tom-x1
July 9, 2019, 8:00am
17
Perfect - this works. Thanks guys for your patience!
hipsi
August 10, 2019, 1:11pm
18
To save creating another thread for the same issue, I’ll jump onto this one in the hope that someone can help me figure this out. Im running Hass.io 0.96.5 and my problem is much the same, however in my case each of my custom cards show like this
my /config/www folder looks like this
and my raw file looks like this
resources:
- type: module
url: /local/custom-weather-card-chart.js
- type: js
url: /local/vertical-stack-in-card.js?v=0.1.3
- type: js
url: /local/content-card-example.js
title: Home
views:
- badges:
- sensor.humidity_22
- sensor.light_sensor_55
- switch.coffee_machine_46
cards:
- title: Weather
type: 'custom:weather-card-chart'
weather: weather.openweathermap
- entity: alarm_control_panel.mqtt_alarm
name: Home Alarm
states:
- arm_home
- arm_away
type: alarm-panel
- entities:
- entity: person.flynn
- entity: person.travis_edwards
- entity: device_tracker.keryn_kerynspixel2
show_header_toggle: false
type: entities
- entity: media_player.all_speakers
type: media-control
- entities:
- entity: light.bbq_lights
- entity: light.front_deck_lights_92
- entity: light.entry_light_93
- entity: group.kitchen_lights
- entity: light.living_room_lamp
- entity: light.studio_desk_light
- entity: light.family_room_lights_86
- entity: light.rear_deck_lights_85
title: Lights
type: entities
- entity: sensor.temperature_sensor_54
max: 40
min: 0
theme: default
type: gauge
- entity: sensor.outside_temperature_19
max: 40
min: 0
theme: default
type: gauge
- entity: weather.home
type: weather-forecast
panel: false
path: default_view
title: Home
- badges: []
cards:
- entities:
- entity: person.travis_edwards
- entity: person.flynn
- entity: person.keryn
type: map
icon: 'mdi:map'
title: Map
- badges: []
cards:
- entities:
- entity: media_player.family_room_speaker
title: Family Room
type: glance
- entities:
- entity: media_player.living_room_speaker
- entity: media_player.vodafone_tv
title: Living Room
type: glance
- entities:
- entity: media_player.travs_home_mini
title: Master Bedroom
type: glance
- entities:
- entity: media_player.googlehome6001
title: Studio
type: glance
title: Speakers
- badges: []
cards:
- cards:
- entity: light.oven_cabinet_lights
type: light
- entity: light.bench_cabinet_lights
type: light
- entity: light.kitchen_oyster_light
type: light
type: horizontal-stack
- entities:
- entity: light.studio_desk_light
title: Studio
type: entities
- entities:
- entity: light.living_room_lamp
- entity: binary_sensor.3_in_1_multisensor_53
title: Living Room
type: entities
- cards:
- entity: light.front_deck_lights_92
type: light
- entity: light.entry_light_93
type: light
- entity: light.0x94103ef6bf437804_light
type: light
title: Front of House
type: horizontal-stack
- entities:
- entity: light.bbq_lights
- entity: light.rear_deck_lights_85
- entity: light.family_room_lights_86
title: Rear of House
type: entities
- cards:
- entities:
- entity: light.front_deck_lights_92
type: light
- entity: light.entry_light_93
type: light
- entity: light.0x94103ef6bf437804_light
type: light
type: horizontal_stack
title: Kitchen
type: 'custom:vertical_stack_in_card'
title: Lights
- cards:
- entities:
- entity: sensor.bridge_state
- entity: sensor.zigbee2mqtt_version
- entity: sensor.coordinator_version
- entity: input_select.zigbee2mqtt_log_level
- type: divider
- entity: switch.zigbee2mqtt_main_join
- entity: timer.zigbee_permit_join
- type: divider
- entity: input_text.zigbee2mqtt_old_name
- entity: input_text.zigbee2mqtt_new_name
- entity: script.zigbee2mqtt_rename
- type: divider
- entity: input_text.zigbee2mqtt_remove
- entity: script.zigbee2mqtt_remove
- entity: input_boolean.switch_tv
show_header_toggle: false
title: Zigbee2mqtt
type: entities
- type: 'custom:content-card-example'
entity: input_boolean.switch_tv
title: Controls
finity
August 10, 2019, 3:59pm
19
Have you restarted HA after you added the files to the www folder?
What procedure did you use to get the cards into the www folder?
If you manually copied everything into that folder did you copy the “raw” file contents from the github repo?
hipsi
August 10, 2019, 10:24pm
20
Yep I’ve restarted many times since. I’ve used configurator to create the www folder, and then each of the blank files. I then copied the raw GitHub contents of each file in via configurator.
I have never clicked at the three dots after clicking at “Configure UI” so I did not know the Raw Editor. So my hole config looks like that now:
