[gelöst] Ergebnis eines Javascripts in Widget darstellen

[jmeister79]

Hab rausgekriegt wie man zumindest den Wert schonmal darstellt:

einfach ein HTML Widget und folgendes rein:

{n:zigbee.0.00158d00016c10d0.link_quality;qualityToPercent(n)}

Wird aber im Vis Editor nicht angezeigt. Im Vis aber schon!

Jetzt muss ich noch versuchen, den errechneten Wert als Input für ein Bar zu übertragen

Nils

[jmeister79]

Hallo,
ich habe jetzt einen alternativen weg gefunden:

Ich nehme ein normales dummes HTML Widget, das über CSS schon wie ein Bargraph aussieht, und rufe ein Javascript wie folgt im HTML teil auf:

{n:ble.0.4c:65:a8:dc:63:b8.rssi;createBarGraph(n)}

Das Script ruft dann die üblichen Unterscripte auf und gibt fertigen HTML Code zurück:

function qualityToPercent(i)
{
    var percent = 0;
    if (i==0)i=1;
    percent = Math.log2(i)*12.5;
    return percent.toFixed(0);
}
function createBarGraph(i)
{
    var percent = 0;
    var color = "ffffff";
    
    percent = qualityToPercent(i);
    color = numberToRgbColor(percent);
    return '<div style="height:100%; width:'+percent+'%; background:'+color+'"></div>'
}

So bekomme ich aus der Exponentiellen Darstellung der Link Quality eine sehr genaue Prozentdarstellung der Signalstärke aller Zigbee Geräte.
Das Eignet sich prinzipiell dafür, jede Menge coole sachen über standardHTML Widgets zu machen ohne auf igrendwelche anderen zurückzugreifen, ist aber eher was für frickler.

Nils

[sigi234]

@jmeister79

Hallo, irgendwie begreife ich es nicht . Wie wird dann der Bargraph dargestellt?

ich habe für alle meine Zigbee Geräte ja die "Link Quality" jetzt möchte ich diese in einem Balken darstellen.

Ok, habe diesen nicht , aber ich möchte zB. ein Volume Wert darstellen.

[jmeister79]

@sigi234
ich nutze CSS Klassen die den Rest darstellen und klären, dann färbe ich nur noch % davon ein.

In diesem Fall die mdui-h-bargraph und mdui-segment-10 vom material design paket von @Uhula

zu finden unter
https://github.com/Uhula/ioBroker-Material-Design-Style

Nils

[sigi234]

@jmeister79 sagte in [gelöst] Ergebnis eines Javascripts in Widget darstellen:

@sigi234
ich nutze CSS Klassen die den Rest darstellen und klären, dann färbe ich nur noch % davon ein.

In diesem Fall die mdui-h-bargraph und mdui-segment-10 vom material design paket von @Uhula

zu finden unter
https://github.com/Uhula/ioBroker-Material-Design-Style

Nils

Danke, das kenne ich...............kannst du mal einen Screenshot einstellen?

[jmeister79]

@sigi234

hiervon oder willst du konkreten code?

[sigi234]

@jmeister79

Danke, hab es so:

[jmeister79]

@sigi234 sieht gut aus, hattest du auch das problem mit exponentiellem verlauf?

[sigi234]

@jmeister79 sagte in [gelöst] Ergebnis eines Javascripts in Widget darstellen:

@sigi234 sieht gut aus, hattest du auch das problem mit exponentiellem verlauf?

Meinst du den Farbverlauf?

[dos1973]

Das gefällt mit echt gut, aber irgendwie kann ich euch nicht folgen...

@sigi234
Hast du den gleichen Weg angewendet?

[sigi234]

@dos1973 sagte in [gelöst] Ergebnis eines Javascripts in Widget darstellen:

Hast du den gleichen Weg angewendet?

Nein,

hier mal 3 verschiedene Widget mit Balkenverlauf. Könnt Ihr anpassen. ( @Uhula material design )

Widget_Farbverlauf_Set.txt

[dos1973]

da fehlen dann noch die css, der blau mit den "Kästchen" interessiert mich
mdui-h-bargraph mdui-segment-10

[sigi234]

@dos1973 sagte in [gelöst] Ergebnis eines Javascripts in Widget darstellen:

da fehlen dann noch die css

Ja, Voraussetzung ist ccs von @Uhula material design!

https://github.com/Uhula/ioBroker-Material-Design-Style

3. Installation
   Keine. Die CSS Anweisungen müssen lediglich in einem ioBroker.vis Projekt unter "CSS / Projekt" eingefügt werden, die paar Zeilen Script unter "Skript". Beides am besten aus dem [Demo-Projekt]("ioBroker projects/MD_Demo.zip") entnehmen.

[dos1973]

das ist mir zu mächtig
da muss ich bestimmt wieder alles umbauen, dann ohne Kästchen...

[jmeister79]

@dos1973
dann kopier dir doch die entsprechenden css klassen raus.

meine Lösung nutzt ja nur die von @Uhula erzeugte klasse und missbraucht sie ein wenig.
Du müsstest selbst bei Übernahme der ganzen CSS Datei nichts umbauen, das ist ja das tolle an @Uhula s Lösung. die kannst Du einfach auf dein vorhandenes Projekt aufsetzen und die CSS klassen nach Bedarf nutzen.
So hab ich es anfangs auch gemacht, später hab ich mir dann aber das ganze layout genommen, da es so wunderbar dynamisch ist.

Hauptmotivation war bei mir ja, dass man in einem widget nicht so einfach komplexe Berechnungen anstellen konnte. Und ich wollte zusätzliche Objekte für die Umwandlung durch Logarithmus vermeiden.

Nils