Openweathermap in HTML einbinden

toni22 · December 30, 2015 at 3:26 PM

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

Bot · Vor 5 Minuten

Openweathermap in HTML einbinden? Schau mal ob du hier fündig wirst!

Tronn · December 30, 2015 at 6:52 PM

Hallo Toni,

versuch's mal hiermit:

HTML

<html>
<head>
<title></title>
<script>

function getJSON(yourUrl) {
  var Httpreq = new XMLHttpRequest(); // a new request
  Httpreq.open("GET",yourUrl,false);
  Httpreq.send(null);
  return Httpreq.responseText;          
}

</script>
</head>

<body>    


<script>


var city = "Berlin"
var source = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&appid=";
var appId = "2de143494c0b295cca9337e1e96b00e0"
var address = source + appId;

var json = JSON.parse(getJSON(address));


document.write("Das Wetter in " + city + ": " + json.weather[0].description);      
document.write("Windgeschwindigkeit: " + json.wind.speed);
document.write("Sonnenaufgang: " + json.sys.sunrise);
document.write("Sonnenuntergang: " + json.sys.sunset);


console.log(json)


</script>


</body>
</html>

Display More

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.

toni22 · January 5, 2016 at 12:58 PM

Hallo zusammen,

vielen Dank für deine Hilfe Tronn.

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

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

Gruß Toni

Bot · Vor einem Moment

Tronn · January 5, 2016 at 1:05 PM

Heya!

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

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

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

HTML

<html>
<head>
  <title>
    oeioei
  </title>   
  
  <link href="css/owfont-regular.css" rel="stylesheet" type="text/css">
  
</head>


<body>


<div>
  hier ist noch etwas text
</div>


<span class="owf owf-200"></span>


</body>
</html>

Display More

toni22 · January 5, 2016 at 1:57 PM

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

Tronn · January 5, 2016 at 2:14 PM

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

Bot · Vor einem Moment

toni22 · January 5, 2016 at 2:55 PM

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

Tronn · January 5, 2016 at 3:07 PM

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.

toni22 · January 5, 2016 at 3:25 PM

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.

Bot · Vor einem Moment

Tronn · January 5, 2016 at 4:39 PM

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

toni22 · January 5, 2016 at 4:59 PM

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

Vielen Dank für deine Hilfe Tronn.

Participate now!