Location of the CSS for editing the dummy and switch looks

Hi,

HABpanel is great, so much more capable then my oid dashboard based on the homeautomation for geeks.

Sorry if that is noob question but I just upgrade to OH2 and changed dashboard to HABpanel in one go. And I’m a bit lost (and the furious woman will wake up in the house without any light switches in 6h)

I need to re design the the widgets a bit be readable from a distance on my 7" wall panels. (1024x600 in wall, POE android tablets)

Generaly the Name of the Dummy and Switch is way to small and that is not changable from the user interface. Where do I find the relevant files on the OH2 server?

Also do you notice that button (use it for a master switch) is not consistent with the dummy and switch as it has a name below the icon?

Sorry completely off-topic, but can I ask what in wall tablets you have that are POE? I haven’t found any descent affordable options.

Hi @xsherlock,

You could try templates and customize your layout there.

Check out:

BR,
Dim
Ps: Only 4h left! :slight_smile:

Yes I know templates is the way to go but to craft a dummy or a switch from scratch is a large task and will take me ages. I would prefer to modify the orginal dummy/switch, since I will never use the orginal versions. Where are those tempates on the server?

IMHO the orginal size of the elements is too small for my application. I do test the Smart Home UI on my wife and mother in law and in order for to be usable by anyone. The 4x2 grid with large descriptive text is max what a 70years old can handle.

As you can see with habpanel it does not look great yet. Font is to small and notification that the light is on is not pronouced enought.

Here for comparision is my old interface based on the “home automation for geeks” tutorial that looked better, but was only limited to switches and sensors. I will try to recreate that in HABpanel

@dim I use sibo Q896
https://sibo.en.alibaba.com/product/60303735171-801600510/Q896_7inch_Home_Automation_Android_Tablet.html

At 160 USD they are expensive for the specs but have a decent front glass capacitive IPS screen and the POE. POE and Wired Ethernet is a MUST if you want to deploy 10 of them in the house. I only have one UPS that is holding up 48 port POE switch and in case of power failure it keeps all the panels on.

---------------Edit-----------------

Ok so after 3 days I’m almost there using templates instead of buttons and switches.

Those are very rough hacks to get the buttons readable from a distance. And they are now consistent with labels below for both buttons and switches.

I still have some things to resolve, may be somene knowleagable in html css can give me a hint.

I wish I could use a custom icon for the switch.

switch code is:

<div style="background: rgba(0,0,0,0.5);
            margin-top: 3px;
            margin-left: 3px;
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            width:236px; height: 236px;
            ">
	<div class="row" style="height: 30px" ></div>
  
	<div class="row">  
  		<div ng-init='model={"name": "Living Low", "item": "kitchen_outa2_entry", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "100" }'>   
    		<widget-switch   ng-model="model" />
  		</div>
	</div>
	<div class="row" style="
  		  font-size: 2em;
  		  font-family: Roboto, Helvetica, sans-serif;
                  text-align: center;            
  		  margin-top: 30px;
                  margin-left: 0px;
                  margin-right: 0px         
                        ">Entry Light
</div>
</div>

I have a custom svg icon in the html directory so it is available at localhost:8080/static/icon.svg but how to use it in HABpanel switch?

And my second problem is the other way round
the master buttton replacement code is:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<div style="background: rgba(0,0,0,0.5);
            margin-top: 3px;
            margin-left: 3px;
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            width:236px; height: 236px;
            ">
	<div class="row" style="height: 30px;border: 0px;border-style: solid" ></div>
  
	<div class="row" style= " text-align: center;" >
      <button  
              style= "border: 0px; background: rgba(0,0,0,0) " 
              ng-click="sendCmd('gLights', 'OFF')">
        
      <i class="fa fa-power-off" style="font-size:100px;color:#8899AA"></i>
        
      </button>
      
  	
	</div>
	<div class="row" style="
  		font-size: 2em;
  		font-family: Roboto, Helvetica, sans-serif;
                text-align: center;
                margin-top: 30px;
                margin-left: 0px;
                margin-right: 0px         
                        ">Master OFF
</div>
</div>

And I wish I could use the orginal HABpanel icon instead of calling for a FontAwsome. I found them at localhost:8080/habpanel/assets/icons/smarthome-set/name.svg but dont know how do I exactly load them into my icon tag <i>

1 Like
<widget-icon iconset="'smarthome-set'" icon="'bulb'" size="150" state="itemValue('gLights')" />

No way to use a custom icon in a widget-switch now. Changing the labels text size of regular switches and dummy widgets makes sense and isn’t that hard to do, it’ll probably be included at some point.

Thanks, icon widget does the does the job.
Is there a documentation on the list of all widgets available in the templates?

As for the custom switch icons would be great if the there was an option to make the HABpanel just browse the icons in the/etc/openhab2/icons/HABpanel so the users could put the svg files there.

Some widgets might work, some don’t (for example, the knob widget isn’t working because it tries to adjust its size to the parent tile). Including widgets in a template is definitely not a supported feature at the moment, so no documentation. Reverse engineering their source code is your best option right now.

Embarrassing hack. The knob looks up three levels for a width.

<div class="col-sm-3" ng-init='volume={"item":"your_control","type":"knob","floor":0,"ceil":100,"step":1 }'>
   <div style="width:100px">
      <div>
         <div><widget-knob ng-model="volume" /></div>
      </div>
  </div>
</div>

so - where are the css files/themes located in order to customize it?

1 Like

I couldn’t really find an answer above yet to your question where the actually css can be found or how you can overwrite / add a style. Here is what you can do:

  • AFAIK the CSS file that is used is in /usr/lib/node_modules/frontail/web/assets/styles but you should only use that for reference and not really edit it.
  • if you want to add css or overwrite css, I would recommend to read the following document which I found in the openhab habpanel github project: https://github.com/pmpkk/openhab-habpanel-theme-matrix
  • Basically what you have to do is
    ** create a sub folder (eg. myfolder) in /etc/openhab2/html/myfolder
    ** add a css file mycss.css to the folder and add your styles
    ** then in the habpanel ui go to the settings on the left and click the cog wheel on the bottom
    ** Look for the setting "additional stylesheet (optional) and add the file path /static/myfolder/mycss.css

Hope that works for all who want to modify and optimize the css.

Hi
I also have a Sibo 7" touch screen

my screen is not dimming down/turning off if I dont touch it, did you find a solution for this in your installation.??

What version do you have, I noticed the behaviour is diffrent depending on the version of the hardware, 4 core verion is dimming so much, i have utility to keep it awake as I would not see it in direct sun.