- √ - Icons (Design Metal,Switch)

[haegar80]

Hallo zusammen,

irgendwie bin ich mit den icons noch nicht ganz glücklich.

Bei einem Switch/Toggle kann man heute schon icons über das mapping zuweisen. Klappt auch wunderbar!
Die Icons sind aber kleiner als bei einen reinen Info Widget. Das Styling wird bei icons komplett ignoriert (Design Metal). Bei Text klappt es wunderbar.
Kann man das nicht so wie auf meinem Mockup machen?
- größere Darstellung
- Hinterlegung wie bei Switch mit Text

Kann man bei info Widgets evtl. die Icons je nach Styling evtl. auch mit Farbe hinterlegen? (wie bei Switches mit Text)

Es gibt mittlerweile einige neue Icons von mfd, die aber noch nicht in der SVN Version eingebaut sind. Ich habe gesehen, daß diese im design_setup.js definiert werden. Wenn ich die Datei anpasse und es gibt eine neue Revision, ist alles futsch...
Macht es evtl. nicht mehr Sinn, dort nur das Verzeichnis anzugeben und die Icons im Verzeichnis über den Dateinamen zu identifizieren?

Wie geht es euch damit?

Danke + Gruß
Sascha

[Bodo]

Ich habe gesehen, daß diese im design_setup.js definiert werden.
Macht es evtl. nicht mehr Sinn, dort nur das Verzeichnis anzugeben und die Icons im Verzeichnis über den Dateinamen zu identifizieren?

Hoi Sascha

Das sehe ich auch so. Alles was in dem Ordner liegt könnte in die design_setup-js eingelesen werden.

[Chris M.]

Wenn ich die Datei anpasse und es gibt eine neue Revision, ist alles futsch...

Dann hast Du's nicht besser verdient!
Denn der richtige Weg ist die Datei anzupassen und im SVN hochzuladen, dass jeder etwas davon hat - inkl. Du selbst beim nächsten Release

Alles was in dem Ordner liegt könnte in die design_setup-js eingelesen werden.

Geht nicht - JavaScript läuft auf dem Client / Browser, die Datein liegen auf dem Server.
Die einzige Möglichkeit wäre etwas Logik auf dem Server (z.B. in PHP), dass hier das Verzeichnis-Listig überträgt. Aber Ziel der CV ist, dass die Basisfunktionen auch auf einfachen Systemen mit dummen Web-Server funktionieren.

[Bodo]

Hoi

Ja genau ich hatte PHP im Kopf (auf dem Server).

[peuter]

Die Icons sind aber kleiner als bei einen reinen Info Widget. Das Styling wird bei icons komplett ignoriert (Design Metal). Bei Text klappt es wunderbar.
Kann man das nicht so wie auf meinem Mockup machen?
- größere Darstellung
- Hinterlegung wie bei Switch mit Text

Die kleineren Icons in den Switches waren eine Notlösung, da ich es anders nicht hinbekommen habe, dass alle Widgets, egal ob mit oder ohne Icon die selbe Höhe haben. Ich hab das jetzt mal anders versucht zu lösen (Rev. #1065), ohne die Icons zu verkleinern. Ich habe das zwar ausgiebig getestet, aber kann nicht ausschließen, dass die Lösung noch nicht ganz perfekt ist. Also bitte testen und bei Darstellungsfehlern, bitte am besten mit Screenshot und Config-Auszug hier posten.

Kann man bei info Widgets evtl. die Icons je nach Styling evtl. auch mit Farbe hinterlegen? (wie bei Switches mit Text)

Also eigentlich geht das. Ich habe diverse Switches, die Icons per mapping und farbige Hintergründe per styling benutzen und das funktioniert.

Da würde jetzt mal ein Config-Auszug von der besagten Stelle helfen.

Gruß
Tobias

[kleinklausi]

Hallo Tobias,

ich hab jetzt noch nicht extensiv getestet, aber meine Startseite sieht gleich viel besser - mit den größeren Icons.

Danke

[greentux]

kann man die mal sehen?

[haegar80]

Die kleineren Icons in den Switches waren eine Notlösung, da ich es anders nicht hinbekommen habe, dass alle Widgets, egal ob mit oder ohne Icon die selbe Höhe haben. Ich hab das jetzt mal anders versucht zu lösen (Rev. #1065), ohne die Icons zu verkleinern. Ich habe das zwar ausgiebig getestet, aber kann nicht ausschließen, dass die Lösung noch nicht ganz perfekt ist. Also bitte testen und bei Darstellungsfehlern, bitte am besten mit Screenshot und Config-Auszug hier posten.

Das sieht SUPER aus!!!

Also eigentlich geht das. Ich habe diverse Switches, die Icons per mapping und farbige Hintergründe per styling benutzen und das funktioniert.
Da würde jetzt mal ein Config-Auszug von der besagten Stelle helfen.

Das hier meine ich:

<mapping name="AufZuFensterSymbol">
	<entry value="0">
		<icon name="fts_fenster"/>
	</entry>
	<entry value="1">
		<icon name="fts_fenster_offen"/>
	</entry>
</mapping>

<styling name="GrünRot">
	<entry value="0">green</entry>
	<entry value="1">red</entry>
</styling>

<info mapping="AufZuFensterSymbol" styling="GrünRot" align="center">
	<layout colspan="1" rowspan="2"/>
	<address transform="DPT:1.001" readonly="false" variant="">6/2/220</address>
</info>

Hier wird das Symbol nicht hinterlegt. Wird ein Text im Mapping statt dem Symbol verwendet, dann wird die Schrift eingefärbt. Kannst du das erweitern?

Danke
Sascha

[peuter]

Hier wird das Symbol nicht hinterlegt. Wird ein Text im Mapping statt dem Symbol verwendet, dann wird die Schrift eingefärbt. Kannst du das erweitern?

Zunächst mal ist das so das beabsichtigte Aussehen. Das will ich auch nicht ändern. Aber ich habe eine Erweiterung eingecheckt mit der Du die gewünschte Darstellung erreichen kannst. Dafür brauchst Du ein neues Styling:

<styling name="GrünRotBg">
    <entry value="0">green_bg</entry>
    <entry value="1">red_bg</entry>
</styling>

Und dieses benutzt Du dann für alle Items bei denen Du den Hintergrund auch eingefärbt haben willst.

[haegar80]

Danke!

Da ist noch was faul...
Irgendwie scheint er align="center" bei info widgets zu ignorieren.
Der Backround ist evtl. rechtsbündig? (siehe Screenshot)

Gruß
Sascha

[peuter]

Da ist noch was faul...
Irgendwie scheint er align="center" bei info widgets zu ignorieren.
Der Backround ist evtl. rechtsbündig? (siehe Screenshot)

Bei Info widgets gibts kein align Attribut, insofern wird das auch immer ignoriert, das hat aber nichts mit der o.g. Änderung oder dem Metal-Design zu tun, sondern gilt immer. Hab das gerade nochmal getestet, egal ob ich eine Info-Widget mit align oder ohne definiere, da kommt exakt derselbe HTML-Code raus.

Der Unterschied, der sich durch die o.g. Änderung ergibt ist, dass das Info-Widget nun eine Mindestbreite von 117px hat (die Breite des Hintergrundes) und der Inhalt des Widgets zentriert vor diesem Hintergrund dargestellt wird. Dadurch rutscht das der Inhalt des Widgets natürlich nach rechts.

Soviel zur allgemeinen Erklärung. Um Dir zu helfen brauch ich aber wieder einen Config-Auszug am besten von der ganzen group oder zumindest mit allen Elementen, die um das "Problem-Info-Widget" drumrum sind. Da kann ich aber nicht versprechen, ob mir eine vernünftige Lösung, die nicht auch an anderer Stelle Auswirkungen hat, einfällt.

Gruß
Tobias

[Chris M.]

Bei Info widgets gibts kein align Attribut

Wenn's fehlt und Sinn macht: darf man gerne hinzu entwickeln

[Robert_Mini]

Dann hast Du's nicht besser verdient!
Denn der richtige Weg ist die Datei anzupassen und im SVN hochzuladen, dass jeder etwas davon hat - inkl. Du selbst beim nächsten Release

In
https://knx-user-forum.de/knx-uf-ico...ration-cv.html

wurde genau das schon vor geraumer Zeit andiskutiert. Nur leider hat sich noch keiner darum angenommen .

Vielleicht kann haeger80 das machen, die .js hast du ja schon...
lg
Robert

[peuter]

Wenn's fehlt und Sinn macht: darf man gerne hinzu entwickeln

Tja wenn ich wüsste wie, dann hätte ich das schon gemacht . Bei einem Text-Widget kann man die Positionierung ja noch einfach mit text-align beeinflussen. Bei allen Widgets, die aus zwei Teilen bestehen (Label + Actor) geht das eben nicht mehr. Die beiden Teile werden mit einem float: left versehen und ab da greift ein text-align nicht mehr, weil der Actor keine definierte Breite mehr hat sondern genauso breit wie sein Inhalt ist. Und daher macht es keinen Unterschied, wenn ich den Inhalt in die Mitte oder nach rechts verschiebe. In diesen Fällen muss man also den Actor selbst zentrieren und nicht dessen Inhalt. Und da wüsste ich nicht wie ich das mit CSS hinbekommen sollte.

Das zweite Problem fällt mir gerade beim Schreiben ein, wenn ich z.B. ein Info-Widget mit align="center" habe, worauf sollte sich dann das align beziehen, auf das Label, den Actor oder beides.

Also doch recht problematisch für eine auf den ersten Blick einfache Sache.

[haegar80]

Soviel zur allgemeinen Erklärung. Um Dir zu helfen brauch ich aber wieder einen Config-Auszug am besten von der ganzen group oder zumindest mit allen Elementen, die um das "Problem-Info-Widget" drumrum sind. Da kann ich aber nicht versprechen, ob mir eine vernünftige Lösung, die nicht auch an anderer Stelle Auswirkungen hat, einfällt.

Hallo Tobias,

hier das Mapping und ein Screenshot:

<group Name="test">
	<layout colspan="1"/>
	<info mapping="AufZuFensterSymbol" styling="GrünRotBG" align="center">
		<layout colspan="1"/>
		<address transform="DPT:1.001" readonly="false" variant="">6/2/220</address>
	</info>
	<info mapping="AufZuFensterSymbol" align="center">
		<layout colspan="1"/>
		<address transform="DPT:1.001" readonly="false" variant="">6/2/220</address>
	</info>
</group>

Wie du siehst wirkt sich das neue Styling auf die Ausrichtung des Symboles aus. Wenn nun colspan sehr schmal ist (z. B. 0.5), dann ist das Icon gar nicht mehr sichtbar. Mir würde am besten gefallen, wenn das Icon immer zentriert dargestellt würde.

Viele Grüße
Sascha