My wall mounted tablet setup

Hey guys,

Im trying to be a little more involved in the Openhab forums.

I started with openhab since last year, so im using it for around 1-1.5 years.
I had no idea how to use code and how to make things with soldering etc.
My father in law introduced me to openhab and helped me to code and to learn how to solder.

Since then a learned alot and i am proud of my setup nowadays. So i like to show all off you my setup.

This is my Wall Mounted Tablet:

This is my sitemap:

I choose to use a Kiosk app for the tablet and display the sitemap trough the URL.
In my opinion the openhab app doesnt look as clean as this. I hope in the future it will look better.
BTW im a big fan of the sitemap in Openhab, HABPANEL looks (for me) very chaotic. The sitemap is much more cleaner for me.

When walking in front of the tablet it goes on automatically trought the front camera that detects movement.

I used little trics (Like visibitlity) in my sitemap to keep it clean.
Like this:

When spotify is playing there appears more settings and the album cover.
This also helps with HTML images that dont work outside your house when youre on the cloud connector. I used visibility option in sitemap on those images connected to my presence item. So when presence is off, those images disappear.

I use the lights scenes alot, i have a small studio and the tablet is in the center of my house.
So when i go cooking or need big lights the tablet is the first thing closest to me to turn the lights on or off.

When leaving home or coming home i use a presence item to turn everything on and off.
I use the ARP bindings for this so Openhab knows when my and my girlfriends phone connected or lost connection with the router.

Because of that i have no need to turn any button, i just leave my home and after 4 minutes (expire item) everything turns off (Computer, tv and all the lights)

Hardware i use:

  • TRADFRI smart lights, movementsensor and hub (Ikea)
  • SONOFF Basic and Wall contacts (Soldered and put ESP program on it to use them with MQTT)
  • WLED Led strips (New kind of ledstrip soldered on Wemos D1 to control every led)
  • Google Home Mini (Almost dont use this anymore because of the walltablet)
  • WITTY boards with DH22 sensors to see temp, humidity and light in house)

Software (Bindings)

  • Chromecast binding
  • Exec binding
  • Expire binding
  • HTTP binding
  • MQTT binding (1x)
  • Network binding
  • NTP binding
  • Samsung TV binding
  • Spotify binding
  • TRADFRI binding
  • Wake-on-LAN WOL binding
  • Weather binding

The next steps in my project are:

  • Temperature control (Still not sure how to implement this cause im in a rented place)
  • Doorsensors (to make the Presence group more smarter)

I hope you guys liked my introduction of my system.
If there are questions about coding feel free to ask.

Here are some more pictures of my home and system

!
SONOFF contact


Witty Board with DHT22 sensor


SONOFF BASIC with PIR sensor and DHT22 temp sensor

EDIT
Added Custom CSS code into sitemap:

Added grafana graphs for home sensors:

Greetings,

Freddy

10 Likes

Very nice job, well done.
Like your layouts.
:grinning:

1 Like

Hi!

What about Fibaro 4-in-1 sensors? It is only a screw. The rest is radio via Zwave.

Great setup!

Ciao!
HFM

Hi,

I looked into it a little, but its all so expensive.
Gonna look with someone if my heater can be read with a chip.

But if that doesnt work i guess i have to invest in good solutions.
But thats gonna take a while.

Thanks for the suggestion!

Very well thought out and communicated - a true mark of experience.

Our team will be studying your integration well as we design our own.

Thank you - looking forward to more from you!

-sym

1 Like

Great setup! Mind sharing the code for the custom css sitemaps?looks great.

1 Like

He George,

Thank you.
Here is the code:

Make a css file in html folder with this:

.css

/* =================================== HEADER FARBE */
.mdl-layout__header {
  background-color: #333;
}



/* =================================== HINTERGRUND FARBE  */

/*  HINTERGRUND STEUERELEMENTE */
.page-content {
  background-color: #181818;
}
/*  HINTERGRUND Links/Rechts Wrapper */
.mdl-color--grey-100 {
  background-color: #1e1e1e !important;
}



/* =================================== STEUERELEMENTE LINE-HEIGHT */

/* ZEILENHÖHE */
html.ui-layout-condensed .mdl-form__row {
    height: 45px;
}



/* =================================== STEUERELEMENTE FARBE  */

/* STEUERELEMENTE - HINTERGRUND FARBE  */
.mdl-color--white {
    background-color: #232323 !important;
}
/* STEUERELEMENTE - TEXT FARBE  */
.mdl-color-text--grey-700 {
    color: #e0e0e0 !important;
}
/* STEUERELEMENTE - Zwischenstriche Farbe */
.mdl-form__row {
    border-bottom: 1px solid #2d2d2d;
}




/* =================================== SWITCH FARBE OFF */

/* SWITCH Button Farbe */
.mdl-switch__thumb {
  background-color: #fff;
}
/* SWITCH Button Track */
.mdl-switch__track {
    background: #9b4f4f;
}
/* SWITCH Button Button-Farbe */
.mdl-switch__thumb {
  background: #5b5757;
}

/* =================================== SWITCH FARBE ON */
/* SWITCH Button Button-Farbe */
.mdl-switch.is-checked .mdl-switch__thumb {
    background: #d8d8d8;
}
/* SWITCH Button Track-Farbe*/
.mdl-switch.is-checked .mdl-switch__track {
    background: #66d693;
}
/* =================================== FRAME Rundungen */

/* Fenster / Abschnitt Rundungen */
.mdl-form {
  /*+border-radius: 10px;*/
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
}

/* =================================== BUTTON FARBE - OFF */

/* BUTTON SELECTED */
BUTTON.mdl-button--accent {
  border: 1px solid #BBBBBB;
  /*+box-shadow: 0px 0px !important;*/
  /*-moz-box-shadow: 0px 0px !important;
  -webkit-box-shadow: 0px 0px !important;
  box-shadow: 0px 0px !important;*/
  background-color: #333 !important;
  color: #BBBBBB!important;
}
/* =================================== BUTTON FARBE - ON */

/* BUTTON DESELECTED */
.mdl-form__setpoint BUTTON, .mdl-form__rollerblind BUTTON, .mdl-form__buttons BUTTON   {
  color: #000000;
  background-color: #333333;
  /*+border-radius: 5px;*/
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
text-transform: uppercase;
font-weight: 500;


    
}

/* =================================== BUTTON FARBE - HOVER */

/* BUTTON HOVER FARBE */
BUTTON.mdl-button:hover {
  background-color: #5ddd90;
}

.mdl-form__image IMG {
  height: 300px;
  width: 300px;
  
  /*+border-radius: 20px;*/
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  float: right;
  margin-right: 8px;
  border: 4px solid black;
}









*/

/* Button Schatten - hässlich  */
/*
BUTTON.mdl-button.mdl-button--raised {
  /*+box-shadow: -3px 3px 5px #D3D8DF;*/
  /*
  -moz-box-shadow: -3px 3px 5px #D3D8DF;
  -webkit-box-shadow: -3px 3px 5px #D3D8DF;
  box-shadow: -3px 3px 5px #D3D8DF;
} */

Make a html file to show it in sitemap:

.html

<head>
    <style>

    </style>
</head>

<body>
    <script type="text/javascript">

        function addStyleSheet(filename) {
        var head = window.parent.document.head
          , link = window.parent.document.createElement('link')

          link.type = 'text/css'
          link.rel = 'stylesheet'
          link.href = filename

          head.appendChild(link)
        }

        function addStyleString(str) {
            var node = window.parent.document.createElement('style');
            node.innerHTML = str;
            window.parent.document.head.appendChild(node);
        }

        // Hide the last web element of the page ...
        _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
        _lastWebViewElement = _webViewElements[_webViewElements.length - 1];
        _lastWebViewElement.style.display = "none";

       // Change the style for images ...
       // addStyleString('div > img { border-radius: 15px !important; height: 200px !important; width: 200px !important; position: relative; float: right; }');

        addStyleSheet("../static/goeiecss.css")
    </script>
</body>

Add the right name of the css file in the bottom at addStyleSheet.

Then put this in your sitemap with the name of the html file:

	    Webview url="/static/HideHeader2.html" icon=none

Note, there is german explaining in the css file, i just tried everything to see what happened and figured out what it meant. Used some google translating haha but did not change it after.

I copied the css from this post and changed it to my liking:

Awesome thank you! I got it working great. Two questions: Where in your site map did you drop in Webview url="/static/HideHeader2.html" icon=none
?

I added it to my site map but its dropping all of my menu pages down.
Also how to set up you charts like that where it will select different pages based on what button you push?

2 Likes

At the bottom of the sitemap file before the last syntax “}”

The charts i made with a dummy number item:

Number Chartdummy

And then made this in sitemap with visibility option:

Switch item=Chartdummy label="Charts Sensors" icon= "humidifier"  mappings=[0="OFF", 1="Hour",2="Day",3="Week"]
			Webview url="http://192.168.2.108:8080/static/grafanauur1.html" icon=none height=12 visibility=[Chartdummy==1]
			Webview url="http://192.168.2.108:8080/static/grafanadag.html" icon=none height=12 visibility=[Chartdummy==2]
			Webview url="http://192.168.2.108:8080/static/grafanaweek.html" icon=none height=12 visibility=[Chartdummy==3]

So because the dummy is a number item, and in the sitemap is a switch item, the mappings are key.
So you make buttons 1, 2, 3 and 4

			Switch item=Chartdummy label="Charts Sensors" icon= "humidifier"  mappings=[0="OFF", 1="Hour",2="Day",3="Week"]

And give the things you want to show the right visibility command.

visibility=[Chartdummy==1]

So item number 1 wil only show when that is selected.

Hope you get this. Playing with visibility is a great way to make your sitemap look clean. You can use that command on frames also. So when you want a frame only shown when you are at home or you turned something on you can use something like this:

}
		Frame label= "" visibility=[PCFreddy==ON]{
			Webview url="http://192.168.2.108:8080/static/steam.html" icon=none 
		}

Or with presence:

	{Frame label="" visibility=[Presence==ON] 
		{Webview url="http://openhab:8080/static/weather.html" icon=none height=11  
1 Like

This is great! Thank you I got it all working now!

1 Like

Glad to hear! Feel free to ask whenever you need something

Thanks again for sharing this information! I set it up for a few different use cases and now am setting it up for the grafana. Can you advise how you were able to get the URL’s you are using? The tutorials I have seen say to use the render image button in Grafana but that outputs a long string URL. Thanks again.

He @tinkernut

Yes, i use the embed share option:

Just copy the code into a html file:

<html>
    <body>
<iframe src="http://openhab:3000/d-solo/lblvwWggz/openhab?orgId=1&from=now-1h&to=now&panelId=2" width="500" height="200" frameborder="1"></iframe></html>

<html>
    <body>
<iframe src="http://openhab:3000/d-solo/lblvwWggz/openhab?orgId=1&from=now-1h&to=now&panelId=4" width="500" height="200" frameborder="1"></iframe>    </body>
</html>

<html>
    <body>
<iframe src="http://openhab:3000/d-solo/lblvwWggz/openhab?orgId=1&from=now-1h&to=now&panelId=6" width="500" height="200" frameborder="1"></iframe>    </div>
    </body>
</html>

So this is 3 different graphs in 1 html file. So it will make 1 webview of it, ofcourse you can also have them separate.

And then add the webview to the sitemap.

You can change the time with this:

Hour= from=now-1h&to=now
Day= from=now-24h&to=now
Week= from=now-7d&to=now
etc

1 Like