+ Antworten
Ergebnis 1 bis 3 von 3
  1. #1
    Registriert seit
    Mar 2016
    Ort
    bei Hannover
    Beiträge
    17

    Standard Material Design Skin 2.0 (IPS 4.0/4.1)

    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

    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	d_indigo_blau.png 
Hits:	805 
Größe:	191.3 KB 
ID:	38297

    Beispiel 2 - Mit Segoe Script als Font

    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	blaugrau_segoe_script.jpg 
Hits:	642 
Größe:	119.8 KB 
ID:	38298

    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 ...).

  2. #2
    Registriert seit
    Nov 2017
    Beiträge
    13

    Hallo Uhula,

    Vielen Dank für deinen tollen Skin.

    Ich habe gerade von paresy erfahren, dass ich (totaler Newbie in ipsymcon). Aktuell keine svgs einbinden kann. Einziger weg wäre über die webfront.css. Du scheinst genau das zu machen - kannst du mir kurz erklären wie du svgs einbindest?

    Gruss und Danke
    Dominic

  3. #3
    Registriert seit
    Feb 2005
    Ort
    Lübeck
    Beiträge
    17,370

    Du WebFront.css ist in deinem Skin. Und dort kannst du beliebigen CSS Inhalt einfügen. Schau dir mal z.B. den DarkSkin von mir an. Dort kannst du sehen wie ich die Farben verändere.

    paresy

Ähnliche Themen

  1. Material Design Skin für IPS V4.0
    Von Uhula im Forum WebFront Skins
    Antworten: 26
    Letzter Beitrag: 15.03.17, 11:10
  2. LCARS Skin
    Von sanipeter im Forum WebFront Skins
    Antworten: 45
    Letzter Beitrag: 29.11.16, 15:40
  3. Skin Manager
    Von Flobo im Forum Allgemeine Diskussion
    Antworten: 2
    Letzter Beitrag: 09.06.15, 16:58