Abstract

Sunray ist ein webbasiertes und Benutzerintuitives Projekt, welches Interessierten ermöglicht die Sonnenbahn sowie die Sonnenstrahlungsenergie abhängig von an einem bestimmten Ort zu visualisieren. Es lässt sich hierbei ein Benutzerdefinierters Zeitintervall auswählen. Die dafür benötigten Daten werden von der NASA POWER API und der PVGIS API bereitgestellt.
Die Visualisierung wird durch die Open Source Library JSXGraph realisiert. Das Projekt wird mittels eines Automatischen Deployments unter
https://markov.htwsaar.de/sunray/ ausgeliefert, und ist Browserunabhängig.

Einleitung

Das Projekt ist für alle Nutzer*innen gedacht, welche sich praktisch mit der Astronomie unserer Sonne auseinander setzen möchten. Durch die Nutzung von Open-Source Libraries und einer nutzerfreundlichen Oberfläche ist der benötigte Overhead gering, und die Antworten präzise und schnell. Die Kernidee ist eine leichtgewichtige, benutzerfreundliche Darstellung ohne lokale Installation. Die Sonnenposition wird berechnet und für die 2D-Darstellung auf eine Ebene projiziert (JSXGraph).

Grundlagen und Begriffe

Die einzelnen Fachbegriffe aus der Himmelsmechanik können am Anfang schwer verständlich wirken, lassen sich aber mittels einer bildlichen Visualisierung gut erläutern.

Zenit, Azimut, Höhe

Orientierung am Himmel Visualisierung der behandleten Winkel

Definitionen

Im folgenden notieren wir einige Definitionen, welche zum Verständnis des Projekts sowie der resultierenden Sonnenposition beitragen. Der Ausgangspunkt ist hierbei eine Ebene auf welcher sich der Betrachter befindet.

Azimutwinkel

Der Azimutwinkel ist der Winkel zwischen “dem Nordpunkt und dem Schnittpunkt des Vertikalkreises durch das Gestirn” . In den beigelegten Zeichnungen wird der Azimut mit A bezeichnet.

Höhenwinkel

Der Höhenwinkel ist der Winkel zwischen “dem Gestirn und der Horizontebene” . Man bezeichnet diesen Winkel als Höhe h. Am Horizont liegt dieser bei 0° und im Zenit bei 90°.

Zenitwinkel

Der Zenitwinkel wird mit z notiert und beschreibt den Winkel zwischen dem “Zenit und dem Gestirn. Es gilt demnach : $z + h = 90^\circ$ ” .

Anforderungen und Ziele

Hier möchten wir die an unsere Webanwendung gestellten Anforderungen auflisten. Diese lassen sich in funktionale, technische, sowie nicht-funktionale einordnen.

Funktionale Anforderungen

Funktionale Anforderungen beziehen sich auf praktische Erwartungen, welche unser Projekt erfüllen sollte, und beschreiben konkreten Funktionen welche die Anwendung bereitstellen muss. Wir unterscheiden zwischen den zentralen Elementen der Sonnenposition und der Sonnenstrahlungsenergie.

Sonnenposition

Die Sonnenposition soll auf Basis des ausgewählten Standortes innerhalb eines bestimmten Zeitintervalls visualisiert werden.

Sonnenenergie

Die Sonnenenergie soll in einem bestimmten Zeitraum, unter Berücksichtigung von meteorologischen Daten (Bewölkung, Luftverschmutzung, etc.) prognostiziert und in einem geeigneten Datenformat wie einem Diagramm dargestellt werden.

Technische Anforderungen

Technische Anforderungen beziehen sich auf die Erwartungen gegenüber der zugrunde liegenden Architektur der Anwendung. Es soll ein eine webbasierte, benutzerfreundliche Anwendung ohne eine vorher benötigte lokale Installation entwickelt werden.
Die für das Programm benötigten Daten sollen per API Anfragen gesammelt, sowie durch ausschließlich Open-Source Bibliotheken (NASA POWER, PVGIS, JSXGraph, etc.) verarbeitet und dargestellt werden.

Nicht-funktionale Anforderungen

Nicht-funktionale Anforderungen beziehen sich auf Erwartungen welche keine direkten Auswirkungen auf die praktische Nutzung der Anwendung haben. Dies beinhaltet etwa die Dokumentation der Software (wie diese), aber auch Aspekte wie ein automatisiertes Deployment und einen Wartbaren, modularen Aufbau des Projekts.

Architektur & Design

Im folgenden werden dem Leser die Architektur von SUNRAY sowie die im Entwicklungsprozess getroffenen Entscheidungen bezüglich des Designs nähergebracht.

Architekturübersicht

Wir haben uns bewusst für eine strukturierte, sowie leicht wartbare Softwarearchitektur entschieden. Die unterschiedlichen Komponenten sind in einzelne Module unterteilt, welche wiederrum klare Aufgaben lösen. SUNRAY ist ein komplett Frontend basiertes Projekt.

Komponentenbeschreibung

Als nächstes werden dem Leser der Aufbau der zwei zentralen Module, der sunposition und sunenergy visualisiert dargestellt. Diese sind die zwei primären Bausteine des Projekts.

Modul sunPosition

Dieses Modul ist für die Berechnung und Visualisierung der Sonnenposition zuständig. Die Datei shared/locationService.js befasst sich mit der Abfrage des benötigten Standortes. Um die für die Visualisierung benötigten Koordinaten zu erhalten, werden in src/sunposition/jpl.js der Azimut A und die Höhe h in 2D-Koordinaten überführt.

Umrechnung in jpl.js

:
Zunächst werden die gegebenen Winkel, Azimut A und die Höhe h, welche im Gradmaß vorliegen, mit der Funktion toRad() in Bogenmaß überführt :

$$\begin{equation} \theta_\text{rad} = \theta_\text{deg} \cdot \frac{\pi}{180} \label{eq:degToRad} \end{equation}$$

Anschließend wird zur Umrechnung auf das kartesische Koordinatensystem der Azimutwinkel um $90^\circ$ verschoben und eine Projektion auf den Einheitskreis in convertCoordination() durchgeführt:

$$\begin{align} \text{Azimut im Plotwinkel:} \; A' &= 90^\circ - A \label{eq:azimutPolar} \\[0.5em] \text{Im Bogenmaß:} \; h_\text{rad} = h \cdot \frac{\pi}{180} , \quad A'_\text{rad} &= A' \cdot \frac{\pi}{180} \label{eq:azimutRad} \end{align}$$

Wobei gilt: $A'_\text{rad} = A' \cdot \frac{\pi}{180} = \frac{\pi}{2} - A_\text{rad}$.

Die Berechnung der karteischen Koordinaten x,y sieht wie folgt aus :

$$\begin{align} s &= \cos(h_\text{rad}) \label{eq:radiusProjection} \\[0.5em] x &= s \cdot \cos(A'_\text{rad}) \label{eq:xCoordinate} \\[0.5em] y &= s \cdot \sin(A'_\text{rad}) \label{eq:yCoordinate} \end{align}$$

Hierbei ist s der Radius nach der Projektion auf die horizontale Ebene.

Modul sunEnergy

Dieses Modul ist für die Prognose und Darstellung der Sonneneinstrahlungsenergie verantwortlich. Der Aufbau ist hier ebenfalls strukturiert.
Wie auch in dem vorherigen Modul wird shared/locationService.js für die API Abfrage benutzt.

Um Informationen über die genannte Sonnenenergie darzustellen zu können, werden vorher in src/sunenergy/pvgisService.js stündliche, tägliche, monatliche und jährliche Abfragen zusammengestellt. Diese werden dann and die jeweilige API geschickt.

Bestimmung der Sonneneinstrahlungsenergie in pvgisService.js

:

Die Sonnenenergie wird mit verschiednen API’s abgefragt. Für die monatliche und jährliche Einstrahlung wird die NASA POWER API benutzt, während für die Werte pro Stunde und Pro Tag die PVGIS API verwendet wird.

####### API-Workflow:

1. URL mit Parametern für Standort/Zeit bauen.

2. Antwort abrufen und parsen (JSON bei NASA POWER, CSV-Stream bei PVGIS).

3. Ungültige Werte filtern.

4. In Paare $(\text{Index},\,\text{Wert})$ abbilden, ggf. gruppieren/mitteln.

Verarbeitung in jeder Funktion:

 
Hier wird dem Leser visualisiert welche Funktionen bei den Abfragen der Sonnenenergie benutzt werden, aus welchen Quellen diese stammen, sowie welche Ergebnisse Sie liefern.

Warum zwei APIs (Auflösung & Latenz) :

 
PVGIS liefert stündlich aufgelöste Globalstrahlung als modell-/satellitengestützte Werte (keine lokalen Messungen) für Tagesverläufe. NASA POWER stellt tägliche/monatliche Mittel bereit, wodurch Monats- und Jahresübersichten ohne lange Daily Lade Requests möglich sind.

NASA Power Parameter:

 
Um Messwerte zu erhalten benutzen wir den Parameter ALLSKY_SFC_SW_DWN unter realen Bewölkungsbedingungen (kein wolkenfreier Idealwert) auf einer horizontalen Fläche an der Oberfläche. Es handelt sich um die tatsächlich ankommende, kurzwellige Sonnenstrahlung, welche von oben nach unten auf die Erdoberfläche trifft. Es handelt sich hierbei nicht um die absorbierte Energie. Wir betrachten hierbei die Summe aus einer direkter Strahlung (Sonnenstrahlen, die ohne Streuung am Boden ankommen) sowie diffuser Strahlung (gestreute Strahlung durch Wolken/Atmosphäre). Die verarbeiteten Daten sind satellitengestützt und keine lokalen Sensormessungen.

getMonthlyRadiation(lat,lon,month,year)
 
Quelle: NASA POWER.
Zeitraum: ganzer Monat $[d=1,...,n]$.
Format : JSON
Einheit: kW h m² d⁻⁻¹.
Endpoint: temporal/daily/point.
Parameter: “ALLSKY_SFC_SW_DWN” :

Hierbei liefert uns eine Anfrage tägliche Daten für den laufenden Monat mit einer systembedingten Verzögerung. Die letzten Tage des aktuellen Monats (oft bis zu einer Woche) fehlen.

Das Ergebnis nach dem Filtern sieht wie folgt aus:

$$\mathcal{M} = [ (1,\, E_{\text{day}}(1)),\ (2,\, E_{\text{day}}(2)), \ldots , (n,\, E_{\text{day}}(n)) ].$$

getYearlyRadiation(lat,lon)
 
Quelle: NASA POWER.
Zeitraum: [JAN–DEC](Mittel).
Format : JSON
Einheit: kW h m² d⁻⁻¹.
Endpoint temporal/climatology/point.
Parameter ALLSKY_SFC_SW_DWN.
Hierbei bekommen wir keine Daten für ein bestimmtes Jahr, sondern Langzeit-Durchschnittswerte, welche auf den Jahren 1983 bis 2005 basieren.

Das Ergebnis sieht wie folgt aus :

$$\mathcal{Y} = \{ (m, E_{ \text{month}}(m)) \mid m=1, \ldots ,12\}$$

getDailyRadiation(lat,lon,month,h_start,h_end)
 
Quelle: PVGIS.
Zeitraum: gewählter Monat, Stunden $h\in[h_{\min},h_{\max}]$.
Format : CSV.
Einheit: W m⁻².
Endpoint : DRcalc : lokale Zeit, stündliche Globalstrahlung.
Hierbei bekommen wir die Werte für den gewählten Monat sowie die spezifizierten Stunden des Tages.

Das Ergebnis sieht wie folgt aus :

$$\mathcal D=\bigl[( h_{\min}, \, G(h_{\min} )), \; \ldots, \; (h_{\max}, \, G(h_{\max}) )\bigr],$$

wobei gilt :

$$G(h)\text{: Globalstrahlung (CSV, Spalte 2) }.$$

Implementierung

Hier wird die konkrete Umsetzung des Sunray Projekts beschrieben. Das SUNRAY Projekt wurde in JavaScript und html umgesetzt.

Projektstruktur

Im folgenden wird die Projektstruktur innerhalb des src/ Directories veranschaulicht. Die Dateien sind nach ihren jeweiligen Zuständigkeiten gegliedert :

 tree src -L 1
src
├── App.vue
├── assets
├── components
├── index.html
├── main.js
├── router
├── shared
├── styles
├── sunenergy
├── sunposition
├── test
└── views

10 directories, 3 files

Vue & Vue Komponenten

Wir haben uns in diesem Projekt für das Frontend-Framework Vue.js entschieden, da es sich besonders für die Entwicklung mehrerer ähnlicher Anwendungsseiten eignet.

Code-Wiederverwendbarkeit

Da das Projekt mehrere ähnlich aufgebaute Unterseiten (z.B. sunpath, sunenergy) enthält, ermöglicht die komponentenbasierte Architektur von Vue die Wiederverwendung von UI-Elementen und Funktionalitäten zwischen verschiedenen Seiten.

Reactive Data Binding

Vues reaktives System sorgt dafür, dass sich die UI automatisch aktualisiert, etwa bei Änderungen der Location oder beim Wechsel des Modus, ohne dass manuelles DOM-Management erforderlich ist.

Modulare Entwicklung

Die Vue-Komponenten ermöglichen eine saubere Trennung der Features und erleichtern die Wartung der verschiedenen Funktionalitäten.

Einfache Integration

Vue lässt sich nahtlos mit bestehender JavaScript-Logik wie circle.js
oder energyChart.js verbinden.

Diese Kombination macht Vue zur idealen Wahl für unser Projekt mit mehreren Seiten, die gemeinsame Funktionalität teilen.

Ablauf im Modul sunPosition

Das Modul sunPosition berechnet und visualisiert die Sonnenposition. Der Ablauf lässt sich in vier Schritte gliedern:

1. Eingaben  
   shared/locationService.js liefert die Standortkoordinaten ($lat,lon$). Die Sonnenwinkel werden als azi (Azimut in Grad, 0$^\circ$ = Nord, Uhrzeigersinn) und alt (Höhe in Grad) an das Modul übergeben.

2. Parsen  
   Innerhalb von sunposition/jpl.js werden die Felder via
   parseSunposition({azi, alt}) geliefert.

3. Berechnung (vgl. Formeln [eq:degToRad] - [eq:yCoordinate])  
   toRad(deg) rechnet Werte in Bogenmaß um :

   Der Azimut wird für das später zu visualisierende 2D Koordinatensystem gedreht : x nach Osten, y nach Norden.

   Die Projektion auf den Einheitskreis wird mit
   convertCoordination({azimuth, altitude}) durchgeführt.

   Die Rückgabe der Funktion lautet: { x, y }.

   Warum diese Umrechnung auf 2D?

    
   JSXGraph rendert ausschließlich in der Zeichenebene. Der behandelte Azimut $A$ und Höhe $h$ sind jedoch Winkel im Horizontsystem einer Kugel. Für die Darstellung wird das System daher auf den Einheitskreis projiziert.

4. Visualisierung  
   sunposition/circle.js nutzt JSXGraph, um die Punkte (x,y) auf dem Kreis darzustellen. Ausgehend von dem Betrachter werden hier auch konzentrische Kreise hinzugefügt.

Ablauf im Modul sunEnergy

Das Modul sunEnergy berechnet und visualisiert die Sonneneinstrahlungsenergie. Der Ablauf kann in die folgenden Schritte unterteilt werden:

1. Eingaben : Standortdaten werden durch shared/locationService.js gewährleistet, dazu noch das gewünschte Zeitintervall.

2. Sonnenposition : Weiterverarbeitung der Ergebnisse aus dem Modul
   sunposition/jpl.js (Azimut, Höhe).

3. Energieberechnung : sunenergy/pvgisService.js nutzt die
   bereitgestellten Informationen um die Sonneneinstrahlung zu bestimmen.

4. Visualisierung : sunenergy/energyChart.js stellt die erhaltenen Ergebnisse als JSXGraph Diagramm dar.

Nutzung

Im folgenden werden grundlegende Informationen was die Nutzung von SUNRAY angeht, geklärt.

Zielgruppe & Voraussetzungen

Die Zielgruppe dieses Projekts sind Mathematik und Astronomie interessierte Studierende, es könnte ebenfalls für Solartechnik Planner nutzvoll sein. Es liegen keine speziellen
Voraussetzungen außer einer Internetverbindung, sowie der Erlaubnis zur Nutzung der Use my Location Funktion zur Bestimmung des Standortes vor.

Starten der Anwendung

Die Anwendung kann unter https://markov.htwsaar.de/sunray/ erreicht werden. Diese läuft in allen gängigen Broswern, ebenfalls ausgestattet mit einer Version für mobile Endgeräte.

Bedienung

1. Anklicken eines der Felder im Home Menu, das trifft die Auswahl ob man an der Sonnenposition oder Sonneneinstrahlungsenergie interessiert ist.

2. Suche nach einem Standort oder die Option Use my Location nutzen.

3. Wähle das gewünschte Zeitintervall aus.

4. Bestätige mit Search. Das Ergebnis ist nun sichtbar.

Beispiele der Nutzung

Im Folgenden wird die Nutzung von SUNRAY mittels 3 Screenshots dargestellt. Das Beispiel zeigt neben dem Home Menu die Berechnung der Sonnenbahn sowie
der Sonneneinstrahlung für den Standort Karachi, Pakistan.

Home Menu der SUNRAY Anwendung.

Visualisierung der Sonnenposition (Sun Path) für Karachi, Pakistan.

Sonneneinstrahlung (Solar Energy) für Karachi, Pakistan.

Tests und Qualitätssicherung

Zur Sicherstellung der Funktionsfähigkeit und Wartbarkeit von SUNRAY wurden verschiedene Maßnahmen zur Qualitätssicherung umgesetzt. Diese lassen sich in automatische Tests, Code-Qualität und Deployment-Strategie unterteilen.

Unit-Tests

Die Kernlogik der Anwendung wird durch Unit-Tests gesichert. Dazu zählen besonders die Funktionen, welche eine hohe Auswirkung auf die
Projektlogik haben. Hierbei haben wir das Test-Framework Vitest genutzt.

Code Qualität

Wir haben die Code Qualität unseres Projekts durch das einhalten von
Prinzipien wie etwa dem Clean Code gesichert. Eines davon ist das Low Coupling & High Cohesion Konzept, hier sind unsere Module wie etwa sunposition und sunenergy strikt voneinander getrennt, innerhalb hängen sie aber stark zusammen.

Deployment-Strategie

Für die Auslieferung von SUNRAY wurde ein Deployment Skript eingesetzt. Über (autodeploy.sh) wird der aktuelle Branch Code Stand nach einem erfolgreichen Commit und dem ausführen des Skripts ausgeliefert. Dadurch können wir gewährleisten, dass ausschließlich dazuauthorisierte Personen auf den markov Server veröffentlichen können.

Ergebnisse und Evaluation

Hier evaluieren wir das Projektergebnis mit Blick auf unseren Lösungsansatz.

Funktionalität

Die Anwendung erfüllt die funktionalen Anforderungen wie etwa der Einbindung von API Abfragen zum erstellen eines Sonnenverlaufs oder verbildlichung der Sonnenenergie.

Visualisierung

Die implementierten Buttons auf der Webseite sind interaktiv, die JSXGraph
Diagramme sind nutzerfreundlich gestaltet und die ganze Anwendung läuft im Browser ohne Installation.

Bewertung

Nach Abschluss des Projekts SUNRAY erfolgt im Folgenden eine kurze Bewertung und Reflexion.

Stärken

Es liegt ein einfacher Zugriff auf wertvolle und interessante Informationen da, welche passend visualisiert werden. Eine klare Modularität und Clean Code Prinzipien unterstützen zusätzlich das Projekt.

Schwächen

Eine 3D Simulation der Sonnenbahn konnte leider wegen fehlender Zeit nicht integriert werden.

Ausblick und Weiterentwicklung

In diesem Abschnitt wird ein Ausblick auf mögliche Weiterentwicklungen des Projekts SUNRAY gegeben. Dabei werden sowohl funktionale Erweiterungen als auch ein wissenschaftlich-schulischer Bezug betrachtet.

Neue Features

Eine sinnvolle Erweiterung wäre die Integration zusätzlicher Wetterdaten (Temperatur, Bewölkung, Luftfeuchtigkeit) zur genaueren Energiebestimmung.
Zudem wäre eine 3D Simulation der Sonne und dem von Ihr geworfenen Schatten visuell ansprechend.

Wissenschaftlicher Bezug

SUNRAY eignet sich als Demonstrationstool für den Geographieunterricht in der Schule.
Zudem wäre es interessant einen Vergleich zu real gemessenen Sensordaten aufzustellen, da somit die Genauigkeit des Modells bestimmt werden könnte.

Anhang

Datenmaterial

Web-Standards