Try the latest version.
The latest version of card-modder.js? I downloaded it already and I also updated ha there is no change. I also downloaded state-card-custom-ui and no change.
Then the update failed somehow. Make sure your cache is invalidated.
The error says that there is a problem with forEach
on line 45 of the script.
Line 45 of the script reads: " "
It has the exact same results. Guess I’ll just have to make do without doing what I wanted. Oh well.
I’ll reply to myself for the sake of helping anyone facing the same issue in the future .
If you want to use lovelace-gen.py while using home-assistant (not hassio) in a docker container, you have to do it from within said container ! (As a beginner, it was hard to understand at first).
So lets say your container’s called hass, then you have to run the following:
# docker exec -it hass /bin/bash
# cd /config ./lovelace-gen.py
It should work (and make you happy).
Then you can use a trick where any card can also be an entity row.
- type: entities
entities:
- type: custom:card-modder
style:
...
card:
type: hui-entities-card
entities:
...
- type: custom:card-modder
style:
...
card:
type: hui-glance-card
entities:
...
And so on.
I use this trick a lot, but it doesn’t work with the horizontal-stack as an entity. Well, at least for me it wasn’t working.
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: none
Thanks!
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: module
nice, 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