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
<script type="text/javascript" src="/fhem/tablet/js/my_screensaver.js"></script>
Irgendwo weiter unten in der index.html (einfach vor </body>
<div data-template="screensaver.html"></div>
Die my_screensaver.js
$(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
<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
#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.
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 (http://img.wonderhowto.com/img/original/97/67/63549149884615/0/635491498846159767.jpg)
Beispiel:
<div class="cell left gigantic thin">21°</div>
<div class="cell left top-narrow darker">Wohnzimmer</div>
.gigantic { font-size: 150px !important; font-family: "Helvetica Neue", "Open Sans", sans-serif-light,sans-serif; }
Zitat von: setstate am 17 November 2015, 09:03:22
gute Idee !
Danke :)
Zitat von: setstate am 17 November 2015, 09:03:22Aber 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 (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!
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:
<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>
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
Zitat von: pernodjaegermeister am 18 November 2015, 13:16:01
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 (http://www.quirksmode.org/dom/events/) laufen sollte.
Hast Du die Möglichkeit auf dem Tablet einen anderen Browser zu testen?
mousemove muss am Tablet nicht unbedingt funktionieren.
Deshalb frage ich vorher immer ab, welches Event benutzbar ist:
var moveEventType=((document.ontouchmove!==null)?'mousemove':'touchmove');
$(document).bind(moveEventType, function(e) {
...
});
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
$(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
});
}
});
@setstate
genauso hatte ich es auch gemacht, funktioniert aber trotzdem nicht :-(
Kannst Du testweise mal einen alert einbauen, um zu sehen, ob er die screensaver.js überhaupt lädt.
Also:
$(document).on('ready', function() {
alert(1);
if ($('#screensaver')) {
Zitat von: ChrisK am 18 November 2015, 15:08:38
Kannst Du testweise mal einen alert einbauen, um zu sehen, ob er die screensaver.js überhaupt lädt.
Also:
$(document).on('ready', function() {
alert(1);
if ($('#screensaver')) {
ja, wird geladen ... alert kommt
hab's grad mal auf dem iPad probiert, dort funktionierts
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.
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.
Zitat von: pernodjaegermeister am 18 November 2015, 16:46:09
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.
Prima, dass Du den Grund gefunden hast.
Kann man wahrscheinlich abfangen bzw. den mousetimeout initial definieren, aber ich glaube, dass ein initialer "Wisch" da einfacher ist ;)
Habe alle Dateien wie beschrieben erstellt bzw. verändert.
Jedoch musste ich fhem-tablet-ui-user.css neu erstellen.
Leider passiert nichts :-\ Habe ich beim "neu erstellen" etwas nicht beachtet?
Vielen Dank!
@setstate:
In #3 hast Du "verticalLine" und "bottom" verwendet.
Woher kommen diese attribute?
Michael
Zitat von: anfänger111 am 19 November 2015, 20:05:05
Habe alle Dateien wie beschrieben erstellt bzw. verändert.
Jedoch musste ich fhem-tablet-ui-user.css neu erstellen.
Leider passiert nichts :-\ Habe ich beim "neu erstellen" etwas nicht beachtet?
Durch das Neu-Erstellen sollte nichts schief laufen.
In welchem Browser bist Du unterwegs?
Wenn Du das Tablet-UI am Rechner lädst, passiert dann auch nichts?
Kannst Du die Entwickler-Konsole mal öffnen und gucken, ob da ein Fehler angezeigt wird? In Chrome kriegst Du die Konsole mit STRG+Shift+J geöffnet.
Zitat von: MichaelT am 20 November 2015, 19:09:54
@setstate:
In #3 hast Du "verticalLine" und "bottom" verwendet.
Woher kommen diese attribute?
Michael
Upps, hab ich noch nicht hochgeladen ... wird aber noch
.bottom {
vertical-align: baseline;
bottom: 0;
}
.verticalLine {
border-right-style: outset;
}
Danke
Zitat von: ChrisK am 20 November 2015, 19:18:19
Durch das Neu-Erstellen sollte nichts schief laufen.
In welchem Browser bist Du unterwegs?
Wenn Du das Tablet-UI am Rechner lädst, passiert dann auch nichts?
Kannst Du die Entwickler-Konsole mal öffnen und gucken, ob da ein Fehler angezeigt wird? In Chrome kriegst Du die Konsole mit STRG+Shift+J geöffnet.
Safari
[Warning] Unexpected CSS token: : (font-awesome.min.css, line 4)
[Warning] Unexpected CSS token: : (font-awesome.min.css, line 4)
[Warning] Unexpected CSS token: : (font-awesome.min.css, line 4)
[Warning] Unexpected CSS token: : (font-awesome.min.css, line 4)
[Warning] Unexpected CSS token: : (font-awesome.min.css, line 4)
[Error] ReferenceError: Can't find variable: $ my_screensaver.js:1
(anonyme Funktion) my_screensaver.js:1Habe die my_screensaver.js unverändert übernommen.
Zitat von: anfänger111 am 24 November 2015, 03:45:38
...
[Error] ReferenceError: Can't find variable: $ my_screensaver.js:1
(anonyme Funktion) my_screensaver.js:1
...
Das sieht so aus, als ob jQuery nicht bekannt ist.
Kannst Du mal Deinen Header hier rein kopieren?
Diese Zeile hier:
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>Sollte vor dieser stehen:
<script type="text/javascript" src="/fhem/tablet/js/my_screensaver.js"></script>
Hi,
zu aller Erst: Danke! Perfekt und genau das was mir noch fehlte :)
Hab das ganze Eins zu Eins übernommen und auf dem PC funktioniert es auch genau wie erwartet.
Auf dem iPad muss ich, ähnlich wie bereits ein User hier feststellte, zu aller erst etwas "machen" damit der Screensaver dann nach der bestimmten Zeit anspringt. Ein einfaches wischen reicht nicht aus, allerdings ein Druck auf irgendeinen Button.
Allerdings verschwindet die Screensaver DIV nicht mehr wenn ich wische oder irgendetwas mache. Hat jemand eine Idee woran das liegen könnte? Hatte jemand beim iPad vllt. die gleichen Probleme? Habe bereits zwei Browser ausprobiert (Safari und Dolphin HD). Problem habe ich bei beiden.
Danke! :)
Gruß,
Thomas
Zitat von: ChrisK am 25 November 2015, 10:22:47
Das sieht so aus, als ob jQuery nicht bekannt ist.
Kannst Du mal Deinen Header hier rein kopieren?
Diese Zeile hier:
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
Sollte vor dieser stehen:
<script type="text/javascript" src="/fhem/tablet/js/my_screensaver.js"></script>
Danke, dass war die Lösung! :)
Zitat von: tommel am 30 November 2015, 17:51:42
Hi,
zu aller Erst: Danke! Perfekt und genau das was mir noch fehlte :)
Vielen Dank, sowas lese ich natürlich sehr gerne ;)
Zitat von: tommel am 30 November 2015, 17:51:42Allerdings verschwindet die Screensaver DIV nicht mehr wenn ich wische oder irgendetwas mache. Hat jemand eine Idee woran das liegen könnte? Hatte jemand beim iPad vllt. die gleichen Probleme? Habe bereits zwei Browser ausprobiert (Safari und Dolphin HD). Problem habe ich bei beiden.
Leider kann ich da nicht wirklich weiterhelfen, weil ich hier kein iOS da habe.
Hast Du denn neben dem iPad auch ein iPhone? Du könntest es da mal testen, dann könnte man das grundsätzlich auf iOS schieben oder nur auf das iPad.
Seltsam ist aber auch, dass ein einfacher Wisch zum initialisieren nicht reicht. Das ist schon anders als bei mir (Android).
Zitat von: anfänger111 am 30 November 2015, 20:59:53
Danke, dass war die Lösung! :)
Prima! :)
Hallo,
ich habe heute nochmal den Screensaver in Angriff genommen. Es funktioniert soweit ganz gut, aber da ich webview mehrmals pro tag reload machen lasse, ist er dann immer wieder nicht mehr aktiv bis ich den Bildschirm berühre.
Kann man das irgendwie hinbekommen das er das auch allein schafft?
Gruß Rolf
Zitat von: rvideobaer am 10 Januar 2016, 19:57:48
ich habe heute nochmal den Screensaver in Angriff genommen. Es funktioniert soweit ganz gut, aber da ich webview mehrmals pro tag reload machen lasse, ist er dann immer wieder nicht mehr aktiv bis ich den Bildschirm berühre.
Kann man das irgendwie hinbekommen das er das auch allein schafft?
Probier mal folgende Anpassung (ungetestet von mir):
$(document).on('ready', function() {
if ($('#screensaver')) {
$('#screensaver').hide();
var mousetimeout;
var screensaver_active = false;
var idletime = 60;
mousetimeout = setTimeout(function(){
show_screensaver();
}, 1000 * idletime);
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
});
}
});(drei neue Zeilen nach "var idletime = 60;")
Hallo ChrisK,
habe die Zeilen eingefügt, scheint bis jetzt zu klappen.
Danke Rolf
Hallo ChrisK,
erstmal danke für die nette Idee mit dem Screensaver. Ich bin gerade am einbauen des Screensavers in Kombination mit dem swiper Widget, so dass verschiedene Informationen abwechselnd angezeigt werden.
Allerdings funktioniert das noch nicht so richtig, also das wechseln im swiper, aber das habe ich schon im entsprechende Thread nachgefragt.
Was ich einbringen wollte, war die Idee, aus der javascript Datei, plus der data-template Geschichte ein eigenes Widget zu machen, so dass es nacher im Endeffekt genutzt werden kann, ohne das hierfür Extra eine JavaScript Datei eingebunden werden muss und soweiter.
Sollte man den Screensaver nämlich auf mehreren Seite verwenden wollen, dann muss die Dateien ja entsprechend auf jeder der Seite einbinden, sofern man nicht pagetab nutzt, oder so.
Also nur so eine Idee, ich würde mich freuen.
Hallo uniqueck,
vielen Dank :)
Interessante Idee, den swiper im Screensaver unterzubringen. Muss ich mir selbst auch mal angucken.
Aus dem Screensaver würde ich gerne ein Widget machen, allerdings weiß ich nicht genau, was man dafür tun muss.
Hierfür müsste natürlich @setstate sich zuerst einverstanden erklären. Gibt es irgendwo eine Anleitung für die Erstellung eines neuen Widgets?
Screensaver als Plugin? Auf jeden Fall. Her damit!
Anleitung gibt es noch nicht. Aber hier http://forum.fhem.de/index.php/topic,47288.0.html
hatten wir das Thema auch schon mal. Die widget_example.js gibt jetzt auch in der Auslieferung mit. Die kann man als Kopiervorlage nutzen.
Zitat von: setstate am 14 Januar 2016, 10:42:03
Screensaver als Plugin? Auf jeden Fall. Her damit!
Anleitung gibt es noch nicht. Aber hier http://forum.fhem.de/index.php/topic,47288.0.html
hatten wir das Thema auch schon mal. Die widget_example.js gibt jetzt auch in der Auslieferung mit. Die kann man als Kopiervorlage nutzen.
@setstate hast du eine Vermutung wie sich das mit dem swiper und dem screensaver zusammen verhält?
@ChrisK: Versuchst du dich erstmal am widget, oder soll ich auch paralell mal einen Wurf anfangen?, Wäre allerdings auch mein komplett erstes, ansonsten immer nur etwas rum getrixt an anderen.
Prima setstate, danke!
Zitat von: uniqueck am 15 Januar 2016, 01:19:56
@ChrisK: Versuchst du dich erstmal am widget, oder soll ich auch paralell mal einen Wurf anfangen?, Wäre allerdings auch mein komplett erstes, ansonsten immer nur etwas rum getrixt an anderen.
Wenn Du magst, kannst Du das sehr gerne machen. Ich komme in den nächsten Tagen leider nicht dazu.
wann kann man mit dem ersten Beta-Test rechnen? ;D
Hallo,
ich verwende sowohl den hier beschriebenen Screensaver, als auch den Popup-Dialog http://forum.fhem.de/index.php/topic,48546.0/topicseen.html (http://forum.fhem.de/index.php/topic,48546.0/topicseen.html) für wichtige Informationen (Kamera-Snapshot bei mir).
Beides zusammen macht aber nur Sinn, wenn das Ereignis, welches das Popup triggert, auch den Screensaver entfernt. Notfalls soll das Popup einfach den Screensaver überdecken. Kann jemand eine grobe Richtung angeben, wie so etwas zu machen ist.
Meine Versuche dem Popup-Fenster einen höheren z-index im Vergleich zum Screensaver zu geben waren nicht erfolgreich.
Grüße,
Mario
Wenn man die Zeile
var moveEventType=((document.ontouchmove!==null)?'mousemove':'touchmove');
mit
var moveEventType=((document.ontouchmove!==null)?'mousemove':'touchstart');
ersetzt wird auf einem iPad schon beim antippen der Screensaver ausgeblendet. Man muss nicht wischen.
Ich hab das jetzt ebenfalls nachgebaut und bekomme nicht mal als Debug das alert angezeigt.
File wird geladen, ist auch brav an der richtigen Position unter jquery, trotzdem, keine Reaktion. Wie soll ich da vorgehen?
Zitat von: accessburn am 08 März 2016, 20:47:16
Ich hab das jetzt ebenfalls nachgebaut und bekomme nicht mal als Debug das alert angezeigt.
File wird geladen, ist auch brav an der richtigen Position unter jquery, trotzdem, keine Reaktion. Wie soll ich da vorgehen?
Ein Vorschlag wäre in die .js Datei nur das alert drin zu lassen und alles andere raus zu schmeißen. Dann weißt Du ob die Datei geladen und ausgeführt wird.
Wenn das nicht weiterhilft, dann kannst Du mal in die Console gucken, ob da irgendwas angezeigt wird oder Deinen vollständigen Code hier rein kopieren, dann sieht ein Außenstehende vielleicht etwas, was Du übersiehst, weil Du die ganze Zeit damit arbeitest.
Zitat von: accessburn am 08 März 2016, 20:47:16
Ich hab das jetzt ebenfalls nachgebaut und bekomme nicht mal als Debug das alert angezeigt.
File wird geladen, ist auch brav an der richtigen Position unter jquery, trotzdem, keine Reaktion. Wie soll ich da vorgehen?
Ich hatte die gleichen Probleme.
Bei mir half nur diese Zeile:
<script src="/fhem/pgm2/jquery.min.js" defer></script>so abzuändern:
<script src="/fhem/pgm2/jquery.min.js"></script>Das kannst du mal versuchen, falls bei dir die Zeile genauso aussieht.
Zitat von: setstate am 17 November 2015, 16:16:35
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.
Ich bekomme mit dieser Zeile in der fhem-tablet-ui-user.css leider die Schriftart "Roboto" nicht gezeigt.
.gigantic {
font-size: 150px !important;
font-family: "Roboto", "Open Sans", sans-serif-light,sans-serif;
}Kann mir jemand einen Tipp geben?
Zitat von: funkner am 13 März 2016, 23:08:11
Ich bekomme mit dieser Zeile in der fhem-tablet-ui-user.css leider die Schriftart "Roboto" nicht gezeigt.
.gigantic {
font-size: 150px !important;
font-family: "Roboto", "Open Sans", sans-serif-light,sans-serif;
}
Kann mir jemand einen Tipp geben?
heißt m.W. auch "robotothin"
;) Danke schön. Das war die Lösung!
Moin.
Ich habe da jetzt mal ein widget draus gemacht. Dieses geht auch per PullRequest an setstate.
<div data-type="screensaver"
data-timeout="60">
<!--INHALT FÜR DEN SCREENSAVER AB HIER-->
<!--ALLE FTUI-ELEMENTE ODER EIGENE-->
<!--SWIPER UND POPUP FUNKTIONIEREN WAHRSCHEINLICH NICHT-->
</div>
Wenn ihr, so wie ich, mit PageTab arbeitet reicht es wenn ihr dieses <div> nur auf der ersten Seite (wahrscheinlich index.html) irgendwo unten vor </body> einfügt. Der Screensaver ist dann auf allen Unterseiten gleich.
Wenn ihr einzelne Seiten verwendet muss dieses <div> auf jeder Seite irgendwo unten vor </body> eingefügt werden. So kann man natürlich auf jeder einzelnen Seite einen eigenen Screensaver-Inhalt bauen.
data-timeout="60" // Timeout in Sekunden bis zur (Re)Aktivierung. 60 ist der Standardwert.
Datei muss in /tablet/js/
Grüße^^
P.S. bzgl. Swiper und Popup werde ich testen. Mal sehen ob ich das hin bekomme.
Zitat von: ChrisK am 08 März 2016, 22:11:58
Ein Vorschlag wäre in die .js Datei nur das alert drin zu lassen und alles andere raus zu schmeißen. Dann weißt Du ob die Datei geladen und ausgeführt wird.
Wenn das nicht weiterhilft, dann kannst Du mal in die Console gucken, ob da irgendwas angezeigt wird oder Deinen vollständigen Code hier rein kopieren, dann sieht ein Außenstehende vielleicht etwas, was Du übersiehst, weil Du die ganze Zeit damit arbeitest.
Hab ich gemacht, nachdem ich das "ready" rausgenommen habe ging wenigstens ein altert auf. Hab jetzt auch die Variante mit dem Widget versucht. Ebenfalls ohne reaktion. Auch in ftui beta und auch auf einer neuen Seite, keine Reaktion :-(
Zitat von: accessburn am 18 März 2016, 12:37:36
Hab ich gemacht, nachdem ich das "ready" rausgenommen habe ging wenigstens ein altert auf. Hab jetzt auch die Variante mit dem Widget versucht. Ebenfalls ohne reaktion. Auch in ftui beta und auch auf einer neuen Seite, keine Reaktion :-(
schick mal deinen code und eventuelle ausgaben in der konsole
Zitat von: roman1528 am 18 März 2016, 11:33:32
Ich habe da jetzt mal ein widget draus gemacht.
Super! Vielen Dank!
Zitat von: roman1528 am 18 März 2016, 11:33:32
Moin.
Ich habe da jetzt mal ein widget draus gemacht. Dieses geht auch per PullRequest an setstate.
<div data-type="screensaver"
data-timeout="60">
<!--INHALT FÜR DEN SCREENSAVER AB HIER-->
<!--ALLE FTUI-ELEMENTE ODER EIGENE-->
<!--SWIPER UND POPUP FUNKTIONIEREN WAHRSCHEINLICH NICHT-->
</div>
Wenn ihr, so wie ich, mit PageTab arbeitet reicht es wenn ihr dieses <div> nur auf der ersten Seite (wahrscheinlich index.html) irgendwo unten vor </body> einfügt. Der Screensaver ist dann auf allen Unterseiten gleich.
Wenn ihr einzelne Seiten verwendet muss dieses <div> auf jeder Seite irgendwo unten vor </body> eingefügt werden. So kann man natürlich auf jeder einzelnen Seite einen eigenen Screensaver-Inhalt bauen.
data-timeout="60" // Timeout in Sekunden bis zur (Re)Aktivierung. 60 ist der Standardwert.
Datei muss in /tablet/js/
Grüße^^
P.S. bzgl. Swiper und Popup werde ich testen. Mal sehen ob ich das hin bekomme.
Vielen Dank, ich hatte zwar mal vorgeschlagen daraus eins zu machen, bin aber noch nicht dazu gekommen.
Swiper wäre natürlich traumhaft, wenn das funktionieren würden.
Zitat von: uniqueck am 20 März 2016, 20:15:47
Vielen Dank, ich hatte zwar mal vorgeschlagen daraus eins zu machen, bin aber noch nicht dazu gekommen.
Swiper wäre natürlich traumhaft, wenn das funktionieren würden.
Schau dir mal die /lib/swiper.min.css bzgl. z-index an. Weiß jetzt nicht aus'm Kopf wie der genau aufgebaut ist. Dann baust du neue classen für den Swiper in deine *-user.css und erhöst den z-index von Swiper auf sagen wir 9000.
Dann nur noch die #screensaver auf z-index auf 8999 setzen.
#screensaver Eintrag in der *-user.css ist immer noch Pflicht!
Grüße^^
Zitat von: uniqueck am 20 März 2016, 20:15:47
Vielen Dank, ich hatte zwar mal vorgeschlagen daraus eins zu machen, bin aber noch nicht dazu gekommen.
Swiper wäre natürlich traumhaft, wenn das funktionieren würden.
Es gibt eine neue Version!!! Diese bringt ihr eigenes CSS-File mit. Damit sollte das Swiper-Widget im Screensaver funktionieren.
Eine #screensaver in der *-user.css ist damit nicht mehr nötig!!! Möchte man allerdings etwas geändert haben, z.B. den Hintergrund sollte man die #screensaver in der *-user.css erstellen. Die Notierung erfordert dann ein !importent; am Ende.
Beispiel:
#screensaver {
background-color: magenta !important;
}
BITTE TESTEN UND BERICHTEN!!!!
Grüße^^
Zitat von: roman1528 am 20 März 2016, 22:55:11
Es gibt eine neue Version!!! Diese bringt ihr eigenes CSS-File mit. Damit sollte das Swiper-Widget im Screensaver funktionieren.
Eine #screensaver in der *-user.css ist damit nicht mehr nötig!!! Möchte man allerdings etwas geändert haben, z.B. den Hintergrund sollte man die #screensaver in der *-user.css erstellen. Die Notierung erfordert dann ein !importent; am Ende.
Beispiel:
#screensaver {
background-color: magenta !important;
}
BITTE TESTEN UND BERICHTEN!!!!
Grüße^^
So schnell bin ich nun auch nicht, aber ich freue mich natürlich darüber es zu testen.
Ist das Widget denn schon im FTUI Repo mit drinne?
Gruß Constantin
Zitat von: uniqueck am 21 März 2016, 00:02:14
So schnell bin ich nun auch nicht, aber ich freue mich natürlich darüber es zu testen.
Ist das Widget denn schon im FTUI Repo mit drinne?
Gruß Constantin
Nein ist es nicht. Musst es dir aus meinem GitRepo holen.
Grüße^^
Hallo Leute,
bei mir will der Screensaver nicht so recht funktionieren. Nach der Einrichtung werden jetzt die drei Elemente (Wohnzimmer, Schlafzimmer,Balkon) oberhalb meiner eigentlichen FTUI gezeigt. Die Entwicklerkonsole von Chrome sagt: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Hat jemand eine Idee??
Gruß Swen
Zitat von: Snake1980 am 22 März 2016, 12:43:15
Hallo Leute,
bei mir will der Screensaver nicht so recht funktionieren. Nach der Einrichtung werden jetzt die drei Elemente (Wohnzimmer, Schlafzimmer,Balkon) oberhalb meiner eigentlichen FTUI gezeigt. Die Entwicklerkonsole von Chrome sagt: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Hat jemand eine Idee??
Gruß Swen
Die Nachricht is völlig normal und hat nicht wirklich was zu bedeuten...
Du musst den Screensaver schon mit deinen eigenen Inhalten füllen... So bekommst du ja keine Werte, weil die DeviceNamen nicht übereinstimmten.
Hallo Leute,
wird das Widget noch gepflegt?
Ich finde gerade keine Infos drüber, wie man das Widget in der Version 2.6 verwenden kann.
Gruß
Hallo funker,
Ich musste bei mir das alte jquery einfügen.
<script src="/fhem/pgm2/jquery.min.js" defer></script>
<script src="js/myScreenSaver.js" defer></script>]
Gruss Michael
Hallo zusammen,
ich verwende den Screensaver auch wirklich gerne. Was mir noch auffällt, und vielleicht hat jemand eine Idee, wäre:
Wenn man im FTUI etwas nach unten gescrollt ist und der Screensaver schaltet sich ein, dann hängt der Screensaver oben und unten sieht man die Homepage unter dem div vorschauen.
Grüße,
Alex
Moin.
Dazu habe ich ein kleines Script in meine index.html gebaut:
<script type="text/javascript">
window.onload = function start() {
slideUp();
}
function slideUp() {
var delay = 298;
var timeout;
timeout = setTimeout(function(){
$('html, body').animate({scrollTop:0}, 500);
}, 1000 * delay);
var moveEventType=((document.ontouchmove!==null)?'mousemove':'touchstart');
$(document).bind(moveEventType, function(e) {
clearTimeout(timeout);
timeout = setTimeout(function(){
$('html, body').animate({scrollTop:0}, 500);
}, 1000 * delay);
});
}
</script>
Erste Variable: delay in sekunden. Mein Screensaver geht nach 300 Sekunden an. Also wird 2 sekunden vorher hochgescrollt.
Wenn der Mauszeiger bewegt wird, oder getouched wird, wird der timer zurückgesetzt. Im grunde wie beim Screensaver selbst.
Viel Spaß damit :)
Grüße^^
Zitat von: funkner am 15 März 2017, 22:35:32
Hallo Leute,
wird das Widget noch gepflegt?
Moin.
Eine aktuelle Version findet Ihr immer unter:
FTUI Widget - Screensaver (https://www.ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-widget-screensaver)
Hab ich gerade "Quick and Dirty" erstellt.
Grüße^^
Hallo Roman,
vielen Dank für dein Script. Funktioniert wunderbar!
Danke für deine Unterstützung und deine tolle Seite.
Grüße,
Alex