Client individualisieren / Skin & Avatar

[cap-blackbeard]

Es ist bestimmt möglich Skin & Avatar auf ein persönliches Thema anzupassen.

Skin & animierter Avatar:

• Wie sind die Vorgaben für den Hintergrund (Dateiformat, dpi...)
• Wo müssen die Dateien gespeichert werden?
• Was muss ich wo eintragen, dass Skin & Avatar im Client ausgewählt werden können?
• Was muss ich beachten?

[fquirin]

Die Avatare und Skins sind pure CSS Dateien im 'css' Ordner mit den Namen sepiaFW-skin-... und sepiaFW-avatar-. Neue Files werden in der index.html registriert, z.B. so:

• "My Skin": {id: 50, css: "css/sepiaFW-skin-my.css", avatar: "10", base: 1}
• "My Avatar": {id: 10, css: "css/sepiaFW-avatar-my.css", base: 2}

Bei der 'id' muss man aufpassen, dass sie noch frei ist und bei 'base' kann man einen existierenden Skin/Avatar als Basis benutzen. Wenn man eine Basis benutzt braucht man in der eigenen CSS nur die Änderungen eintragen, so kann man z.B. schnell eine einzelne Farbe ändern etc..

Anforderungen an den Hintergrund sind im Grunde erstmal keine strikten gegeben, allerdings folge ich ein paar eigenen Regeln:

• Der Hintergrund sollte unaufdringlich sein. Meistens wähle ich einfache, großflächige Muster.
• Wenig Farben. Am Besten nur Grautöne die sich durch Transparenz von der Hintergrundfarbe abheben.
• Die Datei sollte so klein wie möglich sein. Die aktuell größte Datei ist z.B. 32KB.
• Format sollte am Besten 8bit PNG mit Alpha oder SVG sein. JPG wäre im Grunde auch ok.
• Breite und Höhe sollten irgendwo zwischen 500-1500px sein

Zu beachten gibt es eigentlich nur, dass man auch wirklich alle Komponenten erwischt, wenn man einen neuen Skin erstellt ^^, denn viele Sachen sind nicht sofort sichtbar. Am Besten nimmt man sich einen komplexeren Skin als Vorlage. Ich arbeite immer mit den Chrome Entwicklertools um neue Designs auszuprobieren, verändere dort die Farben und Formen ("Elements" Tab) und übertrage die Änderungen dann in meine CSS Datei. Am Besten nutzt man den Demo-Modus im Client (user: 'test' oder 'test2', Passwort: 'test123'), dort gibt es einige Buttons, die verschiedene Komponenten öffnen und man kann alles testen ohne den Server laufen zu lassen.

Avatare zu machen ist etwas knifflig, da muss man viel Kreativität nutzen, denn man muss mit den Komponenten arbeiten, die der standard Avatar bietet und diese dann verformen ^^. Der ILA Avatar nutzt z.B. nur ein Auge des Klassik usw..

Wenn man etwas ganz eigenes machen will kann man auch ganz gut mit den custom widgets arbeiten. Da hat man quasi eine HTML Datei in der man sich austoben kann und die man einfach auf den Server kopiert, um sie via Teach-UI zu laden. Das "Clock" Widget im Demo-Modus ist z.B. sowas.

[cap-blackbeard]

Da ist noch extrem viel Luft nach oben. Aber der Anfang hat geklappt.

Bei der 'id' muss man aufpassen,

muss die "id" fortlaufend sein? Oder kann ich z.B. die "100" benutzen? Ich denke nur an das letzte Update, bei dem Du weitere Skins hinzugefügt hast.

Hast Du ne Liste, wie die grundlegenden Elemente heißen? Würde mir helfen, die .css besser zu verstehen.

Wäre es möglich, das Hintergrundbild zu animieren? Ich denke da an Elemente der Systemressourcen, wie sie z.B. bei dem Tool Conky dargestellt werden. CPU-Auslastung oder Eingang-Mic.-Pegel...

[fquirin]

nice :sunglasses:

Bei der ID kann man beliebig hohe Zahlen wählen, für eigene Skins macht es sicher Sinn vielleicht bei 1000 anzufangen, damit vermeidet man auf jeden Fall Konflikte mit den offiziellen ;-)

Hast Du ne Liste, wie die grundlegenden Elemente heißen? Würde mir helfen, die .css besser zu verstehen.

Eine kommentierte Liste gibt es nicht, aber der Browser selbst ist eigentlich optimal dafür. Einfach die Dev Tools öffnen und ein Element makieren:

Ein bisschen schwieriger ist es mit Elementen die erst auftauchen, wenn man z.B. Mikrofon Input hat etc.. Die Grund "states" kann man testweise über die Konsole aktivieren, z.B.: SepiaFW.animate.assistant.listening().

Wäre es möglich, das Hintergrundbild zu animieren? Ich denke da an Elemente der Systemressourcen, wie sie z.B. bei dem Tool Conky dargestellt werden. CPU-Auslastung oder Eingang-Mic.-Pegel...

Man kann theoretisch GIFs oder Videos als Hintergrund benutzen, ich wüsste allerdings nicht wie man Daten wie die CPU Auslastung in die App kriegen würde. In Linux selbst könnte man aber eventuell die Fenster so konfigurieren dass solche Sachen neben oder über der SEPIA App liegen.