Visualisierung des Stromverbrauchs

Glasfaser

Hier mal ein Beispiel :

[{"tpl":"tplCGradialGauge","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","factor":"9.53674E-05","valueOffset":"0","hCount":"1","minorTicks":"4","animation":"true","needle":"true","needleShadow":"true","needleType":"arrow","borders":"true","borderOuterWidth":"1","borderMiddleWidth":"1","borderInnerWidth":"1","borderShadowWidth":"1","valueBox":true,"ticksAngle":"270","startAngle":"45","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid":"upnp.0.WANDevice_-_FRITZ!Box_6591_Cable_(lgi).WANDevice.WANCommonInterfaceConfig.ByteReceiveRate","title":"DOWNLOAD","minValue":"0","maxValue":"1000","units":"MB","valueInt":"3","valueBoxStroke":"0","valueTextShadow":false,"valueBoxBorderRadius":"0","fontValueSize":"30","fontValueStyle":"normal","fontNumbersWeight":"normal","fontUnitsWeight":"normal","fontValueWeight":"bold","fontNumbersSize":"27","valueText":"","valueDec":"2","colorPlate":"#707070","colorTitle":"#ffffff","colorUnits":"#ffffff","colorNumbers":"#ffffff","colorValueText":"","colorValueBoxBackground":"","colorMajorTicks":"#ffffff","colorMinorTicks":"#ffffff","colorBorderOuter":"#0411cd","colorBorderOuterEnd":"#0411cd","colorBorderMiddle":"Gray","colorBorderShadow":"#000000","colorBorderMiddleEnd":"Gray","colorBorderInner":"Gray","colorBorderInnerEnd":"Gray","colorNeedleCircleOuter":"#2d2afe","colorNeedleCircleInner":"#2d2afe","colorNeedle":"#4cf83a","colorNeedleEnd":"#4cf83a","colorPlateEnd":"#3e3838"},"style":{"left":"612px","top":"51px","width":"150px","height":"155px","z-index":"7","font-family":"Jura-DemiBold"},"widgetSet":"canvas-gauges"}]

Daten anpassen :

sigi234

@glasfaser sagte in Visualisierung des Stromverbrauchs:

Hier mal ein Beispiel :

Gleichzeitig :grinning:

Homoran

@kusselin sagte in Visualisierung des Stromverbrauchs:

und wie macht man das das sich der Pfeil dann auch noch bewegt?

indem du den Datenpunkt zuordnest?

Kusselin

@glasfaser sagte in Visualisierung des Stromverbrauchs:

Hab das widget jetzt mal im view waschküche importiert....nach dem importieren sehe ich gar nix.........hier muss ich hja dann auch noch das Bild importieren...oder ware das da im Widget schon inklusive?

Auf alle fälle passiert da nix :-(
Image 1.png

Image 2.png

Glasfaser

@kusselin

Das Widget ( Set ) im allgemeinen ist nicht installiert .

Das kann man am undefined erkennen

https://github.com/ioBroker/ioBroker.vis-canvas-gauges

Kusselin

@glasfaser ohjee....hier muss ich über console das gauge isnatllieren...entweder radial oder linear oder komplett richtig?

dann wenn installiert soweit ich das jetzt geelsen habe muss ich über HTML widget das Widget darstellen....stimmt das so?
Ich weiss ihr sollt es mir udn müsst mir es ja nocht im einzeln vorkauen...Ihr seid ja so immer da und helft..aber wenn man es nicht kennt udn haben will...tja...dann wirds schwer ;-)

und den canvas Gauges adapter muss installiert werden...sachen die alle nicht wusste

Glasfaser

@kusselin

Hier installieren , auf + ( installieren ) :

muss ich über HTML widget das Widget darstellen.

Nein , das sind fertige Widgets , die findest du dann links in der VIS Editor Widgets Leiste

Kusselin

@glasfaser o.k jetzt wird vieles klarer ...wusste nicht das das nochmals sep. ein Adapter ist......

aber...wieso soll ich wenn ich jetzt das gauge widget installiert habe noch deines installieren???
Image 4.png

Glasfaser

@kusselin sagte in Visualisierung des Stromverbrauchs:

aber...wieso soll ich wenn ich jetzt das gauge widget installiert habe noch deines installieren???

Ich habe gerade keine Ahnung was du meinst ,.
..... habe oben nur beschrieben wie der Adapter zu installieren ist .( die Instanz )

Aber jetzt ist ja alles gut und du kannst das Widget nutzen ;)

Kusselin

@glasfaser sagte in Visualisierung des Stromverbrauchs:

@kusselin

Hier mal ein Beispiel :

[{"tpl":"tplCGradialGauge","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","factor":"9.53674E-05","valueOffset":"0","hCount":"1","minorTicks":"4","animation":"true","needle":"true","needleShadow":"true","needleType":"arrow","borders":"true","borderOuterWidth":"1","borderMiddleWidth":"1","borderInnerWidth":"1","borderShadowWidth":"1","valueBox":true,"ticksAngle":"270","startAngle":"45","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid":"upnp.0.WANDevice_-_FRITZ!Box_6591_Cable_(lgi).WANDevice.WANCommonInterfaceConfig.ByteReceiveRate","title":"DOWNLOAD","minValue":"0","maxValue":"1000","units":"MB","valueInt":"3","valueBoxStroke":"0","valueTextShadow":false,"valueBoxBorderRadius":"0","fontValueSize":"30","fontValueStyle":"normal","fontNumbersWeight":"normal","fontUnitsWeight":"normal","fontValueWeight":"bold","fontNumbersSize":"27","valueText":"","valueDec":"2","colorPlate":"#707070","colorTitle":"#ffffff","colorUnits":"#ffffff","colorNumbers":"#ffffff","colorValueText":"","colorValueBoxBackground":"","colorMajorTicks":"#ffffff","colorMinorTicks":"#ffffff","colorBorderOuter":"#0411cd","colorBorderOuterEnd":"#0411cd","colorBorderMiddle":"Gray","colorBorderShadow":"#000000","colorBorderMiddleEnd":"Gray","colorBorderInner":"Gray","colorBorderInnerEnd":"Gray","colorNeedleCircleOuter":"#2d2afe","colorNeedleCircleInner":"#2d2afe","colorNeedle":"#4cf83a","colorNeedleEnd":"#4cf83a","colorPlateEnd":"#3e3838"},"style":{"left":"612px","top":"51px","width":"150px","height":"155px","z-index":"7","font-family":"Jura-DemiBold"},"widgetSet":"canvas-gauges"}]

Daten anpassen :

das hier aus deinem spoiler meinte ich

Kusselin

sp die schulstunde ist fast rum...deshalb jetzt noch eine abschliessende Frage :-)

will jetzt im Bild unten in der Mitte noch ein html-widget setzen in dem ich die Gesamt Kwh anzeigen lassen will als Zahl....also neh,e ich ein html widget und setze den Datenpunkt total

sonoff.0.Waschmaschine.ENERGY_Total

aso muss ich das soch unter html im widget reiter mit den gechweiften >Klammern setzen oder`?

er zeigt dann aber ncht die kwh an :-( was mach ich wieder nicht richtig?

Image 5.png

sigi234

@kusselin
Den Wert siehst du erst in der Runtime

Kusselin

@sigi234 eieiei... danke wird angezeigt... das hab ich jetzt soweit kapiert.. danke Euch allen mal wieder

Glasfaser

@kusselin sagte in Visualisierung des Stromverbrauchs:

das hier aus deinem spoiler meinte ich

Das war nur eine Widget Vorlage für dich ,
ich konnte halt nicht erkennen ob du schon etwas hattest , bzw. du hast ja einen Anfrage an Homoran gestellt .

Deshalb habe ich so wie @sigi234 , hier ein Widget für dich gepostet .

Kusselin

homoran hätte ja auch schreiben können ...lade dir den Gauges Adapter runter.. dann wäre das klar gewesen. Das weiß man halt nicht am Anfang ... egal danke Dir Glasfaser!

Homoran

@kusselin sagte in Visualisierung des Stromverbrauchs:

homoran hätte ja auch schreiben können ...lade dir den Gauges Adapter runter.. dann wäre das klar gewesen.

Hätte er!
Aber dazu hätte er wissen müssen, dass du das Widget noch nicht hast.
Du hattest ja schließlich auch einen Screenshot davon gepostet.
Wie soll er dann annehmen, dass du das noch nicht installiert hattest

Kusselin

@homoran allahopp wäre das auch geklärt :-)

Kusselin

bins wieder ........habe jetzt in der view-verbrauch das gauges widget udn ein html widget plaziert..........

wenn ich jetzt auf die Index seite gehe udn dort dann die runtime starte udn im menü oben auf Verbrauch klicke dann geht zwar Verbrauch auf aber das widget wird nicht angezeigt so wie im editor....

mensch was mach ich da wieder falsch :-(

Image 1.png
Image 2.png
Image 3.png