Home Assistant Community

My Lovelace Plugins

#9

toggle-lock-entity-row

Another row for the entities card

Have you ever accidentally turned a switch on or off when scrolling past on your phone?
If so, you might like toggle-lock-entity-row.

lovelace-locked-toggle

It’s simple enough. Now you have to click the toggle twice before anything happens.

As an added bonus, you can select which users have the ability to unlock the toggle.

This one’s also inspired by custom-ui.

3 Likes

#10

time-input-row

Yet another entity row: time-input-row.

This lets you input a time to a input_datetime right in the lovelace interface, without having to open up the more-info dialog.

time_input

I made this solely for my own benefit, so it’s not documented at all, and it only support inputing times, not dates.
If you think you’d use it, let me know and I might try to add the feature.

13 Likes

#11

DEPRECATED!

This plugin is replaced entirely by fold-entity-row



The final entity row (for now) is folding-group-entity-row.

This row works with groups.
It will take a group, and add all of the entities in it in a collapsible list to the entities card.

folding_group_demo1

This was somewhat inspired by haiku by lukiffer.

9 Likes

#12

dim-image-element

Next up is an element for picture-elements

dim-image-element takes an image and an entity, and sets the opacity of the image to the brightness value of the entity.

I don’t really see a use case myself, but someone asked about it on discord, and I saw a way to make it happen…

The configuration would look something like:

    elements:
      - type: custom:dim-image-element
        entity: light.my_dimable_light
        image: !resource my_image.jpg
        style:
          top: 50%
          left: 50%

Besides the entity, it takes the same configuration options as the image element.

1 Like

#13

Deprecated

This is included in home-assistant since 0.81.0

But smoother, for more items and much prettier.

See documentation for each card.


A significantly more useful picture-elements element is long-press

This allows you to add elements to your picture that does one thing when you click them, and another - totally different - thing when you click and hold for about half a second.

A typical use case would be a light that you toggle on or off by clicking (or tapping on a touch screen), but holding the mouse button (or finger) down for a while will bring up the more-info dialog and allow you to dim the light or change its color.

But the long-press action can also be something entirely different, like calling a service or toggling a different entity.

6 Likes

Lovelace: Button card
Lovelace with state-dependant colors
#14

card-modder

Finally, theres another card… kind of…

The card-modder allows you to take any card and inject style it.

Think of the amazing stuff people have made with picture-elements over at sharethelove.io. That’s made possible - in part - because elements can be styled with custom css. And now any normal card can as well.

It’s also a great way to produce atrocities such as:
card-modder

But I’m sure that in the hands of anyone even just a tiny bit more artistic than myself, it can be used to produce wonderful things.

A bonus feature of this card is that you can manually select which size it will report when placing in the layout. That can give some more control over which card ends up where on screen:

6 Likes

Lovelace: mini graph card
Change background color of a card?
How to rotate image in picture glance card
Birthday reminder card for Lovelace
#15

Awesome stuff mate! I am already using a lot of your cards and now found out you even have more new stuff for us :grinning:

0 Likes

#16

Great stuff here!

I use the card modder personally and the card is very powerful! Can be used to completely re-design your UI.

0 Likes

#17

These are some great ideas. I’ll be trying out the long-press plugin soon. Thanks!

0 Likes

#18

Is there any way to change the number of columns used? Mine is showing 2 columns when 3 would be better. Goes down to 1 on my phone which is great.

Would it be as simple as changing the max column width from 500px to 300px or something like that?

Also getting an error…

https://domain.duckdns.org/local/mini-media-player.js?ver=0.8.1:592:22 NotSupportedError: Cannot define multiple custom elements with the same tag name

lovelace yaml looks like this:

  - title: TV & Movies
    icon: mdi:kodi
    panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: custom:column-card
            cards:
              - type: custom:upcoming-media-card

I’m thinking it’s because I’m trying to use the upcoming-media card inside the column card? Any way to fix that?

1 Like

#19

That would do the trick. 500px was chosen to be as close to the look-and-feel of stock lovelace as possible.

It seems to me like you are importing mini-media-player.js twice. Check that.

0 Likes

#20

I am importing it twice - once for sonarr and once for radarr. Works fine until I use the column card.

0 Likes

#21

You should only import scripts once, in the resources: section. I can’t see any way that column card would trigger this problem.

0 Likes

#22

This is amazing, thank you, the toggle-lock and the input-row are immediately going into my config.

There goes my Saturday afternoon.

2 Likes

#23

This should be added to the main HA branch!

0 Likes

#24

… I’ll see what I can do…

Edit: Don’t let this stop anyone from trying out the plugin. Please do, and report any problems!

0 Likes

#25

Please do, if you’ve got time. Opening more-info on long click is just a small addition to the existing picture entity card in terms of code, but a gamechanger in terms of usability.

0 Likes

#26

This is my resources section:

resources:
  - url: /local/tracker-card.js?v=0.1.5
    type: js
  - url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.1.9
    type: js
  - url: /local/custom_ui/dark-sky-weather-card.js?v=1
    type: js
  - url: /local/mini-media-player.js?ver=0.8
    type: module

This is my media card (part of)

  - title: TV & Movies
    icon: mdi:kodi
    panel: true
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:upcoming-media-card
            service: sonarr
            title: Sonarr Upcoming
deleted irrelevant crap
          - type: custom:upcoming-media-card
            service: radarr
            title: Radarr Upcoming

The above works.

If I change it to this:

  - title: TV & Movies
    icon: mdi:kodi
    panel: true
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:column-card
            cards:
              - type: custom:upcoming-media-card
                service: sonarr
                title: Sonarr Upcoming
delete irrelevant crap
          - type: custom:column-card
            cards:
              - type: custom:upcoming-media-card
                service: radarr

It doesn’t work.
Also tried this:

  - title: TV & Movies
    icon: mdi:kodi
    panel: true
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:column-card
            cards:
              - type: custom:upcoming-media-card
                service: sonarr
                title: Sonarr Upcoming
deleted
              - type: custom:upcoming-media-card
                service: radarr

also doesn’t work.

Gives the error I reported above.

0 Likes

#27

I’m unable to use column-card on the Fully Kiosk app browser, I get an error

“element.setConfig is not a function”

Anyone used this successfully with FKB? Works great in Chrome on my desktop.

0 Likes

#28

Are you on a fire tablet? Is that FKB?

0 Likes