user java script

User Spezifischer Java Script Code

Um eine einfache Möglichkeit zu bieten, avnav an seine Bedürfnisse anzupassen, kann man mit ein wenig Java Script Code AvNav relativ einfach erweitern.

Dabei ist es zunächst einmal möglich, neue Anzeigen zu definieren, die dann im Layout Editor ausgewählt werden können. Prinzipiell kann man dort natürlich beliebigen Java Script code ausführen - muss dabei aber natürlich sehen, die Funktionen von avnav nicht zu stören.

Der Java Script code liegt in der Datei user.js im Verzeichnis BASEDIR/user/viewer.
BASEDIR ist z.B. auf dem pi /home/pi/avnav/data.

Um die Bearbeitung zu erleichtern, kann man über die Files/Download Seite und die Unterseite auf die Dateien in diesem Verzeichnis zugreifen.

Wie im Bild zu sehen, existiert dort bereits eine Datei user.js. Diese wird beim erstmaligen Start aus einem Template erzeugt.

Durch einen Klick auf die Datei und die Auswahl von "Edit" kann man die Datei direkt bearbeiten.

In der Datei sind bereits Beispiele vorhanden für die Möglichkeiten der Anpassung. Nach dem Bearbeiten die Datei speichern und avnav neu laden.

Es empfiehlt sich, die Datei in regelmäßigen Abständen nach dem Bearbeiten herunterzuladen und noch einmal irgenwo zu speichern - es gibt keine Versionsverwaltung in avnav.

Das aktuelle Template kann man auch auf github finden.

Man kann im Wesentlichen die folgenden Arten von Anzeigen hinzufügen:

  • Widgets mit eigenem Formatter (und ggf. festen Werten) basierend auf dem Default Widget (Beispiel 1)
  • Anpassung/Erweiterung der Grafik Widgets mit canvas gauges (Beispiel 2)
    Hiermit ist es auch möglich, Parameter zugänglich zu machen, die in den bisher vorhandenen Widgets nicht enthalten sind.
  • Widgets mit eigenem HTML code (Beispiel 3)
  • Widgets mit Grafik in einem Canvas Element (Beispiel im TestPlugin)

Das Interface, über das mit avnav kommuniziert wird, findet sich auf github bzw. im Template Code.

Falls der eigene Java Script code auf libraries oder images zugreifen soll, können diese in das gleiche Verzeichnis hochgeladen werden - Images auch in das Images Verzeichnis (als URL erreichbar über ../images).

Das Einbinden von Bibliotheken kann z.B. so erfolgen

var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", "my_nice_lib.js"); document.getElementsByTagName("head")[0].appendChild(fileref)

Es empfiehlt sich, für alle Widgets css Klassen zu vergeben, damit man diese dann mit nutzerspezifischem CSS anpassen kann. IDs sollten nicht verwendet werden, da die Element potentiell mehrfach auf der Seite auftauchen können.

Falls Daten vom Server geladen werden sollen, empfiehlt sich die Verwendung von fetch. Alle Dateien im user Verzeichnis sind direkt über ihren Namen als relative URL abrufbar.

Falls im User-Verzeichnis z.B. eine weitere Text-, Html- oder andere Datei angelegt werden soll (ohne eine hochzuladen), kann man das auch direkt mit dem "+" Button unten rechts erledigen - die Datei kann dann natürlich ebenfalls direkt bearbeitet werden.