Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[RISSN]

Ok, ich bin davon ausgegangen, dass 7 Tage für die vorhersage sind.

[oFbEQnpoLKKl6mbY5e13]

@RISSN

Die Stunden in der Zukunft des aktuellen Tages sind doch auch Vorhersagen.

[Homoran]

jetzt hab ich den Adapter wegen des schönen Widgets auch installiert.

nur sieht das bei mir so aus

EDIT:

Mit dem hier im Forum geposteten Script für ein HTML Widget sieht es im edit so aus

in der runtime kommt nur "lade Wetterdaten"

ich mach morgen mal weiter

[oFbEQnpoLKKl6mbY5e13]

@Homoran

In das HTML-Widget gehört nur der Datenpunkt "0_userdata.0.Wetter_Widget_HTML". Du musst zusätzlich im Javascript-Adapter ein Skript anlegen, in dem du das Skript einfügst.

[Thisoft]

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

War gar nicht mal so kompliziert da man ja vieles glücklicherweise im Javascript machen kann :-) - HTML ist wie gesagt nicht ganz so "meins".

[Negalein]

@h5n1

schöner Adapter. Funktioniert 1A.

Hätte eine Frage zum html-Widget.

Ich hätte es gerne größer, damit es in den Rahmen passt.

Was müsste ich wo im Script ändern?

[Thisoft]

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

Ich hätte es gerne größer, damit es in den Rahmen passt.

So verschieden sind die Geschmäcker ;-) - ich habe es wesentlich kleiner gebraucht...

Da wäre jetzt die Frage was du denn in dem zusätzlichen Bereich anzeigen möchtest?
Wenn's für den Anfang nur die Hintergrundfarbe sein soll könntest du in diesem Abschnitt:

        .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);
        }

einen Rand oben und unten hinzufügen

        .w-container {
            font-family: 'Segoe UI', sans-serif;
            background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
            color: #f1f5f9;
            padding: 1px;
            border-radius: 24px;
            margin-top: 200px;
            margin-bottom: 200px;
            border: 1px solid #334155;
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }

wobei die 200px jetzt nur mal so eine ganz grobe Schätzung sind. Musst du bissel spielen damit.

Tja und wenn da noch Werte rein sollen... der Möglichkeiten gibt's viele ;-)...

[H5N1]

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

Mit dem hier im Forum geposteten Script für ein HTML Widget sieht es im edit so aus

Ich vermute es hat bei dir etwas mit der UTF-8 kodierung zu tun, wird scheinbar vom Browser falsch interpretiert, warum auch immer.

Ein einfacher Test ob es dann richtig angezeigt wird, füge mal im Widget ganz oben als erstes:

<meta charset="UTF-8">

ein.

Wenn das nicht funktioniert müssen wir versuchen extra die Zeichen wie

"° = °",  "☀️ = ☀"

usw. kodiert einzubringen.

Das wäre erst mal mein Lösungsversuch.

Edit: Wird das Widget auch auf dem Tablet oder Smartphone in der VIS so angezeigt, sitzt iobroker evtl. hinter einem Proxy?

[Homoran]

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

@Homoran

In das HTML-Widget gehört nur der Datenpunkt "0_userdata.0.Wetter_Widget_HTML". Du musst zusätzlich im Javascript-Adapter ein Skript anlegen, in dem du das Skript einfügst.

und genauso hab ich es gemacht!
Das ist das erste Ergebnis.

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

Ein einfacher Test

mach ich nachher

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

sitzt iobroker evtl. hinter einem Proxy?

nein!

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

Wird das Widget auch auf dem Tablet oder Smartphone in der VIS so angezeigt

ich habe nur Tablet und Smartphone.
Auch in der Visu App sieht es so aus

[Homoran]

@H5N1 Hab eben den Charset ins Widget eintragen wollen, da sah es in der Runtime so aus

Nach Eingabe im Editor

In der Runtime wieder nur "lade Wetterdaten"

das log ist prall gefüllt

web.0
2026-02-08 08:30:43.022	error	Cannot subscribe "current: "Actual"": Error The pattern "current: "Actual"" is not a valid ID pattern

web.0
2026-02-08 08:30:42.981	error	Cannot subscribe "current: "Jetzt"": Error The pattern "current: "Jetzt"" is not a valid ID pattern

host.ioBrokerpi5-Server
2026-02-08 08:30:42.980	warn	States 127.0.0.1:50478 Error from InMemDB: Error: The pattern "current: "Actual"" is not a valid ID pattern at Module.pattern2RegEx (file:///opt/iobroker/node_modules/@iobroker/js-controller-common-db/src/lib/common/tools.ts:2490:15) at StatesInMemoryServer.handleSubscribe (file:///opt/iobroker/node_modules/@iobroker/db-base/src/lib/inMemFileDB.ts:323:59) at StatesInMemoryServer._subscribeForClient (file:///opt/iobroker/node_modules/@iobroker/db-states-file/src/lib/states/statesInMemFileDB.js:240:14) at RedisHandler.<anonymous> (file:///opt/iobroker/node_modules/@iobroker/db-states-jsonl/src/lib/states/statesInMemServerRedis.js:380:26) at RedisHandler.emit (node:events:519:28) at RedisHandler.emit (node:domain:489:12) at Immediate._onImmediate (file:///opt/iobroker/node_modules/@iobroker/db-base/src/lib/redisHandler.ts:210:37) at processImmediate (node:internal/timers:485:21)

host.ioBrokerpi5-Server
2026-02-08 08:30:42.980	warn	States 127.0.0.1:50478 Error from InMemDB: Error: The pattern "current: "Jetzt"" is not a valid ID pattern at Module.pattern2RegEx (file:///opt/iobroker/node_modules/@iobroker/js-controller-common-db/src/lib/common/tools.ts:2490:15) at StatesInMemoryServer.handleSubscribe (file:///opt/iobroker/node_modules/@iobroker/db-base/src/lib/inMemFileDB.ts:323:59) at StatesInMemoryServer._subscribeForClient (file:///opt/iobroker/node_modules/@iobroker/db-states-file/src/lib/states/statesInMemFileDB.js:240:14) at RedisHandler.<anonymous> (file:///opt/iobroker/node_modules/@iobroker/db-states-jsonl/src/lib/states/statesInMemServerRedis.js:380:26) at RedisHandler.emit (node:events:519:28) at RedisHandler.emit (node:domain:489:12) at Immediate._onImmediate (file:///opt/iobroker/node_modules/@iobroker/db-base/src/lib/redisHandler.ts:210:37) at processImmediate (node:internal/timers:485:21)

web.0
2026-02-08 08:30:42.979	error	Invalid pattern on subscribe: The pattern " rgba(0,0,0,0.2)" is not a valid ID pattern

Möglicher Grund könnte sein, dass ich am Tablet keine rechte Maustaste habe und das HTML des Widgets in .txt umbenannt und dann den Code in das HTML Widget kopiert habe.

Ich mach nochmal alles neu, wenn du das nicht zum debugging brauchst.

Jeder Aufruf der Seite lähmt das System

DANKE

[sigi234]

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

und genauso hab ich es gemacht!

So wie hier?

[Homoran]

@sigi234

vis! nicht vis-2

nein, erster Versuch war img widget mit Binding

das versuch ich jetzt mal

[sigi234]

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

@sigi234

vis! nicht vis-2

nein, erster Versuch war img widget mit Binding

das versuch ich jetzt mal

Unter vis1 geht es auch so:

Sichtbar erst in der Runtime!

[Homoran]

Danke!
genauso hatte ich es im basic-image eingetragen

mach ich jetzt mal mit basic-html.

[Homoran]

@sigi234

DANKE!

EDIT:
Musste noch das Skript wieder starten.

[H5N1]

@homoran: Super das es jetzt klappt, ich sehe du benutzt noch die v0.1.0, die funktioniert auch soweit, auf github habe ich eine neuere Version des Skriptes, sieht genauso aus und macht auch das selbe. Dort habe ich nur den Datenpunkt für die Niederschläge angepasst. Vorher habe sie die Daten für "rain" angezeigt, das ist ok, aber wenn es zb 12.00 Uhr Schneien soll bleibt die anzeige bei 0mm, dort habe ich nun den Datenpunkt für Niederschlag gewählt, der bezieht alles ein was vom Himmel fällt, außer Flugzeuge :-). Und bei den vorhersage Tage habe ich das UV gegen Sonnenstunden ersetzt.

[Homoran]

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

ich sehe du benutzt noch die v0.1.0
auf github habe ich eine neuere Version des Skriptes

wann??

in js hab ich die gestrige Version 😉 von github
https://github.com/H5N1v2/VIS2-widget-script-om-weather/blob/master/Wetter_HTML_Generator.js

oder wo?

[H5N1]

@homoran: Entschuldige vielmals für die Verwirrung, die Aktuelle ist die 0.1.0, ich habe nur vergessen die Sonnenstunden anzeige im neuen Script zu ändern und bei dir gesehen das da noch UV steht im Screenshot. Dafür gab es jetzt den fix. Asche über mein Haupt, Sorry.

[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>