[Beta] Material Design

[alltime]

Hallo zusammen,

ich entwickle gerade ein Design für die CometVisu mit dem Namen MaterialDesign. Dieses Design soll den Regeln von Googles Material Design folgen:
https://www.google.com/design/spec/m...roduction.html

Ansicht Desktop:
In Grün Oder Indigo mit neuer Anordnung:
Desktop.pngDesktop.png

Ansicht Smartphone:
Grün: oder Indigo:
Screenshot_2016-01-02-19-21-43.pngMobile.png
Oder in Indigo:

Ansicht Smartphone Menu:
Grün oder Indigo:
Screenshot_2016-01-02-19-21-54.pngMobileMenu.png

In der Desktop-Version gibt es links eine Navbar, die immer sichtbar ist. Die Navbar hat zwei Ebenen, dabei lassen sich die Untermenüs ausklappen.
Die Menüstruktur wird automatisch durch ein Menu-Plugin, basierend auf der Page-Struktur, erzeugt.
Wem grün nicht gefällt kann einfach eine eigene Farbe in der custom.css Datei einstellen.

Außerdem habe ich einen Parser geschrieben, der die ETS-Projektdatei lesen kann und automatisch die visu_config Einträge erzeugt:
Funktionen.png

Siehe dazu diesen Thread:
https://knx-user-forum.de/forum/suppo...metvisu-parser
---

Das Design (und den Parser, aber dazu mehr in einem gesonderten Thread) findet ihr hier:
https://github.com/alltime84/CometVi...signs/material

Außerdem empfehle ich dringend das Menü Plugin:
https://github.com/alltime84/CometVi...c/plugins/menu

Und das Header Plugin (zum automatischen erstellen der Überschrift):
https://github.com/alltime84/CometVi...plugins/header


Update 02.01.16:
Ich habe das Design etwas überarbeitet und neue Screenshots erstellt. Außerdem wurde der parser stark verbessert...

Viele Grüße,
Tim

[Chris M.]

Erst mal: sehr schön!
Ein "natives" Design für Android macht IMHO viel Sinn!

Ohne die Details zu kennen finde ich spontan die Einschränkung auf "grün" noch nicht so glücklich, da sollte sich doch durch die Verwendung von Flavours sicher was machen lassen, schätze ich. Dann geht die Farb-Wahl per Config und ohne custom.css.

Git ist gesetzt. Und eigentlich kein Problem. Du kannst zwar auch per SVN zugreifen, das macht aber auf Dauer keinen Sinn. Hier ist erst mal die grundlegende Frage wo es hakt: am Binary (z.B. weil auf dem WireGate nur eine alte, nicht kompatible Version läuft) oder am Doing mit dem File-Handling?

[alltime]

Kann man denn mit Flavours auch die Hintergrundfarbe der NavbarTop festlegen? Dann kann man natürlich von CSS weg. Dann ließen sich auch z.B. individuelle Farben pro Stockwerk oder pro Raum festlegen.

Um die alte Version lauffähig zu bekommen habe ich sehr lange gebraucht. Es sind immer neue Probleme aufgetaucht. Jetzt hatte ich es dann aber final geschafft eine Instanz mit GitHub zu synchronisieren. Dann habe ich aber neue Datien erstellt und bei dieser gab es dann Probleme mit dem End Of Line Format. Als ich die Datei mit dos2unix formatieren wollte, habe ich leider auch die Git-Einstellungen für den Ordner zerschossen...

[Chris M.]

Individuelle Farben für Seiten (und somit auch für Stockwerke oder Räume) sind eigentlich der Hauptgrund für die Flavours.

Die funktionieren einfach so, dass dem <div> für die Seite eine weitere class hinzugefügt wird. Ein Beispiel aus der Demo-Config wäre so:

<div class="page type_text flavour_potassium pageActive activePage" id="id_40_8_">

Damit sollte man ziemlich viel anfangen können.

Wenn Du die Git-Verzeichnisstruktur zerschossen hast, so finde ich als Lösung am einfachsten das ganze zu löschen (natürlich die geänderten Dateien vorher sichern!), neu auszuchecken und dann nur die Änderungen drüber zu kopieren. Anschließend das übliche git add, git commit und git push.

[henfri]

Hallo Tim,

gefällt mir!

Erzähl doch noch ein bisschen zum Parser (wobei das vielleicht in einem eigenen Thread besser aufgehoben ist). Du hast meine Neugier geweckt.

Gruß,
Hendrik

[wuestenfuchs]

Wow, klasse! Da muss wohl richtig viel Arbeit drin stecken! Ich fände es toll, wenn deine Arbeit in die CometVisu integriert werden würde!

Die Idee eines (optionalen) Parsers finde ich auch gut und würde den Einstieg für Neulinge wohl drastisch vereinfachen.

[alltime]

Update (siehe ersten Post): Dateien sind auf GitHub verfügbar.

[Crimson]

Hallo Tim,

mir gefällt das Design ausgesprochen gut.
Kannst Du dazu eventuell eine Beispiel-Config veröffentlichen? Ich bin noch recht neu in der Cometvisu und schaffe es nicht, dass meine Seiten so schick aussehen wie Deine Beispielscreenshots.

Viele Grüße und schöne Feiertage,
Tim

[alltime]

Hallo Tim,

Das ist ein Beispiel für die Rollläden/Jalousien:

<page name="[Fenster][2.3.2]Wohnen">
                    <group name="Sonnenschutz">
            <layout colspan="12" />
            <group nowidget="true" >
              <layout colspan="3" />
              <trigger value="0" mapping="AufAbSymbol" align="right">
                <layout colspan="1"/>
                <address transform="DPT:1.008" mode="readwrite">20/2/40</address>
              </trigger>
              <trigger value="0" mapping="Stop" align="right">
                <layout colspan="1"/>
                <address transform="DPT:1.009" mode="readwrite">20/2/41</address>
              </trigger>
              <trigger value="1" mapping="AufAbSymbol" align="right">
                <layout colspan="1"/>
                <address transform="DPT:1.008" mode="readwrite">20/2/40</address>
              </trigger>
              <break/>
              <text align="left">
                <layout colspan="0"/>
                <label>
                  <icon name="fts_shutter_10" color="#888888"/>
                </label>
              </text>
              <slide min="0" max="100" step="10" format="%d%%">
                <layout colspan="2"/>
                <address transform="DPT:5.001" mode="readwrite">20/2/42</address>
              </slide>
              <text align="right">
                <layout colspan="0"/>
                <label>
                  <icon name="fts_shutter_100" color="#888888"/>
                </label>
              </text>
              <break/>
              <text align="left">
                <layout colspan="0"/>
                <label>
                  <icon name="fts_blade_s_00" color="#888888"/>
                </label>
              </text>
              <slide min="0" max="100" step="10" format="%d%%">
                <layout colspan="2"/>
                <address transform="DPT:5.001" mode="readwrite">20/2/44</address>
              </slide>
              <text align="right">
                <layout colspan="0"/>
                <label>
                  <icon name="fts_blade_s_100" color="#888888"/>
                </label>
              </text>
              <break/>
            </group>
          </group>
        </page>

Damit das Design richtig funktioniert musst du aber auch die Index.html Datei anpassen (damit die Änderung auch sichtbar wird, musst zu kurzzeitig index.html aus der Datei cometvisu.appcache löschen, speichern, Seite aufrufen, Zeile wieder in .appchache einfügen, speichern).
Außerdem verwende ich meine Plugins Header (für die Seitenüberschrift) und Menu (für die Navigation).

Sollte das nicht reichen, zeige doch mal einen Screenshot von dir.

Mein Parser (siehe anderen Thread) erzeugt übrigens auch die Config aus der ETS Projektdatei.

[alltime]

Noch ein besserer Vorschlag:

1. Lade dir alle Dateien runter (z.B. Download Zip):
   https://github.com/alltime84/CometVisu
2. Verbinde dich mit dem Wiregate
3. gehe in den Ordner /var/www/
4. erstelle einen neuen Ordner, z.B. MaterialDesign
5. kopiere den src Ordner aus den runtergeladenen Dateien in den gerade erstellten Ordner auf dem Wiregate
6. rufe das MaterialDesign Beispiel auf. Der Link sollte etwa so aussehen:
   http://wiregate.ip.adresse/MaterialDesign/src/

Damit kannst du es testen, ohne deine bestehende Visu zu zerstören.

[Crimson]

Vielen Dank, damit komme ich bestimmt ein gutes Stück weiter.
Hoffentlich hab ich über die Weihnachtstage mal Zeit daran weiter zu arbeiten.

Den Parser hatte ich mir auch schon angesehen, da war mir aber noch nicht ganz klar, was ich in der ETS gepflegt haben muss, damit der Parser eine config erstellt.

[Incognito666]

Sieht sehr schön aus! Respekt! Werde das bei Gelegenheit auf jeden Fall auch ausprobieren. Denke das Design könnte die CV ein gutes Stück voran bringen, wenn es integriert wird.

[Crimson]

Ich hoffe ihr hattet alle schöne Weihnachtstage.

Ich hatte ein wenig Zeit mich mit der Visu zu befassen. Vielen Dank noch mal für tolle Arbeit, die Du mit dem diesen abgeliefert hast.
Dank Deiner config.xml konnte ich die Menüstruktur bei mir jetzt auch implementieren. Sieht toll aus und funktioniert auch prima.

Ein wenig problematisch sind bei mir noch die Raffstores. Speziell der Slider für den Lamellenwinkel.
Bei 100% sind die Lamellen komplett geschlossen. Soweit so gut. Bei ca. 50% sind sie dann aber schon komplett in der Waage, und damit 'offen'. Wenn ich den Slider jetzt weiter Richtung 0% ziehe, fährt der Raffstore schon wieder leicht nach oben.
Ist etwas unschön und ich habs bisher nicht in den Griff bekommen.

So, falls man sich nicht mehr liest... einen guten Rutsch ins neue Jahr!
Tim

[alltime]

Hallo Tim,

Dann liegt es nicht an der Config oder der Visu sondern an den Einstellungen in der ETS vom Jalousieaktor. Dort kannst du die Lamellenverstellzeit einstellen. Die ist wohl bei dir zu lang. Aber zur Not kannst du aber auch in der Config beim Slider min = 50% einstellen.

Außerdem habe ich S-Lamellen, darum habe ich diese Icons gewählt. Aber in der Iconsammlung sind auch alle anderen Lamellen dabei.
Auch drehen sich S- und Z-Lamellen anders als "normale" Lamellen.

Guten Rutsch!
Tim

[alltime]

Update: Design wurde verfeinert und neue Screenshots erstellt (siehe erster Beitrag).