Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • Dominik F.
      Dominik F. @darkiop last edited by

      @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?

      P 1 Reply Last reply Reply Quote 0
      • P
        Pittini Developer @der-eine last edited by

        @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".

        [{"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.

        //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:

        Inked2020-03-23 12_42_27-objects - ioBroker_LI.jpg
        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ß

        D 1 Reply Last reply Reply Quote 2
        • D
          der-eine @Pittini last edited by

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

          1 Reply Last reply Reply Quote 0
          • P
            Pittini Developer last edited by

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

            Hoffe ich kann mich melden wenn was unklar ist?

            Na klar.

            1 Reply Last reply Reply Quote 0
            • P
              Pittini Developer @Dominik F. last edited by Pittini

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

              Bei meinem jetzigem Fensterscript wird in einen Datenpunkt das geöffnete Fenster geschrieben. Könnte man das eventuell auch bei deinem einbringen?

              Also wenn das nicht langt was schon drin ist weis ich ja auch nimmer? Willst jetzt noch wissen ob das rechte oder linke Fenster im Raum offen ist? Wenn ja fände ich das übertrieben. Aber klar, grundsätzlich kann man alles einbauen, aber ich seh in dem Fall keinen Grund, außer Du kannst mir einen erklären. Oder meinst sowas wie nen DP ala "Fenster offen in": und dann als Wert entweder "nirgends", oder halt ne Liste mit Räumen mit offenen Fenstern?

              2020-03-23 12_56_25-Window.png

              Dominik F. 1 Reply Last reply Reply Quote 0
              • H
                heinzie @der-eine last edited by

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

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

                Bildschirmfoto 2020-03-23 um 10.35.00.png

                Danke, jetzt läuft es.

                1 Reply Last reply Reply Quote 0
                • Dominik F.
                  Dominik F. @Pittini last edited by

                  @Pittini

                  Genau sowas meine ich. Ich lasse mir in meiner vis anzeigen ob ein Fenster auf ist, das geht mit deinem Script ja auch. Dann hab ich das momentan noch so, dass ich auf einen Button klicken kann, dann geht ein Pop up auf und dort steht dann welches Fenster auf ist. Da würde es aber auch reichen wenn dort stehen würde 1,2 oder 3 Fenster im Wohnzimmer sind geöffnet oder alle Fenster sind verschlossen.
                  Ich nutze das um, bevor ich ins Bett gehe oder das Haus verlasse, kurz zu schauen ob alle Fenster/Türen zu sind und wenn nicht mit einem Klick sehen zu können wo noch eine offen ist.
                  Screenshot_20200323_153908_com.android.chrome.jpg

                  P 1 Reply Last reply Reply Quote 0
                  • P
                    Pittini Developer @Dominik F. last edited by Pittini

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

                    Da würde es aber auch reichen wenn dort stehen würde 1,2 oder 3 Fenster im Wohnzimmer sind geöffnet oder alle Fenster sind verschlossen.

                    Kann man natürlich einbauen, man kann auch nehmen was da ist und es verwenden. Deswegen sind ja alle Räume aufgelistet. Sieht bei mir so aus:
                    2020-03-23 15_56_15-vis.png

                    Mich interessierts nicht wieviele Fenster im Raum offen sind, deswegen lass ich das nicht mit anzeigen, aber die Info ist ja ebenfalls da und müßte nur im View mit eingebaut werden.

                    Dominik F. 1 Reply Last reply Reply Quote 0
                    • Dominik F.
                      Dominik F. @Pittini last edited by

                      @Pittini

                      Mir fehlt dafür einfach das nötige know how um eine sich verändernde Liste mit den Datenpunkten zu visualisieren die mir nur die Räume auflistet wo Fenster offen sind. Ist das mit dem Datenpunkten von dir soweit möglich? Oder müsste ich alle auflisten und die mit dem offenen Fenster hervorheben?

                      P 1 Reply Last reply Reply Quote 0
                      • P
                        Pittini Developer @Dominik F. last edited by Pittini

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

                        Ist das mit dem Datenpunkten von dir soweit möglich? Oder müsste ich alle auflisten und die mit dem offenen Fenster hervorheben?

                        Es sind alle Datenpunkte da um ne Liste dynamisch zu erzeugen, bräuchte aber dazu nen extra Skript oder ne Erweiterung meines Skriptes (in meinem HeatingControl Skript wird obige Liste dynamisch erzeugt, aber auch mit allen Räumen, nicht nur offene).
                        Mein obiger Ansatz läßt sich aber statisch bauen, pro Raum ein Bildchen und ein Text oder HTML Widget (oder zwei wenn die Anzahl noch dazu soll), Farbwechsel wenn Fenster offen mit berechnetem Binding, das geht alles mit Vis Bordmitteln.
                        Hier mal so ein berechnetes Binding aus meiner Seite als Beispiel (kommt beim Widget in CSS-Klasse), musst natürlich abändern:

                        {val:heatingcontrol.0.Rooms.Wohnzimmer.WindowIsOpen;val=="true"? "mdui-red-ol mdui-red ":  "mdui-green mdui-green-ol"} mdui-button-outlined
                        

                        PS: Warum ich mich grad gegen so ne Erweiterung sperre, ist, das Fenster Skript soll möglichst generisch bleiben, bau ich jetzt ne dynamische Liste/Tabelle etc. ein, kommt der nächste und will es mit Bild, der nächste ohne Bild, der dritte braucht noch ne Spalte mehr usw. Letztendlich müsste ich dann noch nen View dazu bauen damit Einsteiger klar kommen, da will dann aber einer mit MaterialDesign, der andere ohne....Du verstehst worauf ich raus will?

                        Dominik F. 1 Reply Last reply Reply Quote 0
                        • Dominik F.
                          Dominik F. @Pittini last edited by Dominik F.

                          @Pittini

                          Das kann ich nachvollziehen. Wäre es dann nicht am einfachsten einen zusätzlichen Datenpunkt zu erzeugen und dort die Räume mit offenen Fenstern aufzulisten (einfach durch n komma oder n Zeilenumbruch getrennt) und wenn kein Fenster geöffnet ist dort rein zu Scheiben :alle Fenster sind geschlossen.?
                          Wäre doch eine sinnvolle Erweiterung für dein Skript.
                          Ich versuche das was du vorgeschlagen hast zu vermeiden da ich momentan nur die vis mit einem Handy nutze und da nicht so den Platz habe und vieles möglichst komprimiert auf der Startseite anzeigen lassen möchte / muss. So eine zusätzliche view nimmt einfach zu viel Platz auf der Startseite weg mit dem Handy

                          Edit : warum ich dich so damit nerve ist das ich dein Skript grundsätzlich schöner finde mit den Räumen und das es auch hm erkennt im Gegensatz zu meinem jetzigen.
                          Wenn du das nicht möchtest, würdest du mir helfen dein Skript für mich so umzubauen mit dem Datenpunkt?

                          P 1 Reply Last reply Reply Quote 0
                          • P
                            Pittini Developer @Dominik F. last edited by

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

                            Wäre es dann nicht am einfachsten einen zusätzlichen Datenpunkt zu erzeugen und dort die Räume mit offenen Fenstern aufzulisten (einfach durch n komma oder n Zeilenumbruch getrennt) und wenn kein Fenster geöffnet ist dort rein zu Scheiben :alle Fenster sind geschlossen.?

                            Ich schau mal wie ich das unterkriege, siehs als ein "wahrscheinlich kommts".

                            Wenn du das nicht möchtest, würdest du mir helfen dein Skript für mich so umzubauen mit dem Datenpunkt?

                            Macht kein Sinn, kommtn update sind die persönlichen Änderungen wieder weg.

                            Dominik F. 1 Reply Last reply Reply Quote 1
                            • Dominik F.
                              Dominik F. @Pittini last edited by

                              @Pittini

                              Ich danke dir 🙂

                              P 1 Reply Last reply Reply Quote 0
                              • T
                                Tirador last edited by

                                Guten Abend, ich habe mein VIS Projekt nun neu exportiert.

                                Leider ist die Datei nun größer als die maximale zulässige Größe (5 MB) für das Forum.
                                Sieht so aus, als müssten wir die Dateien nun auslagern. Ein splitten der Dateien kann es ja nun nicht sein oder?

                                P D 2 Replies Last reply Reply Quote 0
                                • P
                                  Pittini Developer @Tirador last edited by

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

                                  Sieht so aus, als müssten wir die Dateien nun auslagern.

                                  Dafür gibts ja Git.

                                  T 1 Reply Last reply Reply Quote 0
                                  • T
                                    Tirador @Pittini last edited by

                                    @Pittini Können wir da alle einfach die Dateien teilen oder legt jetzt jeder von uns ein Repository an bei Github?

                                    P 1 Reply Last reply Reply Quote 0
                                    • D
                                      darkiop Most Active @Tirador last edited by darkiop

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

                                      Guten Abend, ich habe mein VIS Projekt nun neu exportiert.
                                      Leider ist die Datei nun größer als die maximale zulässige Größe (5 MB) für das Forum.
                                      Sieht so aus, als müssten wir die Dateien nun auslagern. Ein splitten der Dateien kann es ja nun nicht sein oder?

                                      Einfach als Textdatei speichern und diese hier im Beitrag hochladen.

                                      T 1 Reply Last reply Reply Quote -1
                                      • T
                                        Tirador @darkiop last edited by

                                        @darkiop verstehe noch nicht so ganz wie das jetzt gehen soll. Hochladen ist auch als Textdatei auf 5 MB beschränkt.

                                        1 Reply Last reply Reply Quote 0
                                        • T
                                          Tirador last edited by Tirador

                                          @Pittini @Dominik-F

                                          Ich glaube wir haben ein ähnliches Interesse an offenen Fenstern 🙋 ☺

                                          Meine Ideen zu der "Status Übersicht Card":

                                          Alle relevanten IOBroker Datenpunkte/ Zustände / Ereignisse sollen auf einen Blick erkennbar sein.
                                          Ereignisse sind dabei Alarme, Warnungen und Informationen.
                                          Im Prinzip ist es eine Art Home Screen (wie man es vom Handy / Tablet kennt).

                                          Folgende Zustände / Ereignisse schweben mir konkret vor:

                                          • Alarmanlage
                                          • Wasseralarm
                                          • Erinnerung Fenster lüften!
                                          • Fenster zu lange geöffnet!
                                          • Offene Fenster
                                          • Offene Türen
                                          • Lichter angeschaltet
                                          • Aktiv Steckdosen
                                          • Post im Briefkasten
                                          • Müllabfuhr
                                          • Termine des Tages
                                          • Termine von Morgen
                                          • Verpasster Anruf (des Tages)

                                          In meiner Vorstellung haben diese Ereignisse dann noch eine Priorität untereinander, d.h.
                                          ganz oben sehe ich die kritischen Zustände (Wasseralarm, Hausalarm, dann offene Türen/Fenster und erst dann Info-Meldungen wie "Post im Briefkasten" , Verpasster Anruf etc. ).
                                          Der Clou ist das Vorgänge, die nicht existieren aus der Liste verschwinden, so dass man wirklich nur die relevanten Informationen kompakt sieht.

                                          Bei den offenen / angeschalteten Geräte/Objekte (Lichter, Steckdosen, Fenster, Türen etc.) sollen auch auch die Anzahl angezeigt werden.
                                          Zu jedem Ereignis (offene Fenster, offene Türen) soll man außerdem erkennen, wann es:

                                          • zuerst eingetreten ist
                                          • zuletzt eingetreten
                                          • wie lange der Zustand schon andauert (z.B. 30 Minuten)).

                                          Ideen für die Umsetzung:
                                          Aufbau Skript zum Zählen der Objekte
                                          Aufbau Skript zum Sammeln aller Informationen für die Status Card in einer JSON-Tabelle / Datenpunkt.
                                          Bereitstellung einer Javascript Logfunktion, um Nachrichten zu melden. Dabei ist folgendes zu beachten:

                                          • Nachrichten existieren z.T. nur einmalig (beim Einwurf im Briefkasten zählt nur die letzte Nachricht)

                                          Erstellen eines neuen Widgets (mit "Fancy Design" zur optisch schönen Darstellung der wesentlichen Informationen).

                                          Was meint Ihr?

                                          P 1 Reply Last reply Reply Quote 0
                                          • P
                                            Pittini Developer @Tirador last edited by

                                            Ähnlich wie Dir das vorschwebt hab ich etliches schon realisiert. Bei mir ist das alles Modular aufgebaut, einzelne Skripte wo nötig, Einstellungsviews dazu, Ausgabe über ein globales Skript welches die Meldungen in einem Eventlog zusammenfasst.
                                            Hier z.B. die Alarme, die laufen alle über ein Skript:
                                            2020-03-23 21_16_24-Window.png

                                            Müllabfuhr (Restmüll, Grüne Tonne, Gelber Sack), ebenfalls ein Skript:
                                            2020-03-23 21_18_21-vis.png

                                            Steckdosen und Lichter, nur ein Miniskript um den aktuellen Gesamtverbrauch zu ermitteln, der Rest direkt im Vis zusammengefasst:
                                            2020-03-23 21_21_22-vis.png

                                            Offene Fenster ein Skript, Liste mit Farbwechsel bei offen und Anzeige der letzten Aktionszeit:
                                            2020-03-23 21_23_25-vis.png

                                            Post im Briefkasten, kleines Skript, Meldung via Popup, Eintrag im Eventlog und Symbol mit Bild und Farbwechsel:
                                            2020-03-23 21_26_02-vis.png 2020-03-23 21_26_47-vis.png

                                            Etliches davon hab ich in meiner Statuszeile zusammengefasst, alles mit Farbwechsel/blinken, Von links nach rechts:

                                            • Die ersten 3 zeigen die VM von Proxmox, Laufzeit und rot wenn eine hängt
                                            • Dann die Müllabfuhr, mit Datum und Anzahl Tage bis Abholung
                                            • Daneben Anzahl der Personen im Haus, rot wenn keiner da
                                            • Gefolgt von Außentemp und Feuchtigkeit mit Indikatorpfeilen (steigend, gleichbleibend, fallend), Haus wird blau bei Frost
                                            • rechts davon Warnungen vom Deutschen Wetterdienst (DWD), gefolgt von Lichtstärke (Lux) außen, wenn Sonnenschein erkannt wird Sonnensymbol gelb
                                            • Screenlock Anzeige/Schalter, damit kann man den Screen gegen unabsichtliche Bedienung sperren
                                            • Batterie Gesamtstatus, wenn rot ist irgendwo ne Batt fast leer, welche genau, dafür gibts nen extra View
                                            • Füllstand meine Kochgasflasche, Farbwechsel grün/gelb/rot
                                            • Postanzeige, Farbwechsel grün/rot
                                            • Fensteranzeige, rot sobald eines geöffnet, Details in der Liste bzw. Extraviews
                                            • Ton Mute Anzeige/Schalter damit mein Snips auch mal die Klappe hält
                                            • Zündungen meiner Heizung

                                            2020-03-23 21_31_21-vis.png

                                            Insgesamt hab ich fast 100 Views, wennst irgendwas brauchst mußt halt sagen, etliches is zugegebenermaßen mit heißer Nadel gestrickt, vorallem da wo ich keine Veröffentlichung vorhatte.

                                            T 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            447
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            22
                                            191
                                            22532
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo