HABPanel CSS

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 :wink:
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?

thanks!

1 Like

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.

yes you are completely right.
i’ve created this code, that draw the button as i want it to be.

this is the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
  background-color: #e7e7e7; color: black; /* Gray */ 
  border: none;
  color: black;
  /padding: 120px;
  /text-align: bottom;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  /margin: auto;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
  height: 280px;
  padding-top: 200px;
  padding-right: 100px;
  background-image: url(/icons/classic/uvindex.svg);
}
</style>
</head>
<body>
  <button class="button"><b>Luce Sala</b></button>
</body>
</html>

and this is the button look like.

image

now i would like to fix 2 things:

  • i would like to have the button adapt automatically to blue square of habpanel when resized…it only adapts when i change width but not in height…
  • i would like to have, if possible, words always located in bottom left also when button is resized.
  • i would like to inser an image (for example a rollershutter) into the button.
  • last one, how can i make the button change color when switched on/off?

thanks anyone that want help me :slight_smile:

Hi Ruben,
I am trying to achieve the same results as the Home app.
This is what I have so far. :slight_smile:

Homekit light switch.widget.json (2.8 KB)

it’s almost…WOW!!! perfect! just a question:

why this?

image

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 :frowning:
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:

image

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 :frowning: 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…

  .gridster-item {
  	margin-right: 15px !important;
  	left: initial !important;
  }

To create changing icons according to the state of the website, see this link: https://www.openhab.org/docs/configuration/items.html#icons. How do you create you icons? Are you remaking them as svg?

Homekit Light Switch 2.0.widget.json (2.7 KB)

this new version of the widget make crazy my view…maybe there is a typo somewhere?
this is viewed with IE

this is what happen to my button on the left. this is when i remove your button:

Bottone Luci HomeKit.widget.json (2.6 KB) Bottone Tapparelle HomeKit.widget.json (2.6 KB) Bottone Termostato HomeKit.widget.json (3.0 KB)

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 :wink: check them out :slight_smile:
at the moment i’m not able to solve dynamically the adapt when making bigger button :frowning:

EDIT: UPLOADED THERMOSTAT WIDGET AND ICONS PNG. PUT THEM IN HTML FOLDER.
now we have to solve the adapt autoscaling problems…

light rollerdown rollerup thermo

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 :wink:

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.

Homekit temperature.widget.json (6.1 KB) homekit-theme.css (2.6 KB)

Yes very nice! Is it possible to have the top left circle all green/grey/red based on the thermostat status (heating,cooling,off)?

Still figuring that one out since I don’t have airconditioning and don’t know how to combine multiple items…

Do you know a good way to make icons? Whenever I make one, it is really small and does not have the right dimensions?

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.

New switch widget on the way. Thread has some pictures of the looks you can get from it.