I would like to add a simple overview of my frigate cameras, is that possible? Love the UI!
Hey does anyone know how to get the chip cards to refresh when their underlying data changes. E.g if add the following
- type: "custom:button-card"
template: chip_icon_state
variables:
ulm_chip_icon_state_icon: "âïž"
ulm_chip_icon_state_entity: light.bedroom_lights
And turn the light on the card will still say off, when i refresh the whole page it will say on. The other cards in lovelace seem to immediately reflect the state of the entity as it changes without reloading the page
I ran into similar problem with a card I made myself.
Adding
triggers_update: all
to the template worked for me:
navigation_card_with_sensor:
triggers_update: all
1 Like
Try a grid card.
There you can do any formation of cards. I have 2 camera cards in width for my mobile view, and 6 in width for my tablet view.
Or, do vertical stack, and imbed horizontal stack afterwards for the same âeffectâ as grid cards
Ie.
views:
- title: Mobile Landing page
layout:
width: 300
max_cols: 2
type: custom:masonry-layout
badges: []
icon: mdi:sigma
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
triggers_update doesnt work with variables atm. The problem is that we have to use the entity field of the custom-button-card to receive updates. So for now its not the correct way to specify the entity using a variable like here ( ulm_chip_icon_state_entity) I forked the buttons and made my own using the entity field.
When setting the entity field the button card refresh itself when the entity gets an update. triggers_update: all refreshs the button-card on every update of every single entity in home assistant. That may slow down the performance of the cards / browser.
I found the problem that is causing this to happen.
In the swiper-card there is the overflow set to hidden, so the box shadow of the chips card cannot be displayed. This does also apply to the dark-theme, but there it is not visible since we dont see the box shadow.
Since the swipe-card.js doesnât get an update so often, you can search for this line:
.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}
and replace the overflow:hidden with overflow:visible, now the box-shadow is shown correctly.
So putting it in the ui-lovelace.yaml instead of the template like this would be better then? 
- type: 'custom:button-card'
template: navigation_card_with_sensor
triggers_update: sensor.door_and_alarm
variables:
navigate_name: DĂžr og alarm
navigate_path: alarm
navigate_sensor: "sensor.door_and_alarm"
icon: mdi:alarm-panel
1 Like
Yes, this is another solution. Simply overwrite triggers_update with the explict entity. But keep in mind there are cards with multiple entities. In this case you have to put all together in a list under the triggers_update section or you simply take the entity that gets the most updates.
1 Like
I like the design of the cards, if youâre interested, I can help you optimize your js. Thereâs some holes in places and some of the cards could support devices classes for proper display.
7 Likes
Of course. Any help is welcome here And Iâm always interested in new ideas.
1 Like
Hi, thanks for the help. I tried it with a mod-card, but since overflow is shown now my whole screen is horizontally swipeable up to the the width of the last card.
Iâll give it another try tomorrow.
I have this :
old naming convention
2 Likes
I am curious.
Could you give an example?
Did anyone already implement a card for Locks?
The current script card is not enough because you need to send a different service call depending on the state of the lock.
And the image should also change like the cover card.
Iâm pretty happy with my mobile setup for this one now. Has anyone set this up for iPad and want to share some pics for inspiration?
1 Like
So for my startpage I wanted to try and make some conditional cards - for a quick way to access buttons when they would be needed. I tried setting it up like this:
- cards:
- type: custom:button-card
template: edge
- type: 'custom:button-card'
template: title
name: Forslag
- type: custom:button-card
template: edge
type: horizontal-stack
- cards:
- type: custom:button-card
template: edge
- type: grid
cards:
- type: conditional
conditions:
- entity: input_boolean.lock
state: 'on'
card:
type: 'custom:button-card'
template: card_door
entity: input_boolean.lock
name: InngangsdĂžr
- type: conditional
conditions:
- entity: input_boolean.kl_22_04
state: 'on'
card:
type: 'custom:button-card'
template: card_lys
entity: light.nattbord_andre
name: Nattbord André
- type: conditional
conditions:
- entity: input_boolean.kl_22_04
state: 'on'
card:
type: 'custom:button-card'
template: card_lys
entity: light.nattbord_martine
name: Nattbord Martine
columns: 2
- type: custom:button-card
template: edge
type: horizontal-stack
But Iâm not happy about how it turned out:
When none of the conditions are met:
When door is open:
When door is open, and its evening and I want bedside lights available aswell:
Where does all the extra spacing come from in the last picture?
And is there a way to minimize the open space when no conditions are met?
Well, havenât thought of that, sorry. I dont have that much chips at the moment, if so i wouldnât missed that.
I will have a look at it again on the weekend.
You should put the conditionel cards around all the other cards
I tried that, but then would the template:edge screw things up.
But when I looked closer at the grid card, I saw that it defaults to «square: true». Adding square: false fixed all the extra spacing
- type: grid
square: false
cards:
I ended up setting a couple of different conditional cards.
One for time of day - so that when evening comes the bedside lights are shown.
One for the door - so whenever the door is unlocked - its quick to get to.
One for Alarm - if both are away, and the alarm hasnât been armed, a button will show to arm it.
And probably more as I find myself needing a button quick 
1 Like
Can you share how you use auto-entities in combination with generic cards with sensors (optionally in a horizontal-stack card?)
I want to try them for my garbage collection, so only part of the sensors should be visible, not all of them. I donât set the property âentityâ, but in return I just get an empty card. What am I missing? Any ideas?