Sehen Sie jede Sekunde den Breiten-/Längengrad der Internationalen Raumstation.

Die Internationale Raumstation ist ein bemannter Weltraumsatellit , der vor fast 25 Jahren gestartet wurde. Ab dem 8. April 2023 befinden sich 7 Personen an Bord und umkreisen die Erde mit über 17.000 Meilen pro Stunde.

Wo sind diese Leute? Lassen Sie es uns herausfinden und mit Python 3, Plotly Dash und der Open Notify API ein Live-Dashboard daraus machen .

Dies ist eine Fortsetzung unseres ersten Artikels zum Finden des Standorts der ISS mit Python, R oder Bash . Wir verwenden den Code aus diesem Tutorial, der Breiten- und Längengrad von der Open Notify-API erfasst , und stecken dann diese Lat/Long-Daten in eine Plotly Dash-App.

Anforderungen

• Python 3
• Plotly Dash — erstellt das Dashboard
• Anfragen — Ruft die ISS-Standortdaten von Open Notify ab
• Pandas – hilft Plotly bei seiner Arbeit

pip install dash
pip install requests
pip install pandas

Schritte

1. Holen Sie sich den Code aus dem ursprünglichen ISS-API-Tutorial
2. Erstellen Sie eine leere Plotly Dash-App
3. Fügen Sie dem Dashboard eine leere Karte hinzu
4. Fügen Sie die ISS-Daten in die Karte ein

Schritt 1: Holen Sie sich den Code aus dem Original-Tutorial

Der Code aus dem ursprünglichen Tutorial bestand nur aus 4 Zeilen:

# basic_iss.py

import requests

open_notify_api = "http://api.open-notify.org/iss-now.json"
iss_location = requests.get(open_notify_api)
print(iss_location.json())

Wenn Sie das Obige in einer eigenen Dateilatitude ausführen, erfahren Sie, longitudewo sich die ISS in dieser Sekunde befindet:

Wir stellen diese Anfrage einmal pro Sekunde im Code unten, damit wir eine konstante Live-Aktualisierung des Standorts von ISS erhalten.

Schritt 2: Erstellen Sie eine leere Plotly Dash-App

Wir beginnen mit einer leeren Plotly Dash-App, da Dash viele bewegliche Teile hat. Erstellen Sie eine neue Datei namens app.py, und fügen Sie den folgenden Code ein.

# app.py

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.H1('Hello World')
]) 

if __name__ == '__main__':
    app.run_server(debug=True)

Oben erstellen wir eine App mit app = Dash()und fügen dann einen einfachen h1HTML-Header in -Größe hinzu, der besagtHello World.

Wenn wir dies in einer neuen Datei namens ausführen app.py, startet unser Code eine lokale „Website“, die wir in unserem Browser besuchen können. Unten sagt uns die Ausgabe, dass unsere Dash-App unter läuft http://127.0.0.1:8050/.

Wenn wir in unserem Browser zu gehen http://127.0.0.1:8050/, sehen wir eine Seite mit einer großen Kopfzeile, auf der „Hello World“ steht.

Jetzt fügen wir etwas mehr Text und eine leere Karte hinzu, in die wir unsere ISS-Daten einfügen können.

Schritt 3: Fügen Sie dem Dashboard eine leere Karte hinzu

Dash bietet eine Reihe von Möglichkeiten, Diagramme, Karten und andere HTML-Komponenten zum Dashboard hinzuzufügen.

Wir fügen ein paar HTML-Elemente hinzu app.layout()(an der gleichen Stelle ‘Hello World’, an der wir unseren Header hinzugefügt haben) und fügen dann in Schritt 4 die ISS-Standortdaten ein.

Wir werden diese Änderungen vornehmen:

1. Ändern Sie den Kopfzeilentitel inISS Location Tracker
2. Fügen Sie einen Textbereich hinzu, um den Breiten- und Längengrad zu schreiben
3. Fügen Sie eine Karte hinzu, um die Lat/Long-Daten zu visualisieren

Ändern Sie die Kopfzeile

Umbenennen html.H1in ISS Location Trackeroder ähnlich.

# app.py

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.H1('ISS Location Tracker')
]) 

if __name__ == '__main__':
    app.run_server(debug=True)

Wir zeigen die Zahlen für Längen- und Breitengrad neben den Grafiken und der Karte an. ( Was ist ein „div“? )

# app.py

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text')
]) 

if __name__ == '__main__':
    app.run_server(debug=True)

Fügen Sie eine leere Karte hinzu

Dazu verwenden wir die Core Components-Klasse von Dash dccund die von Plotly express, die beide beim Erstellen von Karten und Diagrammen helfen.

Importieren Sie sie wie folgt:

from dash import dcc
import plotly.express as px

• dcc.GraphFügen Sie dem Layout ein Element hinzu
• Erstellen Sie eine leere Karte mit Plotly Express

# app.py
...

# This makes the actual map
fig = px.line_geo()
fig.update_geos(projection_type="natural earth")
fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})

# We added the map as a `Graph` at the end of the layout
app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text'),
    dcc.Graph(id='map', figure=fig)
])

Jetzt lesen wir, um unsere Daten mit unseren Diagrammen und der Erdkarte zu verbinden.

Schritt 4: Verbinden Sie die ISS-Daten mit der Dash-App

Wir müssen 3 Dinge tun:

1. Fügen Sie den Code hinzu, der Daten von der Open Notify-API erhält (aus dem vorherigen ISS-Tutorial).
2. Legen Sie ein Intervall fest, wie oft die Diagramme aktualisiert werden sollen (in Millisekunden).
3. Fügen Sie 2 neue Funktionen für Breiten-/Langtext und die Karte hinzu, die Dash mitteilen, wie die Daten in sie eingefügt werden sollen

Der ursprüngliche Code zum Abrufen des Standorts der ISS bestand nur aus 4 Zeilen:

import requests

open_notify_api = "http://api.open-notify.org/iss-now.json"
iss_location = requests.get(open_notify_api)
print(iss_location.json())

def get_iss_location():
    open_notify_api = "http://api.open-notify.org/iss-now.json"
    iss_location = requests.get(open_notify_api)

def get_iss_location():
    # Get ISS lat/long location and return as two decimals. Example: [-10.000, 34.000]
    open_notify_api = "http://api.open-notify.org/iss-now.json"
    iss_location = requests.get(open_notify_api)
    iss_json = iss_location.json()
    
    latitude = float(iss_json["iss_position"]["latitude"])
    longitude = float(iss_json["iss_position"]["longitude"])

    return [latitude, longitude]

Legen Sie ein Intervall fest, wie oft das Dashboard aktualisiert werden soll

Da die Open Notify API den Standort der ISS jede Sekunde aktualisiert, möchten wir, dass unser Dashboard dasselbe tut.

Wir müssen Dash mitteilen, wie oft es aktualisiert werden soll, indem wir dcc.Interval().

app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text'),
    dcc.Graph(id='map', figure=fig),
    dcc.Interval(
            id='interval-component',
            interval=1000, # in milliseconds
            n_intervals=0
        )
])

Fügen Sie 2 neue Funktionen hinzu, um den Lat/Long-Text und die Karte zu aktualisieren

Wir erstellen zwei Funktionen, eine zum Aktualisieren der Breiten-/Längengrad-Rohzahlen div und eine für die Erdkarte.

Die Funktionen starten wie folgt:

@app.callback()
def update_lat_long_text():
    ...

@app.callback()
def update_map():
    ...

Dass es sich um Callback-Funktionen handelt, geben wir mit an @app.callback(). Callback-Funktionen sind im Grunde Funktionen, die gestartet werden, wenn etwas anderes passiert – in diesem Fall, wenn 1 Sekunde vergeht (was wir gleich erläutern werden). Wir werden dieser Callback-Funktion auch einige Argumente geben, damit Dash die Daten richtig einfügen kann.

Lesen Sie mehr über grundlegende Callbacks in Plotly Dash und Funktions-Decorators .

Aktualisieren des Breitengrad-/Längengradtexts

Wir füllen aus:

@app.callback()
def update_lat_long_text():
    ...

Wir teilen @app.callback()Dash auch mit, in welches HTML-Element die neuen Daten eingefügt werden sollen und wann sie update_lat_long_text()ausgelöst werden sollen.

Verwenden Sie get_iss_location()es so und geben Sie es dann als formatiertes HTML-Element zurück.

@app.callback(...)
def update_lat_long_text():
    # Get ISS location data
    iss_location = get_iss_location()
    latitude = iss_location[0]
    longitude = iss_location[1]

    # Put the ISS location data into two HTML "spans" (the <span> element)
    return [
        html.Span('Latitude: {}'.format(latitude)),
        html.Span('Longitude: {}'.format(longitude))
    ]

from dash.dependencies import Input, Output
...

@app.callback(Output('lat-long-text', 'children'),
              Input('interval-component', 'n_intervals'))
   def update_lat_long_text():
        ...

• Inputteilt Dash mit, wann es laufen soll update_lat_long_text(). dcc.Interval()In diesem Fall wird die Funktion mit der ID verwendet ‘interval-component’, die jede Sekunde ausgeführt wird. Dafür update_lat_long_text()läuft auch jede Sekunde.
• Outputteilt Dash mit, welches HTML-Element aktualisiert werden soll. In diesem Fall ist es das div, mit html.Div(id=’lat-long-text’)dem wir die Breite/Länge als Zahlen anzeigen möchten.

Wenn wir den Code bis zu diesem Punkt ausführen, werden Latitude und Longitude jetzt in der Web-App angezeigt.

Der Code mit Aktualisierung des Breiten-/Längengradtextes:

# app.py

import requests

from dash import Dash, html, dcc
import plotly.express as px
from dash.dependencies import Input, Output

app = Dash(__name__)

def get_iss_location():
    # Get ISS lat/long location and return as two decimals. Example: [-10.000, 34.000]
    open_notify_api = "http://api.open-notify.org/iss-now.json"
    iss_location = requests.get(open_notify_api)
    iss_json = iss_location.json()

    latitude = float(iss_json["iss_position"]["latitude"])
    longitude = float(iss_json["iss_position"]["longitude"])

    return [latitude, longitude]

fig = px.line_geo()
fig.update_geos(projection_type="natural earth")
fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})

app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text'),
    dcc.Graph(id='map', figure=fig),
    dcc.Interval(
            id='interval-component',
            interval=1000, # in milliseconds
            n_intervals=0
        )
])

@app.callback(Output('lat-long-text', 'children'),
              Input('interval-component', 'n_intervals'))
def update_lat_long_text(interval):
    iss_location = get_iss_location()
    latitude = iss_location[0]
    longitude = iss_location[1]

    style = {'padding': '10px', 'fontSize': '22px'}
    return [
        html.Span('Latitude: {}'.format(latitude), style=style),
        html.Span('Longitude: {}'.format(longitude), style=style)
    ]


if __name__ == '__main__':
    app.run_server(debug=True)

Aktualisieren der Karte

Lassen Sie uns unsere Funktion ausfüllen update_map(). Diese Funktion wird:

1. Holen Sie sich ISS-Standortdaten
2. Speichern Sie es in einer Liste
3. Zeichnen Sie eine Linie des Weges der ISS über unsere Karte

lat_long = {
    'latitude': [],
    'longitude': []
}
...

@app.callback(Output('map', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_map(interval):
    iss_location = get_iss_location()
    latitude = float(iss_location["iss_position"]["latitude"])
    longitude = float(iss_location["iss_position"]["longitude"])

    lat_long['latitude'].append(latitude)
    lat_long['longitude'].append(longitude)
    
    fig = px.line_geo(lat=lat_long['latitude'], lon=lat_long['longitude'])
    fig.update_geos(projection_type="natural earth")
    fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})
    fig.update_traces(line=dict(color="Red", width=4))

    return fig

Wenn Sie app.pyden gesamten Code unten ausführen, sehen Sie eine rote Linie, die den Standort der ISS einmal pro Sekunde verfolgt:

Wir haben das obige Ergebnis erhalten, indem wir das Dashboard eine Stunde lang laufen ließen. Die ISS bewegt sich mit 17.100 Meilen pro Stunde, so dass es etwa 90 Minuten dauert, bis sie die Erde vollständig umrundet hat.

Das vollständige Skript

# Track the ISS's location in real time with Plotly Dash

import requests

from dash import Dash, html, dcc
import plotly.express as px
from dash.dependencies import Input, Output

app = Dash(__name__)

def get_iss_location():
    # Get ISS lat/long location and return as two decimals. Example: [-10.000, 34.000]
    open_notify_api = "http://api.open-notify.org/iss-now.json"
    iss_location = requests.get(open_notify_api)
    iss_json = iss_location.json()

    latitude = float(iss_json["iss_position"]["latitude"])
    longitude = float(iss_json["iss_position"]["longitude"])

    return [latitude, longitude]

lat_long = {
    'latitude': [],
    'longitude': []
}

fig = px.line_geo()
fig.update_geos(projection_type="natural earth")
fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})

app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text'),
    dcc.Graph(id='map', figure=fig),
    dcc.Interval(
            id='interval-component',
            interval=1000, # in milliseconds
            n_intervals=0
        )
])

@app.callback(Output('lat-long-text', 'children'),
              Input('interval-component', 'n_intervals'))
def update_lat_long_text(interval):
    iss_location = get_iss_location()
    latitude = iss_location[0]
    longitude = iss_location[1]

    style = {'padding': '10px', 'fontSize': '22px'}
    return [
        html.Span('Latitude: {}'.format(latitude), style=style),
        html.Span('Longitude: {}'.format(longitude), style=style)
    ]

@app.callback(Output('map', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_map(interval):
    iss_location = get_iss_location()

    lat_long['latitude'].append(iss_location[0])
    lat_long['longitude'].append(iss_location[1])
    
    fig = px.line_geo(lat=lat_long['latitude'], lon=lat_long['longitude'])
    fig.update_geos(projection_type="natural earth")
    fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})
    fig.update_traces(line=dict(color="Red", width=4))

    return fig


if __name__ == '__main__':
    app.run_server(debug=True)

• Teilen von Daten zwischen Plotly Dash-Callbacks
• Auswahl verschiedener Arten von Kartenprojektionen in Plotly Dash

Wenn Sie Fragen oder Feedback haben, senden Sie uns eine E-Mail an [email protected] oder senden Sie uns eine Nachricht auf Instagram (@protobioengineering) .

Wenn Ihnen dieser Artikel gefallen hat, können Sie uns mit einer Kaffeespende unterstützen .

In Verbindung stehende Artikel

• Was zum Teufel ist eine API?
• 5 Möglichkeiten, kostenlose Daten im Internet für die Wissenschaft zu nutzen
• So erstellen Sie farbige Länderkarten mit GeoPandas und Python