[gelöst] Wertabhängige Liste farbig darstellen VIS

AFi

Soll natürlich heißen:
"Für das Ziel muss es natürlich nicht unbedingt das verwendete Widget sein"

VG

AFi

Für die beiden Listen "unreach" und "low batterie" wollt ich eigentlich noch Bilder einfügen in die erste Spalte, bzw. kleine Pictogramm!

AFi

Hi,
ein gutes Neues Jahr an alle, war leider etwas platt nach Weihnachten. Keiner eine Idee oder muss
ich Ziel besser definieren.
VG AFi

AFi

Hi,
funktioniert es eventuell über HTML und CSS in einem HTML-Basic widget, muss jedoch ergänzen, dass ich bisher diese Sprachen nicht wirklich verstehe, benötige dann Code Schnipsel über die ich mich an das Ziel herantasten kann.

VG AFi

OliverIO

@AFi

hast du evtl mal den inhalt eines der datenpunkte wo das json reingeschrieben wird?
dem blockly nach müsste das bspw 0_userdata.0.Diverses.Batteriefuellgrad sein.

Dann könnte ich dir mittels dem json-template widget aus dem gleichnamigen adapter die Tabelle nachbilden. Für welche Werte/Wertbereiche willst du welche Farben?

ein export des zugehörigen widgets wäre ebenfalls nicht schlecht, damit farben layout entsprechend passen

AFi

Hi Oliver,

anbei json Tabelle:

[
  [
    "11",
    "%  KG SW Zim HZKT"
  ],
  [
    "22",
    "%  OG Hobby Zim HZKT"
  ],
  [
    "25",
    "%  EG WZ Tuergr Kontakt"
  ],
  [
    "25",
    "%  Haust Türkont"
  ],
  [
    "25",
    "%  Leo Dachf Kont gr Raum"
  ],
  [
    "25",
    "%  OG Hobby Zim Dachfensterk"
  ],
  [
    "33",
    "%  ELW Schlafz Fensterk"
  ],
  [
    "33",
    "%  EG WC HZKT"
  ],
  [
    "33",
    "%  Haustür Gang HZKT"
  ],
  [
    "33",
    "%  Leo Dachf HZKT"
  ],
  [
    "44",
    "%  OG Buero HZKT"
  ],
  [
    "50",
    "%  Leo Dachfe Kont kl Raum"
  ],
  [
    "50",
    "%  OG WC Dachfenster Kont"
  ],
  [
    "56",
    "%  OG Bad HZKT"
  ],
  [
    "56",
    "%  OG Bad WTH"
  ],
  [
    "56",
    "%  EG Kueche HZKT"
  ],
  [
    "56",
    "%  EG Kueche Fensterk"
  ],
  [
    "56",
    "%  EG WZ HZKT Front"
  ],
  [
    "56",
    "%  ELW Bad Fensterk"
  ],
  [
    "56",
    "%  KG Bad HZKT"
  ],
  [
    "56",
    "%  Leo Fensterk"
  ],
  [
    "56",
    "%  OG Gast Fenster Kontakt"
  ],
  [
    "56",
    "%  OG Gast HZKT"
  ],
  [
    "56",
    "%  OG WC HZKT"
  ],
  [
    "67",
    "%  EG WC Fensterk"
  ],
  [
    "67",
    "%  EG WZ Fenterk Fliegeng"
  ],
  [
    "67",
    "%  ELW Bad HZKT"
  ],
  [
    "67",
    "%  ELW Bad WTH"
  ],
  [
    "67",
    "%  ELW Nebenz Fensterk"
  ],
  [
    "67",
    "%  KE Sauna WTH"
  ],
  [
    "67",
    "%  OG Hobby Zim Fensterk"
  ],
  [
    "67",
    "%  OG Hobby Zim WTH"
  ],
  [
    "67",
    "%  OG Buero WTH"
  ],
  [
    "67",
    "%  OG Buero Fensterk"
  ],
  [
    "75",
    "%  OG Bad Dachfe Kont"
  ],
  [
    "75",
    "%  KG Sauna Fensterk"
  ],
  [
    "78",
    "%  ELW Schlafz WTH"
  ],
  [
    "78",
    "%  Temp Feuchte Nordseite Haus"
  ],
  [
    "78",
    "%  Wintegarten Temp Feuchte"
  ],
  [
    "78",
    "%  EG Kueche WTH"
  ],
  [
    "78",
    "%  EG WZ Fensterk Front"
  ],
  [
    "78",
    "%  EG WZ Fenterk Garten"
  ],
  [
    "78",
    "%  EG WZ Fensterk Gartent"
  ],
  [
    "78",
    "%  EG WZ Fensterk Nachbar"
  ],
  [
    "78",
    "%  KG Gang WTH"
  ],
  [
    "78",
    "%  KG Sauna HZKT"
  ],
  [
    "78",
    "%  Leo WTH"
  ],
  [
    "89",
    "%  ELW Schlafz HZKT"
  ],
  [
    "89",
    "%  EG WZ Bewegme"
  ],
  [
    "89",
    "%  EG WZ HZKT Nachbar"
  ],
  [
    "89",
    "%  EG WZ WTH"
  ],
  [
    "89",
    "%  ELW Nebenz HZKT"
  ],
  [
    "89",
    "%  OG Gast WTH"
  ],
  [
    "100",
    "%  EG WZ HZKT Garten"
  ],
  [
    "100",
    "%  Leo HZKT Fenster"
  ]
]

Folgende möglich Einteilung:
< 20% rot
20 bis 30 % orange
30 bis 50 % hellorange

50% grün

Anbei Export Widget

[{"tpl":"tplVis-materialdesign-Table","data":{"oid":"0_userdata.0.Diverses.Batteriefuellgrad","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"countCols":"1","tableLayout":"standard","showHeader":true,"roundBorder":"true","headerTextSize":"#mdwTheme:vis-materialdesign.0.fontSizes.table.header","headerFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.table.header","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.table.background","colorHeaderRowBackground":"#337fe1","colorHeaderRowText":"#000000","colorRowBackground":"#mdwTheme:vis-materialdesign.0.colors.table.row_background","colorRowBackgroundHover":"#mdwTheme:vis-materialdesign.0.colors.table.row_hover","colorRowText":"#mdwTheme:vis-materialdesign.0.colors.table.row_text","borderColor":"#mdwTheme:vis-materialdesign.0.colors.table.border","dividers":"#mdwTheme:vis-materialdesign.0.colors.table.dividers","showColumn0":"true","colType0":"text","textAlign0":"right","colTextSize0":"#mdwTheme:vis-materialdesign.0.fontSizes.table.row","fontFamily0":"#mdwTheme:vis-materialdesign.0.fonts.table.row","showColumn1":"true","colType1":"text","textAlign1":"left","colTextSize1":"#mdwTheme:vis-materialdesign.0.fontSizes.table.row","fontFamily1":"#mdwTheme:vis-materialdesign.0.fonts.table.row","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","colTextSize2":"#mdwTheme:vis-materialdesign.0.fontSizes.table.row","fontFamily2":"#mdwTheme:vis-materialdesign.0.fonts.table.row","showColumn3":"true","colType3":"text","textAlign3":"center","colTextSize3":"#mdwTheme:vis-materialdesign.0.fontSizes.table.row","fontFamily3":"#mdwTheme:vis-materialdesign.0.fonts.table.row","fixedHeader":true,"label0":"Füllgrad","label1":"Bezeichnung","columnWidth0":"89","headerRowHeight":"8","colNoWrap0":false,"padding_left0":"0","padding_right1":"-6","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","rowHeight":"0","padding_right0":"2","colTextColor1":"","imageSize0":"0","columnWidth1":"520","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,"imageSize1":"0"},"style":{"left":"30px","top":"54px","width":"357px","height":"612px","z-index":2},"widgetSet":"materialdesign"}]

Hoffe das passt so.
Wir fangen mal mit der linken Tabelle an, ev. bring ich dann die beiden
anderen Tabellen selbst hin, da geht es ja nur noch um true und false, bzw. 0 und 1.

VG Axel

OliverIO

Hier mal ein erster Wurf, da kann man noch nachjustieren

Als erstes den Adapter json-template installieren.
In vis müsste dann das widget JSON Template4 auftauchen

dannach das folgende widget importieren und den Datenpunkt anpassen

[{"tpl":"tplJSONTemplate4","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","json_dpCount":"1","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_template":"<% \nconst colorRules = [\n  { max: 20,                 color: \"#ff0000\" }, // < 20%  -> rot\n  { min: 20, max: 30,        color: \"#ff9900\" }, // 20-30% -> orange\n  { min: 30, max: 50,        color: \"#ffcc80\" }, // 30-50% -> hellorange\n  // optional: \"default\"-Regel für alles darüber\n  { min: 50,                 color: \"#00aa00\" }  // Beispiel: >= 50% -> grün\n];\nfunction colorForPercent(value, rules) {\n  const v = Number(value);\n\n  for (const rule of rules) {\n    const minOk = rule.min === undefined || v >= rule.min;\n    const maxOk = rule.max === undefined || v < rule.max;\n\n    if (minOk && maxOk) return rule.color;\n  }\n\n  return null; // oder eine Default-Farbe wie \"#000\"\n}\n%>\n\n<style>\n#<%- widgetID %> {\n    .table-wrapper{\n      height: 100%;          /* nutzt die 237px von #w00001 */\n      overflow-y: auto;      /* vertikal scrollen */\n      overflow-x: auto;      /* optional horizontal */\n    }\n    table {\n        color:#44739e;\n        box-sizing:border-box;\n        border-collapse: collapse;\n        white-space: normal;\n        height:100%\n    }\n    thead {\n\n    }\n    thead th {\n        height: 8px;\n        font-size:110%;\n        position: sticky;\n        top: 0;\n        z-index: 2;\n        color:#000000;\n        background-color:#337fe1;\n    }\n    td,th {\n        padding-left:2px;\n        padding-right:8px;\n    }\n    .col1 {\n        text-align:right;\n    }\n}\n</style>\n<div class=\"table-wrapper\">\n  <table>\n\t<thead>\n\t\t<tr>\n\t\t\t<th style=\"text-align: right;\">\n\t\t\t  Füllgrad\n\t\t\t</th>\n\t\t\t<th style=\"text-align: left;\">\n                Bezeichnung\n\t\t\t</th>\n\t\t</tr>\n\t</thead>\n\t<tbody>\n    <%\n    data=data.sort((a, b) => a[0] - b[0]);\n    for (var i = 0; i < data.length ; i++ ) {\n    let el=data[i] \n    %>\n\t\t<tr>\n\t\t\t<td class=\"col1\" style=\"background-color:<%- colorForPercent(el[0], colorRules) %>\">\n                <%- el[0] %>\n            </td>\n\t\t\t<td class=\"col2\">\n                <%- el[1] %>\n            </td>\n\t\t</tr>\n    <% } %>\n\t</tbody>\n</table>\n</div>\n","class":"","json_oid":"0_userdata.0.table"},"style":{"left":"47px","top":"16px","width":"337px","height":"337px","background-color":"","color":"","font-style":"","background":"#ffffff"},"widgetSet":"vis-jsontemplate"}]

AFi

@OliverIO Hi, erst mal herzlichen Dank für den ersten Entwurf. Was ist das für eine Sprache?

Leider sind noch Fehler vorhanden, im VIS Editor sieht es noch gut aus, jedoch VIS runtime bringt Fehler.

Zur Ergänzung wären folgende Wünsche / Anmerkungen offen:

du sortierst die Liste nochmals, wenn ich dies richtig sehe, sollte nicht nötig sein, da in Blockly vorsortiert
mir wäre doch lieber, wenn die Texte farbig sind und natürlich beide Spalten.

VG Axel

OliverIO

@AFi

so hier die korrigierte Version.
Da hat leider der binding mechanismus von vis zugeschlagen.
der mag komprimierte JSON-Notation nicht so bzw. interpretiert das als binding.
Die Sortierung habe ich auskommentiert
Die Farbgebung habe ich nun auf Spalte 1 und Spalte 2 angewendet
Anstatt den Hintergrund habe ich nun die Schrift eingefärbt. Die eine Farbe müsste man wahrscheinlich noch anpassen, die ist vor Weißem Hintergrund schlecht lesbar.

[{"tpl":"tplJSONTemplate4","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","json_dpCount":"1","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_template":"<% \nconst colorRules = [\n  { \n    max: 20,\n    color: \"#ff0000\" \n  }, // < 20%  -> rot\n  { \n    min: 20, \n    max: 30,\n    color: \"#ff9900\"\n  }, // 20-30% -> orange\n  {\n    min: 30,\n    max: 50,\n    color: \"#ffcc80\"\n  }, // 30-50% -> hellorange\n  // optional: \"default\"-Regel für alles darüber\n  {\n    min: 50,\n    color: \"#00aa00\"\n  }  // Beispiel: >= 50% -> grün\n];\nfunction colorForPercent(value, rules) {\n  const v = Number(value);\n\n  for (const rule of rules) {\n    const minOk = rule.min === undefined || v >= rule.min;\n    const maxOk = rule.max === undefined || v < rule.max;\n\n    if (minOk && maxOk) return rule.color;\n  }\n\n  return null; // oder eine Default-Farbe wie \"#000\"\n}\n%>\n\n<style>\n#<%- widgetID %> {\n    .table-wrapper{\n      height: 100%;          /* nutzt die 237px von #w00001 */\n      overflow-y: auto;      /* vertikal scrollen */\n      overflow-x: auto;      /* optional horizontal */\n    }\n    table {\n        color:#44739e;\n        box-sizing:border-box;\n        border-collapse: collapse;\n        white-space: normal;\n        height:100%\n    }\n    thead {\n\n    }\n    thead th {\n        height: 8px;\n        font-size:110%;\n        position: sticky;\n        top: 0;\n        z-index: 2;\n        color:#000000;\n        background-color:#337fe1;\n    }\n    td,th {\n        padding-left:2px;\n        padding-right:8px;\n    }\n    .col1 {\n        text-align:right;\n    }\n}\n</style>\n<div class=\"table-wrapper\">\n  <table>\n\t<thead>\n\t\t<tr>\n\t\t\t<th style=\"text-align: right;\">\n\t\t\t  Füllgrad\n\t\t\t</th>\n\t\t\t<th style=\"text-align: left;\">\n                Bezeichnung\n\t\t\t</th>\n\t\t</tr>\n\t</thead>\n\t<tbody>\n    <%\n    //data=data.sort((a, b) => a[0] - b[0]);\n    for (var i = 0; i < data.length ; i++ ) {\n    let el=data[i] \n    %>\n\t\t<tr>\n\t\t\t<td class=\"col1\" style=\"color:<%- colorForPercent(el[0], colorRules) %>\">\n                <%- el[0] %>\n            </td>\n\t\t\t<td class=\"col2\"style=\"color:<%- colorForPercent(el[0], colorRules) %>\">\n                <%- el[1] %>\n            </td>\n\t\t</tr>\n    <% } %>\n\t</tbody>\n</table>\n</div>\n","class":"","json_oid":"0_userdata.0.table"},"style":{"left":"43px","top":"33px","width":"388px","height":"337px","background-color":"","color":"","font-style":"","background":"#ffffff"},"widgetSet":"vis-jsontemplate"}]

Sprache

Die verwendete technologie ist ein Template-System, welches die Mischung von HTML/CSS/JS möglich macht. Bei der Anzeige werden die bereitgestellten Daten als Variablen bereitgestellt und können dann als Javascript in das HTML eingefügt werden.
Mehr Details dazu in der Adapter Beschreibung
https://github.com/oweitman/ioBroker.vis-jsontemplate
Damit kann man dann, entsprechendes Wissen zu HTML/JS/CSS vorausgesetzt. eigene Widgets relativ einfach umsetzen, ohne gleich einen ganzen Adapter zu erstellen.

AFi

super, passt Danke.

VG

Community Forum

NEWS

[gelöst] Wertabhängige Liste farbig darstellen VIS

Support us

357

32.6k

82.1k

1.3m