My Lovelace Plugins

The toggles are fixed.

I also added back the hide_when_off option, but - serious question - can anyone tell me why you’d want that? Do you only want to be able to adjust brightness, and to turn it off? Never on again? Never on directly to a defined value?

1 Like

Well, it turns on with the last set value and then i can adjust it.
I like the slider hidden when it’s off.
THANKS for it and fixing the toggles.

For me I have quite a few lights that I rarely control manually, they’re timed to come on and go off.

But when they are on I like to see the brightness level/percent (make sure they’re working as they should). Also, hiding the sliders when they’re off looks cleaner, and doesn’t take up as much space.

I rarely use the sliders, which is why I enquired about just showing the brightness value/percentage below the lights previously :slightly_smiling_face:

I really like the layout card. Is there a way I can make it different for the mobile response point. The 5 columns I want is for tablet-desktop. It would be nice to do more for wide screen.

Thanks

2 Likes

I use that because it’s easy to accidentally move the slider when swiping on the phone. If the light is on that doesn’t matter as much but if it’s off it might be worse to turn it on by accident. If I want to turn a light on to a certain brightness when off I just bring up the more info dialog.

state-switch

I like the conditional card and its ability to dynamically change the interface a bit, but if you want to switch between two different cards, you need to add two conditional cards… And if you want even more it quickly grows.

So I made state-switch which allows you to switch in a card based on a dictionary of entity states.

- type: custom:state-switch
  entity: device_tracker.my_phone
  states:
    home:
      [definition of one card]
    work:
      [definition of another card]
    not_home:
      [and yet another]

While I use this in my own configuration, I almost decided against releasing it publicly beacuse the same thing can also be done with conditional… but then I realized something… I could easily make it switch depending on user name instead.

- type: custom:state-switch
  entity: user
  default: all_other
  states:
    admin:
      type: entity-button
      entity: switch.self_destruct
    all_other:
      type: markdown
      content: >
        ## You're not supposed to be here!

5 Likes

Wonderful to not have to have a thousand conditional to get different cards to show up! And also the user bit… Lovely!

Hi @thomasloven,

Thanks very much for what you’re doing, state-switch rocks !
A couple of questions:

  • Do you think the same principle could be applied to lovelace views ? (show/hide views based on user)
  • Is the card supposed to work with anything other than tracked devices or users ? For some reason, when I use it with input_booleans ad on/off states, nothing appears.

Cheers :slight_smile:

Making it work with views would be much harder, but I guess official support for that isn’t far away.

The words “on” and “off” have special meaning in yaml. Try using quotes

"on":
  ...
"off":
  ...

Excellent job! I’m already using it in my settings and it works great!

Thanks, that is working great!

Is it possible to add a default value for entities other than user as well?
I have a device_tracker with multiple states and would like to switch between state home and default to all other states (away, work, etc).

I try to enlarge the picture, but I can not. Here is my code:

The image is: /local/lovelace/home/xiaomi_vacuum_03.jpg

  - id: 9  # Automatically created id
icon: mdi:robot-vacuum-variant
background: center / cover no-repeat url("/local/lovelace/background/back01.jpg") fixed
type: custom:layout-card
layout: horizontal
cards:
  - type: custom:card-modder
    card:
      type: picture-elements
      image: /local/lovelace/home/xiaomi_vacuum_03.jpg
      elements:
        - type: icon
          icon: mdi:bell-ring
          tap_action: call-service
          entity: vacuum.xiaomi_vacuum_cleaner
          service: vacuum.locate
          style:
           top: 93%
           left: 80%
           color: '#ffffff'
        - type: icon
          icon: mdi:crosshairs
          tap_action: call-service
          entity: vacuum.xiaomi_vacuum_cleaner
          service: vacuum.clean_spot
          style:
           top: 93%
           left: 65%
           color: '#ffffff'
        - type: icon
          tap_action: call-service
          icon: mdi:home
          entity: vacuum.xiaomi_vacuum_cleaner
          service: vacuum.return_to_base
          style:
           top: 93%
           left: 50%
           color: '#ffffff'
        - type: icon
          icon: mdi:stop
          tap_action: call-service
          entity: vacuum.xiaomi_vacuum_cleaner
          service: vacuum.stop
          style:
           top: 93%
           left: 35%
           color: '#ffffff'
        - type: icon
          icon: mdi:play
          tap_action: call-service
          entity: vacuum.xiaomi_vacuum_cleaner
          service: vacuum.start
          style:
           top: 93%
           left: 20%
           color: '#ffffff'
        - type: state-label
          entity: sensor.vacuum_operation
          style:
           top: 10%
           left: 1%
           color: rgb(255, 255, 255)
           transform: translate(0%,-50%)
           pointer-events: none
           font-family: Trebuchet MS
           font-size: 90%
           font-weight: bold
        - type: state-label
          entity: sensor.vacuum_accessories
          style:
           top: 10%
           right: 1%
           color: rgb(255, 255, 255)
           transform: translate(0%,-50%)
           pointer-events: none
           font-family: Trebuchet MS
           font-size: 90%
           font-weight: bold
        - type: state-label
          tap_action: more-info
          entity: vacuum.xiaomi_vacuum_cleaner
          style:
           top: 10%
           right: 43%
           color: rgb(255, 255, 255)
           transform: translate(0%,-50%)
           font-family: Trebuchet MS
           font-size: 150%
           font-weight: bold
        - type: state-label
          entity: sensor.vacuum_cleanmainbrush
          style:
            top: 33%
            right: 2%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 76%
            font-weight: bold
        - type: state-label
          entity: sensor.vacuum_cleansidebrush
          style:
            top: 40%
            right: 0%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 76%
            font-weight: bold
        - type: state-label
          entity: sensor.vacuum_cleanfilter
          style:
            top: 57%
            right: 3%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 76%
            font-weight: bold
            opacity: 0.8
        - type: state-label
          entity: sensor.vacuum_sensordirtyleft
          style:
            top: 74%
            right: 5%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 76%
            font-weight: bold
        - type: state-label
          entity: sensor.vacuum_status
          style:
            top: 33%
            left: 2%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 80%
            font-weight: bold
        - type: state-label
          entity: sensor.vacuum_battery
          style:
            top: 54%
            left: -1%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 80%
            font-weight: bold
        - type: state-label
          entity: sensor.vacuum_fan_speed
          style:
            top: 65%
            left: 1%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 80%
            font-weight: bold
        - type: state-label
          entity: sensor.vacuum_cleaned_area
          prefix: "Area:"
          style:
            top: 25%
            left: 26%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 80%
            font-weight: bold
        - type: state-label
          entity: sensor.vacuum_cleaning_time
          prefix: "Time:"
          style:
            top: 25%
            left: 60%
            color: '#ffffff'
            transform: translate(0%,-50%)
            pointer-events: none
            font-family: Trebuchet MS
            font-size: 80%
            font-weight: bold
    style:
      border-radius: 15px
      border: solid 1px rgba(100,100,100,0.3)
      box-shadow: 3px 3px rgba(0,0,0,0.4)
  

  - type: custom:layout-card
    layout: horizontal
    cards:
      - type: custom:card-modder
        card:
          type: glance
          entities:
            - entity: input_boolean.disable_dustbin_notification
              name: Disable Notification
            - entity: input_boolean.disable_daily_vacuum
              name: Disable Daily Cleanup
        style:
          background-image: url("/local/lovelace/background/cardbackK.png")
          background-repeat: no-repeat
          background-color: rgba(50,50,50,0.3)
          background-size: 100% 150px
          border-radius: 15px
          border: solid 1px rgba(100,100,100,0.3)
          box-shadow: 3px 3px rgba(0,0,0,0.4)  
          
      - type: custom:card-modder
        card:
          type: entities
          entities:
            - input_select.vacuum_room
        style:
          background-image: url("/local/lovelace/background/cardbackK.png")
          background-repeat: no-repeat
          background-color: rgba(50,50,50,0.3)
          background-size: 100% 150px
          border-radius: 15px
          border: solid 1px rgba(100,100,100,0.3)
          box-shadow: 3px 3px rgba(0,0,0,0.4)

Try it and see what happens.

Spoiler alert: It works.

I did try it and it didn’t work.

Will try again to see what went wrong :thinking:

Edit
Just tried some settings but can’t get it to work. Any hints are appreciated.
This is my ui-lovelace

- type: vertical-stack
  cards:
    - type: custom:state-switch
      entity: device_tracker.gerard
      default: default
      states:
        home:
          type: vertical-stack
          cards:
            - [cards here]
        default:
          type: vertical-stack
          cards:
            - [cards here]

Love the new rework of slider-entity-row and the new state-switch card.
Would love to see them in core HA in the future.
Thanks for sharing!

Is there a way to get icons to render in your markdown card? I’m doing a super condensed view and would love to not have labels for the rows.

Oh darn! You’re right. Sorry about that.

Should be fixed now.

Yes it works now :grinning: thanks!

Afraid not, but I think you can include pictures.

1 Like

I’ve heard some people have had problems with some of my cards and the custom_updater.

If you have a problem and are using the fold-entity-row, make sure it’s entered correctly in your resources section. I renamed the card a while ago from folding-group-entity-row.js to fold-entity-row.js.

So, if your resources section says folding-group-entity-row.js try changing it to fold-entity-row.js and also rename the file. Then press update.

1 Like