Es gibt eine neue Version 2.0 meines Material Design Skins für den IPS Webfront. Wer noch im alten Thema nachlesen möchte: Material Design Skin für IPS V4.0
Was hat sich verändert ?
- Anpassungen an IPS 4.1
- Instanz-Eigenschaftsdialog bereinigt
- Font konfigurierbar, „Roboto“ statt „Arial“ als Standard
- Darstellung Enum/Select überarbeitet (aktives Element ist nun größer)
- CSS Hacks für Größenangaben usw.
Der wählbare Font und die CSS-Hacks sind erwähnenswert und bieten neue, ungeahnte Möglichkeiten der Webfront-Gestaltung. Es folgt eine kleine Beschreibung und anschließend zwei Bilder mit Beispielen.
CSS-Hacks
IPS bietet leider keine Möglichkeit in den Instanzen individuelle CSS-Tags mit aufzunehmen,
die dann im CSS ausgewertet werden könnten.
Aber
Jede Instanz hat ein Icon, welches im WebFront dann links vor dem Text angezeigt wird. Wenn man
auf diese Icon verzichten kann (ich mag sie nicht), dann kann man hierüber CSS-Tags
setzen. IPS rendet nämlich jeden Icon-Eintrag, egal ob das Icon existiert oder nicht.
Im Eingabefeld des Icon-Names sind dann die CSS-Tags statt der Iconnamen einzugeben.
Folgende CSS-Tags kann der MaterialDesignSkin interpretieren:
link.show=true
Für Charts und Select-Eingaben mit vielen Einträgen, erscheint im WebFront rechts in
der jeweiligen Zeile ein Link in Form einer Schaltfläche. Wenn das nicht in jeder
Zeile der Fall ist, sieht der rechte Rand zerfleddert aus. In den Zeilen/Instanzen,
bei denen kein Link eingeblendet wird, kann man mit link.show=true trotzdem dafür sorgen,
dass der Link-Bereich freigehalten wird (Konkret wird der rechte Rand des EIngabebereichs
auf 36px gesetzt).
Bsp:
ele.width=32px | 48px | 64px | 80px | 96px
Da die Breite der Werte in den num/Select-Zeilen abhängig vom Textinhalt ist,
führt dieses teilweise zu unschönen Darstellungen. Über ele.width=XXpx kann die
Breite der Wertdarstellung auf ein Minimum festgelegt werden. Die Werte
erscheinen dann tabellarisch schön untereinander.
Hinweis: Längere Textinhalte werden nicht abgeschnitten und müssen manuell
gekürzt werden.
title.color=accent
Manchmal macht es Sinn innerhalb von Containern noch Zwischenüberschriften z.B.
durch einen Link auf eine Dummy-Instanz zu bilden. Über title.color=accent kann
diese Überschrift in der Accentfarbe eingefärbt werden und wirkt dadurch als
Überschrift.
title.width=32px | 64px | 128px
Wenn mehrere Slider untereinander gesetzt werden, dann beginnen diese immer direkt
nach der Bezeichnung (title). Bei unterschiedlich Breiten Bezeichnungen sieht
das unruhig aus. Über title.width=XXpx kann die Bezeichnungsausgabe auf eine
Mindestlänge gesetzt werden.
Hinweis: Längere Textinhalte werden nicht abgeschnitten und müssen manuell
gekürzt werden.
slider.color=red | green | blue | white | yellow
Slider werden normalerweise in der Accentfarbe gezeichnet. Bei RGB-Eingaben kann
es aber gewünscht sein, diese in rot … darzustellen. Über slider.color=XXX
kann eine Einfärbung gesetzt werden.
ele.style=btn
Enum- bzw. Select-Eingaben werden immer als Switcheingaben dargestellt, also
mit einem runden Rahmen versehen und das aktive Elemente ist in der Accentfarbe
hinterlegt. Wird die Enum-Eingabe aber so genutzt, dass es eigentlich kein
aktives Element gibt, sondern es sich um Schaltflächen handelt, so kann über
ele.style=btn die Darstellung als Schaltfläche erzwungen werden.
Beispiele
Beispiel 1 - Vergleich mit/ohne CSS Hacks
Beispiel 2 - Mit Segoe Script als Font
Nähere Infos, Anleitungen usw. unter GitHub
Für den Skin: GitHub - Uhula/IPSMaterialDesignSkin: Skin der Art „Material Design“ für IPSymcon Webfront
Für das Options-Modul: GitHub - Uhula/IPSMaterialDesignSkinOptions: IPS-Modul zum Setzen der „Material Design“ Skin Optionen IP Symcon Webfront
Der Skin wird sicher für Spezialmodule, wo HTML Content direkt, ohne Rücksicht der IPS CSS classes, erstellt wird, nicht passend sein, aber für den Standard sollte er funktionieren. Ach ja, es gibt immer nur genau einen MD-Skin, also nicht je Frontend (noch nicht …).