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
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
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.
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
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
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 for slider 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
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:
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?
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
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?