Ankündigung

Einklappen
Keine Ankündigung bisher.

Neues Design, ähnlich Homeserver

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

    Neues Design, ähnlich Homeserver

    Hallo Kollegen,

    wie in diesem Thread bereits angekündigt, arbeite ich derzeit daran, ein Design für die smartVISU ähnlich der Quadclient Visu von Gira zu bauen. Übers WE war meine bessere Hälfte unterwegs, daher hatte ich mal etwas Zeit zu basteln. Die Oberfläche ist bisher hauptsächlich für mein iPhone optimiert, macht aber auch auf dem iPad oder Desktops bereits eine recht gute Figur. Später soll fürs iPad aber vor allem die Anzeige mehrerer Quadranten noch besser umgesetzt werden.

    Bisher ist das ganze eher noch ein Proof-of-concept, also noch weit weg von Perfektion. Aber vielleicht findet sich hier ja noch der ein oder andere, der gerne daran mit basteln würde.

    @Apollo: wie mach ich das am Besten mit der Verteilung meiner Sourcen? Weil alle Änderungen hier posten wäre viel zu viel
    Soll ich mir dafür ein Git Repo anlegen wo nur mein Design drin ist oder soll ich das direkt im smartVISU SVN committen (dann brauch ich da noch Zugang). Ersteres wäre mir eigentlich lieber, da ich mit Git besser zurecht komme und man da die Zusammenarbeit mit anderen dann per Pull Requests lösen könnte (ähnlich sh.py). Wenn das Design dann fertig ist, soll es natürlich ins original smartVISU Repo kommen.

    Der Aufbau

    An der Navigation selber muss man gar nicht viel machen.... lediglich "nw_tiles" als css Klasse in die Listview mit aufnehmen:

    HTML-Code:
    <ul data-role="listview" data-dividertheme="c" class="nw_tiles">
    Zum Aufbauen der Listen habe ich die ganzen Widgets abstrahiert. Dadurch wird die Seitendefinition wesentlich einfacher. Hier z.B. für die Ansicht Kochen (siehe Screenshots unten):

    Code:
    {% extends "rooms.html" %}
    
    {% block title %}
    Kochen
    {% endblock %}
    
    {% block header %}
    <img class="icon" src='{{ icon0 }}scene_cooking.png'/>
    {% endblock %}
    
    {% block content %}
    {% import "widget_list.html" as list %}
    <ul data-role="listview" data-dividertheme="c" class="nw_list">
        <li data-role="list-divider">Licht</li>
    <!--
        {{ list.switch('eg.kueche.licht','Deckenspots','eg.kueche.licht') }}
    -->
    
        {{ list.dimmer('eg.kueche.licht','Deckenspots','eg.kueche.licht','eg.kueche.licht.wert') }}
        {{ list.dimmer('eg.kueche.leds.weiss','Arbeitsplatte Weiß','eg.kueche.leds.weiss','eg.kueche.leds.weiss.wert') }}
        {{ list.rgb('eg.kueche.leds.rgb', 'Arbeitsplatte RGB', 'eg.kueche.leds.rot', 'eg.kueche.leds.rot.wert', 'eg.kueche.leds.gruen', 'eg.kueche.leds.gruen.wert', 'eg.kueche.leds.blau', 'eg.kueche.leds.blau.wert') }}
        <li data-role="list-divider">Jalousie</li>
        {{ list.blind('eg.kueche.jalousie.temp', 'Fenster', 'eg.kueche.jalousie.lang', 'eg.kueche.jalousie.kurz', 'eg.kueche.jalousie.position', 'eg.kueche.jalousie.kurz', 'eg.kueche.jalousie.lamelle') }}
        <li data-role="list-divider">Heizung</li>
        {{ list.rtr('eg.kueche.heizung', 'Heizung', 'eg.kueche.heizung.ist', 'eg.kueche.heizung.stellwert', 'eg.kueche.heizung.soll', 'eg.kueche.heizung.sollwertverschiebung', 'eg.kueche.heizung.komfort', 'eg.kueche.heizung.nacht', 'eg.kueche.heizung.frostschutz', 'eg.kueche.heizung.heizen') }}
    </ul>
    <br />
    <br />
    <div>
        {{ plot.period('plot.eg.kueche.heizung.ist', 'eg.kueche.heizung.ist', 'avg', '1d', 0, 20, 30, '', 'Küche IST-Temperatur') }}
    </div>
    
    {% endblock %}
    Hierzu wurde auch die base.html angepasst... siehe den Block "title" und "header". Dadurch kann man nun im Headerbereich das smartVISU Logo auf Unterseiten gegen ein Icon der Seite ersetzen und als Titel z.B. den Raumnamen setzen.

    Man beachte auch das responsive Design. Im Querformat wird auf dem iPhone eine weitere Spalte für UZSU oder andere Dinge eingeblendet. Im RTR Eintrag z.B. zeige ich nur IST Temperatur und Stellwert (sind für mich wichtiger als Sollwert) an. Im Querformat wird dann zusätzlich der Sollwert angezeigt. Klickt man da drauf, öffnet sich dann das RTR Popup zum verstellen der Einstellungen. Ansonsten öffnen sich die Popups immer beim Klick auf die zweite Spalte.

    Für Jalousien habe ich einen Button implementiert, der zwischen kurzem und langem Tastendruck unterscheiden kann. Damit kann man dann direkt in der Listenansicht die Jalousien per Kurzzeit- oder Langzeitobjekt fahren.

    Aber jetzt gibts erstmal was zu sehen
    Angehängte Dateien
    Mit freundlichen Grüßen
    Niko Will

    Logiken und Schnittstelle zu anderen Systemen: smarthome.py - Visualisierung: smartVISU
    - Gira TS3 - iPhone & iPad - Mobotix T24 - ekey - Denon 2313 - Russound C5 (RIO over TCP Plugin) -

    #2
    Ich finds wirklich gelungen!

    Die aktuellen Widgets in der SmartVisu nehmen viel Platz weg vorallem auf dem Smartphone.

    So wird es schön kompakt und übersichtlich.

    Gruß
    Klaus

    Kommentar


      #3
      Super gemacht, echt schön

      --
      Diese Nachricht wurde von mir persönlich getippt.
      Gruß Wolfgang
      __________________________________________________ ____
      HS

      Kommentar


        #4
        Wow. Sieht klasse aus!

        Kommentar


          #5
          Wunderbare Umsetzung

          Sehr schöne Arbeit, gute Umsetzung für Smartphones (die vermutlich das am meisten genutzte Device für eine Visualisierung darstellen).

          Was mich interessieren würde, wie schnell ist das jetzt und wie schnell werden sich ändernde Stati im Haus (Frau hat auf einen Schalter gedrückt) umgesetzt und dargestellt? Hast Du das mal gemessen?

          lg

          Stefan
          Stefan Werner, Geschäftsführer Elaborated Networks GmbH.
          Bitte keine PNs. Allg. Fragen ins Forum. Eilige od. wichtige an support ät wiregate.de
          Alle Informationen und Aussagen nach bestem Wissen und Gewissen. IMPRESSUM

          Kommentar


            #6
            Hi Niko, sehr cool! Schöne Arbeit!

            Zu den Fragen:
            - Kannst gerne direkt ins Repro rein committen, svn ist da sogar noch einfacher als git. Dazu bräuchtest du einen Google Account, den du mir durchgibst.
            - Bin am überlegen ob man eher den Weg "Viele Möglichkeiten mit einem Template" oder den Weg "Viele Templates mit speziellen Möglichkeiten" geht. Oder gleich ein eingenes Verzeichnis für die Art des Designs?

            Die Widgets könnte man ja auch in dem jetztigen Design verwenden oder? Was dann eher für eine "dickes" Template sprechen würde.

            Kannst du mir das ggv. mal senden? (als .zip)

            Gruss
            Join smartVISU on facebook. Web: smartvisu.de.
            Dir gefällt smartVISU? Bitte spenden für die Weiterentwicklung.

            Kommentar


              #7
              Hallo Stefan,

              Zitat von StefanW Beitrag anzeigen
              Was mich interessieren würde, wie schnell ist das jetzt und wie schnell werden sich ändernde Stati im Haus (Frau hat auf einen Schalter gedrückt) umgesetzt und dargestellt? Hast Du das mal gemessen?
              gemessen hab ich das noch nicht, ist aber Echtzeit. Sprich jemand drückt und die Änderung wird sofort dargestellt.

              Auch die Graphen werden Echtzeit "weitergezeichnet", sodaß auch dort immer der aktuelle Wert am Ende zu sehen ist (natürlich schlechter, wenn die Auflösung sehr groß ist, oder wenn Mittelwerte gerechnet werden....)

              Gruss
              Join smartVISU on facebook. Web: smartvisu.de.
              Dir gefällt smartVISU? Bitte spenden für die Weiterentwicklung.

              Kommentar


                #8
                Hallo,

                ich kenne ja beides. Ich sehe bisher keine Unterschiede. Läuft aber erst seit 2 min.

                Gruß,
                Hendrik

                Kommentar


                  #9
                  Neues Design, ähnlich Homeserver

                  Hallo ihr,

                  Danke für die Blumen.

                  Ja eben, die Darstellung aufm iPhone war für mich der ausschlaggebende Grund, das ganze zu überarbeiten.

                  Ich habe das jetzt in mehrere Widget Source Files aufgeteilt. In einem liegen etwas abgewandelte Basis Widgets, wie z.B. der Button, der zwischen kurzen und langem Tastendruck unterscheiden kann. Das könnte man auch in die Basics aufnehmen, ich wollte nur nicht, dass ich beim nächsten Update alles mergen muss. In einem weiteren File liegen die ganzen Popups und nochmals extra alle list Widgets, die wiederum die Popups verwenden.

                  Weiß auch nicht was besser ist. Für meine Widgets brauchts halt auch wieder ein extra CSS File. Das alles in eins zu packen könnt halt auch schnell unübersichtlich werden.

                  @Stefan
                  Das ist wirklich Echtzeit (zumindest mit sh.py darunter). Da gibt es keine Verzögerung. Auch Änderungen auf dem Bus (z.B. durch Taster) werden sofort in der Visu angezeigt. Aber eigentlich auch logisch, dafür wurden Websockets ja auch gemacht

                  Kleinere Problem hab ich allerdings noch. Das Datum wird über Tagesgrenzen hinweg nicht aktualisiert. Außerdem wenn ich von einer Unterseite wieder auf die Startseite wechsle, werde dort die Items nicht geladen. Erst nach einem Refresh gehts wieder. Wechsle ich aber wieder auf eine Unterseite geht dort wieder alles. Zweimal ist mir während der Entwicklung das iPad komplett hängen geblieben (nur ein Hard Reset hat geholfen). Allerdings hatte ich das bei meiner handgestrickten Visu auch manchmal. Tippe hier eher auf ein Browser Bug des iOS.

                  SVN einfacher als Git? Das halte ich für ein Gerücht. Ich werde da mal ein Git Repo anlegen und das da rein stellen. Da kannst du @Apollo dann auch mal ansehen. Wenn das dann stable ist, wird es ja ohnehin in das smartVISU Repo kommen. Aber mit Git komme ich einfach besser klar und ich will meine Zeit lieber zum Entwickeln nutzen als Befehle von zig Versionsverwaltungssystenen zu lernen
                  Mit freundlichen Grüßen
                  Niko Will

                  Logiken und Schnittstelle zu anderen Systemen: smarthome.py - Visualisierung: smartVISU
                  - Gira TS3 - iPhone & iPad - Mobotix T24 - ekey - Denon 2313 - Russound C5 (RIO over TCP Plugin) -

                  Kommentar


                    #10
                    Verwendest du Windows als Entwicklungssystem? Dann wäre mit tortoise-svn so gut wie kein Einlernaufwand nötig. Ein Knopf für Ein- und einer für Auschecken.
                    Join smartVISU on facebook. Web: smartvisu.de.
                    Dir gefällt smartVISU? Bitte spenden für die Weiterentwicklung.

                    Kommentar


                      #11
                      Zitat von 2ndsky Beitrag anzeigen
                      Kleinere Problem hab ich allerdings noch. Das Datum wird über Tagesgrenzen hinweg nicht aktualisiert.
                      Ja, das müsste man dynamisieren
                      Join smartVISU on facebook. Web: smartvisu.de.
                      Dir gefällt smartVISU? Bitte spenden für die Weiterentwicklung.

                      Kommentar


                        #12
                        Danke sehr für die Antworten, klingt sehr reizvoll.

                        Mich würde noch die Ladezeit interessieren, also wenn man einige viele Dutzend Objekte in eine Visu gepackt hat, wie lange dauert es, bis das in ein iPad geladen ist?

                        lg

                        Stefan
                        Stefan Werner, Geschäftsführer Elaborated Networks GmbH.
                        Bitte keine PNs. Allg. Fragen ins Forum. Eilige od. wichtige an support ät wiregate.de
                        Alle Informationen und Aussagen nach bestem Wissen und Gewissen. IMPRESSUM

                        Kommentar


                          #13
                          Kommt drauf an wie leistungsfähig die Hardware ist und ob der pagecache an ist oder aus.

                          Auf den Raspberry dauert die erste Seite etwas länger, wenn der neu gestartet wurde (weil wir dort alles leerräumen), dann jeder Aufruf ca. 1 Sekunde (schnelle SD vorrausgesetzt), wenn sie noch nie geladen wurde. War sie schonmal im Cache des Browsers, wird direkt umgeschalten.

                          Gruss
                          Join smartVISU on facebook. Web: smartvisu.de.
                          Dir gefällt smartVISU? Bitte spenden für die Weiterentwicklung.

                          Kommentar


                            #14
                            Neues Design, ähnlich Homeserver

                            Zitat von Apollo Beitrag anzeigen
                            Verwendest du Windows als Entwicklungssystem? Dann wäre mit tortoise-svn so gut wie kein Einlernaufwand nötig. Ein Knopf für Ein- und einer für Auschecken.
                            Nö, Ubuntu Server mit ssh und VI
                            Mit freundlichen Grüßen
                            Niko Will

                            Logiken und Schnittstelle zu anderen Systemen: smarthome.py - Visualisierung: smartVISU
                            - Gira TS3 - iPhone & iPad - Mobotix T24 - ekey - Denon 2313 - Russound C5 (RIO over TCP Plugin) -

                            Kommentar


                              #15
                              Neues Design, ähnlich Homeserver

                              @StefanW
                              Jetzt besorg dir halt mal n Raspberry und probiers aus... Aufm WG läufts ja leider nicht
                              Mit freundlichen Grüßen
                              Niko Will

                              Logiken und Schnittstelle zu anderen Systemen: smarthome.py - Visualisierung: smartVISU
                              - Gira TS3 - iPhone & iPad - Mobotix T24 - ekey - Denon 2313 - Russound C5 (RIO over TCP Plugin) -

                              Kommentar

                              Lädt...
                              X