My Lovelace Plugins

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.

image

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.

1 Like

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.

printer

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!! :+1: 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
1 Like

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

@cjsimmons

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

30

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:
53

- 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.

1 Like

cool!

32

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

35

only the head is also using the - 40px margin left, which is undesired…

1 Like

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. :roll_eyes: 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.

printer

2 Likes