Wetter-Widget ohne Location-Abfrage

[dreamer84]

Hallo Leute,

ich wollte fragen ob mir jemand bei einem Wetter Widget helfen kann.
Ich habe ein kleines Wetter Widget, welches nur das aktuelle Wetter als Symbol und die aktuelle Temperatur anzeigt.
Ich habe die anderen Dateien (html und css) bereits nach meinen Vorstellungen angepasst, komme aber bei der Java-Datei nicht weiter.

Hier das Problem:
In der Java-Datei gibt es eine Location-Abfrage. Ich habe aber einen festen Ort dessen Wetterdaten ohne Abfrage angezeigt werden sollen.
Ich habe schon versucht die Locations-Abfrage irgendwiezu löschen, dann funktioniert aber das ganze Widget nicht mehr.
Ohne Fehler-Anzeige kann man da nur raten und bisher habe ich immer falsch geraten 😄

Wäre super wenn mir da jemand helfen könnte.

Vielen Dank
Gruß
Thomas

[/B]
// SELECT ELEMENTS
const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value p");


// App data
const weather = {};

weather.temperature = {
    unit : "celsius"
}


// CHECK IF BROWSER SUPPORTS GEOLOCATION
if('geolocation' in navigator){
    navigator.geolocation.getCurrentPosition(setPosition);
}

// SET USER'S POSITION
function setPosition(position){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    
    getWeather(latitude, longitude);
}


// GET WEATHER FROM API PROVIDER
function getWeather(latitude, longitude){
    
    fetch(`http://api.openweathermap.org/data/2.5/weather?id=2849689&appid=f95568a3418845225fd171bf2327c246`)
        .then(function(response){
            let data = response.json();
            return data;
        })
        .then(function(data){
            weather.temperature.value = Math.floor(data.main.temp - 273);
            weather.iconId = data.weather[0].icon;

        })
        .then(function(){
            displayWeather();
        });
}

// DISPLAY WEATHER TO UI
function displayWeather(){
    iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
    tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;

}
[B]

 

[mihe7]

Ich habe die anderen Dateien (html und css) bereits nach meinen Vorstellungen angepasst, komme aber bei der Java-Datei nicht weiter.

Das verstehe ich, ist schließlich kein Java sondern JavaScript (die Sprachen haben außer dem "Java" im Namen nichts miteinander zu tun)

Ohne Fehler-Anzeige kann man da nur raten und bisher habe ich immer falsch geraten 😄

Jeder handelsübliche Browser hat Entwicklertools mit einer Konsole.

Ich habe schon versucht die Locations-Abfrage irgendwiezu löschen, dann funktioniert aber das ganze Widget nicht mehr.

Kann sein, denn dort wird setPosition verwendet.

Probier mal:

// SELECT ELEMENTS
const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value p");


// App data
const weather = {};

weather.temperature = {
    unit : "celsius"
}

// GET WEATHER FROM API PROVIDER
function getWeather(){ // Geo-Koordinaten entfernt, da nicht verwendet
   
    fetch(`http://api.openweathermap.org/data/2.5/weather?id=2849689&appid=f95568a3418845225fd171bf2327c246`)
        .then(function(response){
            let data = response.json();
            return data;
        })
        .then(function(data){
            weather.temperature.value = Math.floor(data.main.temp - 273);
            weather.iconId = data.weather[0].icon;

        })
        .then(function(){
            displayWeather();
        });
}

// DISPLAY WEATHER TO UI
function displayWeather(){
    iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
    tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;

}

// hier einfach mal direkt aufrufen
getWeather();

 

[dreamer84]

mihe7

Danke für deine super schnelle Antwort um diese Uhrzeit
Dein Code funktioniert sofort auf Anhieb. MEGA!!! Ich danke dir wie verrückt.
So viele Stunden, die ich damit schon verbracht habe...
Ich bin sehr dankbar für deine Hilfe 😃

Ich werde jetzt mal versuchen zu lernen was du gemacht hast...

Vielen vielen Dank
Liebe Grüße
Thomas

PS: Das Wetter-Widget wird in einige meiner Livestreams eingeblendet. Wenn du's mal sehen willst kannst du gern hier mal rein schauen.
Ich lade das Widget mit deinem Code dann gleich hoch:

 

[mihe7]

Um Gottes Willen, so kann man auch mit kleinen Sachen, seinen Mitmenschen eine Freude machen

Ich werde jetzt mal versuchen zu lernen was du gemacht hast...

Das ist recht einfach.

Die function-Blöcke definieren lediglich eine Funktion. Der Code in diesen Blöcken wird aber erst ausgeführt, wenn die Funktion aufgerufen wird.

Ausgeführt wird dagegen sofort:

if('geolocation' in navigator){
    navigator.geolocation.getCurrentPosition(setPosition);
}

Die zweite Zeile sorgt dafür, dass die Funktion setPosition mit der ermittelten Position aufgerufen wird, sobald diese dem Browser zur Verfügung steht.

Was macht nun setPosition?

function setPosition(position){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    
    getWeather(latitude, longitude);
}

Naja, zuerst werden Breiten- und Längengrad aus der angegebenen Position extrahiert und dann wird getWeather mit diesen Koordinaten aufgerufen.

Sieht man sich getWeather an, wird zuerst ein Request an openweathermap abgesetzt, dessen Antwort dann als JSON (JavaScript Object Notation) geparst wird. Aus diesem Objekt werden im nächsten Schritt Temperatur und der eindeutige Name eines Icon extrahiert und im globalen weather-Objekt gespeichert. Abschließend wird die Funktion displayWeather aufgerufen, die einfach zwei HTML-Elemente anhand der Werte von weather anpasst (sauberer wäre es in diesem Zusammenhang, auf das globale Weather-Objekt zu verzichten und die Werte z. B. einfach in Form eines Objekts an die displayWeather-Funktion zu übergeben).

Man könnte also getWeather direkt aufrufen, um den Spaß angezeigt zu bekommen. Erkennbar ist, dass latitude und longitude nirgends verwendet werden. Also kann man sich die beiden Parameter in getWeather sparen und einfach getWeather(); aufrufen, was am Ende des Skripts auch passiert.

Damit ist aber

if('geolocation' in navigator){
    navigator.geolocation.getCurrentPosition(setPosition);
}

function setPosition(position){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    
    getWeather(latitude, longitude);
}

überflüssig geworden und kann entfernt werden.

 

[dreamer84]

Okay... also lokal funktioniert das Widget:

Wenn ich das Ganze dann aber auf den Server hochlade, gehts auf einmal wieder nicht mehr:


Ich weiß, es hat jetzt wohl nicht mehr mit Java zutun aber vielleicht fällt einem der Fehler auf.
Ich habe in der *.html die Adresse für die Java-Datei usw. schon so angepasst, dass er sie auf dem Server finden müsste.
Hab ich noch einen Fehler irgendwo?

gelöscht

 

[mihe7]

Drück mal Strg+Shift+I, dann sollten sich die Entwickler-Tools öffnen. In der Konsole steht

"Laden von gemischten aktiven Inhalten "http://api.openweathermap.org/data/2.5/weather?id=2849689&appid=f95568a3418845225fd171bf2327c246" wurde blockiert."

Heißt: Deine Seite verwendet Verschlüsselung, im Hintergrund wird aber versucht, auf unverschlüsselte Inhalte zuzugreifen -> mag der Browser nicht.

Ersetze http im fetch durch https.

 

[mihe7]

Und entferne Deine persönlichen Daten aus Deinem Beitrag (inkl. der Screenshots).

 

[dreamer84]

Du bist einfach ein Genie 😃 Und wieder funktioniert es einfach direkt auf Anhieb.
Damit hab ich es jetzt auch im Stream 😃😃😃

Also nochmals vielen vielen Dank 🤝

 

[dreamer84]

@mihe7

Ich möchte mich gern etwas erkenntlich zeigen. Kannst du mir eine Mail schreiben?
NatureTec84@gmail.com

 

[mihe7]

Wenn ich mir Deinen Stream ansehe, kann ich bedenkenlos behaupten, Du hättest 'nen Vogel Es war jetzt kein Akt, die paar Zeilen rauszulöschen, außerdem ist es Sinn und Zweck des Forums, dass man sich gegenseitig hilft. Evtl. bleibst Du ja sogar am Ball. Dann kannst Du später anderen helfen oder hilfst in anderen Bereichen/Foren aus.

Bist Du Landwirt oder wohnst Du nur neben dem Maisfeld?

 

[dreamer84]

Ich weiß es sehr zu schätzen, wenn andere mir bei komplizierte Dingen helfen für die ich normalerweise noch viele weiter Stunden oder gar Tage gebraucht hätte. Deshalb wäre ich gern bereit einen "Kaffee" zu spendiern - würde ich dir im Real-Life auch anbieten Das ist wohl das Mindeste.
Ja, ich werde versuchen mich noch weiter ins Thema einzuarbeiten...

Nein, ich bin kein Landwird aber ich lebe auf einem ehemaligen Bauernhof umgeben von Feldern