My Lovelace Plugins

Geez, my bad. Thank you.

card-tools

Here’s something for you other plugin developers out there!
It’s kind of my secret cookbook, a bunch of convenient functions packed together and reusable.
I plan to make most of my plugins depend on this over the next few days or so.

1 Like

Unfortunately, I can no longer edit the first posts of this thread to add plugins to the list, or update descriptions of changed ones.

Does anyone have any thoughts on the best course of action?

I’m thinking perhaps I should start over with a new thread and ask a moderator to add a link in the (now locked) top post to the new one…
Either that, or trying to split the thread again, making one thread for each plugin.
Or perhaps move to an entirely different medium.

What do you think?

Edit: This issue has been resolved :slight_smile:

ask a dev to give you the rights to change the first posts.
i know its possible, i saw today that they did it for someone with another project.

I just pushed an update to layout-card that I believe should fix this.

The updated version also requires card-tools to be installed.

I’ve got a problem using card-modder. I have some cards that have background as part of the card, so I’m not using card-modder to add a background. The problem I have is that when using border-radius for a rounder corner card, the background overlays the border and is not trimmed off, so the card still looks like it has square edges.

Any ideas?

I’d have to look at the specific cards to be able to say…

This is what I have.

  - id: 5e9c3cb535134b9e9192d8f07bde03d8  # Automatically created id
    type: custom:card-modder
    card:
      type: custom:mini-media-player
      entity: media_player.chromecast3206
      name: Chromecast
      artwork: cover
      hide_power: true
      hide_volume: true
      show_source: false
      show_progress: true
      scroll_info: true
      consider_idle_after: 10
      background: "/local/lovelace/devices/chromecast2.jpg"
    style:
      border-radius: 10px
      border: solid 1px rgba(100,100,100,0.3)
      box-shadow: 3px 3px rgba(0,0,0,0.4)

and this is what I see. You can see the corners where the rounded border it, but the image overlays it.

card

and a close-up of another card.

corner

After checking the code, it seems the author of mini-media-player chose to add the background as an image floating on top of the card rather than as an actual card background. Not much that card-modder can do about this, unfortunately…

Hmm. What am I looking for to find where it’s floated? I couldn’t work it out in the code, but may have overlooked it.

Well… it’s not really floating as such… but it’s a separate div https://github.com/kalkih/mini-media-player/blob/master/mini-media-player.js#L177

card-modder tries to style to ha-card element, and anything that’s on top of it will go unmodified. Setting the background using card-modder instead should work.
Or you could modify the source and add a border radius here too: https://github.com/kalkih/mini-media-player/blob/master/mini-media-player.js#L829-L836

Thanks mate. Not sure about modifying mini-media-player, I think I’ll contact the developer, but for my own card I made, I edited my CSS file and moved the background image to ha-card {background: url(bkg.jpg);} and has fixed it up.

Thanks mate.

Oh, thank you very much. You’re my lucky star.

While working on making my cards leverage the many benefits of card-tools, I realized I could add the templating from useful-markdown-card to card-modder…

- type: custom:card-modder
  style:
    background-image: "url(http://www.place[[ input_select.background.state ]].com/500/250)"
  card:
    type: entities
    entities:
      - input_select.background
        ...

template-card-modder

4 Likes

thank you!, that’s what I was looking for hence my feature request enable templates on style ? · Issue #7 · thomasloven/lovelace-card-modder · GitHub

Makes it so much more flexible, cool.
cheers!

Create a light group…

Just because I’m so happy about how well this is working - here’s the results of remaking fold-entity-row to use card-tools:
cardtools%20benefit

The source code is now about 30% shorter, has more safety checks, better error messages and a better structure. And at least three known bugs were fixed with almost no extra work.

2 Likes

fold-entity-row card error after update to version: b895b8

image

Oops. Sorry about that.
I forgot to add the check that card-tools is installed. It should tell you to install it in a more informative error message.
A new update has been pushed to github.

HI Thomas,

would this be the correct way to change background depending on state?

  - type: custom:card-modder
    style:
      #background-image: url("/local/lovelace/images/weather-background-day.png")
      background-image: url("/local/lovelace/images/weather-background-[[sun.sun.state]].png")

i have the 2 files
/local/lovelace/images/weather-background-above_horizon.png
/local/lovelace/images/weather-background-below_horizon.png

but the backgrounds don’t show yet. Please have a look?