Blinkende Icons...

[netsrac]

Moin Jungs,

ich war schon kurz davor, animierte GIFs zu erstellen um gewisse Zustände noch deutlicher hervorzuheben, doch dann kam mir eine Idee: Ich habe dem "icon" Objekt beim Mapping einen zusätzlichen Parameter "class" spendiert. Ähnlich wie bei den anderen class Parametern wird dieses auf "custom_class" gemapped.

Eine praktische Anwendung dafür ist es, mittels CSS eine Animation eines Icons zu hinterlegen um z.B. ein Icon Blinken zu lassen.

Im Mapping definiert man:

<mapping name="StatusBewaesserung">
    <entry value="0"><icon name="sani_sprinkling" color="grey" styling="height:56px"/></entry>
    <entry value="1"><icon name="sani_sprinkling" color="green" styling="height:56px" class="blink"/></entry>
</mapping>

In seiner custom.css kann man dann folgendes machen:

@-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; 
}

So ist das Icon bei "0" ein statisches graues Icon, beim Wert "1" ein grünes Icon, das Blinkt.

Bitte passt auf, dass nicht alles Browser die Annimations in CSS3 unterstützen. Bei mir funktioniert es aber in Firefox (Desktop und Nexus 7) sowie in Safari.

Feedback immer gerne gehört...

Gruß, Netsrac

[Chris M.]

Klingt interessant!

Zu Commit 1708 aber eine Frage:

-    var mobileDevice = (/(android|blackberry|[B][COLOR=Red]iphone[/COLOR][/B]|ipod|series60|symbian|windows ce|palm)/i.test(uagent)); 
+    var mobileDevice = (/(android|blackberry|[B][COLOR=Red]ipone[/COLOR][/B]|ipod|series60|symbian|windows ce|palm)/i.test(uagent));

Absicht oder Fehler?

[netsrac]

Ähmmm....ja, das war eine lokale Anpassung bei mir, da auf den iOS devices mit dem Metal design das Scrolling nicht funktioniert. Da es noch keinen Bugfix dafür gibt, habe ich bei mir lokal das iPhone wie ein großes Device genutzt.

Das ging ganz gut.

Habe es jetzt aber wieder zurück auf "iphone" gesetzt und committed...

Gruß, Netsrac

[derwolff2010]

Ähmmm....ja, das war eine lokale Anpassung bei mir, da auf den iOS devices mit dem Metal design das Scrolling nicht funktioniert.

Danke für den Tipp. Ich dachte schon das liegt an meinem System oder Config.

Gruß
Carsten

[jensgulow]

Also bei mir blinkt leider nichts. Benutze FF 20.0.1. custom.css des metal-design ist nach netsrac-Anweisung "gepimpt".

Jens

<entry value="Unterbrechung"><icon name="control_standby"  color="blue"    class="blink"/>Modus:</entry>

[netsrac]

Blinkende Icons...

Gib mal den URL der custom.css direkt ein und mach dann noch ein "Shift-Reload".

Sehr häufig passiert es, das Änderungen nicht erkannt werden und "alte" Version aus dem Cache genommen wird. Ich habe mir schon ein Bookmark für die custom.css angelegt, da ich das eigentlich immer brauche, wenn ich was ändere.

Gruß, netsrac

[netsrac]

<entry value="Unterbrechung"><icon name="control_standby"  color="blue"    class="blink"/>Modus:</entry>

Und noch was....ich hatte es bisher nur bei den Mappings versucht. Der Tag "entry" sagt mir im Moment erstmal gar nix :-)

[jensgulow]

@ netsrac: Danke fuer den Hinweis mit der custom.css. Probiere ich aus.

Die von mir gepostete Zeile stammt aus einem mapping, bei Dir (post 1) sieht das doch genauso aus.

<mapping name="StatusBewaesserung">     [COLOR=Red]<entry value="0"><icon name="sani_sprinkling" color="grey" styling="height:56px"/></entry>[/COLOR]     <entry value="1"><icon name="sani_sprinkling" color="green" styling="height:56px" class="blink"/></entry> </mapping>

[netsrac]

Upps...ja, ohne das Mapping darum sah der Eintrag so ungewohnt aus :-)

[jensgulow]

... also shift-reload hat nichts gebracht....und nu' ????

[netsrac]

... also shift-reload hat nichts gebracht....und nu' ????

Okay...Du siehst jetzt aber die "blink-definition" in Deiner custom.css (sorry, dass ich so doof nachfrage)?!

Wenn Du jetzt im FF bist, dann nutze doch mal den Inspector und schaue, ob Dein Icon die class "blink" hat.

Gruß, Netstac

[jensgulow]

komme erst jetzt zum antworten .... custom.css (Auszug):

@-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;  
}  

.darkgreen {   color:#017711; }  
.orange {   color:#FF8000; }  
.red {   color:#B20125; }   
.darkred {   color:#9A0000; }  
.darkblue {   color:#070095; }  
.darkpurple {   color:#C5008D; }  
.brown {   color:#AD5E18; }  
.darkyellow {   color:#E6AD00; }

Der inspector zeigt mir aber, dass class=blink nicht gesetzt ist:

<div class="widget_container " style="width: 100%;">
<div class="widget clearfix group">
<div class="clearfix">
<h2></h2>
<div class="widget_container " style="width: 12.5%;">
<div class="widget clearfix info" style="">
<div class="label"></div>
<div class="actor orange">
<div class="value">
[COLOR=Red]<img class="icon" src="icon/knx-uf-iconset/128x128_orange/sani_buffer_temp_all.png">[/COLOR]</img>Modus:</div>
/div>
</div>
</div>

[jensgulow]

So .... und nun geht es auf einmal. Habe aber in der Zwischenzeit nichts gemacht. Komisch.

[netsrac]

Blinkende Icons...

So .... und nun geht es auf einmal. Habe aber in der Zwischenzeit nichts gemacht. Komisch.

Klingt nach einem typischen Cache Problem :-)

Aber schön zu lesen, dass es klappt.

[AingTii]

Hallo Zusammen,

der Beitrag ist zwar schon lange her, aber ich habe dennoch Fragen...

Bei mir funktioniert es leider nicht mit dem blinken auch die timebig funktioniert nicht, es wird
alles standardmäßig angezeigt.

Daher vermute ich evtl. mache ich etwas falsch mit der custom.css

Muss ich die noch irgendwo aktivieren, eintragen etc.?
Muss noch etwas anderes mit eingetragen werden in der custom.css oder nur aus Posting #1 reinkopieren?
Habe ich doch richtig verstanden, dass die custom.css aus dem jeweiligen design in meinem fall im metal Ordner angepasst wird, oder?

Danke
Gruß Jens