I’m trying to setup the lovelace-player card for use in fully kiosk.
"https://xxxx.xxx.xx.xxx:8123/local/custom_ui/lovelace-player.js:98:175 Uncaught TypeError: Cannot read property ‘shadowRoot’ of null " is the error that shows in the log. pointing to this part in lovelace-player.js
.shadowRoot.querySelector(“app-drawer-layout iron-pages partial-panel-resolver”).shadowRoot.querySelector("#panel ha-panel-lovelace")
Is there someone who can put me back on track please ?
Thanks!
Brilliant. Anybody know of a way to force the polymer time selector to show 00 instead of 0 ?
After updating to the latest version, at the right side of the climate entity, instead of the target and current temperature, a toggle switch shows up. It doesn’t happen outside of the plugin.
EDIT: After walking away from this problem for 12 hours, it seems to have resolved itself. I couldn’t begin to tell you what changed between when I originally posted and now because I haven’t touched anything…
I’m having an issue getting Thomas’ plugins to be recognized by custom_updater and tracker-card. I suspect I have misconfigured the resources section in ui-lovelace.yaml incorrectly. Do the Thomas specific resource declarations look correct?
- url: /local/slider-entity-row.js?v=0
type: js
- url: /local/fold-entity-row.js?v=0
type: js
- url: /local/thermostat-card.js?v=0.1.1
type: module
- url: /local/plan-coordinates.js?v=0.1.0
type: js
- url: /local/custom-fan-card.js?v=0
type: module
- url: /local/layout-card.js?v=0
type: js
- url: /local/button-card.js?v=0
type: module
- url: /local/tracker-card.js?v=0.1.5
type: js
I’ve attempted leaving the values after the = sign empty, as well as placing a value as displayed above. I get these errors when I restart HA.
2018-12-25 06:28:10 ERROR (MainThread) [frontend.js.latest.201812112] http://homeassistant.example.com:8123/local/slider-entity-row.js?v=0:1:1 Uncaught SyntaxError: Identifier 'SliderEntityRow' has already been declared
2018-12-25 06:28:10 ERROR (MainThread) [frontend.js.latest.201812112] http://homeassistant.example.com:8123/local/layout-card.js?v=0:1:1 Uncaught SyntaxError: Identifier 'LayoutCard' has already been declared
2018-12-25 06:28:10 ERROR (MainThread) [frontend.js.latest.201812112] http://homeassistant.example.com:8123/local/fold-entity-row.js?v=0:1:1 Uncaught SyntaxError: Identifier 'FoldRow' has already been declared
Thoughts?
I have been using custom card modder for awhile now and loving it, after recent update I noticed that for my picture_elements cards the card image was taking front and can no longer see the card modder styles.
- type: horizontal-stack
cards:
- type: custom:card-modder
card:
type: picture-elements
image: /local/lovelace/home/james_10.jpg
elements:
- type: state-label
entity: sensor.james
prefix: 'James -- '
style: {color: white, left: 30%, top: 90%}
- type: state-icon
entity: sensor.battery_james
tap_action: more_info
style: {color: white, left: 73%, top: 90%}
- type: state-label
entity: sensor.battery_james
style: {color: white, left: 87%, top: 91%}
- type: state-icon
entity: binary_sensor.james_gps_status
style: {color: white, left: 92%, top: 10%}
- type: state-icon
entity: binary_sensor.james_ble_status
style: {color: white, left: 92%, top: 25%}
- type: state-icon
entity: binary_sensor.james_keys_status
style: {color: white, left: 92%, top: 40%}
- type: state-icon
entity: binary_sensor.james_bag_status
style: {color: white, left: 92%, top: 55%}
- type: state-icon
entity: binary_sensor.james_car_status
style: {color: white, left: 92%, top: 70%}
style:
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 3px 3px rgba(0,0,0,0.4)Yes that’s right. A change in Home Assistant.
Adding overflow: hidden to the styles will fix it.
works like a charm thankyou
I am however getting this error now
- id: 3 # Automatically created id
icon: mdi:sofa
background: center / cover no-repeat url("/local/lovelace/background-15.gif") fixed
name: Downstairs
#panel: true
cards:
- id: 30cb280dfea9438ca580e1ec4c50ac9a # Automatically created id
type: vertical-stack
cards:
- type: custom:card-modder
card:
type: custom:mini-graph-card
entity: sensor.temperature_158d0001f558f5
height: 65
line_width: 2
font_size: 70
hours_to_show: 168
line_color: '#3498db'
style:
background-image: url("/local/lovelace/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 180px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 3px 3px rgba(0,0,0,0.4)Try the latest version.
So, I’ve been trying to work out how to get some different type of cards to work together inside a master card. Normally I’d go with horizontal and/or vertical stacks, but sometimes it’s impossible to use card-modder on nested cards, and things just disappear, don’t work, or cause a massive mess.
Today I decided I wanted to slim down one of my cards and decided to use the glance card, but this card doesn’t work as an entity for the entities card. Nothing was showing at all. Anyway, long story short, I finally worked it out using the custom card vertical-stack-in-card. It works a treat, and then with card-modder modifying the nested cards, I was able to come up with something that combines the glance card and the entities card to make them look like one card.
I’m pretty happy with the result. The blue line matches the divider element used with the entities card. I have chosen to hide the card title for the glance card as I don’t need to know that this card is for my printer. It’s pretty self explanatory. If you are using a background that doesn’t have a gradient, then you may get away with not needing the line at all.
Below is the code for this card copy and pasted as is. Thanks to who ever it was that came up with the original styling. I can’t remember where I got it from, but it’s great!!!
The good thing about the vertical-stack-in-card custom card is that it removes all the margins around the nested cards, so all I needed to do was define the radius of the border on all for corners and change the bottom 2 corners to 0px each (this is the top 2 corners on the second card) and then hide the bottom border. Then on the second card, I just styled the top border as required and presto. Such a simple work around to my problem that has taken me ages to work out.
Thanks to Thomas for his great custom cards!! 
They are making it so much easier to work with Home Assistant.
- type: custom:card-modder
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:card-modder
card:
type: glance
entities:
- sensor.printer_status
- sensor.ink_black
- sensor.ink_cyan
- sensor.ink_magenta
- sensor.ink_yellow
show_header_toggle: false
style:
background-image: url("/local/lovelace/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 1000%
border-radius: 10px 10px 0px 0px
border: solid 1px rgba(100,100,100,0.3)
border-bottom: none
color: "#999999"
box-shadow: 3px 3px rgba(0,0,0,0.4)
- type: custom:card-modder
card:
type: entities
entities:
- input_number.ink_alert
- type: custom:fold-entity-row
head: input_boolean.ink_notify_system
items:
- binary_sensor.ink_black_alert
- binary_sensor.ink_cyan_alert
- binary_sensor.ink_magenta_alert
- binary_sensor.ink_yellow_alert
show_header_toggle: false
style:
background-image: url("/local/lovelace/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 100%
border-radius: 0px 0px 10px 10px
border: solid 1px rgba(100,100,100,0.3)
border-top: solid 1px rgba(82, 148, 226, 0.3)
color: "#999999"
box-shadow: 3px 3px rgba(0,0,0,0.4)
style: # remove background from vertical-stack-in-card
background: noneThanks!
I love seeing cool stuff people make with my plugins.
vertical-stack-in-card was actually one of my main sources of inspiration for card-modder.
The same thing can be done card-modder and an entities card, but vertical-stack-in-card is way more convenient.
The trick for adding cards in entities is to use the internal type, i.e. hui-glance-card for glance etc.
Keep up the good work!
can not seem to solve this one , can anyone help Thanks
resources:
- url: /local/card-tools.js
type: js
- url: /local/card-modder.js?v=35eb37
type: js
- url: /local/custom-lovelace/my-custom-card.jsv=1
type: js
- url: /local/my-webfont.css
type: css
- url: /local/custom_ui/weather-card.js?v=6
type: js
- url: /local/custom_ui/mini-media-player-bundle.js?v=0.9.8
type: modulenice, see you adapting my printer card to good use! cool.
struggling a bit myself, since I would like the fold entity to show a glance card, would that be possible? See below where I show both:
- type: custom:fold-entity-row
head: input_number.ink_level
items:
- entity: binary_sensor.ink_level_black_threshold
- entity: binary_sensor.ink_level_cyan_threshold
- entity: binary_sensor.ink_level_magenta_threshold
- entity: binary_sensor.ink_level_yellow_threshold
- entity: binary_sensor.ink_level_waste_threshold
- type: glance
show_header_toggle: false
entities:
- entity: binary_sensor.ink_level_black_threshold
name: Black
- entity: binary_sensor.ink_level_cyan_threshold
name: Cyan
- entity: binary_sensor.ink_level_magenta_threshold
name: Magenta
- entity: binary_sensor.ink_level_yellow_threshold
name: Yellow
- entity: binary_sensor.ink_level_waste_threshold
name: Waste
with the glance card one can name the entities, and have them display a bit tidier. could that be done with the fold-entity also?
second: how do you create the section line between the cards?
btw this is the bottom part of:
- type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- device_tracker.epson_printer
- script.update_epson_cartridge_sensors
- type: glance
show_header_toggle: false
entities:
- entity: sensor.epson_ink_level_black
name: Black
- entity: sensor.epson_ink_level_cyan
name: Cyan
- entity: sensor.epson_ink_level_magenta
name: Magenta
- entity: sensor.epson_ink_level_yellow
name: Yellow
- entity: sensor.epson_ink_level_waste
name: Waste
- type: entities
show_header_toggle: false
entities:
- input_number.ink_level
- automation.printer_ink_alert
The log from Home Assistant and/or your browser will probably tell you more.
First of all name: works for entities card as well.
Second:
- type: entities
show_header_toggle: false
title: Glance in fold
entities:
- type: custom:fold-entity-row
head: light.bed_light
items:
- type: custom:card-modder
style:
box-shadow: none
margin-left: -40px
card:
type: glance
entities:
- light.kitchen_lights
- light.ceiling_lights
thanks!
Im trying it first without the card-modder, but this errrors out and I can’t see what is wrong:
- type: custom:fold-entity-row
head: input_number.ink_level
items:
- type: glance
entities:
- entity: binary_sensor.ink_level_black_threshold
name: Black
- entity: binary_sensor.ink_level_cyan_threshold
name: Cyan
- entity: binary_sensor.ink_level_magenta_threshold
name: Magenta
- entity: binary_sensor.ink_level_yellow_threshold
name: Yellow
- entity: binary_sensor.ink_level_waste_threshold
name: Waste
If you do it without card modder you need to have
- type: custom:hui-glance-card
And as always with things like this: Be aware that it works by coincidence. NOT by design.
cool!
top the fold entity row, bottom the regular card.
Would it be possible to show the fold entity in the wider orientation, and have the icons use the fulll width, just as the bottom card?
EDIT
yes it is possible, should have taken the suggested code…back to using card-modder. Very nice indeed, thank you @thomasloven
only the head is also using the - 40px margin left, which is undesired…
Do you have any further info on this card? I can’t find anything about it nor can I get it to work.
I stumbled upon it and saw the icons which I’ve been on the hunt for a decent looking set for a while. Then I saw your adaption on the ink level alerts, and then a few hours had passed. 
The problem I’m having is trying to get the flag icons to work. But I won’t talk about that here. Happy for you to private message if you want to help.
Seems like @thomasloven has helped you out. Thanks, Thomas.
I didn’t think to use the glance card for the alert sensors. Adding show_state: false to the glance card hides the text state thus saving more room again.
