My Lovelace Plugins

This looks good, I have a wyzecam too, however it doesn’t matter what resolution I put it on, the camera feed in Home Assistant is horrible and laggy. It is a xiaomi xiaofang camera with the Dafang hack. Motion doesn’t work either (it worked for a while after creating a swap file, but it no longer works at all).

I see many of you posting their camera setups and they all look great. The RTSP stream via VLC works fine though, but live stream via HA is extremely laggy (even on the lowest res with only 15fps) and verry choppy/blurry. Is there any way I could make that better?

Sounds like you know more about cameras than me…:thinking: Honestly, haven’t done anything with the settings. Not the best, but more than worth the $'s invested compared to the other options.:sunglasses:

Okay, since now using the navigate function, I was able to integrate a popup again for a control panel. Which brings me to one last thing that I can’t figure out. Is it possible to style the popup? Here is what I tried for the popup…

browser_popup_8:
  sequence:
    - delay: '00:00:01'
    - event: browser_command
      event_data:
        command: popup
        title: ......Action Required......
        card:
          type: custom:card-modder
          style:
            background-color: rgba(255,255,0,0.2)
            border-radius: 25px
            border: solid 4px rgb(255, 255, 0)
            box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1)
          card:
            type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:card-modder
                    ...

and this is what I get…


At this point I’m guessing it is probably not possible and just trying to confirm, as it appears to use my main theme’s attributes.(was shooting for light yellow or totally clear card back :thinking:) Yellow border tried to show, but?..Any thoughts? Thanks!:sunglasses:
Wasn’t sure if you needed these, so I included just in case…

Okay…
image
changed to display: block and that’s close enough for a popup.

1 Like

I’m definitely using it (time-input-row). I’m not sure why it isn’t the default behaviour and I echo the request to make the minutes two digits.

Why is it not documented? It doesn’t look too complex (I’m not a .js programmer so I base that purely on the number of lines of code :stuck_out_tongue_winking_eye:).

The only reason I can come up with is that it might be doing something so non-standard that it might break something else?

And I don’t know if I have explicitly said so yet but your cards are fantastic. Thank you.

Can you tell why my input_numbers don’t show their unit_of_measurement in these fold_entity_row cards?

I did a test card to show that it sometimes works - showing three instances of the ‘Duration’ that is under ‘Guest mode once’

image

The yaml for the whole vertical-stack is as follows,

  - type: vertical-stack
    cards:

    - type: entities
      title: Duration
      show_header_toggle: false
      entities:
        - input_number.guest_mode_once_duration
        - type: custom:fold-entity-row
          head: 
            entity: input_number.guest_mode_once_duration
          items:
            - input_number.guest_mode_once_duration

      
    - type: custom:card-modder
      style:
        border-radius: 20px
        overflow: hidden
        box-shadow: '2px 2px rgba(0,0,0,0.4)'
        border: 'solid 1px rgba(100,100,100,0.3)'
      card:
        type: entities
        title: Occupancy & House Mode
        show_header_toggle: false
        entities:
          - device_tracker.1_composite

          - type: divider
            style:
              height: 1px

          - device_tracker.2_composite

          - type: divider
            style:
              height: 5px

          - sensor.house_mode
          - type: custom:fold-entity-row
            head: 
              entity: binary_sensor.holiday_mode
            items:
              - input_boolean.holiday_mode_forced
          - type: custom:fold-entity-row
            head: 
              entity: binary_sensor.guest_mode
            items:
              - type: divider

              #=== Guest Schedules
              #=== Schedule once
              - type: custom:fold-entity-row
                head: 
                  entity: input_boolean.guest_mode_once
                  name: Guest mode once
                  icon: mdi:human-handsup
                  type: custom:toggle-lock-entity-row
                items:
                  - input_number.guest_mode_once_duration
                  - type: divider

              #=== Schedule 1
              - type: custom:fold-entity-row
                head: 
                  entity: input_boolean.guest_mode_schedule_1
                  name: Guest schedule (1)
                  icon: mdi:numeric-1-box-outline
                  type: custom:toggle-lock-entity-row
                items:
                  - input_text.guest_mode_schedule_1_name
                  - input_select.guest_mode_schedule_1_day
                  - type: custom:time-input-row
                    entity: input_datetime.guest_mode_schedule_1_start_time
                  - input_number.guest_mode_schedule_1_duration
                  - type: divider

              #=== Schedule 2
              - type: custom:fold-entity-row
                head: 
                  entity: input_boolean.guest_mode_schedule_2
                  name: Guest schedule (2)
                  icon: mdi:numeric-2-box-outline
                  type: custom:toggle-lock-entity-row
                items:
                  - input_text.guest_mode_schedule_2_name
                  - input_select.guest_mode_schedule_2_day
                  - type: custom:time-input-row
                    entity: input_datetime.guest_mode_schedule_2_start_time
                  - input_number.guest_mode_schedule_2_duration
                  - type: divider


    #========================
    #=== Active Guest Timers
    #========================
    - type: custom:card-modder
      style:
        border-radius: 20px
        overflow: hidden
        box-shadow: '2px 2px rgba(0,0,0,0.4)'
        border: 'solid 1px rgba(100,100,100,0.3)'
      card:
        type: entity-filter
        show_header_toggle: false
        entities:
          - timer.guest_mode_once_duration
          - timer.guest_mode_schedule_1_duration
          - timer.guest_mode_schedule_2_duration
        state_filter:
          - "active"
        show_empty: false

Looks awesome, but I just can’t make it work. I have tried almost everything, including

  - url: /local/lovelace/time-input-row.js?v=f503b7
    type: js

- type: custom:time-input-row
  title: Väckningstider 1
  entities:
    - alarm_weekday
- type: custom:time-input-row
  title: Väckningstider 2
  entity_id: alarm_weekday
- type: custom:time-input-row
  title: Väckningstider 3
  entities:
  - entity: input_datetime.alarm_weekday

I am getting Entity not available [[config.entity]] no matter what I try. My input_datetime entities show up fine in an entities card.

Any hints welcome.

Edit:
Got it working with the following:

- type: custom:time-input-row
  name: Vardagar
  entity: input_datetime.alarm_weekday
- type: custom:time-input-row
  name: Lördag
  entity: input_datetime.alarm_saturday
- type: custom:time-input-row
  name: Söndag/helgdag
  entity: input_datetime.alarm_sunday

Hey, so I’m kinda struggling mixing the custom:card-modder along with the custom:auto-entities cards… they both work individually, but I can’t seem to get it working together to get the picture in the background.

  - type: custom:card-modder
    style:
      background-image: url("/local/pictures/lovelace-pictures/plex.png")
      background-size: 100%
      height: 170px
    card:
      type: sensor
      entity: sensor.plex
      name: Plex History
      detail: 2
      graph: line
  - type: custom:card-modder
    card:
      type: custom:auto-entities
      show_empty: false
      card:
        type: entities
        show_header_toggle: false
      filter:
        include:
          - entity_id: "sensor.tautulli_watching_*"
        exclude:
          - state: "Nothing"
    style:
      background-image: url("/local/pictures/lovelace-pictures/plex2.png")
      background-size: 100% 170px
      background-repeat: no-repeat

The card modder worked on my sensor, but not for the background for who is hitting my plex server?

Capture

You need to wrap the entities card inside the auto-entities with card modder as well.

Sorry, not sure I’m following? Should I add another custom:card-modder inside the custom:auto-entities? And make the entities card a sub card of that?

Yes! The card modder will only mod the card directly beneath it, and so that’s the auto-entities.

Any chance we can get toggle-lock-entity-row to not change the underlying control?

I have a doorlock that i want to use this on, but when i use toggle-lock-entity-row the service call to lock/unlock is replaced with a slider

image

Hey, I tried to get it to work, and a ton of different combinations, but either nothing shows, or it says “entities need to be in an array”. Can I get some help? Thanks!

  - type: custom:card-modder
    style:
      background-image: url("/local/pictures/lovelace-pictures/plex.png")
      background-size: 100%
      height: 170px
    card:
      type: sensor
      icon: mdi:plex
      entity: sensor.plex
      name: Plex History
      detail: 2
      graph: line
  - type: custom:auto-entities
    show_empty: false
    card:
      type: custom:card-modder
      card:
        type: entities
        show_header_toggle: false
      style:
        background-image: url("/local/pictures/lovelace-pictures/plex2.png")
        background-size: 100% 170px
        background-repeat: no-repeat
    filter:
      include:
        - entity_id: "sensor.tautulli_watching_*"
      exclude:
        - state: "Nothing"

Capture

I just pushed a new version of card-modder. Try with that.

Edit: Oops. You’ll need the update to auto-entities too…

Both methods should work with the new one. I.e. both

type: custom:card-modder
card:
  type: custom:auto-entities
  ...

and

type: custom:auto-entities
card:
  type: custom:card-modder
  ...

That fixed it! Thanks!!

Hi @thomasloven , I am trying to get the popup-card working for the first time. I’d like to have the popup show not only the standard colour picker etc, but an input_number slider and an input_boolean. Is this possible? To begin with I was just trying to get the popup to show the input_number and input_boolean but it isn’t working…

This is what I have in lovelace:

  - title: Bedroom
    panel: false
    icon: 'mdi:seat-individual-suite'
    cards:
      - type: custom:popup-card
        entity: light.ensuite_light
        title: Ensuite Light Settings
        card:
          type: entities
          entities:
            - switch.circadian_lighting_ensuite_circadian_lighting
            - input_number.ensuite_light_auto_off_time
      - type: entities
        entities:
          - light.ensuite_light

…but it just pulls up the standard more-info (colour picker) plus spits out the below error to the log:

https://xxxxx:8123/local/custom_ui/popup-card.js:50:16 Uncaught TypeError: Cannot read property ‘style’ of undefined

Either upgrade hass to version 0.87 (recommended), or get the latest version of popup-card from github, where I just added backwards compatibility.

Awesome! thanks. That fixed the error. Would it be possible to have the standard colour picker also in the popup? or would I need to use another custom card? (I did see a custom-card for a colour picker).

You’d need a custom card. I think you can make the popup-card a stack and put both an entities card and e.g this in it - or better yet, the card thats linked from that post.

Yeah, that linked one is what I was thinking of as I did see your comments about it previously. I’ll give it a try. Thanks for all of your hard work!

I tried using that custom-light card using the below but got an error about Lit, otherwise it almost seemed like it was going to work…

  - type: custom:popup-card
    entity: light.ensuite_light
    title: Ensuite Light Settings
    card:
      type: entities
      entities:
        - switch.circadian_lighting_ensuite_circadian_lighting
        - input_number.ensuite_light_auto_off_time
        - type: custom:light-entity-card
          entity: light.ensuite_light

https://xxxxxx:8123/local/custom_ui/light-entity-card.js?v=1.2.0:1:1 Uncaught SyntaxError: Identifier ‘LitElement’ has already been declared

EDIT: it seems to work on my phone but not on my PC even after many cache refreshes, both using Chrome browser.