Hello if you refer to the report of Jimmy_Berglund on the mobile I still see only 3 days of weather forecast and not 5 as I see on the PC. Obviously I updated as you suggested Homekit-panel-card
Nice ty for your help! I submitted a close for the github submition i made. (And yes it works for me aswell)
I think thats more a problem about that there just aint room to fill the information on your phone and making you still being able to see what it says. its 100x100px on the desktop and 90x90px on the phone. If it were bigger you would have fewer buttons and it would not just look right. So i think thats more the problem making it look right. And the closes thing is what u get. If you want it to be 100% you could always make it a 3 row tiles insted.
But thats my guess. @DBuit would have to fill in if im wrong.
1 Like
That right jimmy. @claudiovillani58 it just does not fit. make the tile larger and it should fit.
Mobile tiles are 90 px and desktop tiles 100px but there are css variable available in the card to change this you could just set the mobile tiles to 100px but not sure it will fit 3 tiles on the phone screen.
Thanks all right
Claudio
hello everyone a question is there a homekit card that manages a dimmer lamp and a thermostat? if you have the code for lovelace could you share it?
Thanks to everyone for the support I recently entered this world
Hi, i want to let the buttons activate a script in HA
However i dont want to repeat that with every entity
I tried code underneath, but its not working
cards:
- type: "custom:homekit-card"
home: false
enableColumns: true
tap_action:
action: script.turn_on
style: |
:host {
--tile-background: #DDDDDD;
--tile-icon-size: 40px;
--tile-border-radius: 10px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: #5F9BEA;
--tile-name-text-color: rgba(0, 0, 0, 1);
--tile-on-name-text-color: rgba(255, 255, 255, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 255, 255, 0,5);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgb(255, 255, 255);
--tile-on-icon-color: rgb(255, 140, 0);
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
.button-inner .icon {
width:55px;
height:55px;
}
.button-inner .icon ha-icon {
width: 40px;
height:40px;
}
rows:
- row: 1
columns:
- column: 1
tileOnRow: 3
entities:
- entities:
- entity: script.douche
name: Douche
icon: mdi:shower-head
- entity: script.bad
name: Bad
icon: mdi:shower
- entity: script.welterusten
name: Slapen
icon: mdi:weather-night
- entity: script.dinner
name: Etentje
icon: mdi:silverware-fork-knife
Or do i need to repeat it with every entity?
If you check @DBuit Github page that you find on the start of this thread. then you can brows all his projekts. With the dimmer popup light card and the thermostat.
Excuse me, but i cant config my button card, it always shows this error : Custom element doesnât exist: homekit-card.
I tried to install browser_mod and add these to ui-lovelace.yaml
- type: module
url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js
- type: null
url: /community_plugin/Homekit-panel-card/homekit-panel-card.js?v=0.4.7
But seems no luck.
Please help me :(âŚ
Hi if you installed it with hacs than this should work:
- url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js
type: module
Hi,
this needs to be repeated, can do it like this srry
ok np, thx for the info, but the code is correct?
edit: mm its not working
rows:
- row: 1
columns:
- column: 1
tileOnRow: 3
entities:
- entities:
- entity: script.douche
name: Douche
icon: mdi:shower-head
tap_action:
action: script.turn_on
entity: script.douche
- entity: script.bad
name: Bad
icon: mdi:shower
tap_action:
action: script.turn_on
entity: script.bad
- entity: script.welterusten
name: Slapen
icon: mdi:weather-night
tap_action:
action: script.turn_on
entity: script.welterusten
- entity: script.dinner
name: Etentje
icon: mdi:silverware-fork-knife
tap_action:
action: script.turn_on
entity: script.dinnerCan you take look at my config I putt up
To move icons too left, to be in middle
Thanks Jmmiy
Hi,
You cannot use a script for entity. Because it van be anything. Use a custom tile where you set the icon and name you wanna show at set the tap action on that tile. Im not on pc so cant give you example niet buy look for fully custom tile or something on github instructions.
Sorry but you are looking wrong config
As an aside, Iâve been doing some customisation to make the edges of the buttons glow when theyâre on. Looks something like this:
It works really well, and I like the effect. However, the only way I can get it to work is to edit the homekit-panel-card.js file and add some CSS classes to the end of the static get styles() method:
.button {
background-color: var(--paper-card-background-color) !important;
}
homekit-button.event.button.on {
box-shadow: 0px 0px 5px 3px var(--primary-color) !important;
}
homekit-button.on, homekit-button .name.on, homekit-button .state.on, .button.on {
color: var(--primary-text-color) !important;
}
homekit-button, homekit-button .name, homekit-button .state, .button {
color: var(--secondary-text-color) !important;
}
homekit-button .icon, .icon {
color: var(--secondary-text-color) !important;
}
homekit-button .icon.on, .icon.on {
color: var(--primary-color) !important;
}
homekit-button .icon.climate {
background-color: var(--primary-color) !important;
color: var(--primary-text-color) !important;
}
div.card-title
{ padding-bottom: 20px !important; }
.header li
{ padding-bottom: 10px !important; }
.previous
{ display: none !important;}
This is because the styles seem to be set inline, so they override me putting these settings in my own custom CSS file.
Anyone out there (@DBuit?) have any ideas about how I/we could achieve the same effect without manually needing to edit the .js file after every upgrade?
2 Likes
Hi I tried your code by placing it where you suggested, but the frame does not appear around the switched card
1 Like
Hi,
Thanks for this great software.
I am running release 0.5.8.3
Actually the âupper right circle stateâ shows the light´s brigthness visualizing only a percentaje of its perimeter. That is ok.
Could it be possible to do the same for cover´s current_position? Actually it shows full perimeter.
In the screen capture you can see light and cover circle state.
My cover´s tile âŚ
- entity: cover.persiana_balcon
name: BalcĂłn
offStates:
- closed
state: cover.persiana_balcon
statePath: attributes.current_position
THK