Architektur

Übersicht

Dieses Projekt ist eine Webanwendung, die mithilfe von JavaScript ein Gleitschirm - Variometer bereitstellt. Die Hauptaufgabe der Anwendung besteht darin, die Höhenveränderung des Fliegenden zu erfassen und visuell sowie auditiv auszugeben. Zudem wird die aktuelle Position auf einer Karte dargestellt und zusätzliche Informationen wie horizontale Geschwindigkeit und Höhe angezeigt. Die Webanwendung ist modular aufgebaut, um Wartbarkeit und Erweiterbarkeit zu gewährleisten.

Dateistruktur

Die Anwendung folgt einer strukturierten Dateiorganisation, um die einzelnen Funktionalitäten klar voneinander zu trennen. Hier ist eine Übersicht der Verzeichnisse und Dateien:

• Scripts
  • altitudeOnlyGPS.js
  • app.js
  • service-worker.js
• Views
  • index.html
• Styles
  • styles.css
• Utils
  • altitudeUtils.js
  • mapUtils.js
  • operatingSystem.js
  • orientationUtils.js
  • sound.js
  • soundprofile.js
  • timer.js
  • toast.js
• Assets
  • marker.png
  • paraglider.png
  • favicon.ico

Scripts

altitudeOnlyGPS.js

• Zweck: Einstiegspunkt der Anwendung, der alle Module zusammenführt.
• Beschreibung:
  • altitudeOnlyGPS.js ist das zentrale Skript, das beim Starten der Anwendung geladen wird.
  • Es koordiniert die Initialisierung aller Module und stellt sicher, dass alle Teile der Anwendung korrekt miteinander arbeiten.
  • Diese Datei enthält die Event-Listener und die Logik, die die Interaktionen zwischen den verschiedenen Komponenten steuert, wie z.B. das Handling von Benutzeraktionen und die Aktualisierung der UI in Echtzeit.

app.js

• Zweck: Registriert den Service Worker für die Anwendung, um Offline-Funktionalität und Ressourcen-Caching zu ermöglichen.
• Beschreibung:
  • Überprüft, ob der Browser Service Worker unterstützt.
  • Registriert die service-worker.js-Datei beim Laden der Seite.

service-worker.js

• Zweck: Caching von Ressourcen zur Unterstützung der Offline-Funktionalität der Anwendung.
• Beschreibung:
  • CACHE_NAME: Name des aktuellen Caches.
  • urlsToCache: Liste der URLs, die beim Installieren des Service Workers gecacht werden.
  • Install-Event: Cacht die angegebenen URLs und protokolliert Fehler.
  • Fetch-Event: Lädt Ressourcen entweder aus dem Cache oder über das Netzwerk.
  • Activate-Event: Löscht alte Caches, die nicht mehr in der Whitelist sind.

Views

index.html

• Zweck: Haupt-HTML-Datei, die die Benutzeroberfläche der Anwendung definiert.
• Beschreibung:
  • index.html enthält die grundlegende Struktur der Anwendung, einschließlich der Einbindung von CSS- und JavaScript-Dateien.
  • index.html definiert die Platzhalter für die verschiedenen UI-Komponenten wie Karten, Buttons und Informationsanzeigen.
  • Hier werden auch die grundlegenden HTML-Elemente platziert, die für die Interaktivität und Darstellung der Anwendung benötigt werden.

Styles

styles.css

• Zweck: Definiert das Design und Layout der Anwendung.
• Beschreibung:
  • Globales Styling: Dunkler Hintergrund für ein modernes und kontrastreiches Design
  • Buttons: Runde Ecken, dunkler Hintergrund und weißer Text für einen modernen Button-Stil.
  • Kompass & Bilder: Größenanpassungen für Kompass und Icons.
  • Geschwindigkeits- & Statistik-Anzeigen: Dunkler Hintergrund, zentrierte Labels und ein Rahmen zur Strukturierung.
  • Höhenanzeige: Vertikale Balken mit verschiedenen Farben zur Darstellung der Höhen.
  • Toast-Benachrichtigungen: Animierte Pop-up-Benachrichtigungen mit unterschiedlichen Stilen (Information, Erfolg, Warnung, Fehler).

Utils

altitudeUtils.js

• Zweck: Berechnung und Darstellung der Höhe sowie Verwaltung des vertikalen Geschwindigkeitsverlaufs.
• Wichtige Funktionen:
  • changeAltitudeIcon(speed): Ändert das Höhenanzeigesymbol basierend auf der Geschwindigkeit.
  • changeSpeedHistory(speedHistory, speed): Verwalten des Verlaufs der vertikalen Geschwindigkeit.
  • displayAltidtude(altitude): Ausgabe der Höhe.
  • displayVerticalSpeed(speed): Ausgabe der vertikalen Geschwindigkeit

mapUtils.js

• Zweck: Dieses Modul enthält Funktionen zur Berechnung von Entfernungen und Geschwindigkeiten auf der Karte.
• Wichtige Funktionen:
  • calculateDistance(lat1, lon1, lat2, lon2): Berechnet die Distanz zwischen zwei geografischen Punkten.
  • calculateManualSpeed(position, lastPosition, lastTimestamp): Berechnet die Geschwindigkeit manuell anhand der Positions- und Zeitdifferenzen.
  • displayDistance(distance): Ausgabe der zurückgelegten Strecke.
  • displaySpeed(speed): Ausgabe der horizontalen Geschwindigkeit.

operatingSystem.js

• Zweck: Erkennung des Betriebssystems (iOS, Android, etc.), um systemspezifische Funktionen auszuführen.
• Wichtige Funktionen:
  • getOS(): Bestimmt das aktuelle Betriebssystem des Benutzers.

orientationUtils.js

• Zweck: Funktionen zur Handhabung der Geräteorientierung, um den Kompass entsprechend zu aktualisieren.
• Wichtige Funktionen:
  • handleOrientationIOS(event): Berechnet den Winkel für iOS-Geräte.
  • handleOrientationAndroid(event): Berechnet den Winkel für Android-Geräte.

Sound.js

• Zweck: Verwaltung und Wiedergabe von Audiodateien, abhängig von der vertikalen Geschwindigkeit.
• Wichtige Funktionen:
  • playSound(profile, audioContext): Spielt einen Sound basierend auf dem ausgewählten Soundprofil ab.
  • getSoundProfile(choice): Liefert das entsprechende Soundprofil basierend auf der Geschwindigkeitsänderung.
  • getValueForClimb(data, climbRate): Gibt den Wert der Steigrate zurück.

Soundprofile.js

• Zweck: Definition von Soundprofilen für verschiedene Steig- und Sinkraten. Diese Profile werden verwendet, um akustische Rückmeldungen basierend auf der vertikalen Geschwindigkeit des Nutzers zu erzeugen.
  • descentProfile: Spezifisches Profil für das Sinken.
  • ascentProfile: Spezifisches Profil für das Steigen.

Timer.js

• Zweck: Einfache Timerfunktionalität zur Messung von Zeitintervallen.
• Wichtige Funktionen:
  • start(): Startet den Timer.
  • stop(): Stoppt den Timer.
  • pause(): Pausiert den Timer.

Toast.js

• Zweck: Ausgabe von Toast messages auf dem Bildschirm
• Wichtige Funktionen:
  • showToast(message, type, duration): Darstellung der Nachricht, je nach Typ (Information, Erfolg, Warnung, Fehler).

Assets

Marker.png

• Icon um die Startposition zu Beginn des Fluges darzustellen.

Paraglider.png

• Icon um die aktuelle Position während des Fluges darzustellen.

favicon.ico

• kleines Symbol, das in der Adressleiste eines Browsers, auf Tabs und in den Lesezeichen angezeigt wird.