[Gelöst] Fragen zum DWD Widget

wendy2702

Hi,

das DWD Widget ist ja nicht sichtbar wenn keine Warnung vorliegt.

Ich hätte es gerne so in meinem Standart View das wenn keine Warnung vorliegt da z.B. steht "Zur Zeit keine Wetterwarnung", habe aber keinen Schimmer wie ich das machen muss.

Wenn dann im DWD Widget klein eine Warnung erscheint würde ich gerne nach drücken des Widgets auf meinen Wetter View wechseln um dort dann die komplette Meldung im DWD Widget lang lesen zu können.

Kann mir dabei vielleicht jemand helfen oder hat ähnliches bereits umgesetzt?

Bin dankbar für jede Hilfe und wenn ich was lernen kann.

Mirko

Homoran

Hallo Mirko,

du legst ein weiteres HTML-Widget mit Text, z.B. "keine DWD-Warnungen" an und legst es über das DWD widget.

Bei diesem Textwidget wählst du unter Sichtbarkeit einen Datenpunkt von DWD-Adapter aus, der ohne Meldung leer ist, z.B. dwd.0.warning.text

Gruß

Rainer

wendy2702

~~@Homoran:~~

Hallo Mirko,

du legst ein weiteres HTML-Widget mit Text, z.B. "keine DWD-Warnungen" an und legst es über das DWD widget.

Bei diesem Textwidget wählst du unter Sichtbarkeit einen Datenpunkt von DWD-Adapter aus, der ohne Meldung leer ist, z.B. dwd.0.warning.text

ioBroker_DWD_NoMessage.jpg

Gruß

Rainer `

Hallo Rainer,

danke für die Antwort.

Hast du zufällig auch noch eine Idee wie ich das andere mit dem View Wechsel realisieren kann?

Mit welchem Widget oder wie hast du die Karte eingebunden?

Danke

Mirko

Homoran

~~@wendy2702:~~

Hast du zufällig auch noch eine Idee wie ich das andere mit dem View Wechsel realisieren kann? `
Hier legst du einnen Nav-Button Oder navigation-icon Widget über das DWD-Widget z.B. in die linke untere Ecke mit dem Text: "mehr…"

Dieses machst du sichtbar, wenn das DWD-Widget Inhalt enthält und navigierst damit zu deinem Wetter View.

~~@wendy2702:~~

Mit welchem Widget oder wie hast du die Karte eingebunden? `
Das ist eine iframe-Widget mit dem Pfad zum DWD:

http://www.dwd.de/DWD/wetter/radar/rad_nrw_akt.jpg

Gruß

Rainer

wendy2702

Perfect.

Danke!

Noch eine Frage.

Angenommen mein Widget ist für z.B. 3 Warnungen zu klein eingestellt. Kann man den Text irgendwie Automatisch durch scrollen lassen oder die Schriftgröße dynamisch anpassen lassen?

adarof

Hallo

Ich habe eine ähnliche Frage:

Wie kann ich denn von den (per Default) 3 Warnungen immer diejenige anzeigen, die am "schlimmsten" (also grösste Severity) hat?

Gruss

Homoran

ich habe für jede Meldung (insges.5) untereinander ein Widget angelegt und lasse es nur sichtbar werden, wenn es eine x-te Meldung gibt.

Gruß

Rainer

adarof

Hallo Rainer,

Ja - das könnt ich mir auch gut vorstellen über iobroker.vis direkt.

Aber ich möchte ja von den dwd0.warning[0..] nur den schlimmsten angezeigt bekommen (oder den obersten der Schlimmsten oder so)

Kann ich dafür vielleicht ein Script erstellen, welches durch die warnings iteriert und das Objekt mit der schlimmsten Warnung in ein manuell angelegtes Objekt gleichen Types packen, sodass ich das iobroker.vis-DWD-Widget dann auf diese Kopie zeigen lasse?

Oder wie würdest Du/Ihr das machen?

Gruss

papper371

Hallo zusammen,

ich habe die DWD Meldungen bei mir mal etwas erweitert. Einerseits werden alle Meldungen raus gefiltert die von der Höhe nicht zu meinem Standort passen. Also wenn die Meldung ab einer Höhe von 200m angeben ist und ich, wie meinem Fall auf 103 m Höhe liege interessiert mich dies nicht (Zeile 6 var stationAltitude = 103;).

Des Weiteren werden die die Meldungen nach 1. Anfangszeiten, 2. Level, 3. Endzeit und wenn alles sonst gleich ist noch nach dem Typ sortiert (Zeile 246 - 284).

Die Farben habe ich aus der Farbtabelle des DWD (http://www.wettergefahren.de/warnungen/farbskala.html) kopiert und unterscheiden sich von den Farben des DWD Widgets. Könnte man vielleicht noch im Widget anpassen.

Dann werden auch die passenden Warn - Icons mit angezeigt (https://www.dwd.de/DE/wetter/warnungen_ … _node.html). Hier muss man natürlich noch den Pfad im Code anpassen (Zeile 235 retVal = "/vis/img/dwd/warn_icons_" + arrType[type];).

Auch die Anfangs- und Endzeiten habe ich so modifiziert, dass alles in einen Satz passt. Z. B. aktiv - heute 19:00 für ein Ereignis das bereits eingetreten ist und bis 19:00 Uhr dauert oder heute 20:00 Uhr bis morgen 10:00 Uhr usw. Funktionen in den Zeilen 179 - 226.

Eine Idee zum Widget wäre zum Beispiel, dass in der Kurzfassung mittels Tooltip der komplette Meldungstext angezeigt wird.

Es sind noch jedemenge Logs vorhanden, mit denen ich den korrekten Ablauf verfolge. Die können natürlich gerne rausgeschmissen werden.

Am Code kann noch gefeilt werden, es geht denke ich stellenweise einfacher.

Leider bin ich in der Erstellung von Widgets ein absoluter Neuling, daher habe ich mich noch nicht getraut meinen DWD Widget anzupassen. Kommt noch, hoffe ich :D

Viel Spaß beim spielen :P

const util = require('util');
// verschiedene Vorgaben
var arrType = new Array("gewitter_","wind_","regen_","schnee_","nebel_","frost_","eis_","tau_","hitze","uv");
var arrFarben = new Array("#C5E566","#FFFF00","#FA9600","#E53935","#AF0064","#FE68FE");
var stationAltitude = 103;
// States anlegen
createState("DwdExp", "", {
    type: "channel",
    desc: "DWD Expand Message 1 - 10",
    role: "info" 
});
for (var State = 1; State < 11; State++) {   
    createState("DwdExp.Message" + State, "", {
        type: "channel",
        desc: "Daten Meldung Nr. " + State,
        role: "info"
    });

    createState("DwdExp.Message" + State + ".start", null, {
        read: true,
        write: false,
        desc: "Warnzeitraum Beginn",
        type: "datetime",
        def: null
    });

    createState("DwdExp.Message" + State + ".end", null, {
        read: true,
        write: false,
        desc: "Warnzeitraum Ende",
        type: "datetime",
        def: null
    });

    createState("DwdExp.Message" + State + ".type", null, {
        read: true,
        write: false,
        desc: "Art der Warnung",
        type: "number",
        min: 0,
        max: 9,
        def: null,
        states: "0:Gewitter; 1:Wind/Sturm; 2:Regen; 3:Schnee; 4:Nebel; 5:Frost; 6:Eis; 7:Tauwetter; 8:Hitzebelastung; 9:UV-Belastung"
    });

    createState("DwdExp.Message" + State + ".level", null, {
        read: true,
        write: false,
        desc: "Warnstufe",
        type: "number",
        def: null,
        states: "1:Vorabinformation Unwetter; 2:Amtliche Wetterwarnung; 3:Amtliche Warnung vor markantem Wetter; 4:Amtliche Unwetterwarnung; 5:Amtliche Warnung vor extremem Unwetter"
    });

    createState("DwdExp.Message" + State + ".severity", null, {
        read: true,
        write: false,
        desc: "Schwere der Warnstufe",
        type: "number",
        def: null,
        states: "0:None; 1:Minor; 2:Moderate; 3:Severe; 4:Extreme"
    });

    createState("DwdExp.Message" + State + ".headline", false, {
        read: true,
        write: false,
        desc: "Warntyp Überschrift" + State,
        type: "string",
        def: ""
    });

    createState("DwdExp.Message" + State + ".description", false, {
        read: true,
        write: false,
        desc: "Warntyp Beschreibung" + State,
        type: "string",
        def: ""
    });

    createState("DwdExp.Message" + State + ".event", false, {
        read: true,
        write: false,
        desc: "Warntyp Stichwaort" + State,
        type: "string",
        def: ""
    });

    createState("DwdExp.Message" + State + ".instruction", false, {
        read: true,
        write: false,
        desc: "Warntyp Handlungsratschläge" + State,
        type: "string",
        def: ""
    });

    createState("DwdExp.Message" + State + ".period", "", {
        read: true,
        write: false,
        desc: "Warnzeitraum " + State,
        type: "string",
        def: ""
    });

    createState("DwdExp.Message" + State + ".colour", "", {
        read: true,
        write: false,
        desc: "Level Farbe " + State,
        type: "string",
        def: ""
    });

    createState("DwdExp.Message" + State + ".icon", "", {
        read: true,
        write: false,
        desc: "Level Icon " + State,
        type: "string",
        def: ""
    });

    createState("DwdExp.Message" + State + ".visible", false, {
        read: true,
        write: false,
        desc: "Sichtbarkeit des Icon Nr. " + State,
        type: "boolean",
        def: false
    });
}
>! // Prüfen ob ein JSON-Objekt gültig ist.
function isValidObject(obj) {
    var retVal = false;
    var count = Object.keys(obj).length;
    if (count > 2) { retVal = true; }

    log("isValidObj = " + retVal);
    return retVal;
}
function isValidAltitude(obj) {
    var retVal = false;

    if ((obj.altitudeStart === null) || ((stationAltitude > obj.altitudeStart) && ((stationAltitude < obj.altitudeEnd) || (obj.altitudeEnd === null)))) { retVal = true; }

    log("isValidAltitude = " + retVal + ", Höhen => Station " + stationAltitude + " Start " + obj.altitudeStart + " Ende " + obj.altitudeEnd);
    return retVal;
}
// Prüfen wieviel Meldungen aktiv sind
function getActiveMessageCount() {
    var activeCount = 0;

    for (var a = 0; a < 10; a++){
        if (a === 0) {
            getState("dwd.0.warning.severity").val > 0 ? activeCount++ : null;
        } else {
            getState("dwd.0.warning" + a + ".severity").val > 0 ? activeCount++ : null;
        }
    }

    log("getActiveMessageCount = " + activeCount);
    return activeCount;
}
function getSeverity(lev) {
    if (lev === 0) {
        return 0;
    } else if (lev === 1) {
        return 1;
    } else {
        return lev - 1;
    }
}
// aktuelle Zeit liegt zwischen der Anfangs- und Endzeit der Warnung. Das Ereignis ist eingetreten.
function isActive(start, end) {
    var retVal = compareTime(start, end, "between");
    log("isActive = " + retVal + " input Start: " + start + " End: " + end);    
    return retVal;
}
// Aus einer Zeit einen formatierten String mit heute, morgen, übermorgen oder einem Datum mit Uhrzeit zurückgeben
function getTimeString(toConvert) {
    var retVal = "";
    // Heute
    var Tag0 = new Date();
        Tag0.setHours(23, 59, 59);
    // Morgen
    var Tag1 = new Date(Tag0);
        Tag1.setDate(Tag1.getDate() + 1);
    // Übermorgen
    var Tag2 = new Date(Tag0);
        Tag2.setDate(Tag2.getDate()+2);

    if (toConvert < Tag0) {
        retVal = "heute " + formatDate(toConvert, "hh:mm") + " Uhr";
    } else if ((toConvert > Tag0) && (toConvert < Tag1)) {
        retVal = "morgen " + formatDate(toConvert, "hh:mm") + " Uhr";
    } else if ((toConvert > Tag1) && (toConvert < Tag2)) {
        retVal = "übermorgen " + formatDate(toConvert, "hh:mm") + " Uhr";
    } else {
        retVal = formatDate(toConvert, "DD.MM.YYYY, hh:mm");
    }

    log("getTimeString = " + retVal + " input = " + toConvert);
    return retVal;
}
// String zur Beschreibung des Warnzeitraumes erstellt: z. B. AKTIV bis heute 18:30 Uhr oder heute 23:00 bis morgen 09:00 Uhr 
function createTimeString(start, end) {
    var retVal = "";

    if (isActive(start, end)) {
        retVal = "AKTIV bis " + getTimeString(end);
    } else {
        retVal = getTimeString(start) + " bis " + getTimeString(end);
    }

    log("createTimeString = " + retVal + " input = Start: " + start + " End: " + end);
    return retVal;
}
// entsprechenden String mit dem Pfad zum Icon und der entsprechenden Bezeichnung des Bildes erstellen
function createIconString(type, level) {
    var retVal = "";
    if (level === 1) {
        retVal ="/vis/img/dwd/vorab.png";
    } else {
        retVal = "/vis/img/dwd/warn_icons_" + arrType[type];

        if ((type >= 0) && (type <= 7)) { retVal += level - 1; }

        retVal += ".png";
    }
    log("createIconString = " + retVal + " input = Type: " + type + " Level: " + level);
    return retVal;
}
function sortMessageArr(objA, objB) {
    var retVal;
    if (objA.start < objB.start) {
        log("Objekt A Start => " + objA.start + " ist kleiner als B Start => " + objB.start + " = A vor B");
        retVal = -1;
    } else if (objA.Start > objB.start) {
        log("Objekt A Start => " + objA.start + " ist größer als B Start => " + objB.start + " = B vor A");
        retVal = 1;
    } else {
        if (objA.level < objB.level) {
            log("Objekt A Level => " + objA.level + " ist kleiner als B Level => " + objB.level + " = B vor A");
            retVal = 1;
        } else if (objA.level > objB.level) {
            log("Objekt A Level => " + objA.level + " ist größer als B Level => " + objB.level + " = A vor B");
            retVal = -1;
        } else {
            if (objA.end < objB.end) {
                log("Objekt A Ende => " + objA.end + " ist kleiner als B Ende => " + objB.end + " = A vor B");
                retVal = -1;
            } else if (objA.end > objB.end) {
                log("Objekt A Ende => " + objA.end + " ist größer als B Ende => " + objB.end + " = B vor A");
                retVal = 1;
            } else {
                if (objA.type < objB.type) {
                    log("Objekt A Typ => " + objA.type + " ist kleiner als B Typ => " + objB.typ + " = A vor B");
                    retVal = -1;
                } else if (objA.type > objB.type) {
                    log("Objekt A Typ => " + objA.type + " ist größer als B Typ => " + objB.typ + " = B vor a");
                    retVal = 1;
                } else {
                    log("Es gibt keinen Unterschied daher Sortierung egal.");
                    retVal = 0;
                }
            }
        }
    }
    return retVal;
}
function getColour(lev, typ) {
    var retVal;

    if ((typ >= 8)) {
        retVal = arrFarben[5];
    } else {
        retVal = arrFarben[lev - 1];
    }

    log("getColour => " + retVal);
    return retVal;
}
function getMessages() {
    var count = getActiveMessageCount();
    var validCount = 0;
    var object = null;
    var objDwd = [];

    for (var b = 0; b < count; b++) {
        if (b === 0) {
            object = JSON.parse(getState("dwd.0.warning.object").val);
        } else {
            object = JSON.parse(getState("dwd.0.warning" + b + ".object").val);
        }
        if (isValidObject(object) && isValidAltitude(object)) {
            objDwd[validCount] = new Object({
                start: formatDate(object.start, "DD.MM.YYYY, hh:mm"),
                end: formatDate(object.end, "DD.MM.YYYY, hh:mm"),
                type: object.type,
                level: object.level,
                severity: getSeverity(object.level),
                headline: object.headline,
                description: object.description,
                event: object.event,
                instruction: object.instruction,
                period: createTimeString(object.start, object.end),
                icon: createIconString(object.type, object.level),
                colour: getColour(object.level, object.type),
                visible: true,
            });
            validCount++;
        }
    }

    log("getMessage => Valid Counts: " + validCount);
    objDwd.sort(sortMessageArr);

    for (var c = 0; c < 10; c++) {
        log("Counter c = " + c + " validCount = " + validCount);
        var d = c + 1;
        if (c < validCount) {
            log("ObjectIsValid");
            setState("DwdExp.Message" + d + ".start", objDwd[c].start);
            setState("DwdExp.Message" + d + ".end", objDwd[c].end);
            setState("DwdExp.Message" + d + ".type", objDwd[c].type);
            setState("DwdExp.Message" + d + ".level", objDwd[c].level);
            setState("DwdExp.Message" + d + ".severity", objDwd[c].severity);
            setState("DwdExp.Message" + d + ".headline", objDwd[c].headline);
            setState("DwdExp.Message" + d + ".description", objDwd[c].description);
            setState("DwdExp.Message" + d + ".event", objDwd[c].event);
            setState("DwdExp.Message" + d + ".instruction", objDwd[c].instruction);
            setState("DwdExp.Message" + d + ".period", objDwd[c].period);
            setState("DwdExp.Message" + d + ".icon", objDwd[c].icon);
            setState("DwdExp.Message" + d + ".colour", objDwd[c].colour);
            setState("DwdExp.Message" + d + ".visible", objDwd[c].visible);
        } else {
            setState("DwdExp.Message" + d + ".start", null);
            setState("DwdExp.Message" + d + ".end", null);
            setState("DwdExp.Message" + d + ".type", null);
            setState("DwdExp.Message" + d + ".level", null);
            setState("DwdExp.Message" + d + ".severity", 0);
            setState("DwdExp.Message" + d + ".headline", "");
            setState("DwdExp.Message" + d + ".description", "");
            setState("DwdExp.Message" + d + ".event", "");
            setState("DwdExp.Message" + d + ".instruction", "");
            setState("DwdExp.Message" + d + ".period", "");
            setState("DwdExp.Message" + d + ".icon", "");
            setState("DwdExp.Message" + d + ".colour", arrFarben[0]);
            setState("DwdExp.Message" + d + ".visible", false);
        }
    }
}
getMessages();
on("dwd.0.warning.object",function() {getMessages()}, "ne");
on("dwd.0.warning1.object",function() {getMessages()}, "ne");
on("dwd.0.warning2.object",function() {getMessages()}, "ne");
on("dwd.0.warning3.object",function() {getMessages()}, "ne");
on("dwd.0.warning4.object",function() {getMessages()}, "ne");
on("dwd.0.warning5.object",function() {getMessages()}, "ne");
on("dwd.0.warning6.object",function() {getMessages()}, "ne");
on("dwd.0.warning7.object",function() {getMessages()}, "ne");
on("dwd.0.warning8.object",function() {getMessages()}, "ne");
on("dwd.0.warning9.object",function() {getMessages()}, "ne");

adarof

Hallo

Das ist schon ziemlich gut - Vielen Dank erstmal.

Kannst Du kurz in den Anhang schauen?

Die Hitzewarnung ist ja schön und gut zu sehen - das akute Gewitter hätte ich lieber gehabt ;-)

Die Hitzewarnung hat Severity 9, das Gewitter 3.

–> Ist Severity hoch oder niedrig = wichtiger?

--> Müsste man dann vielleicht UV und Hitze Warnungen hinten-dran stellen (egal welche Severity die haben)?

Gruss
2636_dwdgewitter.png

adarof

…und noch eine Frage: Wie kann ich denn nun z.B. die von Dir mühsam zugeordnete Farbe als CSS-Hintergrund verwenden? ich kann bei den Widgets, die ich gerade sehe nur einen Wert angeben - nicht eine ObjektID auswählen.

adarof

ANtwort an mich selber: In der Hintergrundfarbe einfach sowas eintragen:

"{javascript.0.DwdExp.Message1.colour}" ….wieder was gelernt :-)

al-79

Moin,

hat schon mal jemand das JSON vom dwd.0.warning0.object "zerlegt" ?

Ich würde gerne 2-3 Daten des JSON nutzen in den normalen Werten des DWD steht leider nicht's dergleichen…

hat da ggf jemand ein JS um das JSON zu zerlegen?

Danke & Grüße

adarof

Hallo

Anbei mal ein Bild meiner Anzeige davon:

2 Fragen:

Die generierten Icon-Namen sind ja für den Download hier:

https://www.dwd.de/DE/wetter/warnungen_ … onFile&v=3

(wo man übrigens gewitter3 in gewitter_3 umbenennen muss)

Leider ist das Icon-pack nicht mit transparenten Hintergrund -> hat das jemand?

Wie man im Screenshot links oben sieht, hätte ich gerne die Gesamtanzahl an anliegenden Meldungen. Ich dachte das wäre die Zahl direkt unter DwdExp - aber da steht immer die 2. Könnten wir das noch ergänzt bekommen?

Gruss -
2636_dwdanzeige.png

adarof

Zu 1) Antworte ich mir mal selber … einfach convert nutzen:

#!/bin/bash
for filename in DWD_orig/*.png; do
    for ((i=0; i<=3; i++)); do
        convert "$filename" -fuzz 20% -transparent white DWD/$(basename "$filename")
    done
done

Community Forum

NEWS

[Gelöst] Fragen zum DWD Widget

Support us

721

32.6k

82.2k

1.3m