Da im Thread https://knx-user-forum.de/knx-eib-fo...smartvisu.html mehrfach der Wunsch nach einem anderen Design aufgekommen ist, würde ich in diesem Thread gerne spezifische Design-Wünsche sammeln, so dass daraus ein entsprechendes Design erstellt werden kann.
-
Zu Anfang muss ich erstmal gestehen, dass ich nicht alle Designs kenne und die CV selber noch nicht am Laufen habe. Was mir aber an dem angesprochenen Design gefällt, was ich so in der CV noch nicht gesehen habe... dass das Raum- oder Etagenmenü auf der linken Seite stehen bleibt. Wenn ich es recht in Erinnerung habe muss ich bei der CV immer wieder zur Startseite zurück um in einen anderen Raum zu wechseln.
Weiter wirkt das Design etwas frischer und moderner. Bei den Designs der CV fühle ich mich immer irgendwie in alte HTML Zeiten zurück versetzt. Sie ist funktional sicher (bis auf die Raumnavigation) sehr gut, aber mir fehlt das "eyecandy". Hübsche Rahmen um mehrere zusammengehörige Bereiche zu gruppieren usw. Klar kann man das anpassen und sobald ich mich meinem neuen Hobby widmen kann und nicht mehr Boden verlegen muss, werde ich mir das auch mal näher ansehen, aber IMHO ist das das Problem der CV... da fehlt der WOW Effekt fürs Auge.
just my 2 centsMit 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) - -
Zur Positionierung der Raumübersicht kam mir gerade der Gedanke ob man die Template Engine nicht wie bei einem CMS aufbauen kann/sollte.
Ich weiß nicht ob sich jemand schon mal mit einem CMS beschäftigt hat aber die meisten nutzen Platzhalter bzw. Variablen für bestimmte Dinge wie z.B. die Raumübersicht. Damit kann man die Seiten künftig noch viel flexibler gestalten.Kommentar
-
Das ist eine gute Idee... oder einfach ein konfigurierbares Widget Raumübersicht.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
-
Man kann es z.B. mit php Funktionen lösen:
In den Funktionen werden dann die Inhalte generiert. So ist es auch möglich sich das Menü zweimal auf der Seite anzeigen zu lassen oder ein Untermenü zu erstellen.Code:<body> <div id="header"> <?php show_header(); ?> </div> <div id="menu"> <?php show_menu(); ?> </div> <div id="content"> <?php show_content(); ?> </div> <div id="bottom"> <?php show_bottom(); ?> </div> </body>
... Nur mal so als Idee
Vielleicht sind ja hier auch ein paar kreative Köpfe die dann mal Photoshopvorlagen erstellen können wie die Visu dann optisch aussehen könnte.Kommentar
-
Jaaaa, viele viele neue Designs
Hoi
Ja ein Menü wär schön. links oder rechts, unten oder oben, konfigurierbar.
Eventuell auch zum einblenden.
Mit css kenn' ich mich ein wenig aus, aber wie man ein neues Design kreiert hab' ich noch nicht herausgefunden. Sollte nicht zu schwierig sein, oder?
Aufbauend auf den 12 col's.
Vielleicht kann mich mal jemand in die richtige Richtung stupsen.Grüsse Bodo
Fragen gehören ins Forum, und nicht in mein Postfach;
EibPC-Fan; Wiregate-Fan; Timberwolf-Fan mit 30x 1-Wire Sensoren;Kommentar
-
Auf folgender Seite könnt Ihr Euch mal ansehen, was alles möglich ist, wenn Seiten konsequent mit DIV Containern und CSS Stylesheets aufgebaut werden:
http://www.csszengarden.com/tr/deutsch/
ThomasKommentar
-
@Bodo Ich kann auch nur ein bisschen css. So schwer ist es allerdings nicht, wenn man ein wenig Ahnung hat.
Die Div's sind ja mit css frei positionierbar.
Am Besten einen Browser mit Plugin nutzen, das es ermöglicht Elemente der Seite zu untersuchen und das css anzupassen. Dann kannst du dort etwas rumspielen und das ganze in eine css verpacken.Kommentar
-
@chriko
Vom Grundsatz stimmt das schon. Das Design funktioniert dann aber oft nur in dem Browser mit dem es entwickelt wurde. In einem anderen oder einer anderen Version kann es dann völlig anders aussehen. Leider halten sich die Browser nicht 100 % an alle Standards.
Fazit: Soll das CSS Design allgemein funktionieren, muss man sich schon tiefer einarbeiten und die bekannten Hacks nutzen!
ThomasKommentar
-
@luctho:
Allerdings muss man sagen, dass mit Abstand die meisten Sonderlocken der IE erfordert. Und der wird im Augenblick nicht unterstützt, weil er selbst zu JS seltsame Auffassungen hat...KNX, DMX over E1.31, DALI, 1W, OpenHAB, MQTTKommentar
-
Hi,
ich habe mich die letzten 2 Wochen mit beiden Visus beschäftigt. Da ich derzeit nur am spielen bin, hab ich noch gar keine hohen Anforderungen, und mit beiden Visus konnte ich diese sehr einfach erfüllen.
Es ging um ein paar Seiten, hauptsächlich zum Schalten, Dimmen und Temperatursteuerung.
Das Ergebnis mal vorweggenommen:
- CometVisu ist superschnell, sieht aber "out-of-the-box" (trotz 7 Designs) nach gar nichts aus.
- smartVisu sieht einfach super aus, ist aber total langsam.
Was gefällt mir besonders gut an der smartVisu:
- Es gibt gut aussehende Gruppen (dezenter Rahmen, kleine Überschrift), die weitere Untergruppen enthalten können
- man kann "devices" bauen, die dann parametrisiert aufgerufen werden (also wiederverwendbare Teilkomponenten - viel einfacher als CometVisu-Plugins)
- man kann in fast allen widgets icons verwenden (zumindest da, wo es halbwegs Sinn macht)
- dadurch, dass man direkt HTML schreibt, kann man sehr differenziert die Anordnung und das Aussehen der Widgets innerhalb einer Gruppe bestimmen
- Man kann mehrere Informationen in einem Widget darstellen, z.B. im Button für die Raumwahl auch die Temperatur des Raumes oder ob das Fenster offen ist
- man kann Seiten von irgendwoher aufrufen, ich kann also Navigationsleisten bauen (das Page-Konzept der CometVisu basiert auf einer Baumstruktur, smartVisu erlaubt eine Netzstruktur).
- alle Gruppen sind per default so gross, dass sie auch genauso auf einem Handy dargestellt werden können (ohne eine neue config machen zu müssen). Sie werden dann nicht neben-, sondern untereinander dargestellt
- trotz HTML-editing kommt man recht schnell mit den Widgets und deren Plazierung zurecht
- das Flip-Widget sieht gut aus
- läuft auch auf dem Internet Explorer
- kein Werte-Mapping
- keine Stylings
- keine DPT-Konvertierung (wird aber durch den Zugriff über linknx kompensiert)
- kein Update von Werten ohne refresh
- Erfordert clientseitiges Binden von Controls, um diese Synchron zu halten (glue-Befehl, kann entfallen, wenn automatisches Werteupdate kommt)
- Bei einem Fehler auf der Seite sind die Fehlermeldungen so kryptisch, dass man nur schwer den Fehler korrigieren kann
- sie ist superschnell und reagiert unmittelbar auf Wertänderungen auf dem Bus
- sie ist sehr resourcenschonend
- es ist sehr einfach, ein erstes funktionierendes Ergebnis zu erhalten
- guter technischer Unterbau (kennt DPT's, erlaubt eigene mappings, plugins, designs, ...)
- Es ist alles da, um ein optisch ansprechendes Design zu machen
- 2D/3D-Unterstützung
- Dass Seiten auf eine GA reagieren können
- Die verschiedenen Deigns sind nur "Farbvarianten" einer Textbasierten Darstellung
- Eigentlich gibt es nur 2 Designs: pure (mit vielen Farbvariationen) und pitchblack (mit dem zugrundeliegenden Grid-Layout)
- Alle Designs sehen irgendwie "grob" bzw. "einfach" aus
- Man hat kaum Chancen, ein optisch ansprechendes UI zu bauen, ohne plugins zu schreiben (wofür man sich dann auch im restlichen Coding gut auskennen muss)
- Mappings und Stylings erlauben keinen HTML-Content
- Das "pitchblack" grid ist zu grob (bzw. ich hätte gerne "filigranere" Widgets, die dann gerne in einem so groben Grid positioniert werden können)
- Läuft nicht auf dem IE (nicht mal IE9)
Ich hatte die Bilder der smartVisu gesehen und es war ein "eye catcher" - ich hatte gleich Lust, das bei mir ausprobieren, weil das Gefühl da war, mit meinen geringen Kenntnissen etwas optisch ansprechendes hinzubekommen.
Bei der CometVisu fehlt genau dieser "eye catcher", und genau das müsste man noch machen. Die CometVisu ist auf den ersten Blick sehr Textlastig. Ich bin mir sicher, dass die CometVisu von der Infrastruktur her weiter ist, und alle Möglichkeiten bietet - allerdings wirkt sie derzeit sehr technisch, eben optisch nicht ansprechend.
Bitte versteht mich nicht falsch, ich weiss sehr genau, dass das hier ein Freizeit-Produkt ist und dass es bereits eine irrsinnige Leistung ist, sie CometVisu in ihrem derzeitigen Stand auf die Beine zu stellen.
Auch ist mir klar, dass ein Design nicht vom Himmel fällt (sonst hätte ich mir ja schon eines gemacht), aber die Frage war ja, was einem so gefällt, da hab ich mal versucht, das zusammenzuschreiben.
Sorry dass es etwas länglich wurde,
viele Grüße,
WaldemarKommentar
-
@luctho Du hast schon recht. Wenn ich an meinem Design arbeite dann entwickel ich in der Regel zuerst im Opera und teste im Anschluß noch Chrome und Firefox und passe dann entsprechend an. Allerdings beachte ich auch keine älteren Browserversionen.
Also die Hacks sind mir durchaus bekannt, lasse aber ausgenommen der aktuellen Versionen der drei oben genannten Browser bewusst alles andere außer acht. Ob man sich das als offizielles CV Design erlauben kann ist dann wieder eine andere Sache.
Es ging mir auch eher darum Bodo zu erklären wie ich vorgehe. Mit dem aktuellen Opera und der Funktion "Element untersuchen" weiß man halt welche css Eigenschaft was genau beeinflußt und kann dan dementsprechend sein persönliches css erstellen.Kommentar
-
So eine Side-Bar ist schon in Überlegung, aber noch nicht vorhanden... Stand jetzt müsste man die Status-Bar dafür missbrauchen.Zitat von 2ndsky Beitrag anzeigen
Mit geeignetem Link kann man auch direkt zu Seiten springen.Zitat von 2ndsky Beitrag anzeigen
In Kombination mit einer Side-Bar würde eine JumpToPage-Widget aber natürlich Sinn machen. Das wäre auch leicht zu implementieren
Die CV versucht einen möglichst einfachen und sauberen DOM zu kreieren, so dass per CSS ordentlich ein ansprechendes Design daraus gemacht werden kann. Eyecandy wäre also durchaus möglich - es hat nur noch keiner umgesetzt (Coder ist halt nicht immer auch Designer...)Zitat von 2ndsky Beitrag anzeigen
Bei einem CMS ist's auch nichts anderes als das man in einer Datei etwas zur Struktur sagt und eine Template-Engine daraus die fertige Seite generiert. Bei der CV geht's genau so...Zitat von Chriko Beitrag anzeigen
Allerdings gibt's bei der CV erst eine einzige "Struktur" (Names "Pure", nicht mit dem Design "Pure" zu verwechseln, das eines der verschiedenen Designs ist, die auf dieser Struktur aufsetzen). Hier könnte man durchaus weitere erstellen...
Die CV verwendet ganz bewusst kein PHP - die soll nämlich auch von so kleinen Servern wie einer Fritz!Box laufen können.Zitat von Chriko Beitrag anzeigen
PHP wird nur bei erweiterten Funktionen wie dem Editor verwendet.
Mit modernem JavaScript kann man aber auch sehr viel PHP ersetzen...
Zitat von Chriko Beitrag anzeigen
- oft mangelt es ja nur an der passenden Idee, die Umsetzung ist dann schnell gemacht...
S.o. bzw. s.u.Zitat von Bodo Beitrag anzeigen
Nein, ist es nicht. Am besten sprechen wir da in einem anderen Thread drüberZitat von Bodo Beitrag anzeigen
Danke für die ausführliche Analyse!Zitat von mumpf Beitrag anzeigen
Was ich erst mal mitnehme ist dass ich mich um die Side-Bar und ggf. die Icons (vgl. auch Thread https://knx-user-forum.de/cometvisu/...ig-syntax.html) kümmereKommentar
-
Hi Chris,
ich find toll, wie du das Thema aufgenommen hast.
Danke!
Gruß,
HendrikKommentar
-
So, mit Revision 791 ist nun eine navbar so wie ein <pagejump>-Widget implementiert.Zitat von Chris M. Beitrag anzeigen
Das Pagejump-Widget sollte relativ fertig sein (im Zusammenspiel mit dem Editor könnte man die Seiten-Auswahl etwas benutzerfreundlicher gestalten...)
Die <navbar>s müssen jedoch noch besser integriert werden. So fehlt z.B. noch die Möglichkeit die dynamisch zu öffnen oder schließen (vgl. Android Menüleisze oben am Bildschirm). Außerdem ist die Widget-Breite etc. noch nicht optimal.
Mir war aber wichtig schon mal die Config-Syntax fest zu legen und das sollte hoffentlich passen.Kommentar
Kommentar