Anzeigen von Icons im Widget

[scotty]

Hallo Zusammen,

zum wechseln von Radiosender habe ich mir dieses Widget gebaut:

Code: Alles auswählen

<div ng-if="itemValue('HarmonyHubCurrentActivity') =='Radio'>
  <div class="row">
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number1')"><img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/vest.svg" width="100" height="75"></button></span></div>
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number2')"> <img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/985.svg" width="100" height="75"></button></span></div>
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number3')"> <img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/wdr2.svg" width="100" height="75"></button></span></div>
  </div>
  <br></br>
  <div class="row">
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number4')"> <img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/bay3.svg" width="100" height="75"></button></span></div>
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number5')"> <img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/rel.svg" width="100" height="75"></button></span></div>
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number6')"> <img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/ndr2.svg" width="100" height="75"></button></span></div>
  </div>
  <br></br>
  <div class="row">
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number7')"> <img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/swr3.svg" width="100" height="75"></button></span></div>
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number8')"> <img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/1Live.svg" width="100" height="75"></button></span></div>
    <div class="col-xs-4"><span><button style="border: none; background: none;" ng-click="sendCmd('HarmonyHubButtonPress', 'Number9')"> <img src="http://xxx.xxx.xxx.xxx:8080/icons/classic/hr3.svg" width="100" height="75"></button></span></div>
  </div>
</div>

Leider werden die Icons nicht angezeigt, obwohl es sich um das Format "svg" handelt und sie im Verzeichnis "/icons/classic" abgelegt sind. Installiere ich jedoch einzelne Schaltflächen, dann klappt alles wie gewünscht. Es muss also irgendwo am Aufbau des Widgets liegen.

Hat dazu jemand eine Idee ?

[OliverCJ]

Ja, habe ich. Soll aber angeblich nicht ganz sauber sein.. Mir persönlich ist das egal

Im CONF Ordner gibt es ja auch einen Ordner "html". Leg Dir darunter mal einen Ordner an, z.B. "bilder" und da packst Du deine Icons rein. Und dann im <img src> den folgenden Verweis verwenden:

Code: Alles auswählen

<img src="/static/bilder/wdr2.svg" width="32" height="32">

Hier nur ein Beispiel, width und height musst Du ausprobieren. Und JA, /static/ ist korrekt!

[scotty]

Ich hab mich schon gefreut und gedacht, Mensch - der Oliver ist ja ein richtiger Tausendsassa. Dein Vorschlag hat aber leider nicht funktioniert. Jetzt tüftle ich weiter und hoffe, dass weitere Tipps kommen.

[OliverCJ]

Hmm, komisch, ich habe das bei dem anderen Widget von Dir (Thema Auswahl Harmony Aktionen) tatsächlich so gelöst. Hatte den Tipp irgendwo aus dem Netz... Nur mal wie es bei mir aussieht:

Code: Alles auswählen

<div ng-if="itemValue('Hub_EG_Aktion')=='PowerOff'">
	<button style="width: 100%; height: 4em; font-size: 14px; color: black; background: black" ng-click="sendCmd('Hub_EG_Aktion', 'PowerOff')"><i>Power Off</i></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')!='PowerOff'">
	<button style="width: 100%; height: 4em; font-size: 14px; color: red; background: black" ng-click="sendCmd('Hub_EG_Aktion', 'PowerOff')">Power Off</button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')=='Fernsehen'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: midnightblue" ng-click="sendCmd('Hub_EG_Aktion', 'Fernsehen')"><i>Fernsehen</i></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')!='Fernsehen'">
  <button style="width: 100%; height: 4em; font-size: 14px; background: green" ng-click="sendCmd('Hub_EG_Aktion', 'Fernsehen')"><img src="/static/bilder/television.png" width="32" height="32"></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')=='BluRay schauen'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: midnightblue" ng-click="sendCmd('Hub_EG_Aktion', 'BluRay schauen')"><i>BluRay schauen</i></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')!='BluRay schauen'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: green" ng-click="sendCmd('Hub_EG_Aktion', 'BluRay schauen')"><img src="/static/bilder/cd-player.png" width="32" height="32"></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')=='Musik'">
  <button style="width: 100%; height: 4em; font-size: 14px; background: midnightblue" ng-click="sendCmd('Hub_EG_Aktion', 'Musik')"><i>Musik</i></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')!='Musik'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: green" ng-click="sendCmd('Hub_EG_Aktion', 'Musik')"><img src="/static/bilder/music-note.png" width="32" height="32"></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')=='Spielen'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: midnightblue" ng-click="sendCmd('Hub_EG_Aktion', 'Spielen')"><i>Spielen</i></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')!='Spielen'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: green" ng-click="sendCmd('Hub_EG_Aktion', 'Spielen')"><img src="/static/bilder/xbox.png" width="32" height="32"></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')=='ChromeCast'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: midnightblue" ng-click="sendCmd('Hub_EG_Aktion', 'ChromeCast')"><i>ChromeCast</i></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')!='ChromeCast'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: green" ng-click="sendCmd('Hub_EG_Aktion', 'ChromeCast')"><img src="/static/bilder/chromecast.png" width="32" height="32"></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')=='Radio'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: midnightblue" ng-click="sendCmd('Hub_EG_Aktion', 'Radio')"><i>Radio</i></button>
</div>
<div ng-if="itemValue('Hub_EG_Aktion')!='Radio'">
	<button style="width: 100%; height: 4em; font-size: 14px; background: green" ng-click="sendCmd('Hub_EG_Aktion', 'Radio')"><img src="/static/bilder/radio.png" width="32" height="32"></button>
</div>

Zwei Unterschiede sehe ich:
1. Ich verwende das png-Format
2. Das Leerzeichen zwischen dem öffnenden button-Tag und dem <img src>, aber das sollte nichts machen

HP-Aktionen.JPG

ach so, dann hatte ich auf selfhtml noch gelesen, dass bei width und height innerhalb von <img src> mittlerweile keine prozentuale Angabe mehr erlaubt ist. D.h. die Angabe die Du dort machst, muss eine Pixelangabe sein... vielleicht ist 100 einfach zu viel ???

[scotty]

Tja, ich weiß auch nicht woran es liegt. Versucht habe ich es mit png- bzw. svg-Dateien und auch die von dir angesprochene Leerzeile brachte nicht den gewünschten Erfolg. Noch werfe ich allerdings nicht das Handtuch, es wird weiter probiert.

[OliverCJ]

okay, anders: Was passiert denn, wenn du das img src gegen einfachen Text austauschst?
Dann sollte in deinem Button ein Text stehen.. passiert das?

[scotty]

Wie muss denn dann genau die Zeile formuliert werden?

[OliverCJ]

Zwischen dem öffnenden Tag <button> und dem schließenden </button> hast du ja das <img src> eingefügt. Das nimmst du komplett raus und schreibst stattdessen nur WDR2 da hin.

Wenn die Schaltfläche dann korrekt mit eben dieser Beschriftung angezeigt wird und funktioniert, dann muss es an der img src Angabe liegen...

Gesendet von meinem SM-N975F mit Tapatalk

[scotty]

Hallo Oliver,

ich bin deinen Anweisungen gefolgt und siehe da, der Text wird angezeigt. Du meinst also, es liegt an den Icons?

PS. Noch eine andere Frage. Hast du schon einmal versucht, Befehlswerte zu verwenden, die nicht in der Dokumentation aufgeführt sind? Ich versuche mich nämlich gerade noch mit "ChannelPrev" und "List". In beiden Fällen reagiert das System nicht.

[OliverCJ]

Poste bitte noch mal ganz genau, was Du nach meiner Beschreibung in das <img src> geschrieben hast und wo Du genau du die icons hingespeichert hast...

Wenn der Text angezeigt wird und der Button funktioniert, dann liegt es auf jeden Fall an dem, was im <img scr> steht...

Nachtrag: Habe dein PS gerade erst gesehen. Dokumentiert sind die Befehle schon, ganz unten...

Harmony.JPG

Der Befehl lautet aber PrevChannel und nicht ChannelPrev!
Und was möchtest Du mit "List" bewirken? Den gibt es tatsächlich nicht,allerdings wird ja noch auf die Doku der REST Api verwiesen. Vielleicht wäre eer da zu finden... Wichtiger ist aber, was Du dir vorstellst, was er tun soll und ob sich bei den genannten Befehlen nicht doch einer findet, der passt...