Neues Design: Planet

[hmerk]

Hi,
ich muss mal wieder diesen schon älteren Thread rauskramen.
Könntest du eventuell Deine Konfig hier mal posten, ich würde das gerne mal für meine bessere Hälfte umsetzen, die ist absoluter Trekkie ...

Gruß
Hans-Jörg

Hallo,

hab wieder ein wenig Zeit gefunden mich mit dem Design zu beschäftigen.
Ich hab mal die Widgets (switch, info...) in verschiedenen Variationen gemacht. Farbverlauf von oben nach unten, oder links nach rechts.

Welche passt den besser?

Bei den Switches hab ich die Schrift bei .value entfernt da es sowieso durch die Farbe angezeigt wird. Fand ich Stimmiger/übersichtlicher

Für Verbesserungsvorschläge/Kritik(wird nicht als gemecker empfunden ) wäre ich sehr Dankbar. So kann ich das bißchen Zeit das ich habe effektiv nutzen

Gruß

[vlamers]

Hab gerade noch mal den Pfad nachgeschärft - jetzt funktioniert's

Sorry und Danke,
ich hatte da mit svn mist gebaut. Hatte das "alte" Verzeichniss ge-added, darin befanden sich aber noch hunderter anderer Dateien. Dann wollte svn das Verzeichniss nicht mehr commiten, weil ich die Dateien gelöscht habe :S

Hm, verstehe ich jetzt nicht. Was willst Du genau machen? (Evtl. hilft ein Screenshot)

Siehe Anhang.
Das Diagramm Preview ist ganz links, das Diagramm-Inline auch.
Wenn ich jetzt per margin-left versuche das in die Mitte zu schieben, verschieben sich beide unproportional. D.h wenn das Preview in der Mitte ist, ist das inline ganz rechts. Verständlich?
1. Bild normal
2. Bild mit:

.widget.diagram > .actor {
    
    margin-left: 5rem;
}

habe dort auch % versucht....selbes Ergebnis (logisch )

margin-top auf 0.6rem oder 0.7rem?

hier scheitert es schon wieder an mir:
- wenn ich .pagelink nehme wird das ganze widget definiert. margin-bottom ist dann der Abstand nach unten zum anderen widget.
- margin-top keine Auswirkung

.widget.pagelink: auch hier hat margin-top keine Auswirkung

wie sollte das richtig definiert sein?

Das <img>-Element hat ein width="100%" Attribut. Wenn man das weg macht, dann passt's wieder.
Wann und wie das da hin gekommen ist, oder ob man's immer ausschalten kann, kann ich spontan nicht beantworten.

In der Css oder im XML? Ich finde in meiner basic.css keine width: 100%; bei der image definition.

Vielen Dank für deine Hilfe! (und geduld)

Gruß

[Chris M.]

ich hab mal die Schrift eingepflegt....
gefällt immer noch?

Hab gerade noch mal den Pfad nachgeschärft - jetzt funktioniert's

-Wie bekomm ich den die diagram-previews von den diagram-inline so getrennt, dass ich dessen position separat anpassen kann?

Hm, verstehe ich jetzt nicht. Was willst Du genau machen? (Evtl. hilft ein Screenshot)

- Die labels der Pagelinks stehen so weit oben. Bekomm ich auch nicht weiter runter.

margin-top auf 0.6rem oder 0.7rem?

- Warum ist das Image Widget auf einmal so riesig geworden? Normal?

Das <img>-Element hat ein width="100%" Attribut. Wenn man das weg macht, dann passt's wieder.
Wann und wie das da hin gekommen ist, oder ob man's immer ausschalten kann, kann ich spontan nicht beantworten.

[vlamers]

Hallo,

ich hab mal die Schrift eingepflegt....
gefällt immer noch?

Gruß

Edit:
Ein paar Fragen:

-Wie bekomm ich den die diagram-previews von den diagram-inline so getrennt, dass ich dessen position separat anpassen kann?
- Die labels der Pagelinks stehen so weit oben. Bekomm ich auch nicht weiter runter.
- Warum ist das Image Widget auf einmal so riesig geworden? Normal?

Evtl ist es auch einfach nur schon zu spät

[Chris M.]

Unter https://knx-user-forum.de/289769-post10.html hatte ich schon ein paar Punkte geschrieben, die wir IMHO vor dem Release fixen sollten.

Zur Thematik der Schriftart habe ich nochmal etwas im Netz gesucht. Unter Open Font Library gibt es ja ein paar Fonts zur Auswahl, wo man hoffen kann, dass die Lizenz passt (muss man dann im konkreten Fall halt checken).

Besonders nah am Original dürfte OSP-DIN sein (ggf. mit letter-spacing: im CSS um's etwas leichter lesbarer zu machen), und inhaltlich würde es auch passen. Aber auch Didact Gothic und Logisoso fand ich von der Richtung i.O., denn mit persönlich gefällt die Ubuntu-Font im LCARS Kontext nicht so ganz.

[NetFritz]

Hallo
Auf einen Lehrgang habe ich mal gelernt das es EIN/AUS, AUF/ZU und AUF/AB geschrieben wird.
Alle Befehle und Zustände in Großschrift.
Gruß NetFritz

[makki]

Ihr seid vermutlich nicht alle HS-geschädigt
Also da war mal rot an, mal aus, je nach Quelle - ehrlich, ich weiss es bei meinen 15 Visu-ansätzen nicht mehr (sicher)!
Das sollte eine Visu aber IMHO intuitiv vermitteln (Gäste lasse ich ja nicht gelten, die müssen meine Visu nicht verstehen können/müssen/sollen)

Aber jetzt komme ich ausm Keller wo der Denon Rot=Aus Grün=An ist, beim Rasierer ist Rot=laden, Grün=Voll, was bedeutet jetzt gleich noch Rot beim Küchenlicht? Aus? An? Ausschalten? Anschalten?
Ich (und nicht nur ich, bin jetzt zu faul zu gurgeln) finde etwas eindeutig gedämpftes (Grau, ..) für "AUS" erheblich intuitiver, obs an dann grün oder rot ist, egal - ich wäre eh für Blau

Und: kann sich ja jeder mit den Mappings so einstellen wie er will! Aber für Rot/Grün gibt es nunmal zwei konträre Interpretationen mit 50% Erfolgsquote; man kann das auch nicht mit dem Not-Aus-Taster mit Symbol darauf gleichsetzen - das ist etwas ohne *gleichzeitige* Statusanzeige, da versteht man was welcher tut..

Makki

[Chris M.]

Zu Rot/Grün: hier ist das gleiche Prinzip-Problem wie bei An/Aus oder Auf/Zu - ist das Zustand oder Befehl?

D.h. wenn da "An" steht, heißt dass, dass das bei Druck "An" geschaltet wird - oder dass der Zustand "An" ist und bei Druck auf "Aus" wechselt?!?

Das ist aber alles kein Problem eines Designs und für mich daher hier eigentlich OT. Das hat der User (bzw. Visu-Ersteller) für sich und sein Umfeld zu klären. Genau dafür ist das Mapping und Sytling da - und bewusst nicht Bestandteil des Designs.

Was das Design kann, darf und sogar soll: die wichtigsten Farben des Stylings so zu definieren, dass diese in den Rest passen. Also sich die Farben nicht beißen, etc. pp.

(Und noch meine - OT - Meinung zu Rot/Grün: ich bevorzuge Bunt zu Unbunt. D.h. je nach Kontext ist Rot oder Grün aktiv/gefährlich/[un]sicher/... und Grau inaktiv)

[swiss]

Seltsam...

Beim Kraftwerk kann ich das absolut verstehen und bei Leistungsschalter in Energieversorgungsnetzen auch. Aber beim LS? Ok kann sein. Wäre dass eher als -> "Du darfst jetzt an der Leitung arbeiten" zu verstehen? Also indirekt auch ein GO oder Ein?

Naja jedem wie es ihm beliebt.

Mein Denon zeigt bei Ein -> Grün und bei Aus -> Rot
Mein Fernseher hat bei Aus auch Rot
Mein Roomba leuchtet grün wenn er Ein und bereit ist
Mein Laptopnetzteil hat auch eine grüne LED wenn es mit Spannung versorgt wird (EIN ist).
Mein Subwoofer hat auch ein StatusLED dass bei EIN grün und bei Aus Rot leuchtet

Aber scheinbar bin nur ich so stark von Rot/Grün umgeben. Für mich stimmt es so

Wenn das Rot/Grün aus der Visu verbannt wird weil die Masse dass daneben findet, kann ich mir immer noch ein Mapping basteln und mein Rot/Grün einbauen -> Da braucht ihr auf mich keine Rücksicht nehmen

[JNK]

Ich komme aus der technischen Welt und habe mich absolut daran gewöhnt, dass Grün = Ein und Rot = Aus bedeutet und ich denke tausende andere auch

Also das stimmt so mal nicht. Meine LS haben eine Statusanzeige, da ist Grün aus und rot an. Und die statusanzeigen der Schalter zwischen Trafo und HV auf der Arbeit machen das auch so....

Gruß,

der Jan

[NetFritz]

Hallo

@swiss
Ich komme aus der technischen Welt und habe mich absolut daran gewöhnt, dass Grün = Ein und Rot = Aus bedeutet und ich denke tausende andere auch

Also ich habe in der technischen Welt auch schon Grün=AUS und Rot=EIN gesehen.

Bei der KraftwerksVisu ist Grün=EIN, Weiß=AUS, Rot=Störung Prio1 und Gelb=Störung Prio2.
Dabei bezeichnet Rot=Gefahr (Störung Notabschaltung), Grün=Normalzustand Anlage i.B. keine Gefahr.
Wenn ich eine Visu zusammenstelle dann Grün=EIN u. Weiß=AUS.
http://de.wikipedia.org/wiki/Benutzerschnittstelle
Gruß NetFritz

[swiss]

Najaaaa... Ich will ja jetzt keinen Glaubenskrieg anzetteln aber...

Trotz der relativ hohen Zahl an Leuten mit einer Rot/Grün Schwäche hat sich unsere "Technische" Welt auf Rot/Grün eingestellt...

Z.B. im Strassenverker

Aber auch bei Maschienen. So ist ein Notaus immer Rot auf gelbem Untergrund. Und auch bei diversen Geräten hat sich die Rot/Grün bedeutung eingebürgert.

Hast du eine Standbohrmaschiene, ein Kreissägetisch oder ähnliches? Die haben häufig ein gelbes Kästle unter dessem Deckel sich 2 Taster verbergen (Ein grüner zum einschalten und einen roten zum ausschalten) auf dem Deckel des Kästle dann noch einen roten Knopf für den NotAus



Ich komme aus der technischen Welt und habe mich absolut daran gewöhnt, dass Grün = Ein und Rot = Aus bedeutet und ich denke tausende andere auch

Aber es ist ja jedem selbst überlassen

[makki]

Ich finde das geht insgesamt in eine sehr gute Richtung! (auch wenn das noch nicht jeder auf Anhieb erkennen wird)

Zu Farben und Designs halte ich mich bewusst zurück, ich kann sowas nicht wirklich.

Eine (bitte konstruktive) Anmerkung aber:
Bitte den Rot/Grün/an/aus-Käse lassen! (sieht LCARS AFAIK auch nicht vor), ich bin da (mittlerweile) voll auf MatthiasS-Kurs: kein Mensch weiss ob rot oder grün grade an oder aus ist!

Dazu: da muss weder "Ein" noch "Aus" textuell stehen - redundanter, sinnloser Text der Platz kostet - es muss von einem grossteil der Bevölkerung ohne Schulung intuitiv richtig verstanden werden. lightgrey, weiss, schwarz, unsichtbar (am besten), .. ->ist für mich "Aus" rot, grün, whatever ist eher "An"
(es wird wertvoller Platz verschwendet, "Küche" ist nunmal kürzer als "Küche - An")
Besseres Beispiel: Es ist mir egal welche 17 Fenster zu sind, ich will nur das eine offene sehen! (Ok, das ist jetzt wieder knapp an Logik, im intuitiven Kern aber auch Visu)

Daneben sollte man nicht vergessen das lt. Wikipeter 9% der männlichen Bevölkerung eine Rot-Grün-Schwäche haben! Also da primär nur unerkennbare Graustufen sehen (die Damen kommen mit 0,8% erheblich besser weg)
Das werden verständlicherweise nur die wenigsten zugeben, aber es bleibt 1/10..

Makki

[vlamers]

Hi,

hab die Beispiele auch ergoogelt. Problem hier ist, dass ich die CV auf 10Zoll bzw 7zoll geräten verwende/verwenden möchte.

- Entweder ist der Kasten so groß, so dass die schrift lesbar bleibt, dass er eigentlich zu klobig wirkt und das ganze unübersichtlich macht.
- das ist auch ein problem mit den dynamischen höhen. Auf dem 7Zoll Gerät ist es jetzt schon so dass 12 Links in der navbar so hoch sind dass ich scrollen muss. Wenn die links dann kleiner werden treff ich die mit meinen zierlichen Daumen nicht mehr Bei 10 Zoll würde es gerade noch gehen.
- Das Eckige Design versuche ich bei Gelegenheit mal.
- Das mit den Hautfarben der Navbar ist eine gute Idee. Ich hatte versucht wenigstens die zuletzt gedrückte einzufärben, aber da scheiterts an der Umsetzung. Evtl hat dazu jemand ne Idee...

Bei mir ist zw den Navbar elementen ein dünner schwarzer strich... Bei dir nicht?

Im Anhang hab ich mal versucht die Farben raus zu nehmen und nur mit Abstufungen der selben Farbe zu arbeiten. (rot grün sind für mich hierbei als Statusanzeige ein muss)
links und rechts halbkreis sind diagramm_infos. Nur rechts halbkreis sind switches. Eckig mit mini Radius sind infos. Ganz Eckig Pagelink
(muss anmerken dass ich mit der Farbgebung nicht zufrieden bin. muss jetzt aber in die Arbeit... )

Gruß

[haegar80]

Für Verbesserungsvorschläge/Kritik(wird nicht als gemecker empfunden ) wäre ich sehr Dankbar. So kann ich das bißchen Zeit das ich habe effektiv nutzen

Was hältst du denn davon, die Höhe der Buttons dynamisch zu vergeben, so daß diese die komplette Höhe des Bildschirms gleichmäßig auffüllen?
Die Breite dann genauso wie der vertikale Balken ohne Halbkreis. Zwischen den Navbar Elementen, dann etwas Schwarz als Abstand. Der Text dann rechtsbündig und nach untern oder oben ausgerichtet. Das zuletzt gewählte kann dann eine Akzentfarbe bekommen.

Die Line lässt sich dann ganz gut gebrauchen, um die Abschnitte zu gliedern.
evtl. kann man die Flavours nutzten und den Abschnitten eine Hautfarbe zu geben, die dann abgestuft wird.

So in etwa...