This one, %. The others are modified by me, but The card with percentage is without cardStyle.
@odiv ok can you share the css fix you use than i can add this to the default the card implements for mini-graph-card
sure! this is the code that I use
cardStyle: |
:host {
height: 100%;
}
ha-card {
background: transparent;
color: #000;
padding: 0!important;
box-shadow: none;
}
.header {
padding: 10px 2px 0 10px;
}
.header .name,
.header .name .ellipsis {
font-size: 13px!important;
font-weight: 500;
color: #000;
opacity: 1;
}
.header icon {
color: #f7d959;
}
.states {
padding: 0 10px;
}
.states .state .state__value {
font-size: 16px;
}
.header .icon {
color: #f7d959;
}
.button-inner .icon {
width:60px; #Default = 50px
height:60px; #Default = 50px
}
.button-inner .icon ha-icon {
width: 50px; #Default = 30px
height:50px; #Default = 30px
}
.states .state .state__uom {
align-self: flex-end;
display: inline-block;
font-size: 0.9em;
font-weight: 400;
opacity: 0.6;
vertical-align: bottom;
flex: 1 1 0%;
}
Please add for this card the possibility to show custom entity pictures from customization.
Also it will be much appreciated if you can make a custom tile for Xiaomi Air purifier. I saw a lot of users that has one.
Hi @odiv,
Thanks for sharing!
If you want more tiles try customcard as a tile: https://github.com/DBuit/Homekit-panel-card#custom-card-as-a-tile
You can load the picture lovelace card in a tile and use style to make it fit!
Thanks for creating this. It is exactly what I have been looking for.
I’ve got it installed and working, but I have a few issues with configuring it.
First issue is that the popup is a switch, and not a dimmer. The light I am using is a dimmer. I’m not sure how to get the popup to be a dimmer instead of a switch.
Second issue is that half of the switch is off my screen, and i’m not sure how to fix it.
I’m using this in a picture-elements card with the Browser-mod popup option. Here is the YAML i have currently:
#OFFICE
- type: state-icon
entity: light.office
tap_action:
action: toggle
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: TEST
popup_cards:
light.office:
card:
type: custom:light-popup-card
entity: light.office
icon: mdi:lightbulb
actionsInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
settings:
openButton: Open
closeButton: Close
settingsCard:
type: entities
cardOptions:
entities:
- light.hallway
- light.bedroom
cardStyle: |
backgroundcolor:#FFF;
deviceID:
- this
style:
top: 41.25%
left: 68%
transform: 'scale(1.5, 1.5)'
Any help would be greatly appreciated
HI
I cannot get the media_player.media_play_pause to work. I understand that yoiúrs work fine?
Can you see a mistake in my config?
The popup works fine.
popup:
type: custom:media_player-popup-card
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-next
entities:
- entity: media_player.alrum
name: Alrum
tap_action:
action: call_service
service: media_player.media_play_pause
service_data:
entity_id: media_player.alrum
- entity: media_player.terrasse
name: Terrasse
Thanks in advance
I want a backgroud image for my Roborock with a popup, I got the following, but it is not looking right, is there someone that could tell me what I am doing wrong
title: Stue
useBrightness: true
useTemperature: true
tileHoldAnimation: true
titleColor: '#FFF'
statePositionTop: true
home: false
entities:
- title: Stuen
entities:
- entity: climate.stue
tap_action:
action: call-service
service: browser_mod.popup
service_data:
deviceID:
- kontor
<<: *termostat_stuen
- entity: light.hue_color_lamp_4
popup:
type: custom:light-popup-card
- entity: light.hue_color_lamp_3
popup:
type: custom:light-popup-card
- entity: light.hue_color_candle_3
popup:
type: custom:light-popup-card
- entity: media_player.google_stuen
name: Google Stue
- card: picture-glance
cardStyle: |
:host {
display: flex;
height: 100%;
}
noPadding: true
wider: false
higher: false
cardOptions:
entities:
- entity: sensor.roborock_state
title: ""
image: local/roborock.png
tap_action: !include popup/sidebar_vacuum.yaml```
I managed to get the dimmer to be recognized as a dimmer by adding
supportedFeaturesTreshold: -1
I am still having the same issue with alignment of the popup. It seems that anything i put in the style: section has no effect on the popup.
I added the same configuration i used above to a button card and I still have the same issue. This is what i see on my desktop:
cards:
- type: button
entity: light.office
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Office Light
popup_cards:
light.office:
title: ""
style:
position: fixed
z-index: 999
top: 100px
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.5)
flex-direction: column
margin: 0
card:
type: custom:light-popup-card
entity: light.office
supportedFeaturesTreshold: -1
brightnessWidth: 150px
brightnessHeight: 400px
Hi @DBuit
Have you worked on this in anyway?
Can you install via HACS custom repo or? It’s not explained for dummies (like me) in the repo on Github
- title: Lights
path: lights_path
cards:
- type: "custom:homekit-card"
enableColumns: true
statePositionTop: true
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Living Room
entities:
- entity: light.tv_light_1
- entity: light.tv_light_2
- entity: light.living_room_light
- entity: light.living_room_light_r
- column: 2
tileOnRow: 3
entities:
- title: Kitchen
entities:
- entity: light.beganegrond
- row: 2
columns:
- column: 1
tileOnRow: 4
entities:
- title: Upstairs
entities:
- entity: binary_sensor.wasmachine_status
- entity: weather.weersverwachting
- row: 3
columns:
- column: 1
entities:
- title: Bedroom
entities:
- entity: switch.doorbell_chime_active
this doesnt work at all and its straight from the examples
Hi,
I worked on it a bit it is working but not documented or anything. But you can use it with hacs as custom repo.
Hi,
is it possible to make a tile wider than just 2 times wide?
Thanks, did that. But still have trouble getting it going.
- title: Sonos
id: musik
panel: true
cards:
- type: "custom:custom-sonos-card"
name: Sonos
entities:
- media_player.alrum
- media_player.terrase
- url: /community_plugin/custom-sonos-card.js?v=1.0
type: module
\hassio\config\www\community\custom-sonos-card
Can you spot my error?
Thanks for your work, it’s awesome!
Quick one - how do I change a background of a single tile? I should use cardstyle, right?
Hi @DBuit! Great work here. Getting close to h e the first Version up and running 
Two questions:
-
I integrated my covers into the card. Sadly I can’t simply push the tile to just open it. I need to “push through” any idea how to configure this?
-
Pretty sure you saw @Mattias_Persson Theme.
A different take on designing a Lovelace UI
Any chance we get animated tiles too?
Thanks a lot
Thanks @DBuit this is a nice addition.
It looks great.
Will you also be able to add the off state definition for sidebarMenu items to differentiate visually the current state (as discussed before) ?
This is actually a much nicer and more elegant solution than sidebarMenu
Great work Sir!
anyone who could might help?
Hi @Flo.C,
What do you mean with push through? Is that longpress do you het pop-up? If hat you can set a tap_action to control An entity when you tap/click it.
I Will check the animation maybe i can add something Nice
1 Like