PNG Datei soll blinken

[Thomas76]

Hallo!

Und weil ich gerade dabei bin, gäbe es da noch eine Sache bei der ich nicht weiterkomme.

Lasse mir den Zustand der Batteriebetriebenen Geräte mittels grünen Häckches (ok.png) und mittels Batteriesymbol (lowbattery.png) anzeigen.

Das dazu verwendete Widget ist Basic-Image.

Ist es möglich das Batteriesymbol blinken zu lassen?

Danke und LG

Thomas

[pix]

Auch schnell von unterwegs:

Wenn du CSS Transformationen nutzt geht es.

Oder du erstellst mit einem Bildbearbeitungsprogramm aus dem png ein gif, das blinkt. Das spart auch Ressourcen beim Client.

Und schließlich kann man per JavaScript Intervall einen State zB sekündlich true/false setzen und von diesem State die Sichtbarkeit abhängig machen. Aber das ist ein wenig mit Kanonen auf Spatzen geschossen

Pix

[Thomas76]

Danke für die Antwort!

Werde mich an's gif ranmachen!

Gruß

Thomas

[pix]

Hallo,

hier mal zwei Beispiele fürs Blinken mit CSS

<u>Text</u>

Widget:

[{"tpl":"tplHtml","data":{"visibility-cond":">","visibility-val":"0","refreshInterval":"0","visibility-oid":"hm-rpc.0.HEQ0088317.1.STATE","html":"\nWasseralarm in der Küche\n","comment":"hm-rpc.0.HEQ0088317.1.STATE","name":"Meldung Alarm Wassermelder","gestures-offsetX":0,"gestures-offsetY":0,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"visibility-groups-action":"hide"},"style":{"left":"22px","top":"462px","z-index":"50","width":"479px","height":"104px","font-size":"40px","color":"white","padding":"","margin-left":""},"widgetSet":"basic"}]

Wichtig ist dieser HTML Code:````

Wasseralarm in der Küche

Dann im CSS Reiter diesen COde einfügen:

.meldung_pulsierend_rot {
animation: pulsierend_rot 1.9s infinite;
-webkit-animation: pulsierend_rot 1.9s infinite;
-moz-animation: pulsierend_rot 1.9s infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
width: 90%;
height: auto;
padding: 10px;
margin: 0;
margin-bottom: 20px; /* für Schatten */
border-width: 3px;
border-style: outset;
max-width:800px;
}

@keyframes pulsierend_rot {
0% {
background-color: rgba(0,0,0,0);
color: rgba(0,0,0,0);
border-color: rgba(250,250,250,0);
-webkit-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0);
-moz-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0);
box-shadow: 10px 10px 5px 0 rgba(0,0,0,0);
}
25% {
background-color: red;
color: rgba(255,255,255,1);
border-color: rgba(250,250,250,1);
-webkit-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.55);
-moz-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.55);
box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.55);
}
65% {
background-color: red;
color: rgba(255,255,255,1);
border-color: rgba(250,250,250,1);
-webkit-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.55);
-moz-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.55);
box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.55);
}
100% {
background-color: rgba(0,0,0,0);
color: rgba(0,0,0,0);
border-color: rgba(250,250,250,0);
-webkit-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0);
-moz-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0);
box-shadow: 10px 10px 5px 0 rgba(0,0,0,0);
}
}

Sieht dann wie im angehängten Video aus (mov-Datei, hier Screenshot) ![261_bildschirmfoto_2016-11-16_um_19.23.54.jpg](/assets/uploads/files/261_bildschirmfoto_2016-11-16_um_19.23.54.jpg)  ![261_blinktext.mov.zip](/assets/uploads/files/261_blinktext.mov.zip) 

Gruß

Pix

[pix]

Und hier das zweite Beispiel

Blinkender Ring zB um den Wassermelder (Status 0 kein Ring, Status 1/feucht gelber Ring, Status 2/nass roter Ring)

als Video besser zusehen

Dazu das Widget:

[{"tpl":"tplValueListHtml8","data":{"oid":"hm-rpc.0.HEQ0088317.1.STATE","visibility-cond":"==","visibility-val":1,"count":"2","value1":"![](/vis.0/iPad/img/Funkwassermelder.png)","test_list":"2","style0":"display: none;","style1":"","style2":"","html_prepend":"","value0":"","name":"Funkwassermelder Status","value2":"![](/vis.0/iPad/img/Funkwassermelder.png)","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"visibility-groups-action":"hide"},"style":{"left":"265px","top":"361px","z-index":"30","width":"84px","height":"83px"},"widgetSet":"basic"}]

Und schließlich das CSS:

.pulse_container_ring {
  border: 12px solid #fff601;
  background: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: pulse_circle 1.7s ease-out;
  -moz-animation: pulse_circle 1.7s ease-out;
  animation: pulse_circle 1.7s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -36px;
  left: -36px;
  z-index: 1;
  opacity: 0;
}

.pulse_yellow {
    border-color: yellow !important;
}
.pulse_red {
    border-color: red !important;
}
.pulse_white {
    border-color: white !important;
}

Naja und dann schließlich in VIS noch die Bild-Datei für den Wassermelder hochladen. Die ist bei mir im Ordner````
/vis.0/iPad/img/Funkwassermelder.png

Gruß

Pix

[Thomas76]

Hallo!

Danke für die Beispiele und die Unterstützung.

Habe es jetzt mal mit dem GIF probiert und das funktioniert einwandfrei!

LG

Thomas
1003_battery_low_hintergrund_transparent.gif

[nik82]

Hallo Pix,

ich finde das mit dem pulsierenden Ring sehr cool,

wie kann ich das für ein Objekt mit nur true und false machen?

Ich bräuchte auch nur einen roten pulsierenden Kreis wenn der Wert auf true geht.

[fischi87]

@nikmaier:

Hallo Pix,

ich finde das mit dem pulsierenden Ring sehr cool,

wie kann ich das für ein Objekt mit nur true und false machen?

Ich bräuchte auch nur einen roten pulsierenden Kreis wenn der Wert auf true geht. `

bin zwar nicht pix aber ich hab auch ein blinkenden ring gemacht, so:

css code

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

widget

[{"tpl":"tplFrame","data":{"g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"title":"","title_color":"","title_top":"-10","title_left":"15","header_height":"0","header_color":"","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"title_font":"","title_back":"","class":"blink","filterkey":"Main","name":"Ring Licht Rot","visibility-cond":"==","visibility-val":"true","visibility-groups-action":"hide","visibility-oid":"javascript.0.Status.Lichter.State"},"style":{"left":"265px","top":"50px","border-width":"2px","border-radius":"180px","border-style":"none","border-color":"#ffffff","width":"200px","height":"200px","box-shadow":"0px 0px 15px 2px red","background":"{v:javascript.0.Status.Lichter.State; (v>0) ? \"red\" : \"\"}","z-index":"0"},"widgetSet":"basic"}]

[nik82]

Danke für die Info, aber ich habs jetzt noch leichter (zumindest aus meiner Sicht) gemacht, ich habe einfach die integrierte VIS Funktion der Signalbilder genutzt, funktioniert perfekt.

Aber trotzdem vielen Dank.
6616_signalbilder.jpg