Overall "skin" based on the Orange Tree theme with custom widgets and styles

ysc · July 9, 2017, 4:56pm

This is another example of using an additional stylesheet file (a new option in 2.1) along with custom widgets to change HABPanel’s appearance significantly.

The design has been first suggested here: New design talent wanted!

Screenshot

Note: it’s optimized for a 16:10 aspect ratio, YMMV.

Instructions

First, create a new file in conf/html and name it orange-tree-overrides.css with the content below:

/* Use with Orange Tree theme and switch-leftborder & slider-leftborder
   custom widgets from https://community.openhab.org/t/overall-skin-based-on-the-orange-tree-theme-with-custom-widgets-and-styles/31307 */

/* Override some variables */
:root {
    --primary-color: #ff9c27;
    --chart-stroke: #123;
    --chart-fill: #61635e;
    --chart-tooltip: #000;
    --widget-box-shadow: none;
    --box-bg: none;
}

/* Don't uppercase drawer menu entries */

.drawer ul.menu li {
    text-transform: none !important;
}

/* Graph overrides */

.x-axis g.tick:nth-child(4n+4),
.x-axis g.tick:nth-child(4n+2) {
    display: none;
}

.y-axis g.tick:nth-child(2n+1),
.y2-axis g.tick:nth-child(2n+1) {
    display: none;
}

.chart-legend {
    display: none;
}

.chart-content {
    height: calc(100% + 1.5em) !important;
}

.dot-series .dot {
    display: none;
}

.dot-series .dot:nth-child(45n) {
    display: inherit !important;
    stroke: var(--primary-color);
    fill: var(--primary-color);
    r: 1;
}

.area-series {
    fill: var(--chart-fill) !important;
    stroke: var(--chart-fill) !important;
}

.line-series {
    stroke: var(--chart-fill) !important;
}

/* Overrides for the label widget */

.labelwidget-content {
    margin: auto;
    width: 100%;
    text-align: left;
    font-size: 17px;
    font-weight: bold;
}

/* Overrides for the dummy widget */

.dummy-content small {
    font-size: 0.5em;
    vertical-align: super;
}

.dummy-content {
    text-align: left;
}

.dummy .icon.backdrop {
    right: 0;
}

.dummy-content span:not(.value) {
    font-size: 13px;
}

/* Styles for the custom items */

.leftborder {
    float: left;
    margin: 8px 10px 10px 0;
    height: 2.5em;
    width: 7px;
    border-left: #646361 solid 2px;
    border-top: #646361 solid 2px;
    border-bottom: #646361 solid 2px;
}

.leftborder-label {
    text-align: left;
    font-size: 13px;
    margin-bottom: 8px;
}

.switch-leftborder .btn-primary {
    background-color: var(--primary-color);
    border-color: black;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: bold;
    color: black;
}
.switch-leftborder .btn-primary:active {
    background-color: hsl(29, 100%, 50%);
    color: black;
}
.switch-leftborder .btn-default {
    background-color: #c2c7c3;
    border-color: black;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: bold;
    color: black;
}

/* RZSlider overrides for the custom widget */

.slider-leftborder .rzslider {
    margin-top: 5px;
    margin-left: 0;
}

.slider-leftborder .rzslider .rz-pointer {
    width: 16px;
    height: 16px;
    top: -6px;
    background-color: #c2c7c3;
}

.slider-leftborder .rzslider .rz-pointer:after {
    display: none;
}

/* Color picker overrides for the custom widget */

.colorpicker-leftborder .colorpicker-content-flex {
    margin-left: 5px;
}

.colorpicker-leftborder .c-ckolor__picker {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #61635e;
}

/* Styles for the blinds widget */

.blinds-leftborder .blades {
    display: inline-block;
}

.blinds-leftborder .blades .blade {
    display: block;
    width: 80px;
    height: 5px;
    margin: 3px;
    background-color: #61635e;
}

.blinds-leftborder .blades .blade.down {
    display: block;
    width: 80px;
    height: 5px;
    margin: 3px;
    background-color: #c2c7c3;
}


.blinds-leftborder .rzslider {
    margin-top: 5px;
    margin-left: 0;
}

.blinds-leftborder .rzslider .rz-pointer {
    width: 16px;
    height: 16px;
    left: -6px !important;
    background-color: #c2c7c3;
}

.blinds-leftborder .rzslider .rz-pointer:after {
    display: none;
}

.switch-leftborder.playback .btn-default {
    background: transparent;
    border-color: #61635e;
    color: #61635e;
}

Now start from scratch in HABPanel (for instance, open a new “incognito” window in Chrome) - you should see the “Welcome to HABPanel!” tutorial.

Switch to edit mode and go to Advanced settings;
Under Theme, switch to Orange Tree;
Reference the CSS file created above by typing /static/orange-tree-overrides.css in the Additional stylesheet text box;
Go to Custom Widgets by clicking on the Manage > button;
Click Import… and import all of the files below (keep the suggested names):
switch-leftborder.widget.json (796 Bytes)
slider-leftborder.widget.json (707 Bytes)
colorpicker-leftborder.widget.json (588 Bytes)
blinds-leftborder.widget.json (2.4 KB)
volume-leftborder.widget.json (1.6 KB)
playback-leftborder.widget.json (1.6 KB)
Go back to Advanced settings and click on the Edit the local panel configuration (experts only) link;
Click Import and import this file:
habpanel-config.json (17.0 KB)
The Living Room dashboard is obviously tailored to my own living room, so adjust the layout and the widgets’ settings to match your needs and items;
Don’t forget to save on the server when done or it will be lost when you close the (incognito mode) browser! Click on the Save the current configuration to a new panel configuration and give it an ID.

Enjoy!

gene · September 4, 2017, 4:22pm

Hello,
this is realy nice, how can i change orange to another color?

Greets

ysc · September 4, 2017, 6:14pm

Yes, change this line in the CSS:

--primary-color: #ff9c27;

to whatever color you prefer, for example for green:

--primary-color: #00ff00;

gene · September 4, 2017, 8:10pm

nice thanks, and how can i change the Home icon Color?
And can change the bar form the rollshutter? i want to swamp him than i can put them down

and can i change the maximalm number behind the dots?

ysc · September 6, 2017, 6:47am

Check this for the other variables you can override in your CSS:

github.com

openhab/org.openhab.ui.habpanel/blob/master/web/assets/styles/themes/orange-tree.css

/*
 * Theme by Kuba Wolanin / github:kubawolanin
 *
 * Based on CometVISU/Knx template suggested by @Fejitatete
 * on this thread:
 * https://community.openhab.org/t/new-design-talent-wanted/29718
 */
:root {
  --body-bg: #09120f;
  --body-color: #a4a4a4;
  --primary-color: hsl(29, 100%, 50%);
  --box-bg: rgba(255, 255, 255, .01);
  --header-bg: var(--body-bg);
  --widget-design-bg: #191716;
  --widget-text-color: #a4a4a4;
  --widget-border-radius: 3px;
  --widget-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .8), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
  --icon-color-filter: invert(40%) sepia(100%) hue-rotate(3deg) saturate(1000%);;
  --icon-color-off-filter: invert(60%) sepia(80%) hue-rotate(180deg);
  --icon-backdrop-filter: invert(60%) sepia(100%) hue-rotate(165deg) opacity(15%);

This file has been truncated. show original

The one controlling the icon should be --icon-color-filter, you’ll have to play with the hue-rotate part (and possibly others). Add it inside the :root block.

Edit the dummy widget’s settings and use the format text box (specs: GitHub - alexei/sprintf.js: sprintf.js is a complete open source JavaScript sprintf implementation) or check “use server-provided format” if the item includes format information.

For the other things, you’ll have to change the widget’s code.

Andrew_Pawelski · September 6, 2017, 3:04pm

how do I do the sensors and graphs for them?

Kimzer · September 8, 2017, 7:13am

Anyone got a decent looking spotify controls for this?

overrunner · September 17, 2017, 6:15pm

Awesome! Is it possible to switch the Blinds direction to reverse?

Jonas88 · September 20, 2017, 8:05am

That is just great! Can you please tell me how to configure the XY-Graphs to link them to the items of temp and humidity?
I designed a few additional Objects based on your great design and will share them the next days (mainly Media control for my TV).

msa · September 23, 2017, 8:51am

Awesome! Is it possible to switch the Blinds direction to reverse?

Yes, you have to tweak the code.
Go to “Manage Custom Widgets”
Click on “blinds-leftborder”
Add a new style attribute (inverted: true) to the vertical slider:

<div class="blinds-leftborder" 
     ng-init="model={item: config.item, hidelabel: true, vertical: true, hidepointer: true, hidelimits: true, inverted: true }">

Finally you have to adjust the blinds comparisons which indicates down and should look like following code:

<div class="blades">
    <div class="blade" ng-class="{ down: +itemState(config.item) > 0 }"></div>
    <div class="blade" ng-class="{ down: +itemState(config.item) > 12.5 }"></div>
    <div class="blade" ng-class="{ down: +itemState(config.item) > 12.5*2 }"></div>
    <div class="blade" ng-class="{ down: +itemState(config.item) > 12.5*3 }"></div>
    <div class="blade" ng-class="{ down: +itemState(config.item) > 12.5*4 }"></div>
    <div class="blade" ng-class="{ down: +itemState(config.item) > 12.5*5 }"></div>
    <div class="blade" ng-class="{ down: +itemState(config.item) > 12.5*6 }"></div>
    <div class="blade" ng-class="{ down: +itemState(config.item) > 12.5*7 }"></div>
</div>

Dominic_Bialas · October 12, 2017, 4:20am

Hey there,

Did anybody extend this great theme with widgets for climate control?

If so - it would be great when the widget could be shared here…
Greetings
Nic

Dominic_Bialas · October 13, 2017, 4:25am

Hey there once again,

is there a possibility to get the “bracket” (left border) to the dummy widget too?
What would i have to do?

Do you have any suggetions?

Greetings nic

Dominic_Bialas · October 14, 2017, 11:11am

Just another question: I have the following code:

<div class="leftborder"></div>
<div class="leftborder-label">{{ngModel.name}}</div>
<div class="value" style="width: 17%; ; display: block; margin-top: -6px; font-size: 25px;">{{itemState(config.item)}}°C <span><widget-icon iconset="'smarthome-set'" icon="'temperature'" /></span></div>

How could i get the icon in the same line with the same size as the font ?
For now the icon is under the text / value.

@ysc could you help?

ysc · October 14, 2017, 5:51pm

<div class="leftborder"></div>
<div class="leftborder-label">{{ngModel.name}}</div>
<div class="text-left" style="display: block; margin-top: -6px; font-size: 25px;">
  <span class="value">{{itemState(config.item)}}°C</span>
  <span>
    <widget-icon iconset="'smarthome-set'" icon="'temperature'" inline="true" />
  </span>
</div>

Dominic_Bialas · October 20, 2017, 9:55am

@ysc: Thank you - that works!

For now, I want to use my own svgs (in my case the svgs from squid ink, like they are used in the matrix-theme).

How has the “inline=“true”” tag to be implemented in this case.

I tried it with the following - but this does not work:

<div class="leftborder"></div>
<div class="leftborder-label">{{ngModel.name}}</div>
<div class="text-left" style="display: block; margin-top: -6px; font-size: 25px;">
  <span class="value">{{itemState(config.item)}}°C</span>
  <span>
  <div class="section">

			<div class="icon on" inline="true"><svg inline="true" viewBox="0 0 399 399"><use xlink:href="/static/squidink.svg#thermometer-3"></use></svg></div>
		</div>  </span>
 


</div>

Update:

I tried to eliminate most of the css classes i used for the svg. But the result is still, that the svg-icon is display under the value and not inline.


<div class="leftborder"></div>
<div class="leftborder-label">{{ngModel.name}}</div>
<div class="text-left" style="margin-top: -6px; font-size: 25px;">
  <span class="value" style="inline">{{itemState(config.item)}}°C
		<svg style="stroke: #26bf75;inline;">
        <use xlink:href="/static/squidink.svg#thermometer-3"></use>
    </svg>
  
  </span>

Dominic_Bialas · October 22, 2017, 7:40am

once again, a step further but still not the result as it is in the original thread:

This is my result:

My code is:

<div class="leftborder"></div>
<div class="leftborder-label">{{ngModel.name}}</div>
<div class="text-left" style="margin-top: -32px; font-size: 25px;">
  <span class="value" style="display: inline">{{itemState(config.item)}}°C</span>
  
			<div class="icon on" style="display: inline;" >
        <svg width="100" height="50" viewbox="-2 -30 200 50"><use xlink:href="/static/squidink.svg#thermometer-3"></use>
        </svg>
  
  </div>

</div>

At the moment i could not get the thermostat put in the “center” and adjust the hight of the svg so that it looks like the example one.

@ysc could you help me once again?

Thank you

MatthiasUlrich · December 17, 2017, 7:58pm

Hi great design!

How can i limit the slider for set a min and max value of the temperature Setpoint?

Thanks a lot!

OH_FAN_56 · December 29, 2017, 3:27pm

Hi all (& Yannick).
I like this skin very much and implemented several pages of Habpanel with it.
I have a question to increase the “womenizer” factor: how can I change the color of the switch to “green” if it is on ? This would increase the visibility of the switch status if there are multiple of them on one page (not just the position of the switch).
Thanks in advance for your support!

CubGeek · January 8, 2018, 3:05pm

Good morning!

Thank you to the posters for all the detailed steps and the very helpful discussions. I was able to get this skin working on my installation, due to your helpful natures! Well, it is 95% working.

I have a couple of questions about button states; When the slider for the lights is moved from 0, the light turns on but the buttons above the slider (ON / OFF) remain grey coloured. When I press one of the buttons to activate the light, the light turns on successfully, but the button remains grey. It does not change color to indicate the current state of the light.

As I only have three four lightbulbs and three electrical outlets, this isn’t a major roadblock yet. But it would be nice to figure out what’s happening.

I was able to re-purpose the widgets on the right side to display weather information from the WeatherUnderground binding, and it looks great so far.

Thanks for all your help!

cyanide_4c · March 13, 2018, 1:20pm

I had the same issue, but i noticed that it did work with switch(es) in a group:
group:switch:OR(ON, OFF)
https://docs.openhab.org/configuration/items.html#group-item-types