[Material Design CSS / MDCSS V2] Vis-Views zur Inspiration

[BoehserWolf]

@Pittini Kannte ich noch nicht, coole Nummer. Werde es mir ansehen und meins ggf. ersetzen.
Besten Dank!

[Pittini]

@Dominik-F sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

Hast du eine Idee?

Ja, Du hast die Funktion "Fenster" dem ganzen Channel inkl aller Unterelemente zugewiesen was sinnfrei ist. NUR der eine Datenpunkt welcher sich bei Öffnen/schliessen des Fensters ändert darf die Funktion "Fenster" kriegen, siehe auch Text und Bild der Installationsanweisung.

[heinzie]

@der-eine

so bin jetzt etwas weiter, habe erst einmal die Scrounger-Widgets deinstalliert.
Dann alles neu hochgefahren. Die Links laufen jetzt mit dem Menü.
Bei der Aktion sind mir nur leider die icons abhanden gekommen. Welchen Satz muss ich denn dafür installieren?

[der-eine]

@heinzie Du musst im CSS Reiter wo bei mir Testumgebung unterstrichen ist, den Namen der VIS eingeben.

[Dominik F.]

@Pittini

Okay, ich habe das nun geändert und nun kommt, sobald ich ein Fenster öffne folgender Fehler:

javascript.0	2020-03-23 11:25:37.333	error	(6849) at processImmediate (timers.js:658:5)
javascript.0	2020-03-23 11:25:37.333	error	(6849) at tryOnImmediate (timers.js:676:5)
javascript.0	2020-03-23 11:25:37.333	error	(6849) at runCallback (timers.js:705:18)
javascript.0	2020-03-23 11:25:37.333	error	(6849) at Immediate.setImmediate (/opt/iobroker/node_modules/iobroker.js-controller/lib/adapter.js:4851:37)
javascript.0	2020-03-23 11:25:37.333	error	(6849) at Object.stateChange (/opt/iobroker/node_modules/iobroker.javascript/main.js:450:25)
javascript.0	2020-03-23 11:25:37.333	error	(6849) at Object.callback (/opt/iobroker/node_modules/iobroker.javascript/lib/sandbox.js:1123:38)
javascript.0	2020-03-23 11:25:37.333	error	(6849) at Object.<anonymous> (script.js.common.Vis.Fensterauswertung:267:17)
javascript.0	2020-03-23 11:25:37.333	error	(6849) at CheckWindow (script.js.common.Vis.Fensterauswertung:137:34)
javascript.0	2020-03-23 11:25:37.333	error	(6849) Error in callback: ReferenceError: WriteEventLog is not defined

[Pittini]

@Dominik-F sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

Okay, ich habe das nun geändert und nun kommt, sobald ich ein Fenster öffne folgender Fehler:

Nochn Konfigurationsfehler. Du hast kein Eventlog, also musste das in Zeile 17 auch von true auf false setzen. Und vermutlich (kenn ja Dein setup nicht) auch bei Zeile 16.

[Dominik F.]

@Pittini

Das wars. Was ist Eventlog denn überhaupt? Zeile 16 hatte ich schon auf false, eventlog hatte ich aus Unwissenheit auf true gelassen.

[Pittini]

@Dominik-F sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

Was ist Eventlog denn überhaupt?

Eventlog is bei mir ne globale Funktion welche nur mir relevante (Viel weniger als das normale Log) Meldungen in nen DP schreibt und der wird im Vis angezeigt. Sieht dann so aus:

[der-eine]

@Pittini hast Du auch so eine "Nachrichten-Seite" wie hier erwähnt?

@Tirador sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

[Pittini]

@der-eine sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

hast Du auch so eine "Nachrichten-Seite" wie hier erwähnt?

Jaein, is bei mir "etwas" mehr, aber die Übersichtsseite käme dem nahe. Sieht so aus:

[der-eine]

@Pittini sieht gut aus
Finde die Idee gut mit den Nachrichten, dass man sie quittieren kann. Muss ich wohl
weiter suchen ob jemand anderes sowas schon gebaut hat ausser scrounger.

[Pittini]

@der-eine sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

Finde die Idee gut mit den Nachrichten, dass man sie quittieren kann.

Das gibts bei bestimmten Sachen schon bei mir auch, siehtste aber nur wenn was zum quittieren gibt, da das nen PopUp ist. Hier mal für Dich simuliert:

Das Popup holt sich den Text aus nem Datenpunkt der bei Bedarf beschrieben wird, gleichzeitig wird die sichtbarbeit dann auf true gesetzt in nem DP und da isn Binding im Vis drauf. Also eigentlich ist das Popup immer da, man siehts nur nicht.

[der-eine]

@Pittini das kommt dem schon nahe. Wenn jetzt mehrere Ereignisse zum quittieren wären, sind die dann alle in einem Fenster oder jedes Ereigniss ein Popup?
Wie hast Du das realisiert?

[Pittini]

@der-eine sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

sind die dann alle in einem Fenster oder jedes Ereigniss ein Popup?

Die werden in dem einen Popup gesammelt, gibt dann notfalls wenns zu viele werden nen Scrollbalken und die Titelzeile ändert sich von Info/Fehler, zu "Mehrere Ereignisse".

[der-eine]

@Pittini das find ich gut. Würdest Du mir das Widget zur verfügung stellen? Das heisst, Du hast einen DP in den alles reingeschrieben wird. Wie macht man das, dass nicht der erste Text vom zweiten überschrieben wird?

[darkiop]

@Dominik-F sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

ihr müsst dazu wissen, dass MD CSS und MDW von Scrounger verschiedene Versionen vom CSS nutzen und es zu Komplikationen kommen kann und in der Vergangenheit auch schon öfter kam.
Man sollte also nur das CSS von Uhula nutzen

Die Widgets von Scrounger und das CSS von Uhula funktionieren zusammen. Das was du meinst ist:

Adapter "iobroker.vis-material" = stellt eine ältere Version von Uhulas CSS bereit und das manuelle einfügen des CSS innerhalb VIS Edit.

[Dominik F.]

@darkiop

Danke für die Berichtigung!

@Pittini

Danke für die Erklärung. Ich hätte noch eine Idee dein Skript zu erweitern. Bei meinem jetzigem Fensterscript wird in einen Datenpunkt das geöffnete Fenster geschrieben. Könnte man das eventuell auch bei deinem einbringen?

[Pittini]

@der-eine sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

Würdest Du mir das Widget zur verfügung stellen? Das heisst, Du hast einen DP in den alles reingeschrieben wird. Wie macht man das, dass nicht der erste Text vom zweiten überschrieben wird?

Das is kein Widget im eigentlichen Sinn, sondern ein View, der bei allen page... Seiten mit z-order 100 unsichtbar drüberliegt.

Hier der View (einfügen in leeren View mit "Widgets importieren".

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"Mein_Zeugs.0.PopUp.PopUp","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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","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,"html_false":"<img height=35px src='/icons-mfd-svg/control_cancel.svg'>","html_true":"<img height=35px src='/icons-mfd-svg/control_cancel.svg'>"},"style":{"left":"calc(100% - 51px)","top":"0px","width":"35px","height":"35px","z-index":"101","cursor":"pointer"},"widgetSet":"basic"},{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.PopUp.Sichtbar","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","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,"class":"mdui-button mdui-center","html_false":"OK","html_true":"OK"},"style":{"left":"calc(50% - 30px)","top":"160px","z-index":"101","width":"60px","height":"20px","margin-top":"","padding-top":"5px","background-color":"silver","color":"black","border-width":"","border-color":"","border-style":"","box-shadow":"2px 2px 1px black","cursor":"pointer"},"widgetSet":"basic"},{"tpl":"tplValueString","data":{"oid":"javascript.0.PopUp.Titel","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","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},"style":{"left":"0px","top":"0px","background-color":"{javascript.0.PopUp.TitelHintergrundFarbe}","height":"35px","width":"100%","text-align":"left","padding-top":"","z-index":"50","line-height":"30px","font-weight":"bold","font-size":"18px","padding-left":"10px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","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,"html":"{javascript.0.PopUp.Text}","class":"mdui-value"},"style":{"left":"16px","top":"40px","width":"299px","height":"119px","z-index":"2","overflow-x":"","overflow-y":"auto"},"widgetSet":"basic"}]

Das wichtigere ist das dazugehörige Skript. Bei mir ist das als Globales Skript abgelegt, sodass ich aus jedem anderen Skript die Funktion aufrufen kann. Da ist das Eventlog auch mit dabei.

Spoiler

//Globales Script zum Anzeigen eines PopUp Fensters, mit Historyfunction

const praefixPopUp = "javascript.0.PopUp."
const noDuplicateMsgs = false;

//Datenpunkte anlegen 
createState(praefixPopUp + "Sichtbar", false, false, { read: true, write: true, name: "PopUp sichtbar?", type: "boolean", role: "switch", def: false }); //Legt fest ob Popup sichtbar ist
createState(praefixPopUp + "Titel", "", false, { read: true, write: true, name: "Titel des Popups", type: "string", role: "text", def: "" }); //
createState(praefixPopUp + "TitelHintergrundFarbe", "", false, { read: true, write: true, name: "Hintergrundfarbe des Titels", type: "string", role: "text", def: "" }); //
createState(praefixPopUp + "Text", "", false, { read: true, write: true, name: "Popup Text", type: "string", role: "text", def: "" }); //
createState(praefixPopUp + "Historie", "", false, { read: true, write: true, name: "History für verpasste PopUps", type: "string", role: "text", def: "" }); //


function ShowPopUp(show, PopUpText, PopUpTextTitel, PopUpBg) {
   let ActualVisibleState = getState(praefixPopUp + "Sichtbar").val; // Aktuellen Status in Variable schreiben um mehrere identische GetStates zu vermeiden
   let ActualHistory = getState(praefixPopUp + "Historie").val; //Aktuellen Historyeintrag laden

   //Prüfen ob aktueller Text schon in History vorhanden
   if (ActualHistory.search(PopUpText) == -1) { //Wenn anzuzeigender Text noch nicht in Historie
       if (ActualVisibleState == true && show == true) { //Es wird bereits ein PopUp angezeigt und ein weiteres soll gezeigt werden

           setState(praefixPopUp + "Historie", ActualHistory + "<div style=background-color:" + PopUpBg + ">" + formatDate(getDateObject((new Date().getTime())), "TT.MM. hh:mm:ss") + " - " + PopUpTextTitel + ":<br> " + PopUpText + "</div><br>");
           ActualHistory = ActualHistory + "<div style=background-color:" + PopUpBg + ">" + formatDate(getDateObject((new Date().getTime())), "TT.MM. hh:mm:ss") + " - " + PopUpTextTitel + ":<br> " + PopUpText + "</div><br>";
           setState(praefixPopUp + "Titel", "Mehrere verpasste Ereignisse"); //Titel setzen
           setState(praefixPopUp + "TitelHintergrundFarbe", "DarkOrange"); // Titelhintergrundfarbe setzen
           setState(praefixPopUp + "Text", ActualHistory); // InfoText setzen
       }
       else if (ActualVisibleState == false) { // Es wird aktuell noch kein PopUp angezeigt
           setState(praefixPopUp + "Titel", PopUpTextTitel); //Titel setzen
           setState(praefixPopUp + "TitelHintergrundFarbe", PopUpBg); // Titelhintergrundfarbe setzen
           setState(praefixPopUp + "Text", formatDate(getDateObject((new Date().getTime())), "TT.MM. hh:mm:ss") + " - " + PopUpText); // InfoText setzen
           setState(praefixPopUp + "Sichtbar", show); // Anzeigen
           setState(praefixPopUp + "Historie", ActualHistory + "<div style=background-color:" + PopUpBg + ">" + formatDate(getDateObject((new Date().getTime())), "TT.MM. hh:mm:ss") + " - " + PopUpTextTitel + ":<br> " + PopUpText + "</div><br>")
       };
   }
   else {
       log("Text ist schon mal da = " + ActualHistory.search(PopUpText));
   };
};

function ClearPopUp() { // Alle Werte leeren
   setState(praefixPopUp + "Titel", "");
   setState(praefixPopUp + "TitelHintergrundFarbe", "");
   setState(praefixPopUp + "Text", "");
   setState(praefixPopUp + "Historie", "");
};

on(praefixPopUp + "Sichtbar", function (dp) { //Bei Statusänderung
   if (getState(praefixPopUp + "Sichtbar").val == false) {
       ClearPopUp();
   };
});


//Script um Events zu loggen

const praefixEventLog = "javascript.0.EventLog.";
const MaxEventEntrys = 16;
let LastEventText = "";

let QueueTimeout = 0;
//Datenpunkt anlegen 
createState(praefixEventLog + "EventList", "", false, { read: true, write: true, name: "Eventlog Text", type: "string", role: "text", def: "" }); //
createState(praefixEventLog + "MsgCounter", 0, false, { read: true, write: true, name: "Zählt die Nachrichten", type: "number", def: 0 });

function WriteEventLog(EventText) {

   if ((EventText != LastEventText && noDuplicateMsgs == true) || noDuplicateMsgs==false) { //Wiederholungen vermeiden
       LastEventText = EventText;

       log("Timeout=" + QueueTimeout);
       setTimeout(function () { //
           let EventList = getState(praefixEventLog + "EventList").val;

           let MsgCounter = getState(praefixEventLog + "MsgCounter").val; //Nachrichtenzähler laden, erhöhen und schreiben
           MsgCounter++;
           setState(praefixEventLog + "MsgCounter", MsgCounter);

           //log(EventText);
           let numNewlines = EventList.split('>').length - 1; // Anzahl der Zeilen in der Eventlist ermitteln.
           //log(EventList.split('>').length - 1 + "via Split - "+numNewlines + " via Schleife") ; 

           if (numNewlines + 1 >= MaxEventEntrys) { // Wenn max Anzahl an Einträgen überschritten
               EventList = EventList.substr(EventList.indexOf(">") + 1, EventList.length); //Ältesten Eintrag löschen
           };

           //log(numNewlines.toString());
           if (EventList != "") {
               EventList = EventList + "<br>" + formatDate(getDateObject((new Date().getTime())), "TT.MM. hh:mm:ss") + " - " + EventText;
               //setState(praefixEventLog + "EventList", EventList + "<br>" + formatDate(getDateObject((new Date().getTime())), "TT.MM. hh:mm:ss") + " - " + EventText);
               setState(praefixEventLog + "EventList", EventList);
           }
           else {
               EventList = formatDate(getDateObject((new Date().getTime())), "TT.MM. hh:mm:ss") + " - " + EventText;
               //setState(praefixEventLog + "EventList", formatDate(getDateObject((new Date().getTime())), "TT.MM. hh:mm:ss") + " - " + EventText);
               setState(praefixEventLog + "EventList", EventList);
           };

           //log(EventList);
       }, QueueTimeout);
       QueueTimeout = QueueTimeout + 200;
   };
   setTimeout(function () { //Timeout wieder resetten
       QueueTimeout = 0;
   }, 2000);

};

Sobald Du das drin hast, kannst von jeder beliebigen Funktion aus, mit:

ShowPopUp(true, "Fehler: Brenner aus, oder Stromausfall", "Heizung", "red");

wobei der erste Parameter das Popup sichtbar schaltet, der 2te den Text angibt, der 3te den Kopfzeilentext, der 4te die Kopfzeilenhintergrundfarbe definiert, das PopUp aktivieren. Es werden Datenpunkte angelegt:

Die Datenpunkte dürften selbsterklärend sein.

Beim Eventlog isses weniger, ein Text ist zu übergeben, Zeitstempel fügt das Skript automatisch bei.

WriteEventLog("Fehler: Heizung Brenner aus, oder Stromausfall");

Viel Spaß

[der-eine]

@Pittini Danke schau ich mir an. Hoffe ich kann mich melden wenn was unklar ist?

[Pittini]

@der-eine sagte in [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration:

Hoffe ich kann mich melden wenn was unklar ist?

Na klar.