Segeln-Forum

@all:

Hier noch ein paar Bilder vom Nachtmodus. Dann habe ich auch mal das Timing des ESP8266-Webservers mit der Web-Console des Firefox näher untersucht. Da sieht man ganz gut, dass erst die Webseite geladen wird und dann die Cascading Style Sheets (CSS) für die Seitengestaltung. Das eigentliche Laden der Dokumente dauert 14 ms bzw. 16 ms. Dazwischen gibt es eine größere Pause wo die Firmware des ESP8266 die Netzwerkaktivitäten verarbeiten muss. Die ganze Übertragung ist dann nach 341 ms abgeschlossen. Das erklärt dann auch ganz gut, warum man nur 2 Clients bedienen kann, wenn die Updaterate des Anzeigeinstrumentes bei 1Hz liegt.

Bei JSON sollte es dann noch zügiger gehen, da das Laden der CSS entfällt. Alternativ könnte man die CSS direkt in die Webseiten mit einbauen. Dann sollte es noch etwas schneller gehen. Hier wird schon recht deutlich, warum man mit dem ESP8266 keine großen Webseiten stemmen kann. Da muss man mit den Resourcen sehr sparsam umgehen und einige Tricks anwenden. Das Carbon-Muster im Hintergrund ist übrigens kein Bild und wird vollständig über CSS gerendert, was sehr sparsam ist und optisch gut rüberkommt. Grundsätzlich kann man alle Seiten einheitlich über CSS gestalten. Da gibt es tolle Gestaltungsmöglichkeiten für alles mögliche im Internet. Ich werde noch einen hellen Style für alle Seiten anlegen, damit das Tablett in der Sonne nicht wegbrät bei dem dunklen Hintergrund. Das ist dann vielleicht doch nicht so passig für alle Situationen.

Norbert

@all:

So, ich habe die Webkonfiguration noch etwas weiter ausgebaut und geschwindigkeitsmäßig optimiert. Wer möchte kann unter folgendem Link:

http://t1p.de/windsensor

die Webkonfiguration im Demomode aufrufen und selber mal die Funktionalität testen. Alternativ kann man auch den QR-Code benutzen. Momentan wird die Instrumentenanzeige noch gepollt und es kann je nach Browser zu Rucklern beim Anzeigen kommen. Die Webseiten laufen direkt auf dem ESP8266 bei mir zu Hause und werden ins Internet weitergeleitet. Die Performance bei einer guten Internetverbindung ist so wie sie später auch sein wird, da die Zielhardware die selbe ist. Über Mobile- Internet kann es je nach Übertragungsgeschwindigkeit zu Beeinträchtigungen kommen.

Der Webserver kann jetzt nach der Webseitenoptimierung ca. 4 Clients parallel bedienen ohne merkliche Beeinträchtigungen. Wenn jetzt alle gleichzeitig Testen wollen, dann gibts wohl Probleme . Dann bitte einfach etwas später noch einmal versuchen.

Testet bitte mal die Funktionalität auf verschieden Geräten wie:

* Handys
* Tabletts
* Laptop, PC
* Verschiedene Browser
* Verschiedenen Betriebssysteme (Android, Apple, Windows, Linux)

und gebt mir Rückmeldung wenn was nicht geht oder was verbessert werden sollte.

Norbert

PS: Es kann sein, dass wenn mehrere gleichzeitig die Webkonfiguration bedienen, dass sich der Style ändert, wenn jemand anderes den Style verändert hat. Das ist eigentlich ganz praktisch. wenn mam mehrere Angeigegeräte benutzt. Dann kann man an einem Gerät den Style umstellen und auf allen anderen Anzeigegeräten ändert sich der Style dann auch. Das ist nur hier etwas unpraktisch, da man sich gegenseitig den Style verändern kann.

Die kommenden Tage werde ich regelmäßig noch einige Änderungen vornehmen. Es kann dann sein, dass die Webseite nicht verfügbar ist. Dann etwas später noch einmal den Zugang testen.

@NoStress:

Vielen Dank für Deine Anmerkungen und den Test. Hier kurz meine Antworten:

* allg Layout
Die Buttons auf dem Startbildschirm werde ich zweispaltig ausführen, so dass mehr Platz ist und man nicht scrollen muss.
In der Drop-Down-Liste habe ich die Felder absichtlich weiß gelassen, da der Kontrast besser ist. Mit rot war es zu flau. Im Grunde genommen benutzt man die Konfigurationsseiten ja nur sehr selten, wenn man alles eingestellt hat. Wenn jetzt alle rote Hintergrundfelder möchten, dann würde ich das auch machen.

* Windsensor Instrument
Selection 0 und 1 ist ein Überbleibsel vom Testmode wo ich prüfen kann wie viele Parameter der Webseite übergeben werden. Das werde ich noch entfernen.
Die Einheiten in der Windanzeige werden noch nicht vollständig übernommen. Das muss ich noch machen und wird dann so sein wie es soll.
Der Blank zw. der Zahl und der Einheit kostet sehr viel Platz bei größeren Gradzahlen. Ich würde die Einheit lieber dicht dran stehen lassen wollen. Ich kann das aber auch mal anders machen und zum Test bereitstellen. Leider wird das °-Zeichen nicht richtig dargestellt und ich musste deg verwenden. Das liegt vermutlich am verwendeten Zeichensatz. Ich muss noch einmal schauen, ob man das korrigieren kann. Mir wäre das °-Zeichen lieber.

*Windsensor Values
Die Einheit muss ebenfalls noch übernommen werden

*Device Informations
Raw Data könnte man auch noch ausgeben wenn es gewünscht ist. Dann würde ich ein Textfenster hinzufügen wo die letzen 5 Telegramme angezeigt werden. Ansonsten kann man das über OpenPlotter oder OpenCPN machen oder man dockt sich per Telnet an den Port 6666. Das ginge auch.

*Display Settings
Zur Einstellung der Instrumentgröße ändert man die Größe und geht dann auf senden. Danach wechselt man zum Instrument. Dann sollte die neue Größe angezeigt werden. Einen Cookie kann ich nicht verwenden, da der Webserver das nicht unterstützt. Die Einstellung gilt gleichermaßen für alle Geräte die am Windsensor angedockt sind. Das scheint nicht ganz so gut zu sein, wenn man verschiedene Geräte mit unterschiedlichen Displaygrößen verwendet. Ich könnte das auch mit JavaScript auf der Clientseite lösen. Dann könnte man auf jedem Gerät die Einstellung unabhängig voneinander vornehmen. Die Einstellung gilt dann aber nur für die aktuelle Sitzung und muss beim nächten Mal wieder neu gesetzt werden. Dann würde ich das Setzen der Größe direkt in die Instrument-Seite einbauen. Das wäre auch noch praktikabel.

Die Voreinstellungen der Settings springen leider momentan beim Wiederaufrufen der Seite auf Defaultwerte. Das werde ich noch so umbauen, dass die zuletzt gesetzten Werte angezeigt werden. Das ist sonst ziemlich unpraktisch. Da hast Du recht.

*Weiter Add-Ons
Mir ist es jetzt endlich gelungen das Polling zu vermeiden. Die Anzeigewerte werden jetzt über JSON und JavaScript aktualisiert. So entfällt dann das lästige rumruckeln beim Aktualisieren und ist wesentlich flotter. Über die JSON-Schnittstelle sollen zukünftig alle Informationern des Windsensors ausgegeben werden. Ich werde das so gestalten, dass man das Instrument Panel von OpenPlotter auch zur direkten Anzeige der Messwerte benutzen kann ohne dass der Windsensor in OpenPlotter eingebucht sein muss. Man wählt dann einfach eine andere Datenquelle im Instrument Panel aus.
Das schöne Canvas Steel-Instrument kann ich jetzt auch anbinden. Dazu muss aber eine externe Lib über Internet eingebunden werden, die für den ESP8266 zu groß ist.

Norbert

@NoStress:

Habe gerade noch einmal nachgesehen. Man kann auch Cookies mit JavaScript clientseitig setzen und auslesen. Dann kann man die Größe des Anzeigeinstruments auf dem Endgerät auch dauerhaft speichern. Das ist natürlich viel komfortabler.

Norbert

@all:

Die Arbeiten an der Web-Konfigurationsoberfläche sind jetzt abgeschlossen. NoStress testet die Webseiten noch einmal gründlich, so dass ich sie dann mit der Messtechniksoftware verheiraten kann.

Heute habe ich mal eine App mit dem MIT App Inventor für Android erstellt. Die App läuft als WebApp und ist quasi ein rahmenloser Webbrowser und zieht die Seiten direkt vom Windsensor über das Internet, so dass die Anwendung wie eine richtige App aussieht. Im Grunde genommen wird nur die Web-Konfiguration geladen und ausgeführt. Das klappt aber echt hervorragend und der Code in App Inventor ist winzig. So kann man elegant zwei Zugangsarten zur Verfügung stellen. Die Performace ist genau so gut wie im Webbrowser. MIT App Inventor ist eine Online-Websoftware mit der man einfache Apps mit Hilfe von Scratches grafisch erstellen kann. Wer möchte, kann gerne mal eine eigene App programmieren. Im Internet findet man schöne Tutorials dazu.

Die App ist vorerst eine Beta-Version. Der Seitenaufruf liegt momentan noch auf dem Demo-Windsensor. Wer aber mal testen möchte, kann die App (*.apk) bei GitLab gerne herunterladen und installieren. Zukünftig werde ich noch eine Seite vorschalten, wo man alle ESP8266-Devices aufgelistet bekommt, falls man mehrere hat und dann eine Verbindung auswählen kann. Über die JSON-Schnittstelle ließe sich auch eine reine Android-App erstellen.

Norbert

@all:

Kurzer Zwischenstand: Die Softwaretests zur Web-Konfigurationsoberfläche sind abgeschlossen. @NoStress: hat mir da sehr geholfen und einige Verbesserungen angeregt. Michael hat umfangreiche Stresstests und Verträglichkeitstest durchgeführt. Vielen Dank! Grundsätzlich gibt es keine schwerwiegenden Mängel und die Bedienoberfläche läuft insgesamt stabil. Einige Dinge sind aber noch verbesserungswürdig. Die werde ich noch einbauen und dann mit der Messsoftware alles verheiraten. Hoffentlich reicht der Speicher noch aus. Ich will da ungern was rausschmeißen müssen.

Norbert

@all:

Es ist mir jetzt endlich gelungen das schöne Canvas Steelseries Instrument in die Web-Konfiguration einzubinden. Um das Instrument anzeigen zu können muss man als "Instrument Type" den Wert "complex" auswählen. Der Windsensor benötigt allerdings eine Internetverbindung, um die notwendige JavaScript-Bibliothek runterzuladen, da sie nicht mehr in den Speicher des ESP8266 passt. Sollte keine Internetverbindung zur Verfügung stehen, so wird automatisch das einfache Instrument geladen.

Das Canvas Steelseries Instrument musste ich noch in der Bibliothek etwas anpassen, damit beide Werte (Windrichtung, Windspeed) im Display angezeigt werden.

Wer möchte, kann gerne die Demo testen:

http://t1p.de/windsensor

Jetzt ist die Web-Konfiguration endgültig fertig und alle Dinge sind eingebaut. Der nächste Schritt wäre dann die Messsoftware einzubinden.

Norbert

@chrhartz:

Ja, die Canvas Steel Series- Instrumente sind wirklich sehr gut umgesetzt und gelungen. Von der Performance her sind sie meiner Meinung nach aber schnell genug. Gerrit Grunwald hat die Bibliothek noch etwas geshrinkt, so dass die Ladezeiten schneller sind. Die Instrumente sind optisch sehr aufwändig mit smooth laufenden Zeigern und vielen Schattierungen umgesetzt, was natürlich Rechenzeit für Rendering kostet. Die Performance hängt aber ausschließlich vom Client ab, der das Instrument anzeigen muss. Der Webbrowser im Raspi ist eher schwachbrüstig. Selbst auf meinem Mitteklasse-Handy oder meinem billigst 7" Tablett läuft das Instrument flüssig, wenn auch etwas langsamer als auf einem PC. Als Alternative gibt es ja immer noch das einfachere Instrument.

Kannst ja mal live unter dem Link testen. Selbst auf meinem 10 Jahre alten Sony EBook-Reader TR2 mit EInk-Display läuft das Instrument.

Norbert

@NoStress:

Ja, das ginge auch. Man muss aber wissen wie das geht. Für einige ist das etwas zu schwierig. Daher gibt es die Fallbacklösung mit dem einfachen Instrument. Nochmal zum besseren Verständnis für alle: In Deiner Lösung würde man auf dem Raspi die DNS Namensauflösung der Webseitenaufrufe in der host-Datei so verbiegen, dass bei einem Aufruf der GitLab-Seiten diese lokal auf den Raspi umgelenkt werden. Dann müssen sich die Bibliotheken auf dem Raspi genau so befinden wie sie bei GitLab hinterlegt sind. Wer möchte, kann sich das hier mal ansehen:

https://gitlab.com/norbertwalter67/plain…e/master/public

In der App könnte man die Bibliothek fest mit einbauen. Ich habe mir auch überlegt in der JavaScript- Bibliothek alles rauszuschmeißen was ich nicht benötige. Dort sind gut 30 verschiedene Instrumente hinterlegt. Ich nutze ja nur mein modifiziertes Wind-Instrument. Dann müsste die Bibliothek sehr klein werden und von 710 kB auf unter 50 kB kommen. Wenn man dann noch den Code shrinkt, sind es vielleicht nur noch 25 kB groß. Das würde zwar in den Speicher des ESP8266 passen. Man kann die Seite immer noch nicht richtig ausliefern bzw. muss Verrenkungen machen.

Vorerst schien mir das die beste Lösung zu sein, so wie ich das umgesetzt habe. Alternativ könnte man das Instrument auch neu coden und etwas einfacher umsetzen. In der Bibliothek ist das aber sehr schön gelöst und strukturell gut umgesetzt, so dass man das universell nutzen kann. Da muss man Gerrit Grunwald als Schöpfer der Bibliothek einen großen Dank sagen. Da werden z.B. alle statischen Dinge des Instrumentes in einen Layer-Buffer gezeichnet und abgelegt und in weiteren Layer-Buffern die dynamischen Elemente. Am Ende werden alle Layer-Buffer vereinigt und ausgegeben.

Wenn ich mehr Zeit habe, dann schaue ich mir das noch einmal an. Die Priorität liegt momentan darauf, den Code mit der Messsoftware zu verheiraten.

Norbert

@chrhartz:

Ja, das verstehe ich. Das Auge isst aber mit. Daher ja auch die Fallbacklösung, falls man kein Internet hat. Mir ist da momentan nichst besseres eingefallen.

Gut, dann müsste man das Instrument komplett neu zeichnen, schön machen und so klein wie möglich umsetzen. Das kostet aber viel Zeit. Allein das einfache Instrument hat mich 3 Tage Arbeit gekostet bis ich es raus hatte wie man das macht. Bei einem komplexen Instrument wird es noch wesentlich länger dauern. Beim Zeichnen des Instrumentes werden bestimmte grafische Overlay-Techniken angewendet, die man draufhaben muss, damit es gut aussieht. Da bin ich nicht der Profi drin und müsste mich erst einarbeiten. Du kannst ja mal in die Grafik des Instrumentes reinzoomen. Da sind Unmengen grafischer Details zu finden wie:

* Lichtreflexe
* Schattenwurf
* Spiegelungen
* weich laufende Zeiger
* LCD-Anzeigen mit Schattenwurf im Zwischenglas
* Abschrägungen, Geometriestrukturen
* Oberflächentexturen
* Lichtstreueffekte

Deshalb sehen die Instrumente so realistisch aus. Die Kunst ist es, das so resourcenschonend wie mögölich umzusetzen. Es ist dann auch kein Wunder das die Bibliothek 710 kB groß ist.

Unter Github sind die Sourcen gehostet: https://github.com/HanSolo/SteelSeries-Canvas

Im Anhang habe ich mal alle Instrumente aufgelistet die es gibt.

Daher sind die meisten Instrumente für embededed Geräte sehr einfach gehalten und benutzen meistens nur geometrische Grundformen.

Norbert

PS: Und das dann in einer Android App zu realisieren wird dann ganz krampfig.

@chrhartz:

Vielleicht ließe sich das Ganze auch entschärfen, wenn man den Browser-Cache auf der Client-Seite nutzen würde. Dann könnte man bei vorhandenem Internet die JavaScript-Bibliothek laden und dauerhaft im Browser-Cache des Handys speichern. Bei jedem weiteren Aufruf ohne oder mit Internetverbindung wird dann die Bibliothek immer aus dem Cache geladen. So ganz dauerhaft ist das aber auch nicht möglich, da die maximale Cach-Verweildauer auf 1 Jahr begrenzt ist. Aber immerhin ließe sich das Instrument dann für 1 Jahr ohne Internet nutzen, vorausgesetzt man löscht den Browser-Cache nicht zwischendurch und achtet darauf, dass der Cache nicht beim Beenden des Browsers gelöscht wird. Das ließe sich noch relativ einfach und resourcenschonend in den ESP8266 integrieren.

Der Raspi 3B ist schon sehr performant und entspricht der CPU-Leistung eines Mittelklasse-Handys. Bei mir sind in OpenPlotter auch die Canvas Seel Series- Instrumente implementiert. Über ein HDMI-Display laufen die ebenfalls flüssig. Verwendest Du ein HDMI- oder ein DSI-Display?

Den Rahmen der Canvas Steel Instrumente kann man auch ausblenden, wenn es denn sein muss.

Zitat

Sind wir nicht merkwürdig, da versuchen wir bei Displays die Spiegelungen und Schatten möglichst
zu vermeiden und bauen sie dann mit viel Arbeit und Rechenleistung bei den simulierten Instrumenten
wieder rein, damit sie realistisch aussehen. Verrückte Welt.

Ja, das ist die schöne virtuelle Welt des Internet.

Norbert

@NoStress:

Ja, das ginge auch. Ich hatte nur nach einer Lösung gesucht die kein Zutun des Users bedarf. Die Browser-Cache-Technik ist auch weit verbreitet, besonders, wenn Libs geladen werden sollen, die man sonst bei jedem Seitenaufruf runterladen muss. Im Grunde genommen gibt es ja ein Verfallsdatum für Cache-Einträge die den Cache dann wieder freimachen. Leider wird diese Technik gerne für unseriöses Ausspionieren des Users (User-Tracking) verwendet und ist daher nicht so beliebt.

Aus Sicherheitsgründen macht ein regelmäßiges leeren des Browser-Caches natürlich Sinn. In den Handybrowsern (Andriod Browser, Firefox) lässt sich der Cache aber nicht automatisch löschen. Cookies jedoch schon. Es gibt aber eine Option den Cache manuell zu löschen. Von daher könnte die Cache-Funktion nicht ganz unnütz sein.

Norbert

@TrampMuc:

Die Software funktioniert folgendermaßen:

1. HTML-Seite mit eingebettetem JavaScript aufrufen (es erscheint die Webseite mit dem Content)
2. CSS-StylesSheeds laden
3. JavaScript Bibliotheken laden
4. Syles anwenden (das spezielle Aussehen der Webseite wird angepasst wie Buttons, Hintergrund, Textfarbe und Größe)
5. JavaScript als Loop ausführen (dann erscheint das Instrument mit den Daten)

Im JavaScript der HTML-Seite wird jede Sekunde eine Verbindung zum Windsensor aufgebaut über die die Daten als JSON-String übergeben werden. Das JavaScript wertet die Daten aus und verändert die Zeigerpositionen und Zahlenwerte. Die Bibliothek wird vom JavaScript der HTML-Seite benötigt und wird so zu sagen zum HTML-JavaScript dazu gelinkt.

Wenn die Seite einmal geladen wurde läuft im Browser ständig das JavaScript im Hintergrund, bis die Seite verlassen wird. Geht man auf eine andere Seite und kehrt wieder zur Instrument-Seite zurück, so laufen die Punkte 1...5 nacheinander ab. Damit jetzt nicht jedes Mal die JavaScript-Bibliothek geladen werden muss, die sich ja vom Inhalt her nicht ändert, kann man sie im Cache des Browsers für eine gewisse Zeit zwischenspeichern lassen. Das geht für die CSS-Styles auch. Wenn man den Cache benutzt, muss die Bibliothek nicht mehr aufwändig über das Internet bezogen werden und wird direkt aus dem Browser-Cache geholt. Das geht super schnell ohne Zeitverzögerung. Wenn man die Verweildauer im Cache auf 1 Jahr setzt, muss man nie mehr was aus dem Internet nachladen, da es ja im Cache liegt. Voraussetzung ist aber, dass der Cache nicht zwischendurch gelöscht wird. Der Cache-Inhalt bleibt auch bestehen, wenn der Browser geschlossen wird. Beim nachsten Browserstart steht der Cache-Inhalt wieder zur Verfügung. So lassen sich z.B. große Webprogramme wir Google-Word und Google-Excel ohne zeitaufwändige Ladeorgien schnell starten und nutzen. Das ist das Konzept hinter den Google Chromebooks, die die Anwendungen nur noch aus dem Netz beziehen. Das Ganze wird als SaaS (Software as a Servive) bezeichnet.

In den angehängten Bildern sieht man schön, wie beim zweiten Seitenaufruf die Bibliotheken aus dem Cache geladen werden und die Startzeit der Seite dramatisch sinkt.

Norbert