[Gelöst] Icons für Custom-Logik

[TobiasLessing]

Hallo zusammen,

wie kann ich meinen Custom-Logiken, denn ein Icon zuweisen? Es scheint ja vorgesehen zu sein. Leider kann ich mit dem Kommentar nicht viel anfangen.
Ist "image/svg+xml" der Pfad? Falls ja, wie kann ich auf diesen zugreifen? Wird zusätzlich eine .xml-Datei benötigt? Falls ja, was muss da rein und wie soll sie heißen? zeigt die UI auch farbige svg-Icons an?
In der KB finde ich leider nichts (oder ich hab nicht gründlich genug gesucht).

Code: Alles auswählen

"_Meta": { // Optional
    "Description": "",
    "Version": "1.00",
    "Icon": "" // format: "data:image/svg+xml;base64,ENCODED_FILE"
  }

Ist zwar reine Kosmetik, aber wenn sich damit die Übersichtlichkeit erhöht, hat es ja auch einen praktischen Nutzen. Außerdem hat sich jemand die Mühe gemacht es zumindest vorzusehen, dann will ich das auch honorieren (kleiner Teaser...) [ich bin jemand der Bedienungsanweisungen ließt, weil sich da auch jemand Mühe gegeben hat...].

Soweit vielen Dank.
Viel Grüße

Tobias

[Dragonos2000]

Du musst die Rastergrafik base64 kodieren/konvertieren (dabei kommt eine lange kryptische Zeichenfolge raus) und einfügen. Dann sieht die Icon-Zeile so aus (abgekürzt):
"Icon": " data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6I..."

Zum konvertieren kannst Du bspw. folgende Seite nutzen:
https://base64.guru/converter/encode/image/svg

[TobiasLessing]

Vielen Dank Jochen,

ist zwar nicht sehr ansehnlich im Code, aber egal. Solange es die Performance nicht eintrübt ist alles gut.
Allerdings bekomme ich es selbst mit einem einfachen, schwarzen Kreis/Ring nicht hin. Die Logik lässt sich mit dem Fehler "Unexpected token in JSON at position xyz"-nicht speichern. Hab mal alle "//" in Base64-Text gelöscht und siehe da, sie ließ sich speichern. Allerdings ist dann keine Grafik zu sehen.
Bei der Konvertierung konnte ich aber nichts weiter einstellen (habe zwei erschiedene Online-Tools getestet, mit unterschiedlichen .svg). Das Ergebnis war überall identisch.
Gibt es beim Bild noch etwas zu beachten? Farbe, Größe,...?

Danke.
Viele Grüße

Tobias

[StefanW]

Hi Tobias,

ist zwar nicht sehr ansehnlich im Code, aber egal. Solange es die Performance nicht eintrübt ist alles gut.

Bilder sind binär codiert. Text wird auch binär codiert, aber hierbei dienen manche Bits als Steuerzeichen. Um das zu umgehen nimmt man eine Base64 Kodierung vor. Die sieht zwar "wild" aus, aber es ist letztlich der einzige Weg, ein Binärformat in einer Textdatei zu speichern.

lg

Stefan

[Dragonos2000]

@TobiasLessing Hmm...hast Du eine Rastergrafik oder Vektorgrafik konvertiert? Ich habe zwar oben von Rastergrafik geschrieben, wenn ich mich recht erinnere muss es aber eine Vektorgrafik sein. Konvertiere mal ein SVG, ob es dann immer noch Fehler gibt.

[TobiasLessing]

Jetzt bin ich etwas verwirrt.
.svg sind doch scalable vector grafics. Ich behaupte die gibt es nicht auf Rasterbasis.
Es waren ansonsten .svg-Dateien die ich genutzt habe. Allerdings der zeit wegen online gesucht. Ich erstelle sonst morgen mal ein eigenes und gebe Bescheid ob's hilft.

[Dragonos2000]

.svg sind doch scalable vector grafics. Ich behaupte die gibt es nicht auf Rasterbasis.

Ja, das ist auch richtig. Ich habe mich oben verschrieben mit der Rastergrafik. Sorry für die Verwirrung. Poste mal den kompletten Meta-Abschnitt mit dem codierten Bild, ob da was falsch ist. Aber bitte darauf achten, dass das codierte und hier gepostete Bild auch Lizenz mäßig sauber ist, damit es da keinen Stress gibt.

[TobiasLessing]

So heute hab ich es geschafft.

Vielen Dank noch einmal Jochen. Das Problem saß wie üblich vorm Bildschirm.
Man muss auch .svg-Dateien konvertieren. Ich hab zwar online nach einfachen Vektorgrafiken gesucht, beim Download waren es dann aber doch .png-Dateien... Hätte mir schon eher auffallen müssen. Mit Inkscape konnte ich jetzt ein eigenes .svg-Icon erstellen.
Sorry für die geklaute Zeit! Ich gelobe Besserung.

An der Stelle noch eine kleine Rechtsfrage:
kann über die TOLL auch gleich das Verwendungsrecht an einer eigens erstellten Grafik erteilt werden? Die TOLL selbst bezieht ja auch die Dokumentation mit ein. Ein Icon zu besseren Unterscheidung der Blöcke würde ich da jetzt einfach mit dazu zählen. Aber ob das dann auch reicht? ICh würde meine Grafiken jedenfalls mit freigeben, wenn ich dazu komme, welche zu machen.

Viele Grüße
Tobias

[adimaster]

Zum konvertieren kannst Du bspw. folgende Seite nutzen:
https://base64.guru/converter/encode/image/svg

Cool, ist zwar schon eine Weile her der Beitrag, aber hat mir eben geholfen

Feature/Idee ... eine "Bilderauswahl" hier oder im Wiki speichern.

Allerdings stelle ich fest, dass ein Bild mit 839.972 Zeichen die Logik ganz schön verlangsamt
GIbt es eine Empfehlung für die Anzahl an Pixels für die Bilder?

[starwarsfan]

Hallo miteinander,

nachdem mir in diesem Posting zum ersten Mal bewusst die Verwendung eines eigenen Icons für Custom-Logiken über den Weg gelaufen ist, habe ich mal ein wenig experimentiert, um die Icons des KNX-UF-Iconset zu verwenden. Unterm Strich funktioniert das überraschend einfach, daher hier ein kleines HowTo:

1. Iconset herunterladen oder clonen, siehe hier
2. Die Icons befinden sich im Ordner raw_svg
2. Konvertieren des gewünschten Icons. Mit diesem Schritt wird aus dem SVG-Format ein Base64-encodierter String gemacht. Zugleich wird hier die gewünschte Farbe gesetzt, da die SVGs alle weiss sind, was man auf weissem Hintergrund eher schlecht erkennt. Somit anstelle von 000000 (Schwarz) den Hex-Wert der gewünschten Farbe eintragen. Hier ein Beispiel für die Konvertierung von weather_winter.svg:

Code: Alles auswählen

iconToUse=weather_winter.svg
colorToUse=000000
cat ${iconToUse} | sed "s/stroke:#FFFFFF/stroke:#${colorToUse}/g" | base64 -w 0

Im Code der Custom-Logik den Abschnitt "_Meta" wie folgt einfügen bzw. ergänzen und dort den Base64-encodierter String nach "data:image/svg+xml;base64, einfügen. Double-Quote am Ende nicht vergessen!

Code: Alles auswählen

{
  "_Meta": { // Optional
    "Description": "...",
    "Version": "1.00",
    "Icon": "data:image/svg+xml;base64,<hier-den-base64-string-einfügen>"
  },
  ...
}

Gekürzt sieht das dann bspw. so aus:

Code: Alles auswählen

{
  "_Meta": { // Optional
    "Description": "My super magic custom logic",
    "Version": "1.00",
    "Icon": "data:image/svg+xml;base64,PD94bWwgdm...Cjwvc3ZnPg=="
  },
...
}

Wann/wo die Description und die Version zu sehen sind, habe ich noch nicht herausgefunden.

Nach obigem Beispiel sieht die Custom-Logik dann so aus:



Weil's grad so heiss ist, extra ein Schneemann...