Openweathermap in HTML einbinden

  • Hallo zusammen,


    ich bin gerade dabei mir einen "Magic Mirror" mithilfe eines Rasperry Pi zu bauen (siehe https://www.raspberrypi.org/blog/magic-mirror/ ).


    Die aktuelle Uhrzeit und einen Kalender habe ich bisher schon in mein HTML Document eingebunden.


    Da ich noch sehr wenig Erfahrungen mit der HTML Programmierung habe, habe ich Probleme beim einbinden der Openweathermap API in das HTML Document.


    Vorerst wäre es schon mal ein Erfolg die aktuelle Temperatur einer beliebigen Stadt abzufragen.


    Habe schon im Internet nach Anleitungen gesucht, bisher aber noch nicht passendes gefunden.


    http://www.openweathermap.org/current


    Kann mir jemand grundlegende Tipps zum einbinden dieser API geben, gerne auch mit Beispielcode.


    Mit freundlichen Grüßen
    Toni22

  • Hallo Toni,


    versuch's mal hiermit:



    Ist nicht der schönste Code, aber es zeigt dir die Richtung. Du verwendest in meinem Beispiel JavaScript, um das JSON-Objekt von der Webseite abzuholen. Am besten schaust du in Chrome mit F12 mal in die Console und öffnest das JSON Object ("aufklappen"). Dann siehst du dort alle Eigenschaften, die du von der Webseite abgeholt hast :)


    Du brauchst da übrigens eine kostenfreie ID von der Webseite, die du beim Registrieren bekommen wirst, damit du dir die Daten holen kannst/darfst. Zumindest hab ich das beim Überfliegen der Seite rausgelesen.

  • Hallo zusammen,


    vielen Dank für deine Hilfe Tronn. :danke_ATDE:


    Hab es mittlerweile hinbekommen das Wetter korrekt auszulesen auch mit einer Vorhersage.


    Jetzt würde ich noch gerne Icons verwenden welche mir das Wetter graphisch darstellen.
    Da mir die Icons bei Openweathermap nicht sonderlich gefallen habe ich eine Alternative gefunden ( siehe Link).
    http://websygen.github.io/owfont/#


    Habe es aber bisher leider noch nicht geschafft mir die Icons anzeigen zu lassen.


    Ich habe die Heruntergeladenen Dateien in den gleichen Ordner in der die HTML Datei liegt geladen und im HTML Dokument den Link zum css file wie in der Beschreibung angegeben.
    <link href="css/owfont-regular.css" rel="stylesheet" type="text/css">


    Anschließend wurde ein Icon mit <i class="owf owf-200"></i> aufgerufen.
    Leider erscheint aber kein Icon.
    Muss ich zusätzlich noch etwas machen? Wie gesagt bin noch Anfänger bei HTML :D


    Über Tipps oder Beispielcode würde ich mich freuen.


    Gruß Toni

    Edited once, last by toni22 ().

  • Heya!


    Zeig doch mal schnell deinen HTML-Code, am besten in Code-Tags vom Forum eingebettet, also ...


    <code>
    <html>
    ...
    </html>
    </code>


    Aber mit [ & ] um den Code-Tag statt < & >


    [edit]
    Oh, jetzt war ich schneller. Das ist ja doch recht einfach :-)


    Edited once, last by Tronn ().

  • Hi,


    danke für die schnelle Antwort.



    Habs gerade nochmal mit deinem Quellcode ausprobiert, es wird aber immer noch kein Icon angezeigt.
    Es wird nur "hier ist noch etwas text" angezeigt.


    Die heruntergeladenen Dateien können schon in den Ordern css, demo und fonts bleiben oder?
    Und diese Ordner habe ich ins Verzeichnis /var/www kopiert zur index.html datei.


    Gruß Toni

  • Hm, du kannst das auch kurzerhand auf deinem normalen (Windows-)PC ausprobieren. Auf dem Desktop einen Ordner "Test" erstellen (C:\users\toni22\test\), dort eine test.html erstellen und in den Ordner die Datei bower.json und Ordner css, demo, fonts reinkopieren.


    Beispiel-Code in die test.html kopieren, speichern, html-Datei rüberziehen in den Browser und schon sollte sie geöffnet werden.


    Ich hab meinen Ordner mal gezippt und angehängt zum Ausprobieren für dich und als Beispiel.


    Aller Anfang mit einer neuen Sprache (wobei HTML keine Programmiersprache ist, sondern nur eine Design-Sprache ("Auszeichnungssprache"), ähnlich wie Word) - nicht verzagen ;)

  • Habs jetzt hinbekommen, wenn ich die HTML Datei in den Browser ziehe, werden die Icons eingeblendet. Wenn ich allerdings wie bisher immer die IP Adresse im Browser eingebe werden die Icons nicht angezeigt, der Rest aber schon. :s


    Danke für deine Hilfe :danke_ATDE:

  • Dann ist da vielleicht eine Diskrepanz zwischen IP und lokalem Pfad. Das ist jetzt etwas schwieriger herauszufinden.


    Ich würde empfehlen, mal mit Chrome die "defekte" Seite zu öffnen, F12 drücken, aktualisieren (F5) und schauen, ob unter "Console" ein Fehler auftaucht. Da steht vielleicht drin, dass eine Datei nicht gefunden werden konnte.

  • Ja da steht drin, dass er die owfont-regular.css nicht laden kann:


    Failed to load resource: the server responded with a status of 403 (Forbidden)


    Und wenn ich bei Chrome bei Sources nach der Datei owfont-regular.css schaue ist die Datei leer.
    Wenn ich Sie aber mit dem Editor öffne ist der Inhalt schon da.

  • Dann stimmt wohl was mit den Berechtigungen auf den Ordner nicht. Da bin ich auch etwas überfragt.


    Ich würde dir raten, kurzerhand einen neuen Thread aufzumachen, um diese Frage zu klären, und dann hier her zurückzukommen, wenn du es gelöst hast :-)

  • Hab bei den Dateieigenschaften die Zugriffsrechte geändert und nun funktioniert alles so wie ich es will :D


    Vielen Dank für deine Hilfe Tronn.

    Edited once, last by toni22 ().