Custom Lovelace Card - Homekit style card

I like the idea but isnt it an option to have the slider at the right edge, instead of the middle of the card?

How do i select the beta version in HACS or do i need to add the beta from Git?

Maybe, how would you see that?
Im just testing atm maybe it wont work at al :slight_smile:

Chrome is working safari is kinda buggy at the moment btw

When you have the card in HACS, you can click the 3 dots (bottom right) and click on reinstall.
Than a pop-up shows and there is a switch to enable beta versions

Hello everyone,

If you use any of the pop-up cards they are all updated with some icon fixes.
For the media player and cover pop-up i added that you can already see the volume/position while sliding.

Check my github to find the cards: https://github.com/DBuit?tab=repositories

1 Like

Mm dont know
maybe a scrollbar at the bottom of the button, or a scrollbar to the far right of the card?
Iā€™m not sure if thats a good way, maybe popup is better or not?
What would you recommend as simple popup for adjusting brightness only, so a simple slidebar

Also with your experience, whats the best thing thing to use? double tap to activate popup? Cause you dont always want the popup, most of the time i just toggle it on/off
The switch popup card?
Looks nice and clean

i now use light popup it has the slider on hold action / long press
and tap is on / off

Thanks, found it!

Will try it out (also with my partner for the WAF) and will provide feedback.
image

1 Like

good work, iā€™ll try out the cards this evening.
Also the sidebar card looks interesting

Hey Dbuit

Wow cool feature!
Just tested this
Its much nicer and cleaner than popupcard i think

However i did encounter troubles :stuck_out_tongue:

Ill demonstrate with pics

Eettafel is when the light is completely out. i would like to stay it that way
When i turn it on, you get the slider, however when i slide it completely to the left, the button doesnt return to the one like ā€œeettafelā€, it looks empty see the pic .
You shouldnt see the slider if its off i think
If i move it back it comes ok again

Maybe it would look nice to if the grey part (which is the off %) would have the same color as when its completely off, if u know what i mean (the shadow color)

edit: i thought it would slide from top to bottom, but when i tried , i saw it slided horizontallyā€¦ actually very good ! no need to put it to the right then :wink:

Hi @skank,

Thanks for testing, just released new update.
The colors should be the same as the other tiles. But the default css variable that are used for these colors --tile-background and --tile-on-background are default rgba values, this means that are part transparent this does not work :frowning: for slider :frowning: so you have to set these variables to a hex color code like #FFF you could just color pick the color as it is right now and it gives you a code that looks exactly like you have right now so no big deal i think.

Also when the light is off it will hide the slider.

Let me know what you think :slight_smile:

ok thx for the update.
ok when i slide it to the left now, to turn to , the slider now is gone
Good ! much better !

Iā€™m not sure what you mean with the color though, how do i fix it?

This is the start of my code

title: Lichten
icon: 'mdi:lightbulb-outline'
path: lichten
theme: ios-dark-mode
panel: true
cards:
  - type: "custom:homekit-card"
    home: false
    enableColumns: true
    style: |
      :host {
        --tile-background: rgba(0, 0, 0, 0.3);
        --tile-border-radius: 12px;
        --tile-width: 100px;
        --tile-height: 100px;
        --tile-on-background: rgba(255, 255, 255, 1);
        --tile-name-text-color: rgba(255, 255, 255, 0.7);
        --tile-on-name-text-color: rgba(0, 0, 0, 1);
        --tile-state-text-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 1);
        --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;
          }

i need to change the rgb color of --tile-background and --tile-on-background to hex color?

If i am right the colors are not the same for the slider and a default tile?
So yes you need to change the rgba() to a # color for the 2 you mentioned

to a different color or to the same but hex?

so
ā€“tile-on-background: rgba(255, 255, 255, 1);
would be
ā€“tile-on-background: #FFFFFF

correct? And how do i get the opacity then?
for tile-background?

correct, you dont get the opacity. but there is a color that will look the same.
IF you use chrome you can install a extension colorzilla for example to get a color picker and you can just pick the color that looks like the current opacity one

Cool didnt know about colorzilla
thx
very handy

Itā€™s working!

Only had to change tile background

not the tile on background

Nice thx for the new feature!

Iā€™m still in the look for a light and dark theme, which look very nice with appropriate background, which are you using?

Great, the update worked and now i donā€™t see a slider when the lights are off. I however found another problem but my guess that has to do with the color.

In the previous update the slider was visible in my themes that i use for day/night but with the new update this is gone and itā€™s the same as the background

Previous update:
image

New update 4.9.3:

Another question, the slider is not yet working on tiles with a cover underneath, this is correct?

Hi,

so first i only made it for lights for now.
I didnt thought of covers so let me know if you have other entities that should be able to have a slider

About the color. Try setting in the style of the card the css variable ā€“tile-on-background and --tile-background and set it to a hex color.

ā€“tile-on-background is probably white so #FFF
and maybe to test you could set --tile-background to #ddd this should also show the slider handle

Iā€™m also having a light and dark theme

How do you set the background of the tile different (light theme and dark theme) when the light is off?

@DBuit

There is something wrong with my icon
Its smaller than used to be, and its not aligned with the text

Not sure why, been trying to fix without luck

Bad

Good

edit: 2 other questions

  • as you can see
    the corners in the bad are rounded, but all my other cards are sharp (see good one), how do i get the borders of your card sharp like the rest of my cards?
  • the icon color when its on is yellow, however when i adjust the brightness, the color of the icon changes too, is there an option to keep it 100% like its on?