Eigene Icons als PNG Bilder

thinman · 09 März 2018, 10:53:07

Hallo,

ich verschuhe gerade PNG Bilder als Ikone einzubinden, leider ohne Erfolg.
Im Wiki steht:

<head>
  <style type="text/css">
        .logo-fhem {
            background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;
            width: 120px;
            height: 132px;
            background-size: contain;
        }
  </style>
</head>
<body>
  <div data-type="symbol" data-icon="logo-fhem"></div>
</body>

Wenn ich diese Definition übernehme aber im Body folgendes schreibe:

Code Auswählen

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
	<div data-type="symbol" data-icon="logo-fhem"></div>
</li>

Wird zwar das Kästchen erzeugt aber es bleibt leer.
Ich hab gecheckt, das URL für den Fhem Logo funktioniert.

Kann mir jemand helfen wie ich PNGs as Icons verwenden kann?
Kann ich diese Icons dann auch bei allen Widgets verwenden? (Switch, Button, etc.)
Wenn ich die PNGs lokal speichere, wie sieht dann die Definition aus? (Was steht statt URL da?)

Danke für Eure Hilfe.

thinman · 09 März 2018, 16:51:34

Wenn man mit der Materie nicht auskennt, bleibt nur trial & error...

Was ich bisher herausgefunden habe:
- die Definition gehört nicht in die HTML File in dem man das Icon benutzen möchte, sondern ins index.html.
- die so definierte Icon kann dann in jegliche Widget benutzt werden. (Ich hab bisher Button und Switch getestet).

Wo ich nicht weiter komme ist die Benutzung von lokalen Bilder.
Ich hab schon versucht die Bilder in www/tablet/images und auch direkt in www/tablet abzulegen und als Referenz habe ich alles mögliche durchprobiert:
url(./images/name.png)
url(/www/tablet/images/name.png)
und noch etliche mehr.
Bisher ohne Erfolg.
Hat jemand ein Tipp wie das lokale Referenz aussehen soll?

Diese Image Definition:

Code Auswählen

<div  data-type="image" data-url="./images/Test.png" data-size="60%" style="position: absolute; left:60px; top:105px; width:150px;" class=""></div>

funktioniert einwandfrei.
Das selbe PATH Format geht aber in index.html nicht.. $:-\$

thinman · 12 März 2018, 12:43:57

Hat wirklich kein FHEM/FTUI Koryphäe eine Idee wie man die lokalen Bilder einbindet?

Im normale HTML/CSS ist es ohne weiteres möglich also muss es auch bei FHEM irgendwie gehen, oder?

FTUI ist ein zweckmäßiges und auch sehr umfangreiches Interface aber das Aussehen ist sehr veraltet und alles andere als schön. (Nix für Ungut

).
Diese Funktion ist die Schlüssel um das betagte Aussehen aufzupeppen und richtig coole Interfaces bauen zu können.

Ich habe mittlerweile einige Icons für meine Fernbedienung gebastelt und über einem Umweg durch meine Telekom Webspace eingebunden.
Anbei ein Screen shot. Ich finde, die Unterschied ist riesig.

Ich habe einen schwarzen Hintergrund gewählt, weil das Raster Background schwarz ist und weil beim Fernsehen in dunklen Zimmer eine Helle Bildschirm stört.
Mit einer Hintergrundbild und die dazu passende Widget Ikonen (PNG mit Transparenz) wären aber alle Arten von hochmoderne Skins möglich.
Mit entsprechende Rahmen oder Angedeutete Dislpays im Hintergrundbild wäre auch eine hübsche Einbindung von Widgets ohne Icons (Slider, Thermostat, etc.) auch möglich.
Wenn ich die super komplexe FTUI Beispiele von einigen Usern ansehe, wäre Skinning sicher für viele interessant.

Die Ladegeschwindigkeit hält sich in Grenzen. Wenn ich das Fully Browser starte, dauert es 2-3 Sekunden im WLAN bis die Bilder geladen sind. Mit lokalen Bilder wäre das sicherlich einiges flotter.
Beim Wechsel zwischen verschiedene Pages werden die Bilder sofort dargestellt also kein Nachteil gegenüber der Standard FTUI Look.

Bei der Definition habe ich sowohl die tatsächliche Bildgröße angegeben als auch das endgültige Darstellungsgröße.
(Hab die Bilder Doppel so groß gemacht um auch auf ein größeren Tablet mit entsprechenden Scale Factor in Fully keine verpixelte Widgets zu haben.)

Code Auswählen

	
<style type="text/css">
		.divider        { background: url(http://www.IrgendeinWebspace.de/ICONS/Divider_ChromeBLCAK_Thin.png) no-repeat; width: 600px; height: 41px; background-size: 600px 41px; }
		.mute           { background: url(http://www.IrgendeinWebspace.de/ICONS/SQ_Mute.png) no-repeat; width: 200px; height: 164px; background-size: 100px 82px; }
		.play           { background: url(http://www.IrgendeinWebspace.de/ICONS/SQ_Play.png) no-repeat; width: 200px; height: 164px; background-size: 100px 82px; }
...

Bei der Verwendung muss "fullsize" als class angegeben werden sonst füllen die Bilder nicht das ganze Kästchen.

Code Auswählen


<li data-row="12" data-col="5" data-sizex="2" data-sizey="2">
			<div data-type="button" data-icon="play" data-device="harmony_38628892" data-set="command Play" class="fullsize"></div>
</li>

Die Positionierung in Containern ist sicherlich schwieriger aber damit habe ich mich noch nicht befasst.

Ich finde die Zugewinn an optischen Qualität deutlich und deswegen wäre es toll, wenn ein Experte reinschauen könnte wie man die Bilder lokal einbindet.
Danke.

setstate · 12 März 2018, 13:02:10

Was ist mit dem Image Widget und als data-fhem-cmd="set MyDevice on" als onClick Action?
Die Icons beim Switch, Push usw. sind Font-basierend, keine Bilder.

Als Inspirationen bezüglich UI Style 2018 kannst du ja mal bei Google "ui style guide" eingeben.

thinman · 12 März 2018, 20:44:06

Zitat von: setstate am 12 März 2018, 13:02:10
Die Icons beim Switch, Push usw. sind Font-basierend, keine Bilder.

Sorry, das sehe ich anders. Die PNG Bilder funktionieren bei mir einwandfrei und auch im Offiziellen FHEM Wiki ist diese Funktion dokumentiert.
(Siehe mein erster Post, auch wenn es da nur um data-type=symbol geht.)

Zitat von: setstate am 12 März 2018, 13:02:10
Was ist mit dem Image Widget und als data-fhem-cmd="set MyDevice on" als onClick Action?

Natürlich wäre es möglich nur mit einem Image zu arbeiten aber damit verschenkt man die Möglichkeit unterschiedliche Bilder bei unterschiedlichen States zu verwenden.

Switch zum Beispiel erlaubt verschiedene Ikonen (auch Bilder) für verschiedene Schaltzustände.
Unten sind zwei Screenshots die auf die Schnelle gebastelte Buttons mit unterschiedliche Status zeigen.
Nach einen Schaltvorgang werden die Bilder automatisch getauscht und damit spiegelt das Bild genau der Zustand des Device wieder.
Das ist doch eine sehr coole Feature.
(Bei der ersten Schaltvorgang dauert aber das laden des anderen Bildes eine halbe Sekunde. Danach ist es instant. Hier spielt wieder das nicht lokal gespeicherte Bild eine Rolle.)
Hier ist das Code für die Glühbirne:

Code Auswählen

<li data-row="23" data-col="3" data-sizex="4"   data-sizey="4">
		<div data-type="switch"
			data-icons='["bulbON", "bulbOFF"]'
			data-device="ESPEasy_Sonoff_Vitrine_Relais"
			data-set-states='["on","off"]'
			data-states='["on","off"]'
			data-get="STATE"
			data-get-on="on" 
			data-get-off="off" 
			data-set-on="off" 
			data-set-off="on"
			class="fullsize">
		</div>
</li>

setstate · 12 März 2018, 22:39:00

Sorry, die Sache mit dem background: url(... kannte ich noch garnicht.

es funktioniert lokal mit

Code Auswählen

background: url(images/test.png) no-repeat;

, images ist ein Ordner parallel zum js, css oder lib Ordner.

Man kann die Angabe unter url auch absolut angeben. Besser ist aber relativ, wie in meinem Beispiel.
Dabei muss man aber aufpassen, wo man sich gerade befindet. Die Angabe unter <style> im html File direkt, benötigt: url(images/test.png)
Wenn man das aber im css File definiert, ist man im css Unterverzeichnis. Man muss also erst einmal eine Ebene hoch: url(../images/test.png)

thinman · 13 März 2018, 19:28:52

Klasse! Vielen Dank!

Ich hab alle mögliche Verzeichnisse durchprobiert (auch diese) aber ich glaube ich habe bei etlichen versuchen entweder ./ am Anfang oder Apostrophen benutzt.

So funktioniert es einwandfrei und damit ist die Ladegeschwindigkeit beim ersten Darstellung der Bilder extrem schnell und völlig akzeptabel.
Jetzt steht des fröhliches "verpixeln" nix mehr im Wege.

Besten Dank nochmal!

ToM_ToM · 08 Juni 2018, 12:51:08

Hallo Zusammen,

die Pfade zu den Images kann man auch "absolut relativ" angeben.

Ich hatte auch erst mit realtiven Pfaden gearbeitet. Sobald ich die HTML-Datei aber z.B. in einen Unterordner "smartphone" lege, muss ich die Pfade nachziehen da er sonst keine Bilder mehr anzeigt.
Jetzt mache ich das daher "absolut relativ" (am Bsp. vom img-tag: <img src="/fhem/www/tablet/images/DEIN_BILD_ORDER/DEIN_BILD.jpg" />

Ich versuche auch ein PNG-Bild oder SVG-Bild in FTUI als Symbol zu nutzen. In der FHEM-Oberfläche kann ich ja jedes SVG-File einfach ohne Probleme per "Select Icon" im Device wählen.
Und anscheinend gibt's ja hier von thinman eine Lösung, die ich aber irgendwie nicht ganz verstehe.

Könnt ihr mir das nochmal erklären?

- Was muss ich wo definieren um z.B. meine PNG-Datei in einem Symbol-Widget zu nutzen?
- Wie muss das Symbol-Widget aussehen? Übergebe ich hier einen Namen oder Dateinamen...?

VG, Thomas

thinman · 08 Juni 2018, 20:01:42

Hallo Thomas,

Du musst die Bilder im index.html file in den <style> Bereich definieren. Z.B. So:

Code Auswählen


<style type="text/css">
	.slideON        { background: url(images/Slider_ON.png) no-repeat; width: 200px; height: 328px; background-size: 50px 82px; }
	.slideOFF       { background: url(images/Slider_OFF.png) no-repeat; width: 200px; height: 328px; background-size: 50px 82px; }
	.vitrineON      { background: url(images/VitrineON.png) no-repeat; width: 300px; height: 300px; background-size: 100px 82px; }
	.vitrineOFF     { background: url(images/VitrineOFF.png) no-repeat; width: 300px; height: 300px; background-size: 100px 82px; }
</style>

Meine Bilder sind größer und werden dann mit den background-size Angabe auf die tatsächliche Größe im FTUI Fenster "skaliert".
Anschließend kannst Du das Image unter der definierte Name benutzen. Bei mir dann in den index_Licht.html so:

Code Auswählen


<!-- Vitrine On/OFF - Icon -->
<li data-row="6" data-col="1" data-sizex="1" data-sizey="2">
		<div data-type="switch"
			data-icons='["slideON", "slideOFF"]'
			data-device="ESPEasy_Sonoff_Vitrine_Relais"
			data-get="STATE"
			data-get-on="on" 
			data-get-off="off" 
			data-set-on="off" 
			data-set-off="on"
			data-set-states='["on","off"]'
			data-states='["on","off"]'
			class="fullsize">
		</div>
</li>
<li data-row="6" data-col="2" data-sizex="2" data-sizey="2">
		<div data-type="switch"
			data-icons='["vitrineON", "vitrineOFF"]'
			data-device="ESPEasy_Sonoff_Vitrine_Relais"
			data-get="STATE"
			data-get-on="on" 
			data-get-off="off" 
			data-set-on="off" 
			data-set-off="on"
			data-set-states='["on","off"]'
			data-states='["on","off"]'
			class="fullsize">
		</div>
</li>

Es sieht dann in der FTUI Darstellung so wie im angehängten Bild. (Die On/Off Slider und Glühbirne im Beispiel)

Grüße
Steve