Ankündigung

**smai** · 15.11.2016, 21:38

Per JacaScript wäre das sicher möglich. Aber ist es nicht einfacher, den echten Bildschirmschoner deines Anzeigegeräts zu verwenden?

**Sprocky** · 16.11.2016, 20:50

Bei mir läuft ein Raspbian dort gibt es auch kein wirklich guten Bildschirmschoner als Slideshow. Zudem möchte ich das Display auch als Bilderrahmen nutzen. Also auch aktives Einschalten der Slideshow soll möglich sein. Da ich in .js ein Anfänger bin, wäre ich um eine Idee dankbar.

Gruß

Sebastian

**Bainit** · 16.11.2016, 22:45

Moin Sebastian,

ich nutze die Qlock Two dafür.
Die Qlock Two wurde ursprünglich für das Quad Design entwickelt. Läuft bei mir aber auch im Standarddesign. Das erfordert nur ein paar kleinere Anpassungen innerhalb deines Pages Ordners.
Such mal in git nach dem User ibernau. Er hat das dort in seinem Pages Ordner.
Ein Javaskript lädt nach vorgegebener Zeit eine bestimmte Seite aus dem Pages Ordner. Ebenfalls ein Skript kümmert sich darum, dass nach dem Klick auf das Display wieder die vorherige Seite geladen wird.
Die Qlock Two ist auch nur eine weitere html-Seite in deinem Pages Ordner. Statt der Q2 kannst du da dann natürlich auch etwas anders ablegen, was per Skript die Bilder durchblättert.
Statt über Skript ist natürlich auch ein Aufruf nach dem Schema domain/smartVISU/index.php?page=qlock/qlock möglich.

Gruß, Sebastian

**Sprocky** · 17.11.2016, 06:07

Danke für den Tipp. Ich kann deine Quelle allerdings nicht finden, könntest Du den Link posten?

Gruß

Sebastian

**Bainit** · 17.11.2016, 20:12

Moin Sebastian,

klar kann ich machen.

Um das mal an einem Ort zusammen zu fassen, schreibe ich hier nochmal eine kleine Anleitung zusammen. Ich hatte am Anfang auch so meine Schwirgkeiten damit.

Die Anleitung soll dazu dienen, die Qlock Two als Bildschirmschoner innerhalb der SmartVISU einzurichten.

Der Link dient dazu eine Vorlage für die benötigten Dateien zu bekommen. Mein Dank hierfür geht an den User @ibernau
https://github.com/lbernau/smartvisuPages
Eine Suche nur nach "git ibernau" findet erst mal nur den Ordner /smartVISU. Eine Suche nach "git ibernau qlock" liefert dann den gewünschten obigen Eintrag.

1) Ordner /qlock (qlock.css, qlock.html, qlock.js) z.B. vom Benutzer ibernau in den eigenen pages Ordner der SmartVISU kopieren.
2) Ordner /js (modernizr.js , jquery.idle-timer.min.js) z.B. vom Benutzer ibernau in den eigenen pages Ordner der SmartVISU kopieren.
3) Dateien root.html und base.html aus dem Ordner pages/base in den eigenen Pages-Ordner kopieren.
4) Folgenden Code in die visu.js im eigenen Pages-Ordner einfügen.
Enthält die visu.js schon Code für die UZSU, dann muss der Code hinter dem für die USZU eingefügt werden. Davor führt zu Fehlern.
Der markierte Teil ist die Zeit bis der Bildschirmschoner angeht in Milisekunden.

Code:

// ----------------------------------------------------------------------------
// Screensaver Qlock TWO
// ----------------------------------------------------------------------------
/**
 * refresh view on cache update.
 */
function updateSite(event) {
    window.applicationCache.swapCache();
    window.location.reload();
}
window.applicationCache.addEventListener('updateready',    updateSite, false);

/**
 * enable screensaver "qlock"
 */
$(document).on('pageinit', function(event) {
    if (
        jQuery().idleTimer && event.target.id !== 'qlock'
        && navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null
        && (Modernizr && Modernizr.mq('(min-width: 768px)'))
    ) {
        $.idleTimer([B][COLOR=#FF0000]180000[/COLOR][/B], document); //3 minutes
    }
});

$(document).bind('idle.idleTimer', function() {
    $.mobile.changePage("index.php?page=qlock/qlock");
});

$(document).bind('active.idleTimer', function(event) {
    parent.history.back();
});

5) In Datei root.html folgenden Teil in den <head> </head> einfügen.
Das sorgt dann dafür, dass das jquery.idle-timer.min.js aufgerufen wird.

Code:

<!-- custom: dynamically add custom js libraries from "js" subdir -->
    {% for item in dir('pages/'~config_pages~'/js') %}
    <script type="text/javascript" src="{{ item.path }}"></script>
    {% endfor %}

6) Datei base.html anpassen. Einzufügende Teile sind rot markiert.

Code:

[...]
{% block body %}

    <div data-role="page" id="{{ page }}" class="base" data-theme="a">
[B][COLOR=#FF0000]    {% block page %} <!-- custom: start page block -->[/COLOR][/B]
        <div data-role="header" data-position="fixed" data-tap-toggle="false">
[...]
        </div>
        {% block footer %}{% endblock %}
[COLOR=#FF0000][B]    {% endblock %} <!-- custom: end page block -->[/B][/COLOR]
    </div>

{% endblock %}

7) ggf. qlock.css anpassen, falls das Endgerät kein iPad im Querformat ist.
Für mein iPad im Hochformat habe ich die Datei ändern müssen.
8) SmartVISU neu starten, 3 Minuten warten, freuen.

Gruß, Sebastian

**Sprocky** · 18.11.2016, 05:34

Super! Vielen Dank!!!

**Sprocky** · 18.11.2016, 17:29

Ich habe jetzt alles eingebaut, aber nichts passiert. Habe es mehrfach kontrolliert.

Mir ist allerdings aufgefallen das in der visu.js der Browser abgefragt wird.
Ich benutze ein Raspbian mit Chronium. Meine Bildschirmauflösung ist 1280*800.

Habe auch schon mal versucht die Abfrage des Browsers aus zu kommentieren, aber das Funktioniert auch nicht.

Code:

/**
 * enable screensaver "qlock"
 */
$(document).on('pageinit', function(event) {
    if (
        jQuery().idleTimer && event.target.id !== 'qlock'
        && navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null
        && (Modernizr && Modernizr.mq('(min-width: 768px)'))
    ) {
        $.idleTimer(120000, document); //3 minutes
    }
});

Vielleicht noch eine Idee?

Gruß

Sebastian

**Bainit** · 18.11.2016, 18:47

Sorry, jetzt wo du es sagst.
Die jquery.idle-Timer.min.js ist bei Ibernau glaube ich falsch. Ich erinnere mich, dass ich da bei mir eine neue rein kopiert habe. Das Ding von Ibernau enthält deutlich weniger Zeichen als das Original.
Der Code wird auch auf Git gepflegt. Versuche es mal direkt mit dem Original von
https://github.com/thorst/jquery-idletimer

Ja, sieht für mich auch so aus, als würde es nur unter bestimmten Browsern/Geräten funktionieren.
Sollte dem wirklich so sein, kommentiere mal die Zeile mit dem && navigator. ... aus.

Gruß, Sebastian

**Sprocky** · 19.11.2016, 06:49

Hallo,

leider funktioniert auch das nicht. Da einfach nichts passiert, weiß ich auch überhaupt nicht wo ich anfangen soll zu suchen? Vielleicht hat es ja auch was mit dem Browser zu tun. Das Auskommentieren der Zeile hat auf jeden Fall auch nicht geholfen.

Gruß

Sebastian

**Bainit** · 19.11.2016, 15:52

Moin Sebastian,

1) prüfe mal, ob nach dem Laden der Seite im html-Code Verweise auf die beiden JavaScript Dateien sind. Diese müssten im Head verlinkt sein.
2) Was passiert, wenn du versuchst die Seite direkt mittels
http://IP/smartVISU/index.php?page=qlock/qlock
aufzurufen?
3) hast du in der Visu.js noch mehr drin stehen, als den oben angegebenen Teil? Wenn ja, lösche alles andere und probiere es erneut.
4) Was ist dein Browser? Der BrowserCache kann dir genauso dazwischen spucken, wie der aktivierte Cache in der config von SmartVISU.

Gruß, Sebastian

**Sprocky** · 20.11.2016, 11:09

Läuft, es lag tatsächlich am Browser Cache.

DANKE nochmal!

**Bainit** · 20.11.2016, 17:19

Gerne, danke für die Rückmeldung.

Gruß, Sebastian

Ankündigung

Bildschirmschoner/Bilderrahmen

Bildschirmschoner/Bilderrahmen

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar