Nice work! When you say, the live stream is displayed on the tablet when something moves , can you tell me more about how you achieve that? That sounds interesting.
Looks quite nice. I like the light theme. Might try change mine and see which looks like better.
If you wanted to hide the charger cable you can buy a wireless charging receiver from Banggood and snip the receiver of off. You end up with a USB plug which is tiny and descrete.
C
Sure, I simply change the URL to be displayed using the REST API from Fully Kiosk Browser.
start:
curl -s -o /dev/null 'http://${yourTabletIP}:2323?cmd=loadURL&url=http://${yourCameraStream}&password=${fullyPassword}'
stop:
curl -s -o /dev/null 'http://${yourTabletIP}:2323?cmd=loadStartURL&password=${fullyPassword}'
Since I’m using motion for all the camera stuff, I can define commands that are executed during motion detection. For more information about that, we can talk in private or I can open a new thread if desired.
2 Likes
Thanks for the suggestion!
I already had this one in the basket but I ended up using a cable that I already had and it’s really okay for me. Disadvantage of the BG cable: it’s black and colour is more important than visibility - at least for my wife 
But it’s invisible if curled behind the tablet.
Zoom into this guy’s last pic.
Just an option
I just ordered that option 
Hi All,
Does anyone have a sample of some code in HabPanel to be able to hide/show a window?
Lets say the top you have a summary for 20 lights, i want to have some kind arrow that allows you to hide/minimise and expand/maximise the frame to keep clutter down in the UI
Like this, but I cant get this one to work https://www.w3schools.com/howto/howto_js_collapsible.asp
The js file
angular.module('app', [])
.controller('mainController', function($scope) {
// COLLAPSE =====================
*$scope.isCollapsed = "assessment_topic[sections_attributes][1]";
$scope.isCollapsed1 = "assessment_topic[sections_attributes][1]";*/
});
HTML
<div class="container" ng-app="app" ng-controller="mainController" oc-lazy-load="['/static/collapsible.js']">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne1" ng-click="70291611403200 = !70291611403200">
Lights
</a>
</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Cheers
Thanks but that HTML code doesnt work 
brings up errors, shows a check box instead of a collapsable section
You try again another code . I tested
You can search for other templates, with the keyword “Accordion css no javscript”
<style>
@font-face {
font-family: 'Poiret One';
font-style: normal;
font-weight: 400;
src: local('Poiret One'), local('PoiretOne-Regular'), url(https://fonts.gstatic.com/s/poiretone/v8/UqyVK80NJXN4zfRgbdfbo55cUg.ttf) format('truetype');
}
body {
width: 100%;
height: 100%;
background-color: #eee;
font-family: 'Poiret One', cursive;
color: rgba(48, 69, 92, 0.8);
}
#wrapper {
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 50px 0;
transform: translate(-50%, 0);
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
#wrapper {
box-sizing: border-box;
transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1,
h2 {
color: #000;
}
h1 {
margin: 10% auto 0;
text-transform: uppercase;
font-size: 36px;
line-height: 42px;
letter-spacing: 3px;
font-weight: 100;
text-align: center;
display: table;
padding: 10px 0;
font-weight: bolder;
border-bottom: 2px solid #000;
}
h2 {
font-size: 26px;
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: #fefffa;
margin: 0;
cursor: pointer;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
transition: all 500ms ease;
}
p,
ul li i:before,
ul li i:after {
transition: all 0.25s ease-in-out;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li i {
position: absolute;
transform: translate(-6px, 0);
margin-top: 9px;
right: 0;
}
ul li i:before,
ul li i:after {
content: "";
position: absolute;
background-color: #000;
width: 3px;
height: 16px;
}
ul li i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ i:before {
margin-top: 9px;
height: 9px;
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ i:after {
margin-top: 9px;
height: 9px;
transform: translate(-2px, 0) rotate(-45deg);
}
ul li:nth-of-type(1) {
border-top: none;
animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
animation-delay: 1s;
}
ul li:last-of-type {
padding-bottom: 0;
}
li {
animation: bounceInUp 1s ease both;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
</style>
<div id="wrapper">
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>What is Lorem Ipsum ?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Why do we use it ?</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Wher we can it ?</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</li>
</ul>
</div>
I tried 3 of them, none work! And all look radically different to the examples
All the code I sent you was working, I tried.
I will send you an additional 1 HTML code snippet that describes it to work well.
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
.tab-control-radio {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
body {
font-family: "Roboto", sans-serif;
}
.accordion {
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
margin: 30px auto 0;
width: 50%;
}
.tab {
position: relative;
}
.tab-control-label {
background-color: #171717;
border-bottom: 2px solid #b0b0b0;
color: #FFF;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0;
padding: 10px 0 10px 20px;
text-transform: uppercase;
}
.tab-control-radio ~ .tab-content {
-moz-transition-property: max-height;
-o-transition-property: max-height;
-webkit-transition-property: max-height;
transition-property: max-height;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
max-height: 0;
overflow: hidden;
}
.tab-control-radio:checked ~ .tab-content {
max-height: 100px;
}
.tab-control-radio:checked ~ .indicator:after {
content: '-';
font-size: 60px;
right: 20px;
top: 16px;
}
.indicator:after {
color: #FFF;
content: '+';
font-size: 40px;
line-height: 0;
right: 17px;
position: absolute;
top: 20px;
}
.tab-content {
background-color: #FFF;
}
.tab-content p {
margin: 20px;
}
</style>
<section class="accordion">
<div class="tab tab-one">
<label for="tab-one" class="tab-control-label">Tab One</label>
<input type="radio" name="tab-radio" id="tab-one" class="tab-control-radio" checked>
<span class="indicator"></span>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis labore repellendus ab fugit quos nesciunt impedit perspiciatis nemo quaerat fugiat, eos tenetur inventore officia illo atque dolores vel deleniti rem.
</p>
</div>
<div class="tab tab-two">
<label for="tab-two" class="tab-control-label">Tab Two</label>
<input type="radio" name="tab-radio" id="tab-two" class="tab-control-radio">
<span class="indicator"></span>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis labore repellendus ab fugit quos nesciunt impedit perspiciatis nemo quaerat fugiat, eos tenetur inventore officia illo atque dolores vel deleniti rem.
</p>
</div>
</div>
<div class="tab tab-three">
<label for="tab-three" class="tab-control-label">Tab Three</label>
<input type="radio" name="tab-radio" id="tab-three" class="tab-control-radio">
<span class="indicator"></span>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis labore repellendus ab fugit quos nesciunt impedit perspiciatis nemo quaerat fugiat, eos tenetur inventore officia illo atque dolores vel deleniti rem.
</p>
</div>
</div>
</section>
like to share my very basic stuff, but very useful for myself.
The light and garage buttons show current state and can be pressed to turn off / close or open.
2 Likes
That looks so good!
Are you willing to share some of your code?
After reorganizing the structure of my habpanel (from roomwise to topicwise) here are my pictures (wip):
The Section “Multimedia” is still empty (I have to implement 2 TVs and a receiver)
3 Likes
Yes, you could absolutely do that. I chose a different approach just because I did happen to have a Raspberry Pi running in the kitchen cabinet for the screen. -So it saved me from buying a WiFi or ZigBee- integrated motion sensor. In my on/off script, I use the motion sensor based on GPIO, but I simultaneously use an MQTT connection, to receive messages from OpenHAB to turn off the screen. I use this to turn off immediately, for instance when turning off all lights to go to bed 
-And obviously, using the exact same method for a completely external motion sensor would work equally good.
How are you getting heading for panels ??? Like CCTV , current weather forecast
Hello!
I use my habpanel on the go as well (via vpn).
I just recently recognized that the graphs graphana saves as a picture on my server are not being loaded.
Do you know what i can do to fix this? Thank you!
Jonas