Individuelle Icons

[MicHau]

Zum Thema Icons hat mir die ganze Zeit schon die Möglichkeit gefehlt, eigene Icons einzubauen. Immer wieder einmal möchte man ein ganz bestimmtes, nicht fest eingebautes Icon haben. Das konnte man bisher nicht verwirklichen.

Diesen Thread hier habe ich zum Anlass genommen, mir mal das Icon-Handling anzuschauen, und fand, dass es relativ einfach möglich sein sollte, eigene Icons zu definieren.

In der neuesten SVN-Version ist folgendes enthalten.
Im Meta-Bereich kann man im Meta-Bereich eine neue Sektion <icons> einfügen. In diese kommen eine beliebige Anzahl an <icon-definition>-Elementen mit den folgenden Attributen.

• name: Namen zum Ansprechen des Icons in der Config
• uri: Pfad zur Icon-Datei
• style [optional]: für zusätzliche CSS-Angaben
• type [optional]: Typ des Icons, wird aktuell in den Designs verwendet, um unterschiedliche Größen der Icons zu hinterlegen
• flavour [optional]: unterschiedliche Flavour können hinterlegt werden

Beispiel

  <meta>
    <icons>
      <icon-definition name="Test1" uri="./icon/knx-uf-iconset/128x128_or/audio_audio.png"/>
      <icon-definition name="Test2"  uri="./icon/knx-uf-iconset/128x128_or/audio_audio.png"  style="background-color: #FF0000;"/>
    </icons>
  </meta>

Anschließend können diese Icons überall verwendet werden, wo auch die Standard-Icons des Designs benutzt werden können.
Zum Beispiel in einem Pagejump-Element:

          <pagejump  target="Test1"><label><icon name="Test1" />test  1</label></pagejump>
          <pagejump target="Test2"><label><icon  name="Test2" />test 2</label></pagejump>

Damit können auch die vordefinierten Icons des Designs überschrieben werden, indem man den entsprechenden Icon-Namen verwendet.

Ich hoffe, das ist auch für andere nützlich.

[Chris M.]

Zwar noch nicht ausprobiert, klingt aber gut und sinnvoll!

[MicHau]

Anwendung

Hier noch ein kleiner Beispiel-Anwendungsfall.
Man kann Icons in den Mappings verwenden und damit den Status auch durch ein andersfarbiges Icon darstellen lassen.

Beispiel-Config

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" design="metal"
  xsi:noNamespaceSchemaLocation="./visu_config.xsd" enable_column_adjustment="true" default_columns="12">
  <meta>
    <icons>
      <icon-definition name="LichtOn" uri="./icon/knx-uf-iconset/128x128_or/licht_licht.png" style="height:2em;"/>
      <icon-definition name="LichtOff" uri="./icon/knx-uf-iconset/128x128_ws/licht_licht.png" style="height:2em;"/>
      <icon-definition name="AutoOn" uri="./icon/knx-uf-iconset/128x128_or/zeit_automatik.png" style="height:2em;"/>
      <icon-definition name="AutoOff" uri="./icon/knx-uf-iconset/128x128_ws/zeit_automatik.png" style="height:2em;"/>
    </icons>
    <mappings>
      <mapping name="OnOff_Licht">
    <entry value="0"><icon name="LichtOff"/></entry>
    <entry value="1"><icon name="LichtOn"/></entry>
     </mapping>
    </mappings>
    <stylings>
      <styling name="GreyGrey">
        <entry value="0">grey</entry>
        <entry value="1">grey</entry>
      </styling>
    </stylings>
  </meta>
  <page name="Start" showtopnavigation="false" showfooter="false" shownavbar="true">
    <group name="Licht">
      <layout colspan="2" />
      <switch mapping="OnOff_Licht" styling="GreyGrey">
        <layout colspan="2" />
        <label>Decke</label>
        <address mode="write" transform="DPT:1.001">25/0/10</address>
        <address mode="read" transform="DPT:1.001">25/0/11</address>
      </switch>
    </group>
  </page>
</pages>

Sieht dann aus wie im Anhang

[makki]

Das ist cool, schick uns die Icons (sofern das Copyright & Lizenz eindeutig geklärt ist) ins SVN, damit alle was von haben
Vom Screenshot kann sich keiner was kaufen..

Mal so "unter uns": mein Traum (ich weiss das es technisch geht!) ist ein&dasselbe graustufen-Icon als SVG, das per GA dynamisch am client orange eingefärbt wird..

Makki

[MicHau]

Das ist cool, schick uns die Icons (sofern das Copyright & Lizenz eindeutig geklärt ist) ins SVN, damit alle was von haben
Vom Screenshot kann sich keiner was kaufen..

Sind sie schon, das ist das Standard-Icon licht_licht in weiß und orange.

Mal so "unter uns": mein Traum (ich weiss das es technisch geht!) ist ein&dasselbe graustufen-Icon als SVG, das per GA dynamisch am client orange eingefärbt wird..

Ja, ich weiß, habe ich auch daran gedacht. Das soll sozusagen die kurzfristige Zwischenlösung sein.

[makki]

Sind sie schon, das ist das Standard-Icon licht_licht in weiß und orange.

Sorry, das hatte ich nicht realisiert..
Dann ist natürlich alles paletti..

Ja, ich weiß, habe ich auch daran gedacht. Das soll sozusagen die kurzfristige Zwischenlösung sein.

Das wärs halt, der Ansporn ist ja "nur" die technisch & optisch beste Visu auf diesem Planeten zu haben Mir fallen wenig alternativen ein, die beides erfüllen..

Makki

[JoeKool]

Zum Thema Icons hat mir die ganze Zeit schon die Möglichkeit gefehlt, eigene Icons einzubauen. Immer wieder einmal möchte man ein ganz bestimmtes, nicht fest eingebautes Icon haben. Das konnte man bisher nicht verwirklichen.

Hallo zusammen,

ich habe glücklicherweise gerade diese Info gefunden, wie ich meine eigenen Icons einbinden kann.
Wollte aber (weil der Thread ja nicht gerade neu ist) kurz nachfragen, ob das immer noch die richtige/einige Methode ist.

Viele Grüße

[swiss]

Ja das ist nach wie vor aktuell

Wobei ich mich frage, ob man nicht besser einen getrennten user-icons ordner anlegt der dann ebenfalls vom Dataprovider des Editors eingelesen wird...

So könnte man einfach seine eigenen Icons in den Ordner kopieren und sie stehen ohne weiteren Eingriff sofort zur verfügung

[JoeKool]

Wobei ich mich frage, ob man nicht besser einen getrennten user-icons ordner anlegt der dann ebenfalls vom Dataprovider des Editors eingelesen wird...

Genau so etwas habe ich eigentlich gesucht.
Einfach Grafik in den Ordner ablagen und fertig...
Vielleicht dazwischen noch ein Skript aufrufen, das die neue Grafik dem Dataprovider bekannt macht...

[swiss]

(inoffiziell... Das geht schon. Wenn du deine icons einfach in den richtigen ordner, in dem auch die icons aus dem knxuf-iconset enthalten sind, kopierst. Die Icons werden jetzt schon automatisch zur Laufzeit eingelesen und im Editor zur Verfügung gestellt. )

Offiziell gibt es diese Funktion aber noch nicht... Ich wäre für eine saubere Trennung in einem separaten Ordner. Denn dann kann es auch nicht vorkommen, dass bei einem Update etwas überschreiben wird

[JoeKool]

Das war aber mein erster Versuch.
Ich habe einfach mein neues Icon im Folder abgelegt und gedacht, jetzt kann ich es verwenden.
Ging aber nicht...

[swiss]

Doch müsste eigentlich gehen. Die Icons müssen aber auch png sein und die Namen dürfen keine Umlaute, Leerschläge oder Sonderzeichen enthalten.

Die Icons werden aber nur im Ordner 128x128_white eingelesen!

[JoeKool]

Doch müsste eigentlich gehen. Die Icons müssen aber auch png sein und die Namen dürfen keine Umlaute, Leerschläge oder Sonderzeichen enthalten.
Die Icons werden aber nur im Ordner 128x128_white eingelesen!

Habe ich alles genau so gemacht.
Aber ich habe nicht den Editor benutzt. (Habe ich noch nie...)
Liegt's daran?

[swiss]

Sehr seltsam... Da muss ich nochmal etwas tiefer im code nachsehen. Aber eigentlich müsste es funktionieren. Ich teste das bei Gelegenheit mal

[swiss]

Ok. Also es geht so nicht. bzw. nicht ohne dem speziellen script dass sich im SVN befindet.

Der Grund dafür ist, dass alle verfügbaren Icons statisch in der Iconhandler.js eingetragen sind. Die Icons werden also nicht dynamisch eingelesen. Das Script im SVN Repository erstellt/aktualisiert die iconhandler.js damit die neuen Icons von mfd verfügbar werden.

Also ist das getrennt zu behandeln...

Der Editor liest den Inhalt des Ordner und erstellt daraus zur Lufzeit eine Auswahlliste.

Die CometVisu selber greift auf die statische Tabelle in der iconhandler.js zu.

Also bleiben dir 2 Möglichkeiten:

- Die icons in der Config von hand einbinden wie weiter vorne beschreiebn

- oder das script dazu verwenden deine iconhandler.js mit deinen zusätzlichen icons zu aktualisieren.

(letzere Option ist aber sowas von unsupportet und nur für die, die wissen was sie tun )

Da sollte aber auf längere Sicht doch noch eine Lösung her, die auch für otto nutzbar ist.

Da denke ich doch gleich wieder an einen user-icon Ordner und eine Updatefunktion im Editor der diese Icons einliest und zu den anderen in die iconhandler.js schreibt