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 :wink:
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 …).

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

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

Hallo,

Kann mir jemand verraten, an welcher Stelle ich genau die css hacks eintragen muss? Muss ich das in den Variablenprpfileb machen? Ich stell mich glaube ich einfach zu doof an…

Hallo,

funktioniert das Options-Modul auch unter Symcon5.0? Ich bekommer immer Fehlermeldungen wenn ich die Webfront enstellen will. Die Module sind an den richtigen Orten installiert. Ich habe es auf 2 unterschiedlichen Systemen probiert, immer das gleiche.

Gruß qinshi

Got it working with 2 small changes.

in IP-Symcon\modules\IPSMaterialDesignSkinOptions\IPSMaterialDesignSkinOptions\module.php

Line 94 , change :
public function SetSkinTheme(integer $skintheme) {
To:
public function SetSkinTheme($skintheme) {

Line 171, change :
$skin_path = IPS_GetKernelDir().„webfront/user/skins/IPSMaterialDesignSkin/“;
To:
$skin_path = IPS_GetKernelDir().„webfront/skins/IPSMaterialDesignSkin/“;

Did it for me…now the skin options module works on 5.0

Habe gestern erfolgreich den obigen Skin installiert und konnte auch mit den Farben experimentieren. Leider finde ich heute die Stelle in IPS nicht mehr, bei der man die Farben einstellen kann. Vielleicht kann mir mal jemand auf die Sprünge helfen.

Gruß Wolfgang

Habe die Frage nochmals im Forum unter „Webfront Skins“ gestellt.

Bitte nicht Fragen mehrfach stellen.
Wo soll man dann antworten?

Du musst eine passende Instanz des Moduls im Objektbaum haben, wo du das einstellen kannst.
Schau doch im ersten Beitrag bei den dort verlinkten Anleitungen nach.
Michael

Hallo Nall-chan,

ich hätte den Eintrag hier ja gerne gelöscht, weiss nur nicht wie?

Habs gefunden. Danke für den Tipp!

Warum?
Die Frage gehört doch zu diesem Skin.
Also ist die hier schon korrekt platziert.

Michael

ok, war mir nicht sicher nachdem die letzte Antwort in dem Thread schon lange her war.

Problem aber gelöst. War einfach nur blind :banghead:

Hi,
wollte den Skin eben installieren bekomme aber leider angehängte Fehlermeldung. Ideen/Lösungen?

Ralf

material.png

Vermutlich versuchst Du den Skin über die Modul-Verwaltung anstelle über die Skin-Instanz zu installieren … :wink:

Hi,
natürlich hast Du leider recht:-)

Ralf

Hi ich bekomme bei Veränderungen im Modul immer folgende Fehlermeldung beim Übernehmen:

<br />
<b>Warning</b>:  file_get_contents(/var/lib/symcon/webfront/user/skins/IPSMaterialDesignSkin/webfront.css): failed to open stream: Datei oder Verzeichnis nicht gefunden in <b>/var/lib/symcon/modules/IPSMaterialDesignSkinOptions/IPSMaterialDesignSkinOptions/module.php</b> on line <b>181</b><br />
<br />
<b>Warning</b>:  file_put_contents(/var/lib/symcon/webfront/user/skins/IPSMaterialDesignSkin/webfront.css): failed to open stream: Datei oder Verzeichnis nicht gefunden in <b>/var/lib/symcon/modules/IPSMaterialDesignSkinOptions/IPSMaterialDesignSkinOptions/module.php</b> on line <b>282</b><br />
 (Code: -32603)

Hatte unter IPS V5.5 das gleiche Thema… schaue mal ein paar Beiträge weiter oben bei @arnoldl
im module.php in /var/lib/symcon/modules/IPSMaterialDesignSkinOptions/IPSMaterialDesignSkinOptions/module.php
in den Zeilen 94 und 100 das integer in der Funktions-Klammer entfernen, in 106 boolean und in 111 string (Umstellung PHP-Version zw. IPS V4 und V5)
Weiterhin in Zeile 171 „user/“ aus dem Pfad entfernen, da der Skin jetzt an anderer Stelle installiert wird.
dann funktioniert es…