Darstellung eine Animation mit mehreren Mediaimages

Hallo,

hätte eine spezielle Frage. Ich möchte gerne den Weatherforecast von Raketenschnecke visualisieren. Dabei werden im 5-Minutentakt unterschiedliche Mediaimages für die Vorhersage generiert. Um diese Bilder zu einer Animation zusammenzufügen, hatte ich die Idee, dass ich alle Images im Designer übereinanderlege und per Script jede Sekunde vom ersten zum letzten Bild iteriere und jeweils nur ein Bild sichtbar mache.

Noch bevor ich mir über das Script Gedanken machen konnte, ergab sich ein zweites Problem. Die Mediaimages werden alle 5 Minuten neu erstellt und bekommen daher auch eine neue ID. Ich kann also im Designer keine IP-Symcon ID zugrundelegen.

Daraus ergeben sich zwei Fragen:

  1. ist es möglich, eine Animation auf diese Art zu erstellen ohne dass es krass auf die Performance drückt?
  2. kann die IP-Symcon ID des Mediaimages in IPS-View dynamisch zugewiesen werden?

… oder bin ich komplett auf dem Holzweg und es gibt eine viel einfachere Möglichkeit das umzusetzen?

LG
Hugo

Also ich hab das unter Windows so gelöst:
Datei (radar.php) mit folgendem Inhalt in das Verzeichnis wo die png’s (bei mir D:\IP-Symcon\webfront\user\RS_RainRadar_Forecast\Home) liegen erstellt:

<?php
//Diashow(1) mit PHP und JavaScript

//Verzeichnis der Bilder

$verzeichnis = "./";


//Geschwindigkeit in Millisekunden
// 3000 = 3 Sekunden
$speed = 1000;

echo "
<script type='text/javascript'>
var Animation = new Array();
var bild = new Array();
var i = 0;
";

$ordner = openDir($verzeichnis);
$by = 0;
while ($file = readDir($ordner)) {
 if($file != "." && $file != "..") {
  echo "bild[$by]='$verzeichnis$file';
";
  $by++;
 }
}
closeDir($ordner);

echo "
for (var r = 0; r < $by; r++) {
 Animation[r]=new Image(); Animation[r].src=bild[r];
}

function anzeigen() {
 if (i < $by) {
  document.images.dummy.src=Animation[i].src;
  i++;
 }
 else {
  i=0;
 }
  setTimeout('anzeigen()', $speed);
}
</script>

<body onLoad='anzeigen();'>
<div style='text-align: center; color:#FFFFFF;'><img name='dummy' alt='Show wird geladen'></div>
";
?>
  • in IPSView eine WebView mit URL: user/RS_RainRadar_Forecast/Home/radar.php

Läuft zufriedenstellend

… und das animierte Radar.GIF - welches analog erzeugt wird - reicht euch nicht?

das kann ich, soweit ich weiss, in IPS-View nicht darstellen

@Raketenschnecke

das wird erst mit einer zukünftigen Version von IPSView möglich sein. Das es jetzt schon erzeugt wird ist ja nicht verkehrt.

Ja, ok.
Ich war verwundert, da ich das animierte GIF explizit auf Userwunsch (für die mobile Darstellung) eingebaut habe. Höre aber grade aus dem OFF, dass es in IPS mobile genutzt wird.
:wink:

Man kann eine GIF-Datei auch jetzt schon im IPSView verwenden >> einfach eine HTMLBox verwenden, kurzen/simplen HTML Code mit IMG SRC in eine String-Variable tippen oder eine praktische PHP-Seite bauen die man auch universell für sowas einsetzen kann (die man dann z.B. mit einem Pfad zu einer GIF aufrufen/verlinken kann oder was auch immer man braucht) und schon klappt es wunderbar mit einer GIF im IPSView :wink:

Habe z.B. schon mehrere Wetterkarten so in meine View eingebaut. Kann aber auch für andere Dinge verwendet werden. Was euch halt so einfällt :slight_smile:

Grüße,
Chris

Ich stelle animierte GIFs in IPSView auch in HTML-Boxen dar - wie Chris das ja auch vorgeschlagen hat - geht einfach am schnellsten :wink:

Für das aktuelle Beispiel des RRFC-Vorhersage-GIFs in Originalgröße:

  • String-Variable anlegen und mit folgendem Code füllen:
<img src="user/RS_RainRadar_Forecast/Home_latestForecastLoop.gif" width="520" height="571" border="1" alt="">
  • HTMLBox anlegen und platzieren (Größe: 540 x 591 px)
  • die ID in den Eigenschaften der HTMLBox ist die des angelegten Strings / „Seite skalieren“ == „Nein“

Ferdsch!

Beste Grüße
/Jens

Hallo,

ich habe eine HTML Box mit diesem Link angelegt.

<img src="http://www.niederschlagsradar.de/image.ashx?type=regioloop&regio=ham&j=&m=&d=&mi=&uhr=&bliksem=1&voor=&srt=loop1stunde&tijdid=20172282057" width="1200" height="1200" border="1" alt="">

Das animierte Bild wird angezeigt, doch leider aktualisiert es sich nicht. Kann mir Jemand einen Tipp geben?

LG IZack

Ein Script das alle 10min aktualisiert zeigt auch das aktuelle Bild an.

$unix = time();
$nr_Regenradar ='
				<a
				 href="http://www.niederschlagsradar.de/h3.aspx?regio=homepage&srt=blitz" target="_blank">
				 <img  style="width: 222px; height: 225px; alt="Niederschlagsradar DE"
						src="http://www.niederschlagsradar.de/image.ashx?type=blitz&lightning?'.$unix.'" width="222" height="225"></a></img></td>';

Habe aber auch andere Kombi’s schon probiert mit „Vorhersage“ oder Angabe der Region, da bleibt das Bild auch „hängen“ trotz 10min Intervall des Scripts:confused:
Diese Diskussion dürtfe das Problem beschreiben

Hallo Klaus,

danke für deine Hilfe. Schreibe das Script alle 5 min in die Stringdatei und funktioniert.

LG Izack

Hallo,

ich nutze ein kleines GIF um das Drehen meiner Heizungs- und Solarpumpen in einem Schema animiert anzuzeigen. Bei o.g. Methode muss die HTML-Box aber ein bisschen größer sein, als das eigentliche GIF (zumindest hab ich es im Studio nicht anders hinbekommen). Durch die etwas größere HTML-Box wird aber die restliche Pumpe verdeckt, womit man dann diese nicht mehr sieht.

  • Wann werden animierte GIFs nativ im IPS-Studio/-View unterstützt ???

Gruß
Proxima

… kommt mit der Version 3.2 :slight_smile:

Hi Andreas

Wann werden animierte GIFs nativ im IPS-Studio/-View unterstützt

Dazu habe ich auch noch ne Frage:
Wo muß ich in der Doku suchen, um die Einbindung etc. in die Visu durch zuführen.
Habe in der Doku 3.2 nirgends was zu animierte Images usw gefunden.
Oder ist das einfach nur die Gif’s einfügen und das wars?

Einfach ein gif einfügen. :slight_smile:
Gruß Stefan

Gesendet von meinem SM-G935F mit Tapatalk

Hm, scheint so, dass animierte Gif auch mit IPSView 3.3 aus den IPS MediaObjekten (noch) nicht gehen - als festes Image gehen sie natürlich, aber auch ich generiere alle paar Minuten animierte gifs.

Probiert habe ich:

1.) Das Skript, das Jürgen hier veröffentlicht hat. Funktioniert und wäre super, aber: Bei mir sind die Bilder durcheinandergewürfelt. Außerdem bräuchte ich eine recht schnelle Bildfolge von etwa 300ms, das letzte Bild müsste aber 1-2s stehen bleiben.

2.) Die Lösung, die Jens vorgestellt hat. Eigentlich sehr schön, jedoch habe ich das image prinzipiell einen nutzlosen ca. 10px breiten Rahmen, der wohl für Scrollbalken reserviert ist. Wenn man den noch wegkriegen könnte …

Hat jemand zu 1 oder 2 noch einen Tip?

Danke,
Tom

Hi Tom!

10px breiten Rahmen? Meinst du Post #8 in diesem Thread?

<img src="user/RS_RainRadar_Forecast/Home_latestForecastLoop.gif" width="520" height="571" border="1" alt="">

Da kommt ja nur Border (ändern auf border=„0“ … aber border=„1“ macht eigentlich einen Rahmen mit 1px und nicht mit 10px) in Frage, oder du hast die width und height nicht korrekt auf dein GIF angepasst?! Mach mal bitte einen Screenshot, wenn es nicht klappt mit border=„0“.

Scrollbar…je nach Browser bekommt man die mit HTML Code weg, aber keine Ahnung wie IPSView sich da verhält.

Grüße,
Chris

Hi, ich meinte keinen gezeichneten Rahmen (den vom border-attribut) sondern einen Rahmen um das Bild herum, der nicht genutzt wird und leicht grau ist.

Hier zu sehen - den grauen Rand links und oben bekomme ich nicht weg.

Unbenannt.PNG

Moin Tom,

Dazu hat Andreas hier aktuelle Beta: Bilder in IPSView Windows Client nicht möglich über HTML Box / Webview geschrieben:

Diesen Rand habe ich unter IOS und Windows bei den DWD html-Boxen ebenfalls und ich habe auch keinen Weg gefunden diesen zu eliminieren.

Gruß
Hans

Für mich sieht das so aus, als würden Bild und HTMLBox einfach nicht zusammenpassen?!

So meine ich z.B.:
>> Bild = 400x500px
>> IPSView HTMLBox = 450x700px

Und/oder die Pixel vom Bild stimmen nicht mit width und heigth des HTML-Code zusammen?!

Grüße,
Chris