[FHEM-Tablet-UI] Screensaver

[ChrisK]

Hallo zusammen,

ich habe mir für mein Tablet-UI einen "Screensaver" gebastelt.
Mir ging es weniger um das "Saven des Screens" und mehr um ein bisschen Dunkelheit an der Wand

Das Ding funktioniert so:
- Sobald x Sekunden keine Touch/Wisch/Klick/WasAuchImmer passiert, wird ein div eingeblendet
- dieses div ist bei mir so befüllt, dass drei Temperatur/Feuchtigkeit-Anzeigen drauf sind, also minimal
- in diesem div werden die Inhalte per css relativ dunkel und minimal dargestellt
- sobald das Display irgendwo berührt wird, wird dieses div wieder ausgeblendet und das Tablet-UI ist wieder da (eigentlich war es die ganze Zeit da, muss also nicht nachgeladen werden)

Das macht Sinn, wenn das Tablet an der Wand nur für das Tablet-UI hängt und permanent am Strom ist.
Der Vorteil ist, dass ich mir keine Gedanken um Bewegungserkennung zum Einschalten oder ein Drücken des Power-Knopfes machen muss. Einfach irgendwo hintouchen und schon ist alles da. Und wenn das Tablet z.B. im Wohnzimmer hängt und man das zum Film-Gucken das Licht runterfährt, dann hängt da keine (Tablet-)Lampe an der Wand.

Hier der notwendige Code:

Im header der index.html

Code Auswählen Erweitern


<script type="text/javascript" src="/fhem/tablet/js/my_screensaver.js"></script>


Irgendwo weiter unten in der index.html (einfach vor </body>

Code Auswählen Erweitern


<div data-template="screensaver.html"></div>


Die my_screensaver.js

Code Auswählen Erweitern


$(document).on('ready', function() {
  if ($('#screensaver')) {
    $('#screensaver').hide();
    var mousetimeout;
    var screensaver_active = false;
    var idletime = 60;

    function show_screensaver(){
        $('#screensaver').fadeIn();
        screensaver_active = true;
    }

    function stop_screensaver(){
        $('#screensaver').fadeOut();
        screensaver_active = false;
    }

    $(document).mousemove(function(){
        clearTimeout(mousetimeout);

        if (screensaver_active) {
            stop_screensaver();
        }

        mousetimeout = setTimeout(function(){
            show_screensaver();
        }, 1000 * idletime); // 5 secs
    });
  }
});


Die screensaver.html

Code Auswählen Erweitern


<div id="screensaver">
  <ul>
    <li>
      <div class="screensaver-1-3">
        <div class='screensavermiddle'>WOHNZIMMER</div>
        <br /><div data-type="label"
             data-limits='[0,10,19,21,23]'
             data-colors='["#0000FF","#000088","#006666","#666666","#FF0000"]'
             data-device='wz_thermostat_Climate'
             data-get='measured-temp'
             data-unit='%B0C%0A'
             class="screensaverbig"
             data-background-icon="fa-wrench"></div>
        <br /><div data-type="label"
             data-limits='[0,30,70]'
             data-colors='["#FF0000","#666666","#FF0000"]'
             data-device='wz_thermostat_Climate'
             data-get='humidity'
             data-unit='%'
             data-background-icon="fa-wrench"></div>
      </div>
    </li>
    <li>
      <div class="screensaver-1-3">
        <div class='screensavermiddle'>SCHLAFZIMMER</div>
        <br /><div data-type="label"
             data-limits='[0,10,17,20,23]'
             data-colors='["#0000FF","#000088","#006666","#666666","#FF0000"]'
             data-device='sz_thermostat_Climate'
             data-get='measured-temp'
             data-unit='%B0C%0A'
             class="screensaverbig"
             data-background-icon="fa-wrench"></div>
        <br /><div data-type="label"
             data-limits='[0,30,70]'
             data-colors='["#FF0000","#666666","#FF0000"]'
             data-device='sz_thermostat_Climate'
             data-get='humidity'
             data-unit='%'
             data-background-icon="fa-wrench"></div>
      </div>
    </li>
    <li>
      <div class="screensaver-1-3">
        <div class='screensavermiddle'>BALKON</div>
        <br /><div data-type="label"
             data-limits='[-20,0,10,17,23]'
             data-colors='["#0000FF","#000088","#006666","#666666","#FF0000"]'
             data-device='ba_thermometer'
             data-get='temperature'
             data-unit='%B0C%0A'
             class="screensaverbig"
             data-background-icon="fa-wrench"></div>
        <br /><div data-type="label"
             data-limits='[0,30,98]'
             data-colors='["#FF0000","#666666","#FF0000"]'
             data-device='ba_thermometer'
             data-get='humidity'
             data-unit='%'
             data-background-icon="fa-wrench"></div>
      </div>
    </li>
  </ul>
</div>


Zusatz in der fhem-tablet-ui-user.css

Code Auswählen Erweitern


#screensaver {
  position: absolute;
  width: 100%;
  height:100%;
  left:0px;
  top: 0px;
  display: none;
  z-index:9999;
  background-color:#111111;
}

.screensaver-1-3 {
  width:30%;
  height:100%;
  text-align: center;
  padding-top: 200px;
  font-size: 2.8em;
  float: left;
  color: #666666;
}

.screensaverbig {
  font-size: 66px;
}


Hier ist auch mal ein Screenshot vom ganzen.
Vielleicht kann ja jemand was damit anfangen.

[setstate]

Hallo Chris,

gute Idee !

Aber habe noch mehr Mut zur Größe beim Font für die Temperaturen. Und so dünn wie möglich machen. So wie bei einem aktuellen mobilen OS auf dem Lockscreen die Temp oder Zeit angezeigt wird. http://img.wonderhowto.com/img/original/97/67/63549149884615/0/635491498846159767.jpg

Beispiel:

Code Auswählen Erweitern

         
<div class="cell left gigantic thin">21°</div>
<div class="cell left top-narrow darker">Wohnzimmer</div>


Code Auswählen Erweitern

.gigantic { font-size: 150px !important; font-family: "Helvetica Neue", "Open Sans", sans-serif-light,sans-serif; }

[ChrisK]

gute Idee !

Danke

Aber habe noch mehr Mut zur Größe beim Font für die Temperaturen. Und so dünn wie möglich machen. So wie bei einem aktuellen mobilen OS auf dem Lockscreen die Temp oder Zeit angezeigt wird. http://img.wonderhowto.com/img/original/97/67/63549149884615/0/635491498846159767.jpg

Das sieht gut aus!

Es ist immer hilfreich, wenn der Programmierer bei Design unterstützt wird
Danke für den fertigen Code!

[setstate]

Mit dem original Roboto Font sieht es aber am besten aus. Ich habe diesen jetzt mal mit ins Projekt aufgenommen und im CSS verfügbar gemacht.

Beispiel HTML und das entsprechende Ergebnis als Bild:

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="7" data-sizey="4">
  <header>Klima</header>
  <div class="left cell">
     <div class="">
        <div class="bottom gigantic inline verticalLine">21°</div>
        <div class="bottom bigger thin inline">65%</div>
     </div>
     <div class="left cell top-narrow-10 darker">Wohnzimmer</div>
  </div>
</li>


[pernodjaegermeister]

Super Idee!!

Nur leider funktioniert es bei mir nicht am Tablet (Samsung Galaxy Tab 4), am PC gehts.
Hat jemand eine Erklärung ?

Gruß
Sascha

[ChrisK]

Nur leider funktioniert es bei mir nicht am Tablet (Samsung Galaxy Tab 4), am PC gehts.
Hat jemand eine Erklärung ?

Mit welchem Browser öffnest Du denn die Tablet UI am Tablet?
Evtl. kommt der Browser mit dem JavaScript nicht zurecht, wobei das mousemove so ziemlich überall laufen sollte.

Hast Du die Möglichkeit auf dem Tablet einen anderen Browser zu testen?

[setstate]

mousemove muss am Tablet nicht unbedingt funktionieren.
Deshalb frage ich vorher immer ab, welches Event benutzbar ist:

Code Auswählen Erweitern

       
var moveEventType=((document.ontouchmove!==null)?'mousemove':'touchmove');
$(document).bind(moveEventType, function(e) {
...
});


[pernodjaegermeister]

Ich benutze WebViewControl, hab es aber auch mit Chrome und Firefox probiert.

Auch mit Mario's Variante funktioniert es leider nicht, oder ich hab es falsch zusammengebaut?
Vielleicht kannst du noch den kompletten Code zur Verfügung stellen?

Gruß
Sascha

[setstate]

Code Auswählen Erweitern


$(document).on('ready', function() {
  if ($('#screensaver')) {
    $('#screensaver').hide();
    var mousetimeout;
    var screensaver_active = false;
    var idletime = 60;

    function show_screensaver(){
        $('#screensaver').fadeIn();
        screensaver_active = true;
    }

    function stop_screensaver(){
        $('#screensaver').fadeOut();
        screensaver_active = false;
    }
    var moveEventType=((document.ontouchmove!==null)?'mousemove':'touchmove');
    $(document).bind(moveEventType, function(e) {
        clearTimeout(mousetimeout);

        if (screensaver_active) {
            stop_screensaver();
        }

        mousetimeout = setTimeout(function(){
            show_screensaver();
        }, 1000 * idletime); // 5 secs
    });
  }
});



[pernodjaegermeister]

@setstate
genauso hatte ich es auch gemacht, funktioniert aber trotzdem nicht

[ChrisK]

Kannst Du testweise mal einen alert einbauen, um zu sehen, ob er die screensaver.js überhaupt lädt.
Also:

Code Auswählen Erweitern


$(document).on('ready', function() {
  alert(1);
  if ($('#screensaver')) {

[pernodjaegermeister]

Kannst Du testweise mal einen alert einbauen, um zu sehen, ob er die screensaver.js überhaupt lädt.
Also:

Code Auswählen Erweitern


$(document).on('ready', function() {
  alert(1);
  if ($('#screensaver')) {

ja, wird geladen ... alert kommt

[pernodjaegermeister]

hab's grad mal auf dem iPad probiert, dort funktionierts

[ChrisK]

Hmm, dann wird's jetzt noch unklarer...

Ich würde in jede Funktion mal einen alert einbauen, weil ich nicht weiß, ob man am Tablet vernünftig debuggen kann.
Dann würdest vielleicht zumindest rausfinden an welcher Stelle das Tablet aussteigt.

[pernodjaegermeister]

ok, hab's jetzt raus ... ich muss nach reload einmal einen Wisch machen, um den Screensaver zu aktivieren.
Beim PC und iPad aktiviert es nach Reload automatisch.