Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.6k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.8k

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
191 Beiträge 22 Kommentatoren 29.2k Aufrufe 43 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • D der-eine

    @Pittini sieht gut aus :+1:
    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.

    P Offline
    P Offline
    Pittini
    Developer
    schrieb am zuletzt editiert von Pittini
    #79

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

    2020-03-23 12_08_04-vis.png

    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.

    D 1 Antwort Letzte Antwort
    0
    • P 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:

      2020-03-23 12_08_04-vis.png

      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.

      D Offline
      D Offline
      der-eine
      schrieb am zuletzt editiert von
      #80

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

      P 1 Antwort Letzte Antwort
      0
      • D 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? :grin:

        P Offline
        P Offline
        Pittini
        Developer
        schrieb am zuletzt editiert von
        #81

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

        D 1 Antwort Letzte Antwort
        0
        • P 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".

          D Offline
          D Offline
          der-eine
          schrieb am zuletzt editiert von
          #82

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

          P 1 Antwort Letzte Antwort
          0
          • D Online
            D Online
            darkiop
            Most Active
            schrieb am zuletzt editiert von
            #83

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

            Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

            Dominik F.D 1 Antwort Letzte Antwort
            0
            • D 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.D Offline
              Dominik F.D Offline
              Dominik F.
              schrieb am zuletzt editiert von
              #84

              @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 Antwort Letzte Antwort
              0
              • D 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?

                P Offline
                P Offline
                Pittini
                Developer
                schrieb am zuletzt editiert von
                #85

                @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 Antwort Letzte Antwort
                2
                • P 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".

                  [{"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 Offline
                  D Offline
                  der-eine
                  schrieb am zuletzt editiert von
                  #86

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

                  1 Antwort Letzte Antwort
                  0
                  • P Offline
                    P Offline
                    Pittini
                    Developer
                    schrieb am zuletzt editiert von
                    #87

                    @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 Antwort Letzte Antwort
                    0
                    • Dominik F.D 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?

                      P Offline
                      P Offline
                      Pittini
                      Developer
                      schrieb am zuletzt editiert von Pittini
                      #88

                      @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.D 1 Antwort Letzte Antwort
                      0
                      • D der-eine

                        @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

                        H Offline
                        H Offline
                        heinzie
                        schrieb am zuletzt editiert von
                        #89

                        @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 Antwort Letzte Antwort
                        0
                        • P 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.D Offline
                          Dominik F.D Offline
                          Dominik F.
                          schrieb am zuletzt editiert von
                          #90

                          @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 Antwort Letzte Antwort
                          0
                          • Dominik F.D Dominik F.

                            @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 Offline
                            P Offline
                            Pittini
                            Developer
                            schrieb am zuletzt editiert von Pittini
                            #91

                            @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.D 1 Antwort Letzte Antwort
                            0
                            • P 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.D Offline
                              Dominik F.D Offline
                              Dominik F.
                              schrieb am zuletzt editiert von
                              #92

                              @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 Antwort Letzte Antwort
                              0
                              • Dominik F.D Dominik F.

                                @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 Offline
                                P Offline
                                Pittini
                                Developer
                                schrieb am zuletzt editiert von Pittini
                                #93

                                @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.D 1 Antwort Letzte Antwort
                                0
                                • P 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.D Offline
                                  Dominik F.D Offline
                                  Dominik F.
                                  schrieb am zuletzt editiert von Dominik F.
                                  #94

                                  @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 Antwort Letzte Antwort
                                  0
                                  • Dominik F.D 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 Offline
                                    P Offline
                                    Pittini
                                    Developer
                                    schrieb am zuletzt editiert von
                                    #95

                                    @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.D 1 Antwort Letzte Antwort
                                    1
                                    • P Pittini

                                      @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.D Offline
                                      Dominik F.D Offline
                                      Dominik F.
                                      schrieb am zuletzt editiert von
                                      #96

                                      @Pittini

                                      Ich danke dir :)

                                      P 1 Antwort Letzte Antwort
                                      0
                                      • T Offline
                                        T Offline
                                        Tirador
                                        schrieb am zuletzt editiert von
                                        #97

                                        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 Antworten Letzte Antwort
                                        0
                                        • T Tirador

                                          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 Offline
                                          P Offline
                                          Pittini
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #98

                                          @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 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          664

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe