Energieanzeige (kWh) über HTML Tabelle - vis

PatrickFro

@liv-in-sky Ok, vielen Dank!

liv-in-sky

wieder ein update - erster post - für die material design widget user !

die farbe für "alle geräte" widget ist im setting einstellbar - für materialdesign(MD)
bugfix bei anwendung der bilder - kam nur bei besonderen daten zum vorschein
schalter (ON OFF) sind nun sichtbar im material design - farbe war und ist einstellbar (const farbeSchalterON)
die farbe für die EINSPEISUNG ist auch einstellbar für MD
im setting sind die MD widgets auf false - bitte auf true setzen ( wenn ihr die html tabelle nicht benötigt, kann braucheEinVISWidget=false eingestellt werden)

@PatrickFro bitte teste das script ohne änderungen und sieh nach en bildern und den werten

@oli - mit dem schalten der buttons habe ich mich noch nicht beschäftigt - im material design widget

Oli

@liv-in-sky

hast du den Gesamtverbrauch auch wieder mit eingearbeitet?

liv-in-sky

@Oli der war nie weg - alle geräte sind der gesamtverbrauch

Image 3.png

Image 4.png

Oli

@liv-in-sky

ich meine die rot markierten Werte

PatrickFro

@Oli let mitMonatBeforeAnzeige=false; auf true, dann ist der Vormonat wieder dabei

PatrickFro

@liv-in-sky leider keine Änderung, Bilder fehlen weiterhin.

Oli

@PatrickFro

danke, habe ich bei den ganzen Einstellungsmöglichkeiten total übersehen

liv-in-sky

@PatrickFro bei mir gehen die auch im /vis.0/Icons ordner (gerade getestet) - starte mal die vis instanz neu (oder iobroker)- vielleicht cache thema

Image 5.png

PatrickFro

@liv-in-sky Cache hatte ich schon gemacht, nun auch IoBroker neu gestartet. Keine Änderung...

liv-in-sky

@PatrickFro

anderen ordner - alle files nochmal hochladen - script ändern/anpassen

PatrickFro

@liv-in-sky alles gemacht, keine Änderung

sigi234

@liv-in-sky

Funktioniert bei mir, wie kann ich den Abstand Icon zu Text ändern?

Screenshot (2035).png

Oli

@liv-in-sky

habe auch noch etwas mit den Widgets gespielt, echt cool

Materialdesign Widget Table

[{"tpl":"tplVis-materialdesign-Table","data":{"oid":"javascript.0.Energieverbrauch.Strom.MaterialWidgetTable","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"12","tableLayout":"card","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"image","textAlign1":"center","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,"showColumn2":"true","colType2":"text","textAlign2":"center","showColumn3":"true","colType3":"text","textAlign3":"right","showColumn4":"true","colType4":"text","textAlign4":"right","showColumn5":"true","colType5":"text","textAlign5":"right","showColumn6":"true","colType6":"text","textAlign6":"center","showColumn7":"true","colType7":"text","textAlign7":"right","showColumn8":"true","colType8":"text","textAlign8":"right","showColumn9":"true","colType9":"text","textAlign9":"right","label0":"Gerät","label1":"Bild","label2":"Status","label3":"Strom (A)","label4":"Spannung (V)","label5":"Leistung (W)","label6":"Schalter","label7":"Heute (kWh)","label8":"Monat (kWh)","label9":" Vormonat (kWh)","colorBackground":"#2e2e2e","colorHeaderRowText":"#8f8f8f","colorHeaderRowBackground":"#202020","colorRowText":"#8f8f8f","dividers":"","borderColor":"#202020","padding_left5":"0","showColumn10":"true","colType10":"text","textAlign10":"right","label10":" Heute (€)","imageSize10":"18","rowHeight":"35","padding_right7":"","class":"mdui-table mdui-table-ascard-r250-l mdui-table-striped noSwipemdui-table-ascard-r250-l mdui-table-striped noSwipe","colorRowBackground":"#2e2e2e","padding_right8":"","imageSize1":"20","columnWidth9":"","columnWidth8":"","showColumn11":"true","colType11":"text","textAlign11":"right","showColumn12":"true","colType12":"text","textAlign12":"right","label11":"Monat (€)","label12":"Vormonat (€)"},"style":{"left":"20px","top":"45px","width":"97.69%","height":"286px","overflow-y":"auto"},"widgetSet":"materialdesign"}]

Materialdesign Widget Iconlist

[{"tpl":"tplVis-materialdesign-Icon-List","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","wrapItems":true,"listItemDataMethod":"jsonStringObject","countListItems":"1","vibrateOnMobilDevices":"50","listLayout":"card","itemLayout":"vertical","listType0":"text","showValueLabel0":"true","listType1":"text","showValueLabel1":"true","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,"json_string_oid":"javascript.0.Energieverbrauch.Strom.MaterialWidget","maxItemsperRow":"7","iconItemMinWidth":"280","iconHeight":"60","buttonHeight":"","labelFontSize":"16","subLabelFontSize":"14","subLabelFontColor":"#8f8f8f","labelFontFamily":"Arial, Helvetica, sans-serif","subLabelFontFamily":"Arial, Helvetica, sans-serif","horizontalIconContainerWidth":"","listImage0":"","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockFilterGrayscale":"30","lockApplyOnlyOnImage":"true","verticalIconContainerHeight":"80","buttonLayout":"full","itemBackgroundColor":"#2e2e2e","labelFontColor":"#d7cec1"},"style":{"left":"23px","top":"424px","width":"calc(100% - 40px)","height":"calc(100% - 120px)","overflow-x":"","overflow-y":"auto","z-index":"1","color":"#8f8f8f"},"widgetSet":"materialdesign"}]

Änderungen im Script von Zeile 1546 bis Zeile 1575

if (!filterArrAusnahme.includes(val0)) {
                          
  mysubText =     `<div>Strom: ${vax3} A</div> 
                    <div>Spannung: ${vax4} V</div> 
                    <div>Leistung: ${vax5} W</div>
                    <div>&ensp; </div>
                    <div>Heute: ${vax7} kWh</div> 
                    <div>Monat: ${vax8} kWh</div>
                    <div>Vormonat: ${vaxMBefore} kWh</div>
                    <div>&ensp; </div>
                    <div>Heute: ${vax9} €</div> 
                    <div>Monat: ${vax10} €</div>
                    <div>Vormonat: ${vaxKostenBefore} €</div>
                    <div style="display: flex; flex: 1; text-align: left; align-items: center; position: relative;">
                    ${vax6}</font></div>`;
} else {
 
mysubText =     `     <div style="color: ${farbeMDEinspeisung};  ">EINSPEISUNG Leistung: ${vax5} W</div>
                      <div>&ensp; </div>  
                      <div>Heute: ${vax7} kWh</div> 
                      <div>Monat: ${vax8} kWh</div>
                      <div>Vormonat: ${vaxMBefore} kWh</div>
                      <div>&ensp; </div>
                      <div>Heute: ${vax9} €</div> 
                      <div>Monat: ${vax10} €</div>
                      <div>Vormonat: ${vaxKostenBefore} €</div>
                      <div>Schalter: ${vax6}</font></div>`;
                      vaxBckGround="#8A4B08";
//  // <div>Strom:${vax3}A Spannung: ${vax4}V Leistung: ${vax5}W</div>    //font-size: 80% ;
}
 
if (vax1.indexOf("GESAMT VirtualPower")>-1) {
  mysubText =     ` <div>&ensp; </div>
                    <div>&ensp; </div>
                    <div>&ensp; </div>
                    <div>&ensp; </div>
                    <div>Heute: ${vax7} kWh</div>
                    <div>Monat: ${vax8} kWh</div>
                    <div>Vormonat: ${vaxMBefore} kWh</div>
                    <div>&ensp; </div>
                    <div>Heute: ${vax9} € </div>
                    <div>Monat: ${vax10} €</div>
                    <div>Vormonat: ${vaxKostenBefore} €</div>
                    <div>&ensp; </div>`;
 
}
if (vax1.indexOf("GESAMT")>-1) {
  mysubText =     ` <div>&ensp; </div>
                    <div>&ensp; </div>
                    <div>&ensp; </div>
                    <div>&ensp; </div>
                    <div>Heute: ${vax7} kWh</div>
                    <div>Monat: ${vax8} kWh</div>
                    <div>Vormonat: ${vaxMBefore} kWh</div>
                    <div>&ensp; </div>
                    <div>Heute: ${vax9} € </div>
                    <div>Monat: ${vax10} €</div>
                    <div>Vormonat: ${vaxKostenBefore} €</div>
                    <div>&ensp; </div>`; 
}

sigi234

@Oli sagte in Energieanzeige (kWh) über HTML Tabelle - vis:

habe auch noch etwas mit den Widgets gespielt, echt cool

Cool, wie sind deine Einstellungen von der Liste?

Oli

@sigi234

hier das Widget

[{"tpl":"tplVis-materialdesign-Table","data":{"oid":"javascript.0.Energieverbrauch.Strom.MaterialWidgetTable","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"10","tableLayout":"card","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"image","textAlign1":"center","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,"showColumn2":"true","colType2":"text","textAlign2":"center","showColumn3":"true","colType3":"text","textAlign3":"right","showColumn4":"true","colType4":"text","textAlign4":"right","showColumn5":"true","colType5":"text","textAlign5":"right","showColumn6":"true","colType6":"text","textAlign6":"center","showColumn7":"true","colType7":"text","textAlign7":"right","showColumn8":"true","colType8":"text","textAlign8":"right","showColumn9":"true","colType9":"text","textAlign9":"right","label0":"Gerät","label1":"Bild","label2":"Status","label3":"Strom (A)","label4":"Spannung (V)","label5":"Leistung (W)","label6":"Schalter","label7":"Heute (kWh)","label8":"Monat (kWh)","label9":" Heute (€) ","colorBackground":"#2e2e2e","colorHeaderRowText":"#8f8f8f","colorHeaderRowBackground":"#202020","colorRowText":"#8f8f8f","dividers":"","borderColor":"#202020","padding_left5":"0","showColumn10":"true","colType10":"text","textAlign10":"right","label10":"Monat (€)","imageSize10":"18","rowHeight":"35","padding_right7":"","class":"mdui-table mdui-table-ascard-r250-l mdui-table-striped noSwipemdui-table-ascard-r250-l mdui-table-striped noSwipe","colorRowBackground":"#2e2e2e","padding_right8":"","imageSize1":"20","columnWidth9":"","columnWidth8":""},"style":{"left":"20px","top":"45px","width":"97.69%","height":"286px","overflow-y":"auto"},"widgetSet":"materialdesign"}]

Wenn du verschieden Bilder haben möchtest musst du das im Script ändern, hier mal der Code Schnippsel

var bild_array = val0.split('/ ');
           var bild = bild_array[2]
           valMarkeDevice=bild

liv-in-sky

@sigi234 ja - aber da stimmt noch was nicht - ich werd nochmal das gesamt ansehen müssen - da muss kein schalter stehen - hatte es nicht aktiviert - deshalb ist es mir nicht aufgefallen

liv-in-sky

@Oli sagte in Energieanzeige (kWh) über HTML Tabelle - vis:

@liv-in-sky

habe auch noch etwas mit den Widgets gespielt, echt cool

Kann ich mir die Gesamtwerte der einzelnen Geräte auch getrennt anzeigen lassen?

kannst du bitte beide widgets in den post setzen - habe ihn im ersten post hierhin verlinkt

liv-in-sky

so noch eine neue version (post 1) für die material design fan's

virtpower gesamt bekommt eigene farbe
gesamt hat eine eigene farbe - keinen schalter und kein strom,spannung oder power mehr
einspeisung hat eigene farbe bekommen

Image 11.png Image 13.png

neues bildchen:

ihr könnt alle settings zurück kopieren und müßt nur auf zeile 20 bis 23 aufpassen

Image 9.png

da kam etwas dazu

Oli

@liv-in-sky

ich bräuchte nochmals deine Hilfe.
Ich möchte mir den Gesamtverbrauch nicht in Klammern, sondern als zusätzliche Zeile anzeigen lassen.

In deinem Script habe ich folgendes Versucht jedoch ohne Erfolg, wo habe ich den Fehler?

var val1; var val2; var val0; var val3; var val4; var val5; var val6; var val7; var val8; var val9; var val10; var valStatus; var gesamtE; var gesamtkWh;

function sammleDaten() { 
 //   log(gesamtMonth.toString())
                 let anzeigeNuller=3; //log(getState(val0help+".Script_Power").val.toString())
                 let anzahlStellen=3;
                 let anzahlStellen2=3;
             if((getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".todaykWh").val).toFixed(3)=="0.000") anzeigeNuller=0; 
             if ((getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".MonBeforekWh").val).toFixed(3)=="0.000") anzahlStellen=0;
             if ((getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".monkWh").val).toFixed(3)=="0.000")  anzahlStellen2=0;    
         //    if (!anzeigeNuller){
            val6=(getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".todaykWh").val).toFixed(anzeigeNuller)+" kWh";

            if (!mitMonatBeforeAnzeige) {
                val7=(getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".monkWh").val).toFixed(anzahlStellen2)+" kWh"; 
            }else{
                val7=(getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".monkWh").val).toFixed(anzahlStellen2)+" kWh"
                gesamtkWh=(getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".MonBeforekWh").val).toFixed(anzahlStellen)+" kWh";
            }
            
            val8=(Math.round((getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".todaykWh").val)*kwhPreis*100)/100).toString()+" €";
            
            if (!mitMonatBeforeAnzeige) {
                val9=(Math.round((getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".monkWh").val)*kwhPreis*100)/100).toString()+" €"; 
            }else{
                val9=(Math.round((getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".monkWh").val)*kwhPreis*100)/100).toString()+" €"
                gesamtE=(Math.round((getState(dpPrefix+"Tabelle_EnergieRechnung."+val0+".MonBeforekWh").val)*kwhPreis*100)/100).toString()+" €";
            }




function makeJsonWidget(vax1,vax2,vax3,vax4,vax5,vax6,vax7,vax8,vax9,vax10,vaxMarke,vaxSwitchvar,gesamtE,gesamtkWh) {
   /* vax6=vax6.replace(/((ON|OFF))/g,"$1 "); log("---"+vax6) vax6=vax6.replace(/(OFF|ON).+? ((ON|OFF))/,"$3"); log("2222"+vax6)*/
     vaxMarke=pfadBilderMaterialWidget+vaxMarke+".png"
      let mycolor;
       
      if (vax1.indexOf("Gesamt")>-1) vax1="<font color=\'"+farbeMDAlleVirtPow+"\'>"+" GESAMT VirtualPower"+"</font>";
      if (vax1.indexOf("alle Geräte")>-1) vax1="<font color=\'"+farbeMDGesamtG+"\'>"+" GESAMT"+"</font>";
    // log(vax1+ " und "+ vax2 +" und "+vax3 )
 
   if ( braucheMaterialDesignWidgetTable) {
         
if (filterArrAusnahme.includes(val0)) {
  
    vax1="<font color=\'"+farbeMDEinspeisung+"\'>"+vax1+"</font>";
    vaxMarke=pfadBilderMaterialWidget+"inputk"+".png"
    mycolor=farbeMDEinspeisung;
}
 
   myJsonWidget.push({
       Device : vax1,
       marke : vaxMarke,
       Status : vax2,
       Strom : vax3,
       Spannung : vax4,
       Power : vax5,                         
       Schalter : vax6,
       kWhNow : vax7,
       kWhMonat  : vax8,
       PreisNow : vax9,
       PreisMonat : vax10       
   }
 
   );}
 
//	log(myJsonWidget)
if (braucheMaterialDesignWidget) {
 
 
 
let mysubText;
 
if (!filterArrAusnahme.includes(val0)) {
                          
    mysubText =     `<div>Strom: ${vax3} A</div> 
                      <div>Spannung: ${vax4} V</div> 
                      <div>Leistung: ${vax5} W</div>
                      <div>&ensp; </div>   
                      <div>Heute: ${vax7} kWh</div> 
                      <div>Monat: ${vax8} kWh</div>
                      <div>Gesamt: ${gesamtkWh} kWh</div>                      
                      <div>&ensp; </div>
                      <div>Heute: ${vax9} €</div> 
                      <div>Monat: ${vax10} €</div>
                      <div>Gesamt: ${gesamtE} €</div>                      
                      <div style="display: flex; flex: 1; text-align: left; align-items: center; position: relative;">
                      ${vax2}</div>`
} else {
 
    mysubText = `     <div style="color: red; font-family: RobotoCondensed-Regular">EINSPEISUNG</div>
                      <div Strom: ${vax3} A</div>
                      <div Spannung: ${vax4} V</div> 
                      <div Leistung: ${vax5} W</div>
                      <div>&ensp; </div>
                      <div>Heute: ${vax7} kWh</div> 
                      <div Monat: ${vax8} kWh</div>
                      <div>Gesamt: ${gesamtkWh} kWh</div>                       
                      <div>&ensp; </div>
                      <div>Heute:  ${vax9} €</div> 
                      <div Monat:  ${vax10} €</div>
                      <div>Gesamt: ${gesamtE} €</div>
                      <div style="display: flex; flex: 1; text-align: left; align-items: center; position: relative;">
                      ${vax2}</div>`
//  // <div>Strom:${vax3}A Spannung: ${vax4}V Leistung: ${vax5}W</div>    //font-size: 80% ;
}

Das Ergebnis sieht leider so aus

Noch eine Frage hätte ich, da ich mir den Status durch den grünen Punkt anzeigen lasse, würde ich mir gerne, in der Linie anzeigen lassen, ob das Gerät ein oder ausgeschaltet ist, was muss ich da in deinem Script ändern?

NEWS

Energieanzeige (kWh) über HTML Tabelle - vis

Support us

612
Online

31.9k
Users

80.1k
Topics

1.3m
Posts

NEWS

Energieanzeige (kWh) über HTML Tabelle - vis

Support us

612Online

31.9kUsers

80.1kTopics

1.3mPosts

612
Online

31.9k
Users

80.1k
Topics

1.3m
Posts