Test Adapter open-meteo-weather v2.3.x GitHub/Latest

Homoran

@H5N1 alles gut!

wie ist denn die kleinstmögliche Widgetgröße ohne an den Schriftgrößen zu fummeln?

ich hab jetzt 700x600

noch ein Designvorschlag: Die Temperaturen zentrieren.

Ist aber Geschmackssache

H5N1

@Homoran sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

wie ist denn die kleinstmögliche Widgetgröße ohne an den Schriftgrößen zu fummeln?

Da kannst du nur das Widget quetschen bis es das Design zerreist , ohne viel neu Schreiberei ist nicht viel möglich, du könntest
noch in den style Informationen im .w-header Container mit dem padding: und margin-bottom: rumspielen.

@Homoran sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

noch ein Designvorschlag: Die Temperaturen zentrieren

Das ist schnell erledigt:

suche im Script nach:

            <div>
                <div class="w-temp-big">${getVal(dpBase + '.current.temperature_2m', "°")}</div>
                <div style="font-weight: bold; margin-bottom: 10px;">
                    <span style="color:#f87171"> ${getVal(forecast + '.day0.temperature_2m_max', "°")}</span> | 
                    <span style="color:#60a5fa"> ${getVal(forecast + '.day0.temperature_2m_min', "°")}</span>
                </div>

Und füge hinzu:

            <div>
                <div style="text-align: center;">   // neu hinzufügen
                <div class="w-temp-big">${getVal(dpBase + '.current.temperature_2m', "°")}</div>
                <div style="font-weight: bold; margin-bottom: 10px;">
                    <span style="color:#f87171"> ${getVal(forecast + '.day0.temperature_2m_max', "°")}</span> | 
                    <span style="color:#60a5fa"> ${getVal(forecast + '.day0.temperature_2m_min', "°")}</span>
                  </div> // neu hinzufügen
                </div>

Thisoft

@H5N1 sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

Neue Version 2.2.5 verfügbar.

Vielen Dank! Die neue Version ist installiert und läuft soweit auch unauffällig. Interessant ist der neue DP "global_tilted_irradiance" - das muss ich gleich mal testen ob der als PV-Prognose zu gebrauchen ist :-)

Was mein Problem mit der verzögerten Aktualisierung betrifft weiß ich im Moment nicht so ganz was ich davon halten soll... im Wesentlichen funktioniert es ja, aber paar kleine Hänger hatte ich schon mal wieder. Schon möglich dass das damit zusammen hing dass der Abruf der Daten einen Response Error gebracht hatte und deshalb die Aktualisierung nicht durchgelaufen ist. Deshalb immer noch meine Idee die Aktualisierung der Stundenwerte vom Abruf der Daten abzukoppeln und immer zur vollen Stunde laufen zu lassen. Den Abruf der Wetterdaten jetzt deshalb aller 15 Minuten zu machen erzeugt ja eigentlich völlig unnötigen Traffic auf dem Server - so schnell ändert sich das Wetter ja wohl doch nicht ;-). Vielleicht irgend wann in der fünftübernächsten Version einmal ;-)

Homoran

@H5N1 sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

Das ist schnell erledigt:

ja!
wenn man weiss wie 😉

den Box shadow hab ich dann auch gleich entfernt.

@Thisoft sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

das muss ich gleich mal testen ob der als PV-Prognose zu gebrauchen ist :-)

das würde mich auch interessieren!
nur was um alles in der Welt bedeutet dabei

@Thisoft sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

global_tilted_irradiance

Ggf. muss man dann noch mit der trigonometrischen Formel für Dachneigung und Ausrichtung arbeiten um die Strahlungsenergie auf den Solarpanels zu erhalten.

H5N1

@Thisoft sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

das muss ich gleich mal testen ob der als PV-Prognose zu gebrauchen ist :-)

Dieser Datenpunkt ist nur als Richtwert gedacht und ersetzt keine richtige PV-Prognose, ist als nice to have anzusehen.
@homoran hat Recht, um richtige Prognosen zu erhalten wären Dachneigung, Ausrichtung und Leistung wichtig, was dann berechnet wird.
Ich habe auch nicht vor so etwas wie Prognosen für PV in den Adapter einzubauen, dafür gibt es schon gute Adapter.

oFbEQnpoLKKl6mbY5e13

@Thisoft sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

ich habe mir übrigens das Widget mal kräftig "eingedampft" und auf meine Wünsche angepasst ;-)

Kannst du bitte den Code zur Verfügung stellen?

(Am besten als Spoiler)

wendy2702

Sollte es den Adapter wie im Titel erwähnt schon im latest geben?

Homoran

@H5N1 sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

dafür gibt es schon gute Adapter.

ja?

tolle Treffequote 😀

Homoran

und noch einen Wunsch:

was muss ich im Script ändern, damit das

javascript.1
2026-02-08 12:00:00.051	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:55:00.044	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:50:00.035	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:46:30.648	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:46:30.281	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:45:00.036	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:40:00.038	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:35:00.034	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:31:29.800	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:31:29.420	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:30:00.065	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:25:00.035	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:20:00.054	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:16:30.041	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:16:29.406	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:15:00.038	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:10:00.053	info	script.js.wetter: Weather widget: HTML successfully generated.

javascript.1
2026-02-08 11:05:00.054	info	script.js.wetter: Weather widget: HTML successfully

auf level debug kommt

ich hab jetzt erstmal die Zeile 226 (bei mir) mit console.log... komplett auskommentiert

Nashra

Moin, klasse Adapter und mit dem Skript schöne View, danke dafür.
Eine Kleinigkeit, das Icon der Windrichtung stimmt nicht so ganz.
Wind aus Süd-West, angezeigt wird Nord-Ost. Egal welche Richtung,
es wird immer entgegengesetzt angezeigt ;-)

Homoran

@michihorn und was steht vor den js-Adapter Ausgaben?
ggf. vom Host?

Homoran

@Nashra sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

Eine Kleinigkeit, das Icon der Windrichtung stimmt nicht so ganz.
Wind aus Süd-West, angezeigt wird Nord-Ost

der Pfeil zeigt die Windrichtung! nicht die Richtung aus der er kommt.

Nashra

@Homoran sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

@Nashra sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

Eine Kleinigkeit, das Icon der Windrichtung stimmt nicht so ganz.
Wind aus Süd-West, angezeigt wird Nord-Ost

der Pfeil zeigt die Windrichtung! nicht die Richtung aus der er kommt.

Das hatte ich mir schon fast gedacht. Meine Wetterstation zeigt es anders an.
Aber auch nicht so wichtig, hauptsache die Wetterdaten stimmen.

Homoran

@H5N1 kann ich irgendwo und irgendwie im Script auch die Icons austauschen?

mein Uralt-Wandtablet mag das Regenwölkchen nicht

EDIT:

U+26C6 ⛆ Klappt auch nicht

EDIT2:
☔ klappt!

H5N1

@Homoran sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

was muss ich im Script ändern, damit das
javascript.1
2026-02-08 12:00:00.051 info script.js.wetter: Weather widget: HTML successfully generated.
.....
.....
auf level debug kommt

du ersetzt einfach:

console.log("Weather widget: HTML successfully generated.");

#mit
log("Weather widget: HTML successfully generated.","debug");

und dann ist Ruhe.

@wendy2702 sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

Sollte es den Adapter wie im Titel erwähnt schon im latest geben?

Dazu habe ich noch nichts veranlasst, wenn du das ioBroker Latest meinst. Sollte nur als Latest bei NPM und GitHub zu finden sein.
Ich muss mich damit noch beschäftigen wie die Aufnahme funktioniert um später ins offizielle Repository zu kommen.

Homoran

@H5N1 sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

Ich muss mich damit noch beschäftigen wie die Aufnahme funktioniert um später ins offizielle Repository zu kommen.

@mcm1957 wird dir das gerne erzählen 😀

mcm1957

https://github.com/ioBroker/ioBroker.repositories#add-a-new-adapter-to-the-latest-repository-web-frontend
https://github.com/ioBroker/ioBroker.repositories#requirements-for-adapter-to-get-added-to-the-latest-repository

Thisoft

@oFbEQnpoLKKl6mbY5e13 sagte in Test Adapter open-meteo-weather v2.2.x GitHub/Lates:

Kannst du bitte den Code zur Verfügung stellen?

Bitteschön :-). Da sind jetzt aber schon "einige" Änderungen und persönliche Anpassungen drin... bei Unklarheiten einfach nochmal nachfragen

// version: 0.0.3

//////////////////////////////////////////////////
const locationName = 'xxxxxxx'; // <--- Your Location Name from Open-Meteo Adapter
//////////////////////////////////////////////////

const version = '0.0.3';
const dpBase = 'open-meteo-weather.0.' + locationName + '.weather';
const forecast = dpBase + '.forecast';
const targetDP = '0_userdata.0.Wetter_Widget_HTML';
const modsurface =    8.6;   //Paneloberfläche in m2 (Solar panel's surface in sq. meters)

// Sprach-Check für ioBroker
let sysLang = 'de';
try {
    const systemConfig = getObject("system.config");
    sysLang = systemConfig.common.language || 'de';
} catch (e) { sysLang = 'de'; }

// Übersetzungstabelle
const i18n = {
    de: { current: "Aktuell" }, 
    en: { current: "Current" }, 
    uk: { current: "Зараз" },
    ru: { current: "Сейчас" },
    nl: { current: "Nu" }, 
    fr: { current: "Actuel" }, 
    it: { current: "Attuale" },
    es: { current: "Actual" }, 
    pl: { current: "Aktualnie" }, 
    pt: { current: "Atual" },
    zh: { current: "当前" }
};
const lang = i18n[sysLang] || i18n['en'];


// Prüfen, ob der Datenpunkt existiert, ansonsten erstellen
if (!existsState(targetDP)) {
    createState(targetDP, '', {
        name: 'Weather Widget for VIS2',
        type: 'string',
        role: 'html'
    }, function () {
        console.log("Data point " + targetDP + " has been newly created.");
    });
}

function updateWeatherWidget() {
    // Hilfsfunktion: Daten sicher lesen
    function getVal(id, unit = "") {
        let state = getState(id);
        if (!state || state.val === null || state.val === undefined) return "--" + unit;
        return state.val + unit;
    }

    function getUV(id) {
        let state = getState(id);
        if (!state || state.val === null || state.val === undefined || state.val == 0) return 0;
        return Math.round(state.val/11*100)/100;
    }

        function getPV(hPath) {
        let state = getState(hPath + '.global_tilted_irradiance');
        if (!state || state.val === null || state.val === undefined || state.val == 0) return "0 W";
        return Math.round(state.val*modsurface) + " W";
    }

    // Hilfsfunktion: Bilder
    function getImg(urlId, size = "20px", className = "") {
        let url = getVal(urlId, "");
        if (url === "" || url === "--") return ""; 
        return `<img src="${url}" style="width:${size}; height:${size}; object-fit:contain;" class="${className}">`;
    }

    // CSS Styling
    let html = `
    <style>
        .w-container {
            font-family: 'Segoe UI', sans-serif;
            background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
            color: #f1f5f9;
            padding: 1px;
            border-radius: 24px;
            border: 1px solid #334155;
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        .w-header {
            display: grid;
            grid-template-columns: 1.2fr 1.5fr 1fr;
            gap: 5px;
            background: rgba(255,255,255,0.05);
            padding: 20px;
            border-radius: 20px;
            margin-bottom: 5px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .w-temp-big { font-size: 3.8rem; font-weight: 900; color: #fbbf24; line-height: 1; }
        .w-desc { font-size: 1.1rem; color: #38bdf8; font-weight: 600; }
        .w-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.85rem; margin-top: 10px; }
        .w-info-item { background: rgba(0,0,0,0.2); padding: 6px 10px; border-radius: 10px; display: flex; align-items: center; gap: 5px; }
        .w-sun-moon { font-size: 0.8rem; line-height: 1.6; border-left: 1px solid rgba(255,255,255,0.1); padding-left: 15px; }

        .w-hourly {
            display: grid;
            grid-template-columns: repeat(12, 0.45fr);
            gap: 0px;
            margin-bottom: 2px;
            background: rgba(0,0,0,0.15);
            padding: 0px;
            border-radius: 5px;
        }
        .w-h-item { text-align: center; font-size: 0.75rem; }
        .w-h-time { font-weight: bold; color: #38bdf8; }
        .w-h-cloud { font-size: 0.65rem; color: #94a3b8; }
        .w-h-temp { font-weight: bold; color: #fbbf24; display: block; }
        .w-h-rain { font-size: 0.65rem; color: #94a3b8; }

        .w-forecast {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 5px;
        }
        .w-fc-day {
            background: rgba(255,255,255,0.03);
            padding: 12px 8px;
            border-radius: 18px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.05);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .w-fc-name { font-weight: bold; color: #38bdf8; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 2px; }
        .w-fc-text { font-size: 0.65rem; color: #94a3b8; height: 2.2em; overflow: hidden; display: flex; align-items: center; justify-content: center; line-height: 1.1; margin-bottom: 0px; }
        .w-fc-temp-max { color: #f87171; font-weight: bold; font-size: 1rem; display: block; }
        .w-fc-temp-min { color: #60a5fa; font-size: 0.85rem; display: block; margin-bottom: 2px; }
        .w-fc-details { font-size: 0.65rem; color: #94a3b8; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 2px; padding-top: 2px; }
    </style>

    <div class="w-container">
        <!--<div class="w-header">
            <div style="text-align: center;">
                <div style="font-size: 1.3rem; font-weight: bold;">${lang.current} / ${getVal(forecast + '.day0.name_day')}</div>
                ${getImg(dpBase + '.current.icon_url', "80px")}
                <div class="w-desc">${getVal(dpBase + '.current.weather_text')}</div>
            </div>
            <div>
                <div class="w-temp-big">${getVal(dpBase + '.current.temperature_2m', "°")}</div>
                <div style="font-weight: bold; margin-bottom: 10px;">
                    <span style="color:#f87171"> ${getVal(forecast + '.day0.temperature_2m_max', "°")}</span> | 
                    <span style="color:#60a5fa"> ${getVal(forecast + '.day0.temperature_2m_min', "°")}</span>
                </div>
                <div class="w-info-grid">
                    <div class="w-info-item">💧 ${getVal(dpBase + '.current.relative_humidity_2m', "%")}</div>
                    <div class="w-info-item">🌧️ ${getVal(forecast + '.day0.rain_sum', "mm")}</div>
                    <div class="w-info-item">☀️ UV ${getVal(forecast + '.day0.uv_index_max')}</div>
                    <div class="w-info-item">⏱️ ${getVal(forecast + '.day0.sunshine_duration', "h")}</div>
                </div>
            </div>
             <div class="w-sun-moon" style="position: relative;">
                🌅 ${getVal(forecast + '.day0.sunrise')}<br>
                🌇 ${getVal(forecast + '.day0.sunset')}<br>
                💨 ${getVal(dpBase + '.current.wind_direction_text')} ${getImg(dpBase + '.current.wind_direction_icon', "35px")}<br>
                <div style="margin-top:8px; display: flex; align-items: center; gap: 10px;">
                    ${getImg(forecast + '.day0.moon_phase_icon', "30px", "icon-moon")}
                    ${getImg(dpBase + '.current.wind_gust_icon', "35px")}
                </div>
                <div style="position: absolute; bottom: -10px; right: 0; font-size: 0.6rem; color: #475569; opacity: 0.8;">
                    Script Version ${version}
                </div>
              </div>
            </div> -->
        <div class="w-hourly">
    `;

    for (let h = 1; h < 13; h++) {
        let hPath = forecast + '.hourly.next_hours.hour' + h;
        html += `
            <div class="w-h-item">
                <div class="w-h-time">${getVal(hPath + '.time')}</div>
                ${getImg(hPath + '.icon_url', "30px")}
                <span class="w-h-cloud">🌤️${getPV(hPath)}</span>
                <span class="w-h-temp">${getVal(hPath + '.temperature_2m', "°")}</span>
                <span class="w-h-rain">
                    🌧️${getVal(hPath + '.precipitation_probability', "%")}
                </span>
            </div>
        `;
    }

    html += `
        </div>
        <div class="w-forecast">
    `;

    for (let i = 1; i <= 6; i++) {
        let d = forecast + '.day' + i;
        html += `
        <div class="w-fc-day">
            <div>
                <div class="w-fc-name">${getVal(d + '.name_day')}</div>
                <div class="w-fc-text">${getVal(d + '.weather_text')}</div>
                ${getImg(d + '.icon_url', "45px")}
                <span class="w-fc-temp-max">${getVal(d + '.temperature_2m_max', "°")}</span>
                <span class="w-fc-temp-min">${getVal(d + '.temperature_2m_min', "°")}</span>
            </div>
            <div class="w-fc-details">
                🌧️ ${getVal(d + '.rain_sum', "mm")} (${getVal(d + '.precipitation_probability_max', "%")})<br>
                💧 ${getVal(d + '.relative_humidity_2m_mean', "%")}<br>
                ☀️ UV ${getVal(d + '.uv_index_max')}<br>
                <div style="margin-top:5px; display: flex; justify-content: center; gap: 4px;">
                    <!--${getImg(d + '.moon_phase_icon', "18px", "icon-moon")}-->
                    ${getImg(d + '.wind_direction_icon', "18px")}
                    ${getImg(d + '.wind_gust_icon', "22px")}
                </div>
            </div>
        </div>
        `;
    }

    html += `</div></div>`;
    setState(targetDP, html, true);
    console.log("Weather widget: HTML successfully generated.");
}

// Start & Trigger
updateWeatherWidget();
schedule("1 * * * *", updateWeatherWidget);
on({id: dpBase + '.current.temperature_2m', change: 'any'}, updateWeatherWidget);
on({id: forecast + '.hourly.next_hours.hour0.time', change: 'any'}, updateWeatherWidget);

oFbEQnpoLKKl6mbY5e13

@Thisoft

Super, vielen Dank!

H5N1

Demnächst ein Minor Update für open-meteo-weather (2.3.0)
Ich habe mir was überlegt für die Luftqualität Enthusiasten. Da open meteo nur Stundenweise in vielen Daten die Werte bringt für Luftqualität habe ich es so gemacht das der Adapter im Hintergrund alle Stündlichen Daten abruft und jeweils den Maximalwert der an diesem Tag vorkommt Speichert und ablegt. Die Maximal abrufbaren Vorhersage Tage für Luftqualität beträgt 6 Tage, danach kommen keine Werte mehr. Kann aber noch 1-2 Tage dauern, der Adapter läuft auf meinem Dev-server bereits Smooth wie er soll, Trotzdem beobachte ich erst mal noch.

Community Forum

NEWS

Test Adapter open-meteo-weather v2.3.x GitHub/Latest

Neue Version 2.2.5 verfügbar.

Support us

306

32.6k

82.3k

1.3m