In Webseite live-Daten / Grafik anzeigen, einbinden

Heute ist Stammtischzeit:
Jeden Donnerstag 20:30 Uhr hier im Chat.
Wer Lust hat, kann sich gerne beteiligen. ;)
  • Hallo,
    ich sammle von verschiedenen Quellen (Wetterstation, Stromzähler, Wasserzähler, ...) Daten und bereite diese dann relativ einfach mit rrdtool grafisch auf.

    Dies alles geschieht auf Shell-Ebene:
    Eine Endloschleife ermittelt z.B. den Durchschnittsverbrauch der letzten 15s vom Strom.
    Dieser Wert wird zusammen mit anderen Infos in eine immer wieder komplett neu erstellte HTML-Datei geschrieben (welche auch auf per Cron erstellte Diagramme verweist, die z.T. im 5 Minuten Rhytmus neu erstellt werden).

    Das Anzeige-Tablet lädt im 15s Rhytmus immer wieder die index.html Datei komplett neu, incl. der Grafiken, die sich (eigentlich) nicht verändert haben ....
    Wie läßt sich das eleganter lösen, so das nur bestimmte Felder (Text ("0.567kwH" und Grafik vom Stromverbrauch der letzten Minute) sich neu laden, der Rest aber nur im z.B. 2 Minuten Rhytmus komplett neu geladen wird?

    Anbei ein Bsp-Bild, der grüne Bereich sollte "live" Daten/Grafik anzeigen, der balue Bereich reicht alle 2 Minuten.

    In welche Richtung muss ich da am besten schauen / mich einarbeiten?
    PHP, CS5, ...

  • In Webseite live-Daten / Grafik anzeigen, einbinden? Schau mal ob du hier fündig wirst!

  • Ich mache das in so einem Fall per CGI-Script, welches dann die Daten und die WEB-Seite nur dann creiert, wenn ein Nutzer/Browser sie auch anfordert. Ein CGI-Script kann man mit irgendeiner Programmiersprache machen, also auch python oder Shell-Script. Ich selbst nutze immer X11-Basic, aber das nur zur Info.

  • Das Zauberwort lautet: AJAX

    Ich würde dein ganzes Konstrukt über bord werfen und auf folgender Basis neu schreiben: FAQ => Nützliche Links / Linksammlung => [Python] Webserver, Websocket und ein bisschen AJAX
    Der Grund dafür ist recht schnell erklärt:
    Das ständige neu laden der gesamten Seite ist ebenso ineffizient wie das ständige neu schreiben einer Bilddatei. Das hat nichts mit "live" zu tun.
    Es sind verschiedene Wege möglich - so könntest du zum Beispiel die Daten vom Pi aus auf die Seite "pushen" sofern sich diese verändert haben das wäre dann schon eher "live", oder der Client ruft die Daten periodisch ab (pull).

    Was dich in diesem Zusammenhang auch interessieren könnte: FAQ => Nützliche Links / Linksammlung => HighCharts ... Davon die Python Variante. Highcharts sieht weitaus moderner aus und basiert auf JavaScript, ist also auch weitaus flexibler

  • Zur Verdeutlichung bzgl. "neu schreiben einer Bilddatei ..." und "wenn ein browser sie anfordert...":
    Ich habe in der Wohnung ein Tablet hängen, welches immer diese Daten anzeigt (aktueller Stromverbrauch etc.).

    Die Seite (bzw. zumindest bestimmte Werte) müssen immer recht aktuell sein, aktuell sind das 15s für "Live" Daten.
    Sowie ca. 2 Minuten für Diagramme der letzten Stunden.

    Zusätzlich werden auf de Webseite noch recht statische Daten angezeigt wie die nächsten anstehenden Termine (aus dem Google Kalendar), Prime Time TV-Programm (aus dem www mittels wget ... und diversen greps/awk's aufbereitet ...

    Und da ich mit Shell und Bash groß geworden bin, würde ich wenn möglich gerne diesen Teil weiterhin auf Shell-Ebene abarbeiten.
    Jedes Teilprogramm erstellt einen HTML-Block, das ganze wird am Ende zu einer großen html-Datei zusammengebaut. Und das aktuell im 15s Rhythmus (wobei manche HTML Blöcke nur 1x / Tag erstellt werden, aber eben alle 15s "reinkopiert" werden in das große HTML File, welches alles beinhaltet.

    Meine Idee (Ansatz) war, wenn es so was gibt, das in dieser HTML Datei manche "Felder" (Bereiche) dynamisch sind und sich selbstständig aktuallsieren (ohne das die html-Datei selbst neu geladen werden muss). So etwas gibt es doch auf vielen Seiten; weiß aber nicht, wie das dort dann realisiert ist.

    Und da wäre die (beste) Lösung dann? Ajax?
    Oder andere "Tools"? iobroker?

    Ich habe eben live-Messwerte als Zahl (kwH) und aktueller Kurvenverlauf der letzten 60 Sekunden;
    Langzeitdiagramme, aber auch Bereiche, so "nur" ein tagesaktueller Text drinnen steht ...

    Uff, ich hoffe, man versteht was ich meine ;)


  • Meine Idee (Ansatz) war, wenn es so was gibt, das in dieser HTML Datei manche "Felder" (Bereiche) dynamisch sind und sich selbstständig aktuallsieren (ohne das die html-Datei selbst neu geladen werden muss). So etwas gibt es doch auf vielen Seiten; weiß aber nicht, wie das dort dann realisiert ist.

    Noch mal: AJAX :fies:

    Probier einfach mal das aus: FAQ => Nützliche Links / Linksammlung => [Python] Webserver, Websocket und ein bisschen AJAX
    Das kannst du problemlos parallel laufen lassen. In den Code Beispielen wir die CPU Temperatur via AJAX dynamisch verändert.

  • Auch auf die Gefahr hin gesteinigt zu werden :blush: :

    Eine "quick-and-dirty"-Lösung:

    • Die einzelnen HTML-Blöcke als Einzelseiten bauen mit individuellen refresh-Zeiten

      Code
      <meta http-equiv="refresh" content="3; URL=selbeSeite">
    • Gesamtseite mit iFrames zusammenstecken.

    Funktioniert und sollte sehr rasch umzusetzen sein, wenn man schon fertige Blöcke für die verschiedenen Abschnitte hat.

  • Das würde dann aber nichts daran ändern dass sich weiterhin ganze Seiten ständig neu laden. Ob diese Seiten nun einzeln auf sind oder zusammenhängend....

    Er hat doch irgendwelche Daten in irgendeiner Datenbank, die müssen ja von irgendwo her kommen sprich gesammelt und in diese Datenbank geschrieben werden. Nun brauch er eigentlich nur eine Schnittstelle zwischen, entweder
    a) der Datenbank
    oder
    b) den Sensoren
    ..und der Webseite.

    Er benötigt nur ein JavaScript was die Daten gezielt von dieser Schnittstelle abruft und nur einzelne Elemente der Webseite aktualisiert. Sowas nennt man AJAX und ist genau das was er sich überlegt hat.


    In der von mir schon 2x verlinkten Anleitung wird zwar Python als Webserver eingesetzt, wenn ihm das stört kann er den Teil aber natürlich auch weglassen. Wenn er allerdings zum erfassen der Daten so auch schon Python einsetzt dann könnte er das hier direkt mit implementieren und so tatsächliche "Live" Werte ermöglichen.

    Die Anleitung beschreibt mehrere Möglichkeiten die Datenabfrage zwischen Client und Webserver zu realisieren: Websocket und "route"s.

    Mithilfe von WebSocket kann man die Daten vom Server zum Client unaufgefordert "pushen": Sobald der Client sie Webseite öffnet wird eine WebSocket Verbindung über JavaScript hergestellt und gehalten. Ab dem Moment kann der Server unaufgefordert Daten an den Client senden der diese dann verarbeitet und einzelne Elemente in der Webseite verändert - ohne die komplette Seite (oder iframes) neuzuladen.

    Natürlich kann auch der Client gezielt Anfragen an den Server absetzen, was dann "poll" wäre: Im JavaScript ist ein Timer hinterlegt der beispielsweise alle 2 Sekunden eine gezielte Anfrage an Server sendet und bestimmte Daten anfordert, der wiederum darauf dann antwortet und der Client die Daten dann verarbeitet....

    Letzteres (poll) lässt sich auch ohne WebSocket realisieren indem einfach spezielle URL's des Servers abgerufen werden, wo der Server dann die gewünschten Daten drüber ausliefert - bei bottle nennt man das 'route'.


    Die Anleitung beschreibt nicht nur, sondern liefert mehrere Beispiele mit fertigem Code den man nur noch copy&pasten brauch - den dann für seine Bedürfnisse anzupassen sollte das kleinste Problem sein, zumal er seine HTML Dateien fast unverändert übernehmen könnte, einzig die Anforderungen für AJAX muss er natürlich noch einbauen...

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!