• Das Head-Element
• Der Body
• JavaScript einbinden

Wem das Gebiet der Web-Entwicklung noch neu ist, dem empfehle ich die Seite W3Schools. Hier lernt man alles Wichtige über HTML, CSS, JavaScript und weiterführende Web-Technologien.

Wie du siehst, ist die index.html nicht leer. Es sind bereits einige Bausteine vorgefertigt. Die grundlegendsten Elemente sind html, head und body.

Das head Element soll als wichtige Informationen noch einen title und verschiedene link Elemente besitzen, damit die Webseite einen richtigen Namen hat und ein modernes Design nutzen kann.

  <title>AIDC-Web</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="assets/css/main.css">

Die drei Stylesheets legen fest, wie die Elemente der Seite dargestellt werden sollen. Dabei kommen zwei externe Quellen und die lokale main.css für eigene Anpassungen zum Einsatz.

Alles was im Browser zu sehen ist, wird innerhalb des body Elements platziert. Als Inhalt steht bereits eine Navigations- und eine Fußleiste vorgefertigt bereit. Wer die nicht mag, kann die Elemente nav und footer einfach löschen.

Zwischen den beiden Leisten soll nun ein dynamisch generierter Inhalt oder einfach eine Tabelle dargestellt werden. Eine Tabelle hat folgende Grundstruktur, um Tabellenkopf, Zeilen und Spalten zu erzeugen.

   <table>
     <thead>
       <tr>
         <th>Spalte eins</th>
         <th>Spalte zwei</th>
         <th>Spalte drei</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Lorem ipsum</td>
         <td>dolor sit</td>
         <td>amet</td>
       </tr>
     </tbody>
   </table>

Damit nun die Daten, die per Mqtt empfangen werden, auch in der Tabelle darstellt werden können, muss die Tabelle auf die bekannten Eigenschaften der Datenobjekte angepasst werden.

Ganz am Ende des body Elements folgen die verwendeten JavaScript Dateien. Die ersten fünf stammen aus externen Quellen und haben folgende Aufgaben

• jquery - vereinfacht die Suche und Bearbeitung von Elementen im HTML-Baum.
• vue - dient dem Binden von JavaScript Objekten an HTML Elemente, sodass eine Änderung der Objekte auch automatisch eine Aktualisierung im HTML bewirkt - und umgekehrt. 💥
• materialize - ist eine Funktionsbibliothek, die für eine moderne und responsive Darstellung sorgt.
• moment - vereinfacht das Verarbeiten von Datums und Zeitobjekten.
• paho-mqtt - stellt den MQTT-Client und Events bereit, damit Daten empfangen und gesendet werden können.

Die letzten beiden Scripte, sind die lokalen Dateien, mit denen wir die eigene Programmlogik realisieren.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

  <script src="assets/js/lib.js"></script>
  <script src="assets/js/main.js"></script>

Jetzt kann es mit der Bearbeitung des JavaScript weitergehen.