Hello, i’ve tried to find a good section to post my question, but i suppose this is the right one if what i would like to do will become helpful for other users
i would like to create a CSS style to be applied to HABPanel that makes it like “Home” app in IOS.
i just want buttons with radius and a background. following an image.
i want to set “scenari” on th top, and below just some most used buttons for lights/blinds.
on the left menu i will “move” what in the picture is shown below (“home”, “rooms” and “automation”).
i know it should not be so difficult, but i’m zero skilled with CSS and worst creating new custom buttons widget…can anyone help?
Just read some stuff in the web about html, css and AngularJS. You are right, it is actuall not that complicated, but you need some time. So my guess is, it might be hard to find someone who writes the code for you. Just start and post some code to get help.
maybe due to a missing icon…can you please upload or send it to me an email?
because i’m trying to use the original homekit iconset but i’m not able to make it colored…ond i’ts only in svg
this is switch is perfect, we need only to make another switch for rollershutters, scenarios, thermostats and should be enough. how can i help you?
also, i’ve adjusted “border-radius” from 10% to 10px. so in this way it keeps the radius also when button is bigger or smaller.
edit 2: i’ve also disable higlight of item name when mouse on over. now is always black when ON.
got it! @Blogghe great job on this button!
here is the result after some modifications:
i’ve replaced some of your code to reflect exactly how the button is displayed in homekit, and i’ve also used the png icon of real homekit app. now i’m going to create all icons and then all buttons. the best way is to use in widget the possibility to point to img src by only inserting png path (as you done with icon size) but i’m not skilled enough soon i will post the updated code.
I slightly changed my previous file. I’m still trying to align them properly in HABPanel since they overlap when changing the screen size. I found a work around by changing the
‘margin-right’ value as seen below but I don’t know if this is the right solution…
the thermostat one is not finished yet. you can take my widget to recode everything better. i’m not a programmer so maybe many thing on the code are not optimized or are wrong…
for the icons i’ve preferred to use “img src” to point to png file, so it can be viewed perfectly. ok it’s not dynamic but works. icons are only png taken from screenshots of my phone check them out
at the moment i’m not able to solve dynamically the adapt when making bigger button
EDIT: UPLOADED THERMOSTAT WIDGET AND ICONS PNG. PUT THEM IN HTML FOLDER.
now we have to solve the adapt autoscaling problems…
EDIT 2: icons are autoresizing, so it’s almost ok. i have to learn how to scale font size when resizing the button from habpanel. check this out
I did some further work on the thermostat widget. This is what I have so far. I’m still struggling with the scroll menu (off, heating, cooling, auto) since I don’t have enough AngularJS skills…
I also transferred some css to a general file to keep the widget itself as clean as possible.
If aiming for the look in the first post which I was inspired by amoung other sources, you may like to try the CSS file in the link below. I was trying out some of the widgets in this thread and they were over writting the CSS and effecting the look. Suggest you don’t put styling into the widget, it should go into a master CSS file so you can change 1 file and your entire Habpanel changes to the new look.