HTML-Seite mit wöchentlichen Bildwechsel

[Markus Jürgens]

Liebe Community,

ich möchte gerne eine HTML erstellen, in der wöchentlich ein anderes Bild angezeigt wird.

Wer kann mir bei der Programmierung helfen?

Da die HTML-Seite als HTML-Package in Xibo eingebunden werden soll und die html-Seite entsprechend aus Xibo heraus mehrmals am Tag aufgerufen wird, muss das Skript so programmiert sein, dass dass das Datum abgefragt wird und dann je nach Woche entsprechend Bild 1, 2, 3, etc. angezeigt wird.

Leider habe ich nur sehr geringe HTML-Kenntnisse.

Vielen Dank für eure Hilfe! Markus Jürgens

[MudGuard]

Hi,

ich möchte gerne eine HTML erstellen, in der wöchentlich ein anderes Bild angezeigt wird.

Wer kann mir bei der Programmierung helfen?

Leider habe ich nur sehr geringe HTML-Kenntnisse.

Und die helfen so gut wie gar nicht.

Denn HTML ist keine Programmiersprache.

Steht eine serverseitige Sprache zur Verfügung (PHP ...)?

Oder soll das im Browser beim User passieren (dann wäre Javascript nötig).

cu,
Andreas a/k/a MudGuard

[Markus Jürgens]

Lieber Andreas,

vielen Dank für deine schnelle Antwort.

Es tut mir Leid, dass ich da in meiner Anfrage etwas durcheinander geworfen habe bzw. mein Unwissen präsentiert habe.

Eine PHP-Umgebung ist in Xibo leider nicht umsetzbar. Es müsste also mit Javascript umgesetzt werden.

Kannst du mir bitte Tipps für den Einstieg geben? Leider fehlt mir die Zeit, mich ausführlich in HTML und Javascript einzuarbeiten.

Vielen Dank! Viele Grüße Markus

[Rolf B]

Hallo Markus,

ich habe die xibo-de.com Seite mal überflogen. Ist das der richtige Einstieg?

Demnach erfordert Xibo einen Windows- oder Android-Client, der den Bildschirm steuert. Der Client hängt wiederum an den Fäden eines zentralen Servers, der ihm sagt, was zu tun ist. Und der zentrale Server bekommt über einen Webservice von Dir gesagt, was er dem Client sagen soll.

Der Client kann mehrere Medientypen darstellen, von denen einer "Webpage" ist. D.h. du könntest also tatsächlich diese eine Webpage als Anzeigeinhalt für deinen Xibo-Bildschirm (oder deine Xibo-Bildschirme) festlegen, und diese Webpage könnte über eine Datumsabfrage die Woche ermitteln und daraus den Namen einer Bilddatei ableiten, die in einem img Element anzuzeigen ist. Diese img Datei muss natürlich irgendwoher geladen werden, die Webpage möglicherweise auch. Keine Ahnung, wie gut sich das mit der Mediensteuerung von Xibo lösen lässt. Die Lösung dürfte jedenfalls Xibo-spezifisch sein und setzt damit Einarbeitungsaufwand für das Xibo-Umfeld voraus. Sie setzt auch voraus, dass Datum und Uhrzeit auf den Clients stimmen, andernfalls müsstest Du die Zeit aus dem Netz beziehen.

Aber warum brauchst Du das überhaupt? Xibo bietet doch einen Scheduler, kannst Du das nicht damit steuern? In der Zeit, die die Programmierung des Bildwechslers in Anspruch nimmt, kannst Du eine Menge Zeitpläne im Xibo erstellen.

Rolf

[Markus Jürgens]

Lieber Rolf,

vielen dank, dass du die xibo-seite überfolgen hast.

Mit dem Scheduler bin ich in Xibo vertraut. Das Problem ist jedoch, dass ich bereits in Xibo eine Kampagne mit mehren verschiedenen Layouts am laufen haben. Das Layout mit dem Bildwechsel soll in die Kampagne integriert werden. Wenn ich jetzt über den Scheduler ein Layout zeitlich steuer (z.B. Layout 1 in Woche 1, Layout 2 in Woche 2, etc.) legt Xibo dieses Layout dann über meine Kampagne. D.h. die Kampagne (wo zum Beispiel auch Videos integriert sind) wird für den Zeitpunkt durch das Layout 1 überlagert. Ich hoffe, dass ich es verständlich genug ausgedrückt habe.

In Xibo kann man entweder eine Webpage einbinden, d.h. die Webpage ist auf einem externen Server gehostet und Xibo spielt sie nur ab. Alternativ kann man auch ein HTML-Package hochladen (Details siehe vorheriger Post). Lange Rede, kurzer Sinn. Wenn ich jemanden finde, der mir dabei hilft die HTML-Seite mit Javascript zu programmieren, kann ich die Seite entweder extern hosten und dann über "Webpage" bei Xibo einbinden oder es mit dem HTML-Package versuchen.

Viele Grüße Markus

[Tabellenkalk]

Hallo,

Leider habe ich nur sehr geringe HTML-Kenntnisse.

Das solltest du ändern und bist dafür an der richtigen Stelle gelandet. Oben auf dieser Seite findest du den Link ins Wiki mit Lesestoff für die nächsten Tage.

Anschließend kannst du dein Bildwechselproblem angehen, das eben nicht nur mit HTML lösbar ist, sondern mindestens eine Programmiersprache benötigt. Im Normalfall wird sich Javascript oder PHP anbieten.

Wenn du Fragen hast, wirst du sie hier erschöpfend beantwortet bekommmen ;)

Gruß
Kalk

[Markus Jürgens]

Lieber Kalk,

vielen Dank für deine schnelle Antwort.

Leider fehlt mir die Zeit, mich ausführlich in HTML und Javascript einzuarbeiten. Klar, kann man dann denken: ja, dann las es halt und dann kannst du es halt nicht so umsetzten, wie du es dir vorstellst.

Bisher habe ich aber bei ähnlichen Anfragen immer Personen gefunden, die mir so geholfen haben. Ich habe dann versucht, die Umsetzung nachzuvollziehen. Das ist dann zu mindestens der erste Schritt.

Vielen Dank! Viele Grüße Markus

[Der Martin]

Hallo Markus,

ich möchte gerne eine HTML erstellen, in der wöchentlich ein anderes Bild angezeigt wird.

das hört sich zunächst mal nicht weiter schwierig an.

Da die HTML-Seite als HTML-Package in Xibo eingebunden werden soll ...

Hmm. Google sagt mir, das sei eine "Digital Signage Software", was auch immer das sein soll.

und die html-Seite entsprechend aus Xibo heraus mehrmals am Tag aufgerufen wird, muss das Skript so programmiert sein, dass dass das Datum abgefragt wird und dann je nach Woche entsprechend Bild 1, 2, 3, etc. angezeigt wird.

Passiert dieses "aus Xibo heraus" mit einem gewöhnlichen Webbrowser? Dann wäre die Aufgabe wohl mit Javascript zu lösen. Wenn aber Xibo selbst das Programm ist, das die Seite dann anzeigt, müsste man mehr darüber wissen, was für Möglichkeiten da unterstützt werden.

Leider habe ich nur sehr geringe HTML-Kenntnisse.

Die allein reichen dafür auch nicht. Du brauchst für den aktiven Teil auf jeden Fall noch eine Programmiersprache, beispielsweise das schon erwähnte Javascript.

Einen schönen Tag noch
 Martin

[Markus Jürgens]

Lieber Martin,

vielen Dank für deine Antwort.

Danke für deinen Hinweis. Xibo ist ein CMS um zum Beispiel Bildschirme mit Bildern, Videos, Html-Seiten etc. zu bespielen. Wir haben mehrere dieser Bildschirme bei uns am Institut hängen, um Mitarbeiter*innen und Studierende mit Informationen zu versorgen.

Es gibt in Xibo die Möglichkeit ein HTML-Package hochzuladen, was dann lokal auf dem Bildschirm abgespielt wird. Konkrete Informationen gibt es dazu hier zu finden.

Viele Grüße Markus

[T-Rex]

Damit dir mal geholfen wird:

        <img id='main_img' src="/default_image.jpg" />
        <script>
            function getWeekNumber(d) {
                // Copy date so don't modify original
                d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
                // Set to nearest Thursday: current date + 4 - current day number
                // Make Sunday's day number 7
                d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
                // Get first day of year
                var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
                // Calculate full weeks to nearest Thursday
                var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
                // Return array of year and week number
                return weekNo;
            }

            var result = getWeekNumber(new Date());
            document.getElementById("main_img").src = "/image_week_"+result+".jpg";
        </script>

<img ... /> bindet ein Bild ein. src ist die Bild source. Das heißt das ist der Pfad zum Bild. Kann auch eine komplette URL sein.

Das Script gibt die Wochennummer zurück. Die Logik dafür findest du in dem function block der mit } endet. Dort solltest du nichts ändern 😉. In var result steht die Kalenderwochennummer (heute 47).
Danach wird per getElementById das img gesucht und es wird eine neue source übergeben. Damit "überschreibst" du das aktuelle Bild.

Was musst du jetzt tun damit es bei dir funktioniert. Du musst bei dem img beim src erstmal einen passenden Pfad angeben für ein Bild das es auch physisch gibt (muss erreichbar sein). Bei getElementById("main_img").src = gibst du einen Pfad zu Bildern an, die es ebenfalls gibt. In meinem Fall muss es das Bild image_week_47.jpg (nächste Woche image_week_48.jpg) geben. Natürlich muss es auch Bilder für alle anderen 52 Wochen geben.

Meine Hilfe ist total rudimentär und stellt kein best prectice dar.

Gruß
worst prectice
T-Rex

[Markus Jürgens]

Liebe T-Rex,

wow, wenn man die Antwort sieht, sieht es immer so leicht aus. Vielen Dank für deine Hilfe. Es hat bei mir geklappt.

Viele Grüße Markus