Darstellung eine Animation mit mehreren Mediaimages

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

Moin Chris,

ich habe alles mögliche ausprobiert um den Rand wegzubekommen - gelungen ist es mir allerdings nicht :frowning: Wenn man die html Box Größe exakt auf die Bildgröße einstellt, dann bekommt man Scroll Leisten :mad: Es könnte aber auch an meinen nicht sehr umfangreichen hmtl Kenntnissen liegen.

Anbei ein Screenshot. Lediglich das png-Unwetterbild rechts unten wird ohne Rand dargestellt.

Unwetterbild png 500 x625

<img src='user/DWD/Unwetterbild.png' style='height: 96%; width: 78%; object-fit: fill;' />

Temperaturbild und Radarbild jpg 540 x 500

 <img src='user/DWD/Radarbild.jpg' style='height: 96%; width: 100%; object-fit: fill;' />
<img src='user/DWD/Temperaturbild.jpg' style='height: 96%; width: 100%; object-fit: fill;' />

Radarfilm links oben gif 540 x 500

<img src='user/DWD/Radarfilm.gif' style='height: 96%; width: 100%; object-fit: fill;' />

Wie gesagt gilt dies nur für den Windows Client. Bei IOS nehme ich die Bilder direkt aus der URL :slight_smile:

Gruß
Hans

Hallo,

ergänzend möchte ich noch auf diesen Thread hinweisen aktueller Win 10 Client entwickelt massiven Resourcen Bedarf an Speicher und CPU der zeigt, dass IPSView einen massiven Speicherbedarf entwickelt, selbst wenn man die Bilder unter Windows von der Festplatte lädt.

Also insgesamt betrachtet wird das wohl erst dann perfekt funktionieren, wenn Andreas dort eine neue Komponente gefunden hat :slight_smile:

Gruß
Hans

rechts und unten lassen sich durch die Größe beeinflussen - aber oben und links nicht

So, Teil eins der Aufgabenstellung findet sich hier :D.

Angelehnt an die andere Diskussion bezüglich „niederschlagsradar aktualisiert sich nicht“, hier die Anpassungen zur Ablage der Datei im user-Ordner und entsprechendes Anlegen einen String Variablen mit HTML Code, die in IPSview als HTMLbox eingebunden werden kann.

Da ich unterschiedliche Auflösungen auf meinen Endgeräten habe, aber meistens die gleiche View nutze, funktioniert das Resizen (Modul IPSView Resize) eines „externen“ Images natürlich nicht.

Deshalb nutze ich die Style Tags und passe das Bilder somit selber an die richtige Größe an.

Zusätzliche bzw. komische Ränder sehe ich bei mir nicht, solange das Resize mit gleichen Skalierungen erfolgt. Sonst rechnet das Modul die HTMLbox um und das Bild passt dann eventuell nicht komplett rein.


<?

$debug = false;

//Auf 5 Minuten Takt Synchronisieren
$offset = (integer)date("s") + ((integer)date("i") % 5) * 60;

// Script Tmer entsprechend setzen bzw. anpassen
if($offset != 0) {
   IPS_SetScriptTimer($_IPS['SELF'],300 - $offset);
} else {
    IPS_SetScriptTimer($_IPS['SELF'],300);
}

//Zeit berechnen
$minute=Floor(date("i") / 5) * 5 - 10;
$dateline=mktime(date("H"), $minute, 0, date("m"), date("d"), date("y"));

$year=gmdate("Y", $dateline);
$month=gmdate("m", $dateline);
$day=gmdate("d", $dateline);
$time=gmdate("Hi", $dateline);

if ($debug)
   echo IPS_GetName($_IPS['SELF']), " Zeit: ".$year." ".$month." ".$day." ".$time."

";

// Animiertes DWD Image zur Anzeige holen
$remoteImage = 'https://www.niederschlagsradar.de/image.ashx?type=blitz&jaar=&regio=homepage&tijdid='.$year.$month.$day.$time.'&time=&bliksem=0';
$filepath = 'user/dwd_regenradar_ani.gif';   
$localImage = IPS_GetKernelDir().'webfront/'.$filepath;

if (!readURLwriteLOCAL($remoteImage, $localImage))
	echo "Fehler beim holen von dwd_regenradar_ani.gif";

// HTML code 
// img { width: 100%; height: auto }


$content = '
<html>
<head>
<style type="text/css" media="screen">
body  { font-family: Arial; margin:0; padding:0; background-color:black; }
img {   width: 100%; height: auto } 
</style>
</head>
<body scroll="no">
<img src="'.$filepath.'">
</body>
</html>';

// Anlegen eines neuen Links mit dem Namen, wenn noch nicht vorhanden
$VariablenID = @IPS_GetVariableIDByName("dwd_regenradar_ani", $_IPS['SELF']);
if ($VariablenID === false) {
	$VariablenID = IPS_CreateVariable(3);
	IPS_SetName($VariablenID, "dwd_regenradar_ani"); // Variable benennen
	IPS_SetParent($VariablenID, $_IPS['SELF']); // Variable einsortieren unter dem Script
	SetValueString( $VariablenID, $content);
} else {
	SetValueString( $VariablenID, $content);
}







function readURLwriteLOCAL($remoteImage, $localImage) {
  	$error = false;
	$ch = curl_init($remoteImage);
	if ($ch === false) { // fehlgeschlagen
		return false;
	} else { // erfolgreich, curl handle
		curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36");;
		curl_setopt($ch, CURLOPT_HEADER, 0);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
		$remoteImage = curl_exec($ch);
		if (curl_errno($ch)) { // curl Fehler aufgetreten
       	echo curl_error($ch);
       	$error = true;
		 }
		curl_close($ch);
		if (!$error) { // curl read erfolgreich, Datei schreiben
			$result = file_put_contents($localImage, $remoteImage);
			if ($result === false) {
			   echo "Fehler beim Schreiben: ".$localImage;
	       	return false;
			} else {
				return true;
			}
		}
	}
}

?>

Der HTML Inhalt lässt sich auch ins WebFront einbinden, zerlegt in dieser Form aber den Inhalt. Dafür müsste der HTML Code etwas reduziert werden und nicht der img Tag genutzt werden sondern ein eigenes div.

Moin Ralf,

zunächst einmal vielen Dank für den Tipp mit dem Aufbau der Variablen $content. Nachdem ich diese bei mir eingetragen habe sind die Ränder weg :wink: Dann hat sich meine Vermutung, dass meine html Kenntnisse nicht ausreichend sind, ja bestätigt :slight_smile:

Der übrige Aufbau entspricht auch meiner Vorgehensweise mit dem Download und den zyklischen Updates der Bilder. Mich würde noch interessieren, ob du bei dem Windows Client ebenfalls den hier aktueller Win 10 Client entwickelt massiven Resourcen Bedarf an Speicher und CPU beschriebenen Resourcenhunger feststellen kannst. Ich mache es jetzt einfach so, dass ich jeden Morgen IPSView einmal neu automatisch beende und neu starte. Da mein NUC 8 GB hat stellt es insgesamt kein großes Problem dar.

Gruß
Hans

Speicher und CPU ist mir bisher nicht aufgefallen.

Ich nutze relativ viele HTMLboxen, der Desktop läuft nicht so lange, das Windows Tablet ist aber permanent an.

Probleme habe ich nur mit meiner Kamera und Stream in IPSview unter Android. 3-5 Aufrufe des Kamera-Fensters und IPSview verreckt.

Hallo Ralf,

bei mir läuft IPSView zusammen mit IPS auf dem NUC rund um die Uhr und lediglich der Touchscreen wird dunkel geschaltet.

Vielleicht findet Andreas ja bei Gelegenheit eine neue Komponente, so dass die Probleme gefixt werden können. Auch einheitliche Darstellungen für die Slider für ALLE Clients wären wünschenswert :slight_smile:

Gruß
Hans