Cometvisu icons hinzufügen

[wagnpi]

Hallo

Kann mir jemand sagen wie ich zu dem metal design der comet visu eigene personalisierte icons hizufügen kann.

Ich habe bereits versucht die icons die ich hinzufügen möchte in den ordner icon/knx-uf-iconset/ zu kopieren. Ich sehe sie dann auch im dropdown des editors, jedoch wenn ich diese auswähle zeigt mir die Visu nur 0 oder 1 an nicht das gewünschte icon.

Muss mann da noch einen anderen Eintrag mchen?

[Chris M.]

Eigene Icons gehören eher in den config Ordner. Alles andere wird beim nächsten Update im Zweifel überschrieben.

In der Config-Datei selbst fügst Du die Icons dann hinzu, wie in diesem Beispiel:

  <meta>
    ...
    <icons>
      <icon-definition name="sani_pump_animation" uri="config/sani_pump_animation.gif" />
    </icons>
    ...

Damit existiert dieses Icon und kann in einem Mapping verwendet werden.

[wagnpi]

Ok klingt logisch habe nicht dran gedacht dass sie beim update überschrieben werden. Danke für die schnelle antwort.

[stBorchert]

Ich muss mich hier mal kurz einklinken ... wie bekomme ich das so hinzugefügte Icon dann dynamisch eingefärbt?
In der visu_config.xml ist das Icon so definiert:

<icon-definition name="hvac_status_comfort" uri="../images/hvac/hvac_status_comfort.png" dynamic="true"/>

Mittels mapping soll das dann eingefärbt werden:

      <mapping name="MDT_HVAC_Status_Comfort">
        <entry value="0">
          <icon name="hvac_status_comfort" color="#999999"/>
        </entry>
        <entry value="1">
          <icon name="hvac_status_comfort" color="#ffa500"/>
        </entry>
      </mapping>

Solange ich existierende Icons verwende (z.B. "status_comfort"), funktioniert alles. Nur mein custom Icon wird nicht entsprechend eingefärbt.
Wie muss der Wert des Attributs "dynamic" denn gesetzt werden, damit das funktioniert?

So sieht das aktuell aus:
2015-12-06_16-25-52.png

[Chris M.]

Das geht über die Config-Datei leider nicht, da hier eine Callback-Funktion mit der URL in der Icon-Datenbank abgelegt wird - und über die Config-Datei ist das bisher nicht vorgesehen.

Über eine eigene JavaScript-Datei (die custom.js) sollte das aber machbar sein. Wie genau müsste ich aber auch erst mal nachforschen.

[stBorchert]

Ah, danke. Ich dachte schon, ich bin bekloppt
Ok, dann werde ich das nächste Woche mal über die custom.js probieren.

[stBorchert]

Hm. So wie ich das bisher sehe, ist das gar nicht möglich.
Über die insert()-Funktion des Iconhandlers kann man per Skript zwar Icons hinzufügen (so, wie das auch die TemplateEngine direkt aus der config macht). Allerdings wird der dynamic-Parameter nie ausgewertet, dementsprechend kann für über insert() hinzugefügte Icons auch kein Callback aufgerufen werden

Ich muss mal etwas genauer schauen, was sich da machen lässt. Eventuell kommt mir noch die zündende Idee ...

[Chris M.]

Wir haben hier mehrere Probleme:
- es gibt die Option das Attribut dynamic zu setzen - nur interessiert das später niemanden mehr...
- in der custom.js (genauer: structure_custom.js) kann man noch nicht die icon-Struktur befüllen, da die da noch nicht existiert (mal davon abgesehen, dass es logisch unschön ist eine Datei für eigene Widgets (daher das structure_) für Config-Themen zu missbrauchen)

=> Ich schau mal, wie ich das dynamic zum laufen bringe

[Chris M.]

So, im Pull-Request https://github.com/CometVisu/CometVisu/pull/228 ist jetzt eine Lösung drinnen.

Verwendung:
In dem <icons> kommt nun (wie üblich) für ein dynamisches Icon eine weitere Zeile hinzu. Die sieht z.B. so aus:

<icon-definition name="dynicon" uri="icon/knx-uf-iconset/128x128_white/control_building_flat_okg_og.png" dynamic="recolorNonTransparent" />

Im Attribut dynamic steht eine globale Funktion die die ensprechende URI übergeben bekommt und eine weitere Funktion zurück liefern muss, die dynamisch angepasste Icons erzeugen muss.

Eine solche Funktion kann man natürlich auch selbst schreiben, vordefiniert gibt es nur eine, "recolorNonTransparent" - was genau die gleiche ist, die bei den mitgelieferten Icons verwendet wird.

[stBorchert]

So, im Pull-Request https://github.com/CometVisu/CometVisu/pull/228 ist jetzt eine Lösung drinnen.

Ha, witzig. Fast genau so hatte ich bei mir testhalber den IconHandler auch geändert, nur dass ich nicht "window[ dynamic ]( uri )" verwendet hatte und es somit bei mit nicht funktionieren konnte

Ich kann das leider erst später testen, aber das sieht sehr gut aus! Danke!

[stBorchert]

Ganz vergessen, dass ich das schon eingebaut hatte: mit dem Pull-Request (228) funktioniert das Einfärben eigener Icons wunderbar.
Danke!

[Chris M.]

Sehr schön. Ist inziwschen auch schon gemergt, d.h. in der Git Version für jeden jetzt schon und ab der 0.9.1 auch für jeden im Paket nutzbar.

[alltime]

Vielen Dank! Genau das habe ich gebraucht! Sogar Semi-Transparenz ist damit möglich: switch.PNG

[alltime]

Weiß jemend warum die Semi-Tansparenz mit Anroid Chrome nicht funktioniert? Dort sieht es so aus:
switch_android.PNG

Desktop Chrome und iPhone unterstützen die Transparenzabstufungen...

[Chris M.]

Ja, ich weiß wieso: vgl. icontools.js ab Zeile 78