Hi,
Thx
Borders are fixed.
Yeah troubles with the icon size, willing to add a style for it?
Will wait for fix of disabling icon color change.
Any idea why there is a little blank space before the icon ,so its not aligned with text?
I really appreciate the slider not being visible in off state. (as is now) To me this makes sense.
Sadly, I don’t get the sliders in the latest update. Neither when it’s off nor when it’s on.
If I turn back to the first version with sliders it’s working.
is it possible to use svg-files instead of icons?
Hi Lubbert,
please let me ask how you get the notification to show the circle with brightness percentage? Is this a feature of the homekit style card, or a custom made notification. It s just I cant spot it in the code you posted.
Native solution in the homekit card, i also have made a solution with the button card combined with circle sensor which can be found here -> Lovelace: Button card
Here is my code from the Homekit card:
id: MobileLights
title: MobileLights
path: Mobile-Lights
panel: true
icon: mdi:lightbulb
cards:
- type: "custom:homekit-card"
useBrightness: true
useTemperature: true
titleColor: "#FFF"
enableColumns: true
statePositionTop: true
# style: |
# :host {
# --tile-background: #ff0000;
# --tile-on-background: #00ff21;
# }
rows:
- row: 1
columns:
- column: 1
# tileOnRow: 4
entities:
- title: Begane grond
entities:
- entity: light.grp_beganegrond
name: Begane grond
spin: false
icon: bha:mirror-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
- entity: light.grp_toilet
name: Toilet
icon: bha:ceiling-lamp
slider: true
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings: true
thanks, the https://github.com/custom-cards/circle-sensor-card is new to me. cool.
thought I had seen it fly by in A different take on designing a Lovelace UI somewhere, but couldn’t find it anymore.
this might be a simple solution indeed.
edit
found it in the above post and linked config of Mattias Persson (mat8707)
custom_fields:
info: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness / 2.54);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style="
transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="10">%</tspan></text></svg>`; } ]]]
and styling:
styles:
custom_fields:
info: &circle_pos
[top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
but this doesnt really auto-adjust the size and position…
will ask Mattias in his thread.
Hi,
You might need to set:
:host {
–tile-background: #ff0000;
–tile-on-background: #00ff21;
}
These 2 color settings to see difference.
You also set slider to show in your config?
No not at the moment, if you want please put this on github so i can random to add maybe 
Hi @skank,
Just released update and added --tile-icon-size to set size of the icon default it is 30px.
Hi @arasco85,
It works for me with your config:
- title: test
cards:
- type: 'custom:switch-popup-card'
entities:
- fan.fan_test
buttons:
- color: '#FFF'
icon: 'mdi:fan'
icon_color: 'rgba(255,255,255,1)'
name: High
value: high
- color: '#FFF'
icon: 'mdi:fan'
icon_color: 'rgba(255,255,255,1)'
name: Medium
value: medium
- color: '#FFF'
icon: 'mdi:fan'
icon_color: 'rgba(255,255,255,1)'
name: Low
value: low
- icon: 'mdi:fan-off'
name: 'Off'
value: 'off'
entity_value_path: attributes.speed
icon: mdi-fan
noActiveState: '-'
service: fan.set_speed
service_data:
entity_id: this
speed: value
fullscreen: false
Got this:
Working thx, now left is only the useBrightness and useTemperaturefix , so color doesnt change of the icon
Thanks for looking! I can get the card to pull up but it seems like the buttons function wont work. It will show the correct speed value when changed via a different source but the buttons wont call a new speed. So the card is getting the correct attribute but i cant get it to call.
Just wanted to drop by and say thanks for the work you’ve done with this card, I like the homekit aesthetics coupled with the power of home assistant
Hi @arasco85,
you got any erros in logs when using the button?
Just something you could try, place the value on the buttons in quotes: ‘high’
Maybe it does not see it as a string?
Let me know
where would I need to put the :host… part?
Yes, I defined slider true:
entities:
- entities:
- entity: light.esstisch
tileHoldAnimation: true
slider: true
wider: true
- entity: light.sofa
slider: true
- entity: light.lightstrip
slider: true
- entity: media_player.wohnzimmer
popup:
settings:
fullscreen: false
sliderColoredByLight: true
closeButton: Schließen
openButton: Einstellungen
type: 'custom:light-popup-card'
title: Wohnzimmer
horizontalScroll: true
statePositionTop: false
tileHoldAnimation: true
type: 'custom:homekit-card'
But I don’t get any sliders:
Log Details (ERROR)
Logger: frontend.js.latest.202006033
Source: components/system_log/__init__.py:209
First occurred: June 18, 2020, 10:02:22 AM (8 occurrences)
Last logged: 2:34:55 PM
http://192.168.1.168:8123/frontend_latest/chunk.36ce3d06af20541e9198.js:2:61210 Uncaught YAMLException: unacceptable kind of an object to dump [object Undefined]
http://192.168.1.168:8123/hacsfiles/switch-popup-card/switch-popup-card.js:2523:43 Uncaught TypeError: Cannot assign to read only property 'entity_id' of object '#<Object>'
It works fine as a popup. Just not using it as a non popup. Not sure where to look but i greatly appreciate any help.
Hi,
i have the same problem here:
2020-06-20 16:38:13 ERROR (MainThread) [frontend.js.latest.202005195] https://xxxxxxx:8123/hacsfiles/switch-popup-card/switch-popup-card.js:2523:37
TypeError: Attempted to assign to readonly property.
Hi guys – is there a way to incorporate custom mini-media-player either in the Panel or Sidebar?
I’m using the following and getting the error
"Specify an entity from within the media_player domain."
Thanks
type: 'custom:homekit-card'
useBrightness: false
useTemperature: false
titleColor: '#FFFF'
statePositionTop: true
entities:
- title: Media
entities:
- card: 'custom:mini-media-player'
cardOptions:
entities:
- media_player.basement_sonos_beam
Is there possibility that for example : mini media player card or media player card shows what is on, like in normal , when is not homekit card
Background to be what is on media player
Thx
Hi,
I am trying to use popup with “custom:switch-popup-card” for my covers
“service: cover.set_cover_position” is working fine but i don’t have the status reported at the top and also no icon ?
Here is the conf:
- entity: cover.bureau
name: Bureau
offStates: "closed"
offIcon: mdi:window-shutter
icon: mdi:window-shutter-open
state: sensor.cover_pos_bureau
popup:
type: custom:switch-popup-card
noActiveState: '-'
entity_value_path: attributes.position
service: cover.set_cover_position
service_data:
entity_id: this
position: value
entities:
- cover.bureau
buttons:
- icon: "mdi:window-shutter-open"
value: 100
name: "Ouvert"
color: "#FFF"
icon_color: "rgba(255,255,255,1)"
- icon: "mdi:window-shutter-open"
value: 80
name: "80%"
color: "#FFF"
icon_color: "rgba(255,255,255,0.8)"
- icon: "mdi:window-shutter-open"
value: 50
name: "50%"
color: "#FFF"
icon_color: "rgba(255,255,255,0.6)"
- icon: "mdi:window-shutter-open"
value: 30
name: "30%"
color: "#FFF"
icon_color: "rgba(255,255,255,0.4)"
- icon: "mdi:window-shutter"
value: 0
name: "Fermé"
color: "#FFF"
icon_color: "rgba(255,255,255,0.2)"
Also can be possible to add “actions” buttons on the “custom:switch-popup-card” like the other card ?
Thanks for your help
actionsInARow: 3
actions:
- service: cover.open_cover
service_data:
entity_id: this
name: open
icon: mdi:window-shutter-open
- service: cover.stop_cover
service_data:
entity_id: this
name: stop
icon: mdi:stop
- service: cover.close_cover
service_data:
entity_id: this
name: close
icon: mdi:window-shutter