Ankündigung

Einklappen
Keine Ankündigung bisher.

Neues Design: Tile

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Neues Design: Tile

    Auch wenn ich mein selbst gestecktes Ziel, diesen Beitrag zum 10. Geburtstag des Metal-Designs (https://knx-user-forum.de/forum/supp...s-design-metal) zu veröffentlichen nicht einhalten konnte, soll es zumindest das Jahr 2023 was neues bringen.
    Wie man an der Zeitspanne von 10 Jahre schon sieht, ist es Zeit für was neues in Sachen CometVisu-Optik. Ich will hier gar nichts zu sehr ins Detail gehen, dafür gibt es bereits Dokumentation die das im nötigen Detail-Level tut: https://www.cometvisu.org/CometVisu/...#tile-struktur.

    Und zunächst ein kleiner Dämpfer (und aus meiner Sicht der einzige "Nachteil" des neues Designs): Es handelt sich nicht nur um ein neues Design, sondern um eine komplett neue Struktur der Config-Dateien, was auch bedeutet, dass bisherige Config-Dateien nicht mit diesem neuen Design kompatibel sind. Es müssen also neue erstellt werden. Dafür bekommt man aber neben der neuen Optik einen Geschwindigkeitsvorteil, weil der Schritt, der aus einer Config-Datei den HTML-Code für den Browser generiert entfällt. Die neuen Config-Dateien werden einfach direkt im Browser geladen. Und dieser Geschwindigkeitsvorteil ist beim Laden der Visu deutlich spürbar.

    Ansonsten hier noch ein paar Stichpunkte zu weiteren Vorteilen:
    • Es werden keine speziellen Layout-Einstellungen mehr benötigt, damit die Config-Datei auch auf kleinen Bildschirmen funktioniert. Das Design ist voll responsiv und man muss sich übers Layout eigentlich keine Gedanken mehr machen.
    • Es gibt Widgets für Smart-Home typische Anwendungsfälle (Schalter, Raumtemperaturregler, Rollladen-Bedienung, Dimmer, Medien-Player, Status-/Wert-Anzeigen in diversen Ausprägungen) und solche Widgets kann man sich nur mit XML-Code ohne weitere Programmierkenntnisse selbst erstellen, wenn denn was fehlen sollte.
    • Mit dem neuen Design kommt auch die Unterstützung von mehreren Backends gleichzeitig (das wird auch mit den alten Config-Dateien gehen)
    • Es gibt Möglichkeiten die Sichbarkeit oder die Bedienbarkeit von Widgets oder einzelnen Bedienelementen an Status-Werte vom Backend zu hängen und so kann man z.B. ein Widget ausblenden, wenn ein Gerät dazu nicht verfügbar ist.
    • Auch dieses Design ist, wie von der CometVisu gewohnt, maximal individualisierbar, vom einfachen austauschen der Farben (es gibt auch eine Light-Variante die dieses Feature benutzt) bis hin zum Erstellen eigener Widgets und dem anpassen jeglicher CSS-Regeln ist alles möglich. Die verschiedenen Anpassungsmöglichkeiten sind allerdings noch nicht ausreichend dokumentiert.
    • es gibt noch eine Menge mehr kleiner netter Features die ich jetzt aber nicht alle im einzelnen beschreiben möchte, dann wirds hier zu lang
    Die Entwicklung des neues Designs ist mittlerweile so weit fortgeschritten, dass sie in den Night-Builds verfügbar ist und damit von jedem in einer parallelen Test-Installation ausprobiert werden kann. Für einen produktiven Einsatz ist es noch zu früh (auch wenn ich das mittlerweile produktiv nutze).

    Screenshots für die einzelnen Widgets/Komponenten findet Ihr in der Dokumenation, daher hier nur zwei Screenshots von der selben Seite in der mobilen und Desktop/Tablet Größe.
    Angehängte Dateien
    Gruß
    Tobias

    #2
    Ich muss noch eine wichtige Information nachreichen: Die neuen Config-Dateien des Tile-Design funktionieren nur in einem aktuellen Browser (Chrome, Firefox, Edge, Safari) der Internet Explorer gehört nicht mehr in diese Kategorie (in keiner Version). Wer also eine Visu auf einem Endgerät benutzt, dass keinen aktuellen Browser hat, kann das neue Design nicht nutzen.
    Gruß
    Tobias

    Kommentar


      #3
      Vielen herzlichen Dank für Deine Arbeit
      Beste Grüsse
      Diego

      Kommentar


        #4
        Das klingt toll, die ersten Bilder sehen vielversprechend aus. Gerade das Thema Widget war etwas wo ich vermisst habe.
        Vielen dank

        Gruss
        Dani

        Kommentar


          #5
          Moin und danke Tobias!

          Das sieht schick aus. Bisher habe ich noch keine CV genutzt, aber es reizt mich zunehmend die CV mal zu testen. Was muss ich tun, wenn ich nicht das alte, sondern gleich sofort das neue Design mit mehreren Backends (KNX und MQTT?) auf meinem Timberwolf Server testen möchte? Gibt es dazu schon irgendwo eine passende Anleitung? Oder muss ich mich noch gedulden?

          Viele Grüße
          Parsley

          Kommentar


            #6
            Kommt darauf an wie leidensfähig Du bist ;-) Es ist halt noch sehr wenig getestet und wird noch den ein oder anderen Bug enthalten.

            Ich kann jetzt recht wenig zum Timberwolf-Server sagen, da ich keinen habe. Aber da kann man die CometVisu als App installieren, da müsstest Du nur die voreingestellte Version (weiß nicht ob da noch 0.11.x oder schon 0.12.0 voreingestellt ist), aber die Versionsnummer müsste durch "testing" ersetzt werden.

            Und der nächste Schritt wäre die Doku die ich oben verlinkt habe zu lesen und die Konzepte zu verstehen. Danach kannst Du entweder die mitgelieferte Demo-Config für die Tile Struktur als Vorlage nehmen und für Deine Bedürfnisse anpassen oder gleich mit einer leeren Config anfangen und alles von Grund auf bauen.

            Wenn Du die CometVisu noch nie benutzt hast wäre es sicherlich auch ratsam die Doku zum Thema "Manager" zu lesen, um zu verstehen wie man neue Configs anlegt, editiert und aufruft. Im Manager findest Du auch die Demo-Config unter (demo/visu_config_demo-tile.xml) und kannst Dir den Inhalt in eine neue Config kopieren.
            Gruß
            Tobias

            Kommentar


              #7
              Die Demo-Config hat allerdings ein paar Features die man in der eigenen Visu nicht benötigt, wie z.B. Mehrsprachigkeit und ein simuliertes Backend. Daher wäre es vielleicht doch keine gute Idee einfach die ganze Config als Vorlage zu nehmen, bzw. man müsste da gewisse Dinge rauslöschen (den ganzen <cv-translation>..</cv-translation> Teil alle 'tr="true" Einträge und alle "tr('...')". Und das Backend müsste mit einem passenden ersetzt werden.
              Gruß
              Tobias

              Kommentar


                #8
                Cool, danke für die Infos. Ich musste leider gleich heute wieder los zur Arbeit, aber vielleicht komme ich da ja am Wochenende mal zu.

                Kommentar


                  #9
                  Ich zieh den Hut, Danke Tobias!

                  Kommentar


                    #10
                    Mittlerweile ist die Umsetzung soweit fortgeschritten, dass ich hiermit offiziell zum Testen aufrufen möchte. Da es mittlerweile auch eine Demo-Config gibt poste ich hier nur noch einen Screenshot als Teaser und verlinke die Demo. Da kann man sich dann durchklicken und einen Eindruck bekommen, was mit dem neuen Design so möglich ist.
                    Zur Demo: https://www.cometvisu.org/CometVisu/de/develop/demo/

                    Wer also interessiert ist das auszuprobieren und mithelfen möchte die noch vorhandenen Bugs zu finden, ist hiermit herzlich eingeladen sich den aktuellsten Nightly-Build der CometVisu zu holen und loszulegen.
                    Die Dokumentation habe ich im ersten Post bereits verlinkt und auch hier wäre es hilfreich, wenn das mal aus Anweder-Sicht auf Fehler / Vollständigkeit und Verständlichkeit geprüft werden würde.

                    Bildschirmfoto vom 2023-02-22 17-55-39.png
                    Gruß
                    Tobias

                    Kommentar


                      #11
                      Hi

                      Das sieht gut aus. Aber leider nicht, wenn ich die Demo mit meinem Handy aufrufe​.


                      E7528BEA-1E0B-443F-B674-A6D64286AE73.png D04FD6E0-16D8-432A-9373-A571CC26ED99.png 74CF03B6-4BE6-497F-AC6F-0F0BCFDF22A4.png

                      Kommentar


                        #12
                        …und offensichtlich komme ich auch nicht damit zurecht am Handy einen Post mit Fotos ordentlich zu formatieren.

                        Kommentar


                          #13
                          Ist ein iPhone, oder? Es gibt im Safari ein Problem, der macht irgendwas komisches, was mir noch nicht klar ist.
                          Gruß
                          Tobias

                          Kommentar


                            #14
                            Ja, iPhone stimmt. Kann ich dir irgendwie helfen? Leider kann man auch den Text der Nachrichtenzentrale scheinbar nicht markieren und kopieren, sonst würde ich es direkt als Text hier rein posten.

                            Kommentar


                              #15
                              Ich weiß schon wo das Problem liegt, nur nicht ob ich es lösen kann. Das betrifft auch nur den Mechanismus der in der Demo benutzt wird, damit die so tut als ob sie Daten von einem Backend empfängt, das es in Wirklichkeit gar nicht gibt.
                              Dazu werden Teile des Browsers ausgetrickst, die diesem vorgaukeln, er würde einen ganz normalen Netzwerk-Request schicken und eine Antwort von einer Gegenstelle erhalten. Das ist aber alles simuliert und hier scheint sich nun der Safari anders zu verhalten wie andere Browser, so dass diese Tricksereien zu Fehlern führen. Das könnte schwer bis gar nicht lösbar sein, je nachdem wie tief das Problem liegt.

                              Außerdem wird das bei einer echten Config gar nicht auftreten, denn da wird ja ganz normal mit einem echten Backend kommunuziert.
                              Gruß
                              Tobias

                              Kommentar

                              Lädt...
                              X