Integration der "neuen" Icons vom knx-uf-iconset

MicHau antwortet

07.05.2013, 21:12
Zitat von ZeitlerW Beitrag anzeigen

@Chris
Aus meiner Sicht kann das so in die basic.css von metal

Bin nicht Chris, habe es aber trotzdem eingefügt
Sollte nun also funktionieren.
Einen Kommentar schreiben:
ZeitlerW antwortet

07.05.2013, 14:11
Hallo Jens,

funktioniert prima, vielen Dank!

Bleibt nur noch das Falschfarben - Thema!

@Chris
Aus meiner Sicht kann das so in die basic.css von metal

vG
Wolfgang
Einen Kommentar schreiben:
jensgulow antwortet

07.05.2013, 13:54
Das mit der Größe der icons habe ich aktuell in der custom.css wie folgt gelöst:

Code:

.navbar .pagejump .label > canvas { height: 44px !important; display: block; margin: 0 auto; }

... müsste wohl noch in die basic.css des metal-design.

Jens
Einen Kommentar schreiben:
ZeitlerW antwortet

07.05.2013, 12:22
Navbar in Metal mit SVN 1725

Hallo zusammen,

es gibt hier noch ein Problem mit der Navbar.
Mit Rev. 1725 wurde ja im der basic.css canvas.icon eingefügt.
So wie es aussieht mach aber die design_setup.js damit etwas Probleme:
Hier die Navbar mit Iconhandler recolor:

Im Gegensatz dazu scheint das Pure - Design kein Problem zu haben:

Im Vergleich dazu nochmal das Verhalten mit dem "alten" iconhandler:

Hier auch mal ein Firebug Auszug aus dem HTML - Element neuer iconhandler:

Code:

<div id="navbarTop" class="loading"> <div id="id_0_top_navbar" class="navbar clearfix navbarActive"> <div class="widget_container "> <div class="widget clearfix pagejump active" style=""> <div class="label"> <canvas class="icon" width="128" height="128"></canvas> Home </div> <div class="actor switchUnpressed "></div> </div> </div>

Hier im Vergleich dazu alter iconhandler:

Code:

<div id="id_0_top_navbar" class="navbar clearfix navbarActive"> <div class="widget_container "> <div class="widget clearfix pagejump active" style=""> <div class="label"> <img class="icon" src="icon/knx-uf-iconset/128x128_white/control_home.png"> Home </div> <div class="actor switchUnpressed "></div> </div> </div>

... Sorry, daß ich aufgrund fehlender js bzw css - Kenntnisse nicht wirklich weiterhelfen kann.

p.s. Das Thema mit den "Falschfarben" der Icons wurde ja schon angesprochen.

vG
Wolfgang
Angehängte Dateien

neuer_iconhandler.png (49,8 KB, 151x aufgerufen)

neuer_iconhandler_pure.png (8,6 KB, 149x aufgerufen)

alter_iconhandler.png (48,4 KB, 147x aufgerufen)
Einen Kommentar schreiben:

jensgulow antwortet

05.05.2013, 22:04

Na denn hab ich mal im Anhang einige Fragmente:

Habe übrigens in meiner custom.css der metal-Variante noch die canvas.icon attribute eingeschrieben, Damit sieht das schon ganz gut aus.
Die übrigen Probleme sind unverändert.

Hier Auszug aus config.xml:

Code:

    <mappings>
      <mapping name="OnOff_Licht">
        <entry value="0"><icon name="light_light" color="white"/></entry>
        <entry value="1"><icon name="light_light_dim_100" color="orange"/></entry>
      </mapping>
      <mapping name="OnOff_Stckd">
        <entry value="0"><icon name="message_socket" color="white"/></entry>
        <entry value="1"><icon name="message_socket" color="orange"/></entry>
      </mapping>
      <mapping name="OnOff_HTH">
        <entry value="0"><icon name="control_standby" color="white"/></entry>
        <entry value="1"><icon name="control_standby" color="orange"/></entry>
      </mapping>
      <mapping name="OpenClose_window">
        <entry value="0">    <icon name="fts_window_1w_open" />    </entry>
        <entry value="1">    <icon name="fts_window_1w" />            </entry>
        <entry value="2">    <icon name="fts_window_1w_tilt" />    </entry>
      </mapping>
      <mapping name="DoorOpenClose">
        <entry value="0">    <icon name="fts_door_open" />        </entry>
        <entry value="1">    <icon name="fts_door" />            </entry>
      </mapping>
      <mapping name="ShutterOpenClose">
        <entry value="0">    <icon name="fts_shutter_up" />            </entry>
        <entry value="1">    <icon name="fts_shutter_down" />        </entry>
      </mapping>
      <mapping name="OpenClose">
        <entry value="0">AUF</entry>
        <entry value="1">ZU</entry>
      </mapping>
      <mapping name="UpDown">
        <entry value="0">    <icon name="control_arrow_up" />            </entry>
        <entry value="1">    <icon name="control_arrow_down" />            </entry>
      </mapping>
      <mapping name="DaWeg">
        <entry value="0">NEIN</entry>
        <entry value="1">JA</entry>
      </mapping>
      <mapping name="DaWegIcon">
        <entry value="0">    <icon name="user_away" color="white"/>        </entry>
        <entry value="1">    <icon name="user_available" color="orange"/>        </entry>
      </mapping>
      <mapping name="Jetzt">
        <entry value="0">    <icon name="control_on_off" color="orange"/></entry>
      </mapping>
      <mapping name="OnOff">
        <entry value="0">O</entry>
        <entry value="1">I</entry>
      </mapping>
      <mapping name="60">
        <entry value="1">60%</entry>
      </mapping>
      <mapping name="80">
        <entry value="1">80%</entry>
      </mapping>
      <mapping name="AudioMute">
        <entry value="0">    <icon name="audio_volume_mute" />            </entry>
        <entry value="1">    <icon name="audio_audio" />            </entry>
      </mapping>
      <mapping name="Sign">
        <entry range_min="-1e99" range_max="0">Negativ</entry>
        <entry value="0">Null</entry>
        <entry range_min="0" range_max="1e99">Positiv</entry>
      </mapping>
      <mapping name="Unwetter">
        <entry value="0">    </entry>
        <entry value="1">    <icon name="weather_thunderstorm"/>        </entry>
        <entry value="2">    <icon name="weather_winter"/>        </entry>
        <entry value="3">    <icon name="weather_rain"/>        </entry>
        <entry value="4">    <icon name="weather_snow"/>        </entry>
        <entry value="5">    <icon name="weather_wind"/>            </entry>
        <entry value="6">    <icon name="temp_frost"/>            </entry>
        <entry value="7">    <icon name="temp_frost"/>    </entry>
      </mapping>
      <mapping name="Muell">
        <entry value="0">Aktuell keine Meldungen</entry>
        <entry value="1">Keine Daten !</entry>
        <entry value="2">Restmüll rausstellen!<icon name="Restmuell"/></entry>
        <entry value="4">Biomüll rausstellen!<icon name="Biomuell"/></entry>
        <entry value="8">Blaue Tonne rausstellen!<icon name="Papier"/></entry>
        <entry value="16">Gelbe Tonne rausstellen!<icon name="Plaste"/></entry>
      </mapping>
      <mapping name="Muellbest">
        <entry value="1">OK</entry>
        <entry value="1990-01-01">-</entry>
      </mapping>
      <mapping name="Heizung">
        <entry value="1"><icon name="sani_floor_heating" color="orange" class="blink"/>Heiz:</entry>
        <entry value="0"><icon name="sani_floor_heating" color="white"/>Heiz:</entry>
      </mapping>
      <mapping name="Kuehlung">
        <entry value="1"><icon name="sani_floor_heating" color="blue" class="blink"/>Kuehl:</entry>
        <entry value="0"><icon name="sani_floor_heating" color="white"/>Kuehl:</entry>
      </mapping>
      <mapping name="WW">
        <entry value="1"><icon name="sani_buffer_temp_all" color="orange" class="blink"/>WW:</entry>
        <entry value="0"><icon name="sani_buffer_temp_all" color="white"/>WW:</entry>
      </mapping>
      <mapping name="BetriebszustandWP">
        <entry value="WW-Betrieb">        <icon name="sani_buffer_temp_all"     color="orange"    class="blink"    />Modus:</entry>
        <entry value="Heizbetrieb">        <icon name="sani_floor_heating"     color="orange"    class="blink"    />Modus:</entry>
        <entry value="Stufe 2">            <icon name="sani_floor_heating"     color="#B20125"    class="blink"    />Modus:</entry>
        <entry value="Handbetrieb">        <icon name="time_manual_mode"         color="orange"                    />Modus:</entry>
        <entry value="Unterbrechung">    <icon name="control_standby"         color="blue"    class="blink"    />Modus:</entry>
        <entry value="Solar">            <icon name="sani_solar"             color="orange"                    />Modus:</entry>
        <entry value="Kuehlung">        <icon name="sani_floor_heating"     color="blue"                    />Modus:</entry>
        <entry value="Ext. Steuerung">    <icon name="time_manual_mode"         color="orange"                    />Modus:</entry>
        <entry value="AUS">                <icon name="control_standby"         color="white"                    />Modus:</entry>          
      </mapping>
        
    </mappings>

...

    <stylings>
      <styling name="GreyGrey">
        <entry value="0">grey</entry>
        <entry value="1">grey</entry>
      </styling>
      <styling name="GreyGreen">
        <entry value="0">grey</entry>
        <entry value="1">green</entry>
      </styling>
      <styling name="RedGreen">
        <entry value="0">red</entry>
        <entry value="1">green</entry>
      </styling>
      <styling name="GreenRed">
        <entry value="1">red</entry>
        <entry value="0">green</entry>
      </styling>
      <styling name="WhiteOrange">
        <entry value="1">orange</entry>
        <entry value="0">white</entry>
      </styling>
      <styling name="WhiteBlue">
        <entry value="1">lightblue</entry>
        <entry value="0">white</entry>
      </styling>
      <styling name="OrangeGreenJalo">
        <entry range_min="-100" range_max="-1">lightblue</entry>
        <entry range_min="-1" range_max="30">silver</entry>
        <entry range_min="30" range_max="100">orange</entry>
      </styling>
      <styling name="BluePurpleRed">
        <entry range_min="-100" range_max="0">darkblue</entry>
        <entry value="0">darkpurple</entry>
        <entry range_min="0" range_max="100">darkred</entry>
      </styling>
      <styling name="BlueOrangeRedTemp">
        <entry range_min="-40" range_max="18">lightblue</entry>
        <entry range_min="18" range_max="30">orange</entry>
        <entry range_min="30" range_max="100">darkred</entry>
      </styling>
      <styling name="GreyOrangeBG">
        <entry value="0">grey_bg</entry>
        <entry value="1">orange_bg</entry>
      </styling>
      <styling name="Unwetter">
        <entry value="0">silver</entry>
        <entry value="Gewitter">orange</entry>
        <entry value="Glatteis">orange</entry>
        <entry value="Regen">orange</entry>
        <entry value="Schnee">orange</entry>
        <entry value="Sturm">orange</entry>
        <entry value="Temperatur">orange</entry>
        <entry value="Glaette">orange</entry>
      </styling>
      <styling name="UnwetterBG">
        <entry value="0">grey_bg</entry>
        <entry value="1">orange_bg</entry>
        <entry value="2">orange_bg</entry>
        <entry value="3">orange_bg</entry>
        <entry value="4">orange_bg</entry>
        <entry value="5">orange_bg</entry>
        <entry value="6">orange_bg</entry>
        <entry value="7">orange_bg</entry>
      </styling>
      <styling name="Muell">
        <entry value="1">grey</entry>
        <entry value="2">grey</entry>
        <entry value="4">brown</entry>
        <entry value="8">darkblue</entry>
        <entry value="16">darkyellow</entry>
      </styling>
      <styling name="MuellBG">
        <entry value="1">grey_bg</entry>
        <entry value="2">grey_bg</entry>
        <entry value="4">brown_bg</entry>
        <entry value="8">darkblue_bg</entry>
        <entry value="16">darkyellow_bg</entry>
      </styling>
      <styling name="BetriebszustandWP">
        <entry value="WW-Betrieb">orange</entry>
        <entry value="Heizbetrieb">orange</entry>
        <entry value="Stufe 2">red</entry>
        <entry value="Handbetrieb">orange</entry>
        <entry value="Unterbrechung">white</entry>
        <entry value="Solar">orange</entry>
        <entry value="Kuehlung">blue</entry>
        <entry value="Ext. Steuerung">orange</entry>
        <entry value="AUS">white</entry>
      </styling>
    </stylings>

...

    <page name="WP" shownavbar="true" shownavbar-left="true" visible="false" showfooter="false">
        <navbar position="left" dynamic="true" width="200px">
            <group name="Allgemein">
                <pagejump target="WP" name="Übersicht">
                    <label>
                        <icon name="sani_floor_heating" />
                    </label>
                </pagejump>
                <pagejump target="Schema" name="Schema">
                    <label>
                        <icon name="sani_floor_heating" />
                    </label>
                </pagejump>
            </group>
            <group name="Diagramme">
                <pagejump target="Diagramme" name="Diagramme">
                    <label>
                        <icon name="time_graph" />
                    </label>
                </pagejump>
            </group>
        </navbar>
        <layout colspan="12" />
        <group name="Temperaturen">     
         <layout colspan="12" />
            <info format="%.1f °C" styling="OrangeGreenJalo">         <layout colspan="2" />
                <label>Aussen</label>
                <address transform="DPT:9.001" variant="">14/0/1</address>
            </info>
            <info format="%.1f °C" styling="OrangeGreenJalo">         <layout colspan="2" />
                <label>RL Soll</label>
                <address transform="DPT:9.001" variant="">14/0/2</address>
            </info>
            <info format="%.1f °C" styling="OrangeGreenJalo">         <layout colspan="2" />
                <label>RL</label>
                <address transform="DPT:9.001" variant="">14/0/3</address>
            </info>
            <info format="%.1f °C" styling="OrangeGreenJalo">         <layout colspan="2" />
                <label>VL</label>
                <address transform="DPT:9.001" variant="">14/0/4</address>
            </info>
            <info format="%.1f °C" styling="OrangeGreenJalo">         <layout colspan="2" />
                <label>WW Soll</label>
                <address transform="DPT:9.001" variant="">14/0/5</address>
            </info>
            <info format="%.1f °C" styling="OrangeGreenJalo">         <layout colspan="2" />
                <label>WW Ist</label>
                <address transform="DPT:9.001" variant="">14/0/6</address>
            </info>
        </group>

        <group name="Status Wärmepumpe">
                <layout colspan="12"/>
                <info mapping="BetriebszustandWP" styling="BetriebszustandWP" >
                    <layout colspan="1.5" />
                    <label></label>
                    <address transform="DPT:16.001" mode="read" variant="">14/0/11</address>
                </info>
                <info>
                    <layout colspan="1.5"/>
                    <label></label>
                    <address transform="DPT:16.001" mode="read" variant="">14/0/11</address>
                </info>
                <info mapping="Heizung" styling="WhiteOrange" >
                    <layout colspan="1.5" />
                    <label></label>
                    <address transform="DPT:1.001" mode="read" variant="">14/0/12</address>
                </info>
                <info>
                    <layout colspan="1.5"/>
                    <label></label>
                    <address transform="DPT:16.001" mode="read" variant="">14/0/13</address>
                </info>
                <info mapping="WW" styling="WhiteOrange">
                    <layout colspan="1.5" />
                    <label></label>
                    <address transform="DPT:1.001" mode="read" variant="">14/0/14</address>
                </info>
                <info>
                    <layout colspan="1.5"/>
                    <label></label>
                    <address transform="DPT:16.001" mode="read" variant="">14/0/15</address>
                </info>
                <info mapping="Kuehlung" styling="WhiteBlue">
                    <layout colspan="1.5" />
                    <label></label>
                    <address transform="DPT:1.001" mode="read" variant="">14/0/18</address>
                </info>
                <info>
                    <layout colspan="1.5"/>
                    <label></label>
                    <address transform="DPT:16.001" mode="read" variant="">14/0/19</address>
                </info>
        </group>
</page>

Hier noch die custom.css des metal-design:

Code:

/*
 * custom local css to overload declarations in each design (basic.css)
 */

body 
{ 
  color: #FFF799;
  font-family: Dosis, Helvetica, Arial, sans-serif;
  font-size: 5.5mm;
  overflow: hidden;
  margin:0;
  color:       #fff   /*{a-body-color}*/;
    text-shadow:   0   /*{a-body-shadow-x}*/   1px   /*{a-body-shadow-y}*/   1px   /*{a-body-shadow-radius}*/   #111   /*{a-body-shadow-color}*/;
    background: #121212 url(backgrounds/smoke_spectrum.png) scroll repeat-x bottom;
}

h3
{
    font-family: Dosis, Helvetica, Arial, sans-serif;
    font-size: 5.5mm;
    overflow: hidden;
    font-weight: bold;
    
}

/*
 * .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; background-color: #FFA500; }
 */

.flavour_sodium .ui-slider .ui-slider-range { 
    background-image: -moz-radial-gradient(left center, ellipse farthest-side, #FFFFFF -5%, #FF8000 100%);
} 
 
.group:not(.widget) { border: none; margin: 0; border-radius: 12px; }
.group:not(.widget) .widget {  background-image: none;}


.orange_bg.actor div {
    background: transparent url(images/dot_orange.png) no-repeat center center;
    color: white !important;
    text-shadow: 0;
}

.widget.right .orange_bg.actor div,
.widget.right .orange.switchPressed div, 
.widget.right .orange.switchUnpressed div {
    background-position: right center;
}

.widget.center .orange_bg.actor div,
.widget.center .orange.switchPressed div, 
.widget.center .orange.switchUnpressed div {
    background-position: center center;
}
.widget.left .orange_bg.actor div,
.widget.left .orange.switchPressed div, 
.widget.left .orange.switchUnpressed div,
.widget .orange_bg.actor div,
.widget .orange.switchPressed div, 
.widget .orange.switchUnpressed div {
    background-position: -30px center;
}

.widget.center:not(.switch):not(.toggle):not(.trigger):not(.diagram_info) > .actor canvas.icon { margin-left: 0; }
.widget.right:not(.switch):not(.toggle):not(.trigger):not(.diagram_info) > .actor canvas.icon { margin-right: 35px; }
.widget.left:not(.switch):not(.toggle):not(.trigger):not(.diagram_info) > .actor canvas.icon,
.widget:not(.switch):not(.toggle):not(.trigger):not(.diagram_info) > .actor canvas.icon { margin-left: 10px; }

.widget .label canvas.icon, .text canvas.icon { vertical-align: middle; margin-top: -0.3em; }
.widget .pagejump canvas.icon { margin-top: -0; }
.widget .actor canvas.icon { margin-bottom: -0.6em; }
.widget .switchPressed canvas.icon, .widget .switchUnpressed canvas.icon { margin-top: -0.4em; margin-bottom: -0.6em;}

.navbar .pagejump .label > canvas { 
    height: 44px !important;
    display: block;
    margin: 0 auto;
}


/*
* laesst als class z.B.ein icon blinken
*/

@-webkit-keyframes blink {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

@keyframes blink {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}


.custom_blink {
  -webkit-animation-name: blink;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 1s; 
  
  animation-name: blink;  
  animation-iteration-count: infinite;  
  animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  animation-duration: 1s; 
}

Grüße

Jens

Einen Kommentar schreiben:

Chris M. antwortet

05.05.2013, 21:01
Zitat von jensgulow Beitrag anzeigen

snapshot 2 ist die Variante mit der iconhandler.js.recolor.

Hier werden die icons deutlich vergrößert.

Ist mit 1724 hoffentlich besser.

Hier muss man aber mit allen Designs testen, denn viele Designs (und bei diesem Bug hier sogar die globale Config...) sprechen Icons im CSS noch per img.icon an - die Regel muss aber inzwischen auch noch canvas.icon mit umfassen...

Zitat von jensgulow Beitrag anzeigen

Außerdem bekommen gleich alle gleichnamigen icons (und auch noch einigen anderen) diesselben Farben und Klassen (hier class=blink) übergeben.

OK, klingt nach etwas tieferem Bug. Wie kann ich das nachstellen?

Im Zweifel einfach die Demo-Config erweitern (bei speziellerem unter "Erweiterte Widgets"). Dann kann ich mir das mit ansehen.
(Metal-Demo wäre auch i.O.)
Einen Kommentar schreiben:
jensgulow antwortet

05.05.2013, 19:22
Hallo,

habe mal die neue Variante ausprobiert. Führte bei mir zu überraschenden Ergebnissen:

snapshot 1 ist die Variante, welche bisher benutzt wurde (funktioniert in Revision 1722 als iconhandler.js wie bisher).

snapshot 2 ist die Variante mit der iconhandler.js.recolor.

Hier werden die icons deutlich vergrößert. Außerdem bekommen gleich alle gleichnamigen icons (und auch noch einigen anderen) diesselben Farben und Klassen (hier class=blink) übergeben.

Bin deshalb wieder zurück auf die herkömmliche Variante.

LG

Jens
Angehängte Dateien

snapshot01.jpg (159,8 KB, 150x aufgerufen)

snapshot02.jpg (152,8 KB, 153x aufgerufen)
Einen Kommentar schreiben:
Chris M. antwortet

04.05.2013, 20:11
Zitat von Chris M. Beitrag anzeigen

habe gerade gesehen, dass <icon>-Elemente ohne "color"-Attribut noch scheitern
=> Erste Tests sollten nun gehen, die Demo-Config aber noch nicht...

Mit Revision 1722 sollte es jetzt auch ohne color-Attribut funktionieren, d.h. auch die Demo-Config mögen.

=> Bitte testen.
Einen Kommentar schreiben:
Chris M. antwortet

02.05.2013, 21:19
OK, jetzt kann ich's nachstellen.

Mit meiner Test-Config ist's nicht aufgetreten, aber jetzt mit der Demo-Config schon...
=> Schau ich mir an.

Nachtrag: Mit Revision 1720 sollte das nun behoben sein. ABER: habe gerade gesehen, dass <icon>-Elemente ohne "color"-Attribut noch scheitern
=> Erste Tests sollten nun gehen, die Demo-Config aber noch nicht...
Einen Kommentar schreiben:
jensgulow antwortet

02.05.2013, 05:56
Habe dasselbe Problem wie netsrac - die sache mit dem cometvisu.appchache brachte keine Veränderung. Gibt es noch andere Ansätze dieses potentielle cache-Problem anzugehen?
Einen Kommentar schreiben:
Chris M. antwortet

30.04.2013, 22:57
Die Datei getestet in Chrome: funktioniert bei mir...?!?

Was Du immer beachten solltest: wenn Du Source-Dateien änderst kann es notwendig sein, denn App-Cache (also die Datei cometvisu.appcache) anzupassen. Am einfachsten oben die Timestamp im Kommentar aktuallisieren, sollte ausreichen.
Einen Kommentar schreiben:
netsrac antwortet

30.04.2013, 15:36
Hi Chris,

ich habe mal das Script geändert und einen neuen iconhandler.js erstellt. Leider stribt die Visu damit. Die Console zeigt folgenden Fehler an:

[16:31:45.494] TypeError: i.clone is not a function @ http://bla.net/visu/structure/pure/_common.js:448

Ich habe Dir den angepassten Iconhandler mal ins SVN gestellt:

iconhandler.js.recolor

Einfach mal damit den iconhandler.js ersetzen und testen.

Gruß, Netsrac
Einen Kommentar schreiben:
Chris M. antwortet

28.04.2013, 19:20
Zitat von netsrac Beitrag anzeigen

Hört sich erstmal super an - aber wasbedeutet, dass jeder Pixel der nicht 100% transparent ist umgefärbt wird.

Wenn ein Pixel nun 50% Transparenz hat, hat er das auch noch nach dem Einfärben dann 100% der Zielfarbe, oder bleibt die Transparenz erhalten.

Es wird nur die Farbe geändert, die Transparenz bleibt.

Aber wenn das Icon nachträglich skaliert wird (per CSS bzw. styling), dann kann sein, dass der Browser das beim canvas nicht genau so macht wie das Skalieren eines Bildes.
Das ist aber ein Browser "Feature", da kann die Visu nichts für.

Wenn das stören sollte, dann sollten wir eher mehrere Icon-Größen gleichzeitig anbieten...
Einen Kommentar schreiben:
netsrac antwortet

28.04.2013, 18:54
Integration der "neuen" Icons vom knx-uf-iconset

Hört sich erstmal super an - aber wasbedeutet, dass jeder Pixel der nicht 100% transparent ist umgefärbt wird.

Wenn ein Pixel nun 50% Transparenz hat, hat er das auch noch nach dem Einfärben dann 100% der Zielfarbe, oder bleibt die Transparenz erhalten.

Bei meinen ersten Versuchen mit Imagemagick hatte ich dieses Problem und die Icons sahen so am Rand nicht schön aus.

Ich kann morgen mal das Script anpassen und einen Alternativen Iconhandler zum Testen erstellen.

Danke und Gruß...netsrac
Einen Kommentar schreiben:
Chris M. antwortet

28.04.2013, 17:32
So, mir Revision 1714 können jetzt die Icons auch in der Visu umgefärbt werden

Umgefärbt wird dabei jeder Pixel, der nicht 100% transparent ist. Ein paar Ziel-Farben sind per Namen definiert (mit den Werten so wie im Generator-Skript), aber die ganze Freiheit gibt's wenn man in der Config-Datei beim Icon als "color"-Attribut die Farbe als Hex-Wert angibt, wie z.B. #ff0000 für ein sattes rot.

Damit ein Icon umfärbt werden kann, muss es etwas anders definiert werden als bisher. Es müsste z.B. aussehen wie

Code:

'weather_winter' : { '*' : { 'white' : '*/white', 'ws' : '*/white', 'antimony' : '*/blue', 'boron' : '*/green', 'lithium' : '*/red', 'potassium' : '*/purple', 'sodium' : '*/orange', '*': { '*' : recolorNonTransparent('icon/knx-uf-iconset/128x128_white/weather_winter.png' )}}},

Achtung: ich habe die Definitionen im iconhandler NICHT angepasst, da das ein Skript sicher besser kann.
=> Hier können unsere Skript-Gurus wieder einsteigen , und am besten nach etwas öffentlichen Test auch die nun vorhanden Varianten wieder auf eine reduzieren.

D.h. aber auch: ohne jetzt was am Code zu ändern, wird man diesen Effekt erst mal nicht sehen können...

(Mein Test mit Chrome, Firefox, Android 2.3 und iPad waren alle erfolgreich)
Einen Kommentar schreiben:

Ankündigung

Integration der "neuen" Icons vom knx-uf-iconset

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben: