Diashow in Webfront

Hallo Joachim,

hiermit über Script kannst Du die Seite aufrufen.

WFC_SwitchPage(12345, $item);

12345 = Wbfront Configurator ID

<style type="text/css">html, body{background:#27292b; color:#fff;}</style>

mit den üblichen Verdächtigen. :slight_smile:

Hallo Rainer,

das mit der Hintergrundfarbe hat schon mal geklappt! :slight_smile:
Vielen Dank!

…aber wie erkenne ich „Untätigkeit“ im Webfront? :confused:

Meine Vorstellung wäre dass eine Art „Counter“ immer dann zurückgesetzt wird, wenn eine Aktion im Webfront erfolgt. Läuft der „Counter“ jedoch bis auf Null, ohne das eine Aktion durchgeführt wird, wird die Diashow aufgerufen…

Joachim

Du müsstest all deine Skripte durchgehen und dort wo was kommt mit $IPS_SENDER == WebFront deinen Zähler wieder neu setzen. So wird bei jedem Betätigen eines Schalters übers WebFront der Zähler neu gesetzt. Nachteil: wenn man nur durch Kategorien scrollt, läuft der Zähler weiter, da ja keine Aktion ausgeführt wird.
Hier könnten nur die Entwickler helfen… :loveips:

PS: Ich fänd das auch klasse…

Hallo dfhome,

die Idee klingt ganz gut, ist aber in der Praxis wahrscheinlich schwer durchzuhalten, insbesondere wenn noch externe Seiten eingebunden werden.
Von daher wäre es vielleicht doch ein neu zu schaffendes „Webfront-Ereignis“ von Vorteil?:confused:

Joachim

Hallo Leute,

vielleicht gelingt es ja einem der „Skript-Profis“ die automatische Skalierung der Fotos auch im IE hinzubekommen… ;):confused:

Wäre dankbar für Tipps…:slight_smile:

Joachim

Das mit der automatischen Skalierung hab ich jetzt auf die Schnelle nicht hinbekommen. Aber ich hab mir ausm Web mal nen Javascript genommen, welches ne Fadingfunktion hat. So hat man nen sanftes Überblenden der Bilder.

Gleichzeitig kann man jetzt die Größe angeben in der die Bilder angezeigt werden. Da ich das Frontend bis jetzt sowieso nur über mein Laptop benutz, somit auch nur eine Auflösung hab, reicht mir das erstmal.

Vielleicht kann es mal jemand testen, habs jetzt nur unter Chrome getestet.

  1. …/webfront/user/slideshow Ordner erstellen oder im Script den Pfad zu eurem Slideshow Ordner angeben.

  2. PHP Datei erstellen, Code einfügen, im Userordner unterbringen.

  3. Wie zuvor als externe Seite einbinden und ausprobieren

<?
//Verzeichnis der Bilder
$directory = "slideshow/";

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

// Bildbreite
$width = 800;

// Bildhöhe
$height = 600;

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#imageContainer {
	position:relative;
	margin:auto;
	width:'.$width.'px;
	height:'.$height.'px;
	border:1px solid #000;
	overflow:hidden;
}

#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}
</style>
<script type="text/javascript">
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
	if(!d.getElementById || !d.createElement)return;

	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;

	setTimeout(so_xfade,'.$speed.');
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;

	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05;
	nOpacity+=.05;

	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;

	setOpacity(imgs[current]);
	setOpacity(imgs[nIndex]);

	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,'.$speed.');
	} else {
		setTimeout(so_xfade,50);
	}

	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}

}
</script>
</head>
<body>
	<div id="imageContainer" style="text-align:center;">';

function file_extension($filename)
{
return end(explode(".", $filename));
}

$folder = openDir($directory);
$by = 0;
while ($file = readDir($folder)) {
 if($file != "." && $file != ".." && $file[0] != "." && strtolower(file_extension($file))  == 'jpg') {
  $fullname="$directory$file";
  //echo "bild[$by]='$fullname';
";
  echo '<img src='.$fullname.' width="'.$width.'" height="'.$height.'"/>';
  $by++;
 }
}
closeDir($folder);
echo'	</div>
</body>
</html>';
?>

Hallo cut,

ich habe Dein Skript (IE) mal ausprobiert.
Toll ist:

  • die Bilder werden in einer vorgegebenen maximalen Rahmen angezeigt (vorher waren sie ja teilweise sehr viel größer als der Bildschirm angezeigt)
  • die Überblendung sieht super aus

Verbesserungswürdig:

  • Bilder werden verzerrt dargestellt, weil sie „genau“ in den Rahmen „gepresst“ werden
  • „Rahmengröße“ sollte (automatisch) von der Bildschirmeinstellung abhängig sein

Ansonsten: Ein Marsch in die richtige Richtung!:wink:

Joachim

Ja, ich guck die Tage nochmal ob sich da was machen lässt mit der automatischen Skalierung. Aber am sonsten lässt sich das doch recht gut vermeiden, wenn du die Standard Bildschirmauflösungen wählst… 800x600 oder 1024x768 etc…

Hallo cut,

ein Ansatz wäre vielleicht, mit getimagesize (PHP: getimagesize - Manual) die Bildabmessung zu ermitteln, dann die längere Seite auf z.B. 800 oder 600 zu skalieren, und die jeweils andere Seite dann im Verhältnis von der Funktion herunterzusetzen, so dass der Container dann die Seitenverhältnisse des Originalbildes hat, aber eben begrenzt ist.
Eine „feste“ Bildschirmgröße ist zwar auf einem Rechner möglich, viele verwenden aber innerhalb des Gebäudes eben verschiedene Rechner mit verschiedenen Bildschirmauflösungen. Im Zweifelsfall, könnte man jedoch ein „Minimum“ von z.B. 1024x768 annehmen (ich weiß nämlich nicht, wie der Browser die aktuelle Auflösung des aufrufenden PC an IPS zurückmelden könnte) und die Diashow im Bildschirm mit dieser Auflösung zentrieren.
Aber Step-by-Step…:wink:

Joachim

Hallo Leute,

ich habe den Thread mal „nach oben geholt“, um zu erfahren, ob es inzwischen eine Diashow gibt die im IE die Bilder nicht nur skaliert, sondern auch unverzerrt anzeigt.

Ich habe mir für die anderen Fragestellungen folgende Lösung überlegt:

  • Für den Touchscreen-Rechner wird eine eigene Webfront-Instanz angelegt
  • Für die Erkennung wie lange der letzte aktive Zugriff her ist kann man das Skript von Rainer verwenden.
  • Wird eine einstellbare Zeit kein aktiver Zugriff festgestellt, wird vom IPS aus per „WFC_SwitchPage“ auf „Diashow“ umgestellt…

Voraussetzung ist jedoch, dass es eine funktionierende Diashow gibt…:wink:

Joachim

Nachtrag:
Ich habe festgestellt: „WFC_SwitchPage“ bezieht sich leider nicht - wie ich zuerst verstanden habe - auf die Webserver-Instanz, sondern auf die Webfront Configurator-Instanz… :frowning:

Hi Joachim,

ist die Diashow vom Windows Screensaver nicht einfacher?

Adrian

Hallo Adrian,

wenn es solch eine „integrierte“ Lösung nicht gibt, bleibt mir wohl nichts anderes übrig…:frowning:

Trotzdem Dank für Deine Antwort!

Joachim

Hat jemand die Diashow in der aktuellen 2.4 am laufen?

Ja, warum?

Ich hatte einen Anfängerfehler bei der Pfadangabe gemacht und einen Pfad außerhalb der Webserverroot genommen. Jetzt gehts.:wink:

Hallo zusammen,

ich würde gerne das Thema zu einer Diashow noch mal aufgreifen. Habe mit dem Script von „CUT“ im Beitrag 26 experimentiert. Das Skript funktioniert grundsätzlich und ist eigentlich genau das was man braucht.

Aber das Skript lädt so wie ich das sehe alle Bilder in dem Ordner beim ersten Start in den Speicher… oder so ähnlich. Jedenfalls umso mehr Bilder man auswählt bzw. im Ordner hat umso länger dauert der Start. Und wenn man das Webfront dann z.B. auf einem Galaxy Tab am laufen hat, hängt sich mit entsprechender Menge sogar der Dienst auf und alles steht… Ich habe die Bilder auch extra klein gemacht, aber auch dann war es bei 50 Bildern nicht mehr möglich mit dem Galaxy Tab zu arbeiten…

Meine Frage wäre deshalb habt ihr auch irgendeine Diashow am laufen? Wenn ja wie viele Bilder? Welche Skripte? Gibts da auch Probleme beim Laden? Oder kommt das Problem bei mir woanders her?

Vielen Dank schon mal für euer Feedback.