For a long time I’ve been searching for an easy way to control my lights and switches on touch screen devices but none of the cards that I’ve tried did what I wanted them to do, so I decided to make my own card instead.
https://github.com/tonyflowed/dimmer-button
Inspired by the quick access device controls on Android 11 I tried to make a card that’s both compact and easy to use on touch screens.
One tap toggles the device and sliding over the button sets the brightness. For devices without support for setting the brightness, both sliding and tapping toggles the device on or off.
This is my first attempt at creating a lovelace card so hopefully everything works as expected, if it doesn’t let me know!
Thats exactly what i was searching for over the past last year, it would be awesome if it would be possible to set as background an image which then got lit like your card! and perhaps a possibility to set the slider vertically! And also sorry to feedback this, the card isnt working with ipad 14.3:/
But overall this is really a neat card! thanks for this contribution and the great work!!! Awesome!!!
I’ll see if I can add that!
That’s a shame it’s not working though, I tested it on all my devices before I uploaded but unfortunately I don’t have any apple devices to test on. Which part isn’t working?
Thanks for it is displaying the slider correctly but sliding on my tablet doesnt work (same goes for my phone with ios 12.4.3 - it worked one time but cant replicate, been sitting here and sliding over the phone like an idiot )- if you need any help dont hesitate to ask:+1:t4: i am a bit busy but will look here as often as possible:hugs:
Just uploaded a new version, not sure if I fixed the ios problem or not but I included background images and a bunch of new features! Let me know if it fixed it for you or broke something else
thanks for your update and im really sorry to say that nothing has changed for me - but perhaps you could post your lovelance config for the showed cards on github and here so i can try to find some config errors on my side=)
Exactly what I have been looking for as well. Great job! I second the ability to set the slider vertical.
Also I prefer the look of a slimmer slider around 50px. Is there a way to center the icon/percentage and also display the friendly name to the right of the icon/percentage?
Uploaded a new version just now.
I’ve experimented a bit with vertical sliders but the issue is I don’t know how to differentiate between intent to scroll and intent to set value. Seeing as it’s not very hard to work around it I included the option to set direction anyway, but scrolling is disabled on vertical sliders for now. I changed the styling a bit as well to make it more responsive so everything should scale better now. I also tweaked a couple of things which should improve the card overall.
For the ios issues, I think it might be the same issue as discussed here. A polyfill might work but seeing as I don’t have a way of testing I’m not sure how to go about it.
Thanks for your hard work! Ill try everything on my Ios Devices and well feedback what I experience. Thanks nevertheless for your work with the card =)
Hi, I uploaded the json file to www folder
and then created the manual card with type: ‘custom:dimmer-button’
but it says Error: Custom element not found: dimmer-button.
Anything else to do . sorry i’m a newbie.
I’m fairly new as well (7 months into HA) and had the same experience as you but I looked at my 2 other Lovelace Resource URL’s for /local/ and they have ?v=#.# appended to then so I gave it a shot and it worked!
@tonyflowed Can you confirm this is required and if so, update the docs? It looks like the ?v= will take any number but lovelace seems to want something…
Also, it would be nice to share your code for the example panel as a tutorial or a how-did-he-do-that for us newbies at GitHub - tonyflowed/dimmer-button!!
Thanks for the reply @dbrunt.
Are you implying to rename the json file in www folder.
If so I did that and it still ain’t working.
I think its for the version of the component.
No, not the js file in the www folder, that stays the same. When adding the card resource manually via Configuration, Lovelace Dashboards, Resources, specify the URL like this /local/dimmer-button.js?v=0.1.
Or you can add the card as pointed out by @7even via the HACS Front End, Custom repositories, URL: https://github.com/tonyflowed/dimmer-button, Category: Lovelace.
The installation documentation is really unclear for the less knowledgeable users! Hopefully it’s clearer for you now. It is for me…
it is displaying the slider correctly but sliding on my tablet doesnt work (same goes for my phone with ios 12.4.3 - it worked one time but cant replicate, been sitting here and sliding over the phone like an idiot 
)- if you need any help dont hesitate to ask:+1:t4:
