HTML Widget

[fichte_112]

Hallo,
ich möchte von wetterlabs.de ein Wetter Widget in meine Visualisierung einbinden. Dazu habe ich ein Basic-HTML-Widget in VIS-2 erstellt und folgenden Code unter Allgemein HTML eingefügt.

<div id="idf70d230eabb36" a='{"t":"a","v":"1.2","lang":"de","locs":[],"ssot":"c","sics":"ds","cbkg":"#FFFFFF","cfnt":"#000000","cprb":"#1976D2","cprf":"#FFFFFF"}'><a href="https://wetterlabs.de/widget/">Wetter widget html für Homepage</a> von wetterlabs.de</div><script async src="https://static1.wetterlabs.de/widgetjs/?id=idf70d230eabb36"></script>

leider funktioniert das nicht.
Was mache ich falsch?

[OliverIO]

@fichte_112 sagte in HTML Widget:

du machst da nix falsch.
das hat etwas mit dem binding zu tun.
in deinem widget ist ein javascript datei enthalten die dynamisch nachgeladen wird. diese datei jagt vis2 durch den binding interpreter.
da in hochkomprimierten javascript konstrukte vorkommen die wie bindings aussehen, macht vis2 damit etwas, was dann das skript letztendlich zerstört

ich habe das skript reformatiert. so funktioniert es dann.
trage das folgende in dein html widget ein
da das skript sonst immer dynamisch nachgeladen wird, können die jederzeit änderungen vornehmen, die du jetzt nicht mehr mitbekommst.
wenn das widget mal nicht mehr funktioniert muss man den vorgang wiederholen.
zum umformatieren nutze ich notepad++ mit der JSON erweiterun. dort dann einfach Format auswählen.

<div id="idf70d230eabb36" a='{"t":"a","v":"1.2","lang":"de","locs":[],"ssot":"c","sics":"ds","cbkg":"#FFFFFF","cfnt":"#000000","cprb":"#1976D2","cprf":"#FFFFFF"}'><a href="https://wetterlabs.de/widget/">Wetter widget html für Homepage</a> von wetterlabs.de</div>
<script>

function sendGetRequest(url, callback, widgetId) {
    var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            callback(widgetId, request.responseText)
        }
    };
    request.open('GET', url);
    request.send()
}
function sendPostRequest(url, callback, params, widgetId) {
    var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            callback(request.responseText, widgetId)
        }
    };
    request.open('POST', url, !0);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send(params)
}
function updateWidgetsContent(data, id) {
    data = JSON.parse(data);
    if (data.hasOwnProperty("html")) {
        document.getElementById(id).innerHTML = data.html
    }
    if (data.hasOwnProperty("class")) {
        document.getElementById(id).className = data["class"]
    }
    if (data.hasOwnProperty("js")) {
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.async = !1;
        script.text = data.js;
        document.head.appendChild(script)
    }
    if (data.hasOwnProperty("error_code")) {
        document.getElementById(id).innerHTML = '';
        console.log('https://static1.wetterlabs.de / Error: ' + data.error_msg + ' (Error code ' + data.error_code + ')')
    }
}
function getWidgetData(widgetId, i) {
    var widgetParams = getWidgetParams(widgetId);
    widgetParams.i = i;
    var a = JSON.stringify(widgetParams);
    var h = document.getElementById(widgetId).innerHTML;
    var params = 'a=' + encodeURIComponent(a) + '&h=' + encodeURIComponent(h) + '&id=' + widgetId + '&task=widget';
    sendPostRequest('https://static1.wetterlabs.de/api/', updateWidgetsContent, params, widgetId)
}
function loadWidget(widgetId) {
    var widgetParams = getWidgetParams(widgetId);
    if (widgetParams.loc !== undefined) {
        sendGetRequest('https://api.ipify.org/', getWidgetData, widgetId)
    } else {
        getWidgetData(widgetId, null)
    }
}
function getWidgetParams(widgetId) {
    return JSON.parse(document.getElementById(widgetId).getAttribute("a"))
}

debugger;
loadWidget('idf70d230eabb36');

</script>

[fichte_112]

@oliverio
Vielen Dank für die schnelle Antwort.
Leider Funktioniert der Code nicht.

Das ist die Ausgabe

[OliverIO]

@fichte_112

das funktioniert nur in der runtime

[fichte_112]

@oliverio
Vielen Dank. Es funktioniert.

kannst du mir bitte das Konvertieren mit Notepad++ genauer erklären.
Ich habe es mit dem Plugin JSON Viewer versucht. Dabei kommt folgende Fehlermeldung.

[skvarel]

Ich hatte das gleiche Problem bei einem anderen Wetter-Dienst.

Meine Lösung (Quick & Dirty) .. ich habe den Code mit dem Wetter-Widget in eine leere html-Datei geschrieben und sie mit dem Dateimanager in den VIS2-Ordner geladen.

Die html-Datei rufe ich wiederum mit einem iFrame Widget in der VIS auf

So brauchte ich den Code nicht reformatieren.

Wird dann sogar im Editor angezeigt

[fichte_112]

@skvarel vielen Dank, das werde ich testen.

[OliverIO]

@fichte_112

nein.
der ursprung ist ja html, welches ein skript tag enthält. dort ist ein link zum skript enthalten, welches der browser normalerweise dynamisch nachlädt

https://static1.wetterlabs.de/widgetjs/?id=idf70d230eabb36

diesen skripttag kopiert man aus dem widget code und trägt ihn im browser ein. dann erscheint das eigentliche javascript.
das kopiert man und fügt es in notepad++ hinzu
und wählt das Menü JS Format aus

mit dem jsviewer habe ich es auch probiert, da meldet er aber auch bei javascript einen fehler.

das ursprüngliche scripttag passt du an und entfernst die zusätzlichen angaben

<script async src="https://static1.wetterlabs.de/widgetjs/?id=idf70d230eabb36"></script>

<script>

</script>

und fügst das formatierte javascript da dazwischen ein.
fertig

[fichte_112]

@oliverio vielen Dank