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.
    • 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
                      • P
                        Pittini Developer @Tirador last edited by

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

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

                        Gehen tut wohl beides, aber ich würde jeden ein Repo anlegen lassen mit den Sachen, so kann auch jeder SEINEN View pflegen/updaten. Und hier im Forum dann ne Liste führen mit den Links zu den einzelnen Git Projekten.

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

                          @Pittini wäre echt Klasse, wenn du deine Views hier ach teilst. Interesse hätte ich auch an all deinen Skripten.

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

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

                            wäre echt Klasse, wenn du deine Views hier ach teilst. Interesse hätte ich auch an all deinen Skripten.

                            Ich weis nicht ob das Sinn macht. Die Views sind abhängig teilw. von den Skripten und beziehen sich auf meine Datenpunkte. Ich verwende oft berechnete Bindings, nur die ObjektId in den Views zu ändern reicht also oft nicht, da muss man schon bisserl tiefer in der Materie sein. Mit den Skripten ist das ähnlich, da gibts teilw. Abhängigkeiten und ebenfalls Zuschnitt auf mein System. Z.B. is bei mir nirgends Alexa integriert, weil ich mit SNIPS arbeite. Ohne Snips funktioniert das Say Skript wieder nicht usw.
                            Ich bin schon dabei einzelne Skripte/Views die Sinn machen zu veröffentlichen, aber muß die teilweise etwas umschreiben, generischer machen und Anleitungen dazu schreiben. Bisher gibts das HeatingControl Skript mit Projekt/View, ein Timerskript mit View, das Fensteroffenskript und mein Waschmasch fertig Skript. Alles auf Git. Es wird noch das eine oder andere dazukommen, aber ich brauch ja nicht nur Zeit um das zu machen, Anleitungen zu schreiben, sondern muß ja auch für jedes Skript n bisserl Support bieten. Da heissts dann, ich hab diesen und jenen Fehler im Log warum ist das so? Dann muss ich erst mal guggen, isses nen Bug oder isses nen Userfehler, Fehlkonfiguration etc. Beispiel heut: Mir wurden gesamt 6 Fehler gemeldet, einer war einer, die anderen fünf Fehlkonfigs bzw. Adapterfehler. Nachfragen, Ursachenforschung, ein Bugfix, zack 3 Stunden weg.
                            Lange Rede kurzer Sinn, wenn Du das Zeug haben willst, kann ich Dir das gerne "vor die Füße werfen", aber klar kommen mußte dann selber damit. Abgesehen davon ist sowas natürlich nie fertig, d.h. es gibt "Baustellen", einiges basiert noch auf MD1.8, anderes is schon auf MD2 umgestellt usw.

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

                              @Dominik-F
                              Dein Wunschfeld is drin. 1.1.7 auf Git.

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

                                @Pittini

                                Oh super, vielen lieben Dank.

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

                                  @Pittini ich verstehe das es schwierig ist sein komplettes Projekt nach außen zu öffnen.

                                  Ich habe dein Skript für das Zählen der Fenster gerade installiert. Das klappt super! 🙂

                                  Genial wäre es natürlich, wenn man ebenso andere Objekte per Funktionszuordnung modular mitzählen könntest, d.h. Steckdosen und Lichter (in den definierten Räumen). Eventuell muss man dann beide Zustände zählen (offen und geschlossen, an und aus; sowie eventuell noch Anzahl Elemente im Raum). Planst Du noch entsprechende Erweiterungen?

                                  Interesse hätte ich auch an deinem Widget zur Ausgabe der Fenster mit Logmeldung:
                                  2020-03-25 20_43_03-[Material Design CSS _ MDCSS V2] Vis-Views zur Inspiration.png

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

                                    Planst Du noch entsprechende Erweiterungen?

                                    Ich hab das Fensterskript heute ja erweitert, so dass man jetzt selber offen/geschlossen States hinzufügen kann, somit sollte es für alle Tür/Fensterkontakt bzw. Drehgriffe einsetzbar sein.
                                    Aktuell mach ich mein Batteriestandswarnungsskript massentauglich, das wird die nächsten Tage kommen.
                                    Das Widget is eigentlich keines, das ist nen simples Basic Html Widget. Alles was Du da drin siehst, Bilder, Texte, Farbwechsel wird von meinem HeatingControl Skript dynamisch erzeugt. So schick geht das aber nur wenn man Uhulas MD2 verwendet und ist somit nicht mehr generisch. Ne "light" Variante is im Fensterskript neuerdings aber auch integriert, es wird jetzt ne kombinierte, ebenfalls dynamisch erzeugte Textliste aller gerade geöffneten Räume ausgegeben. Ich werd mal sehen ob ich das als HTML Tabelle ausgeben lasse, erste versuche waren aber nicht überzeugend, weil im HTML5 die Tabellendesignelemente wegfielen. Mal sehen, jetzt mach ich erst mal das Batterieskript fertig.

                                    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:

                                      Oh super, vielen lieben Dank.

                                      Dein HMIP Drehgriff is jetzt auch drin. Guggst Du Git.

                                      1 Reply Last reply Reply Quote 0
                                      • Uli977
                                        Uli977 last edited by Uli977

                                        Hallo zusammen!

                                        Ich bräuchte eine Starthilfe.....

                                        Ich habe dies hier gemacht
                                        c8acd72e-b588-4049-9278-4ab6665c0f54-image.png 333f37b4-a03a-4fc9-9da2-fad38e972ea5-image.png

                                        Aber bei mir kommen in der VIS nur komische Dinge

                                        Habe das VIS von @der-eine als Basis genommen 2020-03-19-VIS-iPhone.zip

                                        41a6e14b-0dda-4e9d-9f4b-b01adb6cbc12-image.png

                                        Also bin ich weit weg von so einem aussehen

                                        e5f0f382-99db-4f79-ab97-bd751cec3933-image.png

                                        Vielleicht habe ich das ja auch falsch verstanden.....

                                        Könnt ihr mir eine Einstiegshilfe geben?

                                        Dominik F. D 2 Replies Last reply Reply Quote 0
                                        • Dominik F.
                                          Dominik F. @Uli977 last edited by Dominik F.

                                          @Uli977

                                          Das sieht sehr stark danach aus das entweder das CSS Skript oder das Skript unter Skripte dran schuld ist. Hast du eventuell unter Global ein zusätzliches Skript was das ganze stören könnte?
                                          Bist du sicher, dass du unter CSS und Skripte auch die richtigen Skripte rein kopiert hast?
                                          Funktioniert die Demo von uhula bei dir?
                                          Hast du folgenden Adapter "iobroker.vis-material" installiert? Der nutzt eine ältere CSS Version und kann zu problemen führen.

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

                                            @Dominik-F
                                            Hallo Dominik,
                                            hatte tatsächlich ein Skript auch unter Global, das habe ich jetzt erst mal entfernt. Aber es hat sich trotzdem nichts geändert.
                                            Ich habe mein Projekt auch MD_Demo genannt und habe das CSS Skript reinkopiert unter Projekt und das Skript unter Skripte.
                                            Die Demo von uhala, das weiss ich nicht. Müsste ich nochmal ausprobieren.

                                            "iobroker.vis-material" - Wo bekomme ich den Adapter her.?

                                            Habe mittels des Links versucht den Adapter zu installieren, aber er taucht nicht aus.
                                            https://github.com/iobroker-community-adapters/ioBroker.vis-material.git

                                            Hier die Adapter welche ich installiert habe.
                                            bae272e8-e84b-4371-b687-996c2e09e359-image.png

                                            Viele Grüße!

                                            EDIT:

                                            oder ist es das hier

                                            881f289d-2496-47f1-9eae-bee1e1ce4cbe-image.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            809
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            22
                                            191
                                            22521
                                            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