Online "powerpoint", eksempler på javascript/ajax for bytting av "lysbilder"?

nree · 18. juli 2008

Heisann

Har laget et online "powerpoint" system som bruker iframe på en webside for å vise informasjon.

Problemet med dette er at hele siden "hakker" når den bytter "lysbilde" (meta refresh til f.eks ?count=2)

Jeg lurer på om noen kan vise hvordan dette er mulig med javascript/ajax for så "smuud" overgang som mulig

På forhånd takk

Endret 18. juli 2008 av Goggen90

nree · 20. juli 2008

Bump:)

grimjoey · 22. juli 2008

bruker du ajax blir det loading og hakking. det du kanskje bør gjøre er å loade alle lysbildene på siden og sette de som style="display:none;"

<html>
 <head>
<script language="javascript">
  var peker = 0;

  function nesteLysBilde() {
	var fremviser = document.getElementById('lysbildefremviser');
	fremviser.children[peker].style.display = 'none';
	peker++;
	fremviser.children[peker].style.display = 'block';

  }
</script>
 </head>
 <body>
<div id="lysbildefremviser">
  <div id="lysbilde01">
	blabla1
  </div>
  <div id="lysbilde02" style="display:none;">
	blabla2
  </div>
</div>
<button onclick="nesteLysBilde();">neste</button>
 </body>
</html>

Endret 22. juli 2008 av grimjoey

nree · 25. juli 2008

Takk for svar

Skulle lagt med mer informasjon i førsteinnlegget, men bedre sent en aldri..

Systemet skal brukes for å vise informasjon fra en database.

Hvert "lysark" har en egen rad, der ligger 'kildekode' som blir generert fra en online wysiwyg behandler.

I tillegg ligger det ved 'sekunder', hvert "lysark" har altså en tid det skal vises før scriptet skal gå videre til neste "lysark"

Om det ikke er mulig med en bedre overgang uten cache (loading er ikke noe problem) så fungerer forsåvidt meta refresh også, utenom at en scrollende rss nyhetsstripe hakker hver gang lysark skiftes.

grimjoey · 25. juli 2008

du kan loade alle lysbildene på forhånd ved å la php skrive de ut i dokumentet som javascript arrayer. dette er praktisk så lenge ikke total mengde data er så stor at loadingen blir betydlig treg.

function mysqlGet($sql) {
 if (!$result = mysql_query($sql)) die(mysql_error());
 return $result;

}

/* hent info fra db og legg i et array

array(array('rad 1 første kolonne', 'andre kolonne', '....'),
  array('rad 2 ....'),
  array('....'),
  ....)

*/

function mysqlGetArray($sql) {
 $result = mysqlGet($sql);
 while ($row = mysql_fetch_array($result)) {
$rows []= $row;

 }
 return $rows;

}

// gjør om array til en output av javascript kode
// som definerer det samme arrayet i js

function dbToJSArray($dbArray) {
 $stringOut = "var dbArray = new Array();\n";
 foreach ($dbArray as $key => $row) {
$tempString = 'dbArray[' . $key . '] = new Array(';
foreach ($row as $column) {
  if (is_numeric($column)) $tempString .= $column . ', ';

  // rawurlencode korresponderer med javascript sin unescape() funksjon
  // dette for å oversette spesial tegn, og hindre at de ødelegger arrayet

  else $tempString .= '"' . rawurlencode($column) . '", ';

}

// {0,-2} fjerner siste komma og mellomrom

$outString .= $tempString{0,-2} . ");\n";

 }
 return $outString;

}

$dbArray = mysqlGetArray('select kildekode, sekund from tabell where noe = 'noe';');
$jsArrayString = dbToJSArray($dbArray);

print '
<script type="text/javascript" language="javascript">

' . $jsArrayString . '

// teller som holder øye med hvilket lysbilde som er aktivt

var imageCounter = 0;

function nextImage() {
 var timeout, code;

 // dersom arrayet er ved slutten i følge
 // imageCounter vil denne breake funksjonen

 if (!dbArray[imageCounter]) break;

 // henter timeout før neste lysbilde
 // og aktuell kildekode fra arrayet

 timeout = dbArray[imageCounter][1];
 code = dbArray[imageCounter][0];

 imageCounter++;

 // bruk kildekode

 // bytt ut denne funksjonen med funksjonen du bruker med "kildekoden"
 wysiwyg(unescape(code));

 // set opp en timer som viser neste bilde

 setTimeout("nextImage", timeout);

 } else {}

}

// start visning av lysbilder når siden er lastet

window.onload = function() {
 nextImage();
}

</script>
';

noe slikt kanskje

du kan selvfølgelig gå for ajax også dersom du ønsker det, men med denne metoden blir det ikke noe behov for loading (bortsett fra eventuelt den online wysiwyg behandleren hva nå en det betyr).

red: kommentarer lagt til

Endret 25. juli 2008 av grimjoey

nree · 25. juli 2008

Glemte å si at jeg ikke har peiling på Javascript i det hele tatt, men er lærevillig! (derfor hadde det vært fint med kommentarer i scriptene)

grimjoey: Hvis du leser første og siste innlegg (før dette) av meg sjønner du kanskje at det ikke er et bra alternativ å gjøre det på den måten.

Grunnen til det er at "lysarkene" kommer til å bli oppdatert en gang i blandt, og siden denne websiden skal gjøre det meste selv er oppdateringen av hele systemet satt til hver 3. time.

Systemet skal i hovedsak brukes som et infoskjerm system, men som også kan vises i nettlesere på andre datamaskiner.

grimjoey · 25. juli 2008

jeg ser ikke helt problemet. koden vil hente informasjon fra databasen hver gang den lastes. så den vil holde seg oppdatert. du kan jo ha en <meta http-equiv="refresh" content="900000;http://www.example.com" /> får å refreshe siden hvert 15 minutt elns. bruker du forresten php på serveren?

red: her er en fungerende demonstrasjon med ajax:

<?php


// $link = mysql_connect(..., ..., ...);
// mysql_select_db(..., $link);


// dette arrayet er av samme format du vil få 
// fra get_image($id)
$dbArray = array(
array('Hallo', 3000),
array('dette', 700),
array('er', 1000),
array('hvordan', 1500),
array('du', 700),
array('kan', 500),
array('gjøre', 1000),
array('det', 1000),
array('', 1000)		
);


// husk å rette querien og kommentere bort koden når du skal bruke den mot database
function get_image($id) {
//	if (!$result = mysql_query('SELECT kildekode, sekunder FROM table WHERE id=' . $id . ';')) die(mysql_error());
//	$array = mysql_fetch_array($result);

// disse 2 linjer fjernes dersom database brukes
global $dbArray;
$array = $dbArray[$id];

return $array;

}

function get_xml($array) {

 $XMLstart = "<?xml version=\"1.0\"?>\n<result>\n";
 $XMLstop = "</result>\n";

 $XMLmiddle = '';
 foreach ($array as $k => $v) {
$XMLmiddle .= "\t<item id=\"" . $k . "\">" . $v . "</item>\n";

 }

 $XMLout = $XMLstart . $XMLmiddle . $XMLstop;
 return $XMLout;

}

if (isset($_GET['xml'])) {

die(get_xml(get_image($_GET['xml'])));

}

?>
<html><head><title>test</title></head><body>

<script language="javascript" type="text/javascript">

function ajax(url, callback, xml) {
xml = true;
var http_request, response, i;

var activex_ids = [
	'MSXML2.XMLHTTP.3.0',
	'MSXML2.XMLHTTP',
	'Microsoft.XMLHTTP'
];

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
	http_request = new XMLHttpRequest();
	if (http_request.overrideMimeType) {
		http_request.overrideMimeType('text/xml');
	}
} else if (window.ActiveXObject) { // IE6 and older
	for (i = 0; i < activex_ids.length; i++) {
		try {
			http_request = new ActiveXObject(activex_ids[i]);
	} catch (e) {}
	}
}

if (!http_request) {
	alert('Unfortunately your browser doesn’t support this feature.');
	return false;
}

http_request.onreadystatechange = function() {
	if (http_request.readyState !== 4) {
		// not ready yet
		return;
	}
	if (http_request.status !== 200) {
		// ready, but not OK
		alert('There was a problem with the request.(Code: ' + http_request.status + ')');
		return;
	}
	if (xml) {
		response = http_request.responseXML;
	} else {
		response = http_request.responseText;
	}
	// invoke the callback
	callback(response);
};

http_request.open('GET', url, true);
http_request.send(null);

}

var ajaxXML;
var imageCounter = 0;

function showImage(xml) {

var items, code, timeout;
items = xml.getElementsByTagName('item');
if (items[0].childNodes[0]) {
	code = items[0].childNodes[0].nodeValue;
	timeout = items[1].childNodes[0].nodeValue;
} else return 0;
imageViewer = document.getElementById('imageViewer');

imageViewer.innerHTML = code;
imageCounter++;
setTimeout('nextImage()', timeout);

}

function nextImage() {
ajax('<?php print $_SERVER['PHP_SELF']; ?>?xml=' + imageCounter, showImage);

}

window.onload = nextImage;

</script>

<div id="imageViewer">
</div>

</body></html>

Endret 25. juli 2008 av grimjoey

nree · 25. juli 2008

Bruker PHP og mySQL.

Ser forsåvidt bra ut det, men ville helst slippet cache da lysarkene vil bli oppdatert rimelig ofte (kanskje til og med innenfor 15 minutter).

Det jeg er på jakt etter er et script som laster en side, nå har jeg en side med en iframe.

Siden som vises i iframen har meta refresh til neste lysark (som beskrevet i førstepost).

Skulle gjerne hatt et script som lastet f.eks index.php?count=1 inn på siden, og fant ut fra denne filen hvor lenge det skulle vises før det skulle gå videre til neste "count" som blir generert av en databasespørring.

Vet strengt tatt ikke om dette er mulig :dontgetit:

grimjoey · 25. juli 2008

den siste koden henter en og en rad fra databasen ved hjelp av ajax. (egentlig fra et array, men koden for database implementering ligger der kommentert ut) med andre ord ingen caching.

usikker på hva du mener med index.php?count=1. er count en referanse til tiden siden skal vises eller en referanse til en id i databasetabellen?

i et lignende system som du har beskrevet ville jeg i hovedsak hatt en eller to tabeller

lysbildesamlinger
id int not null primary key auto_increment
navn varchar(50)

lysbilder
id int not null primary key auto_increment
samling_id int not null default 1
innhold text
timeout int

kun den siste dersom det kun er én samling med lysbilder som skal vises.

da kan man ha en side som viser lysbilde samling x med index.php?show=x

siden vil da hente den første raden og vise innholdet. i tillegg starte en setTimeout basert på timeout i raden for å hente neste rad ved hjelp av ajax.

alternativt kan man gjøre noe liknende med index.php?show=x&id=y hvor y er rad i tabellen. så kan man med php skrive timeout til en meta refresh tag som peker til index.php?show=x&id=y+1.

Endret 25. juli 2008 av grimjoey

nree · 26. juli 2008

index.php?count=x er hvilken rad i databasen scriptet skal vise.

Hvis det er "rad 1" (fra toppen av slik jeg sorterer de med order by) blir denne vist.

Her er koden som henter ut lysarket:

	  $count = strip_tags($_GET['count']);

  if(!$count or !is_numeric($count) or $count < 0) { 
  $sporring2 = "select id, innhold, sekunder from lysark where ikkevis!='1' order by posisjon limit 0, 1;";
  $count = 0;
  $count++;
  }
  elseif($count == mysql_num_rows($resultat1) or $count > mysql_num_rows($resultat1)) {
  $sporring2 = "select id, innhold, sekunder from lysark where ikkevis!='1' order by posisjon limit 0, 1;";
  $count = 0;
  $count++;
  }
  else {
  $sporring2 = "select id, innhold, sekunder from lysark where ikkevis!='1' order by posisjon limit $count, 1;";
  $count++;
  }

(Er klar over at jeg kan spare meg for elseif og sette in () or () i første if, men det blir ikke fult så oversiktelig)

'ikkevis' er et felt som definerer om lysarket er deaktivert fra presentasjonen eller ikke.

'sekunder' er det som i dag gjør at scriptet går videre til neste lysark med meta refresh (?count=$count).

'posisjon' angir rekkefølgen, adminpanelet kan flytte lysark opp og ned i rekkefølgen (1,2,3 osv)

Endret 26. juli 2008 av Goggen90

grimjoey · 26. juli 2008

kan jeg se koden som viser lysarket?

ut i fra koden din forstår jeg det som at dersom count ikke eksisterer eller er større en antall rader (sett bort i fra de med ikkevis=true), skal den starte på nytt (alstå count = 0).

jeg ville skrevet koden slik

//regner med at $resultat1 er fra noe liknende dette
$sql = 'SELECT COUNT(*) FROM lysark WHERE ikkevis!="1";';
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
$rowCount = $row[0];

if (isset($_GET['count'])) $count = (int)$_GET['count'];
if ($count < 0 || $count >= $rowCount) $count = 0;

$sql = 'SELECT innhold, sekunder FROM lysark WHERE ikkevis!="1" ORDER BY posisjon LIMIT ' . $count . ', 1;';

$count++;

her er en modifisert utgave av scriptet ovenfor som bør fungere med din database. mangler databasetilkobling.

<?php

function get_xml($array) {

$XMLstart = "<?xml version=\"1.0\"?>\n<result>\n";

$XMLstop = "</result>\n";

$XMLmiddle = '';

foreach ($array as $k => $v) {

$XMLmiddle .= "\t<item id=\"" . $k . "\">" . $v . "</item>\n";

}

$XMLout = $XMLstart . $XMLmiddle . $XMLstop;

return $XMLout;

}

if (isset($_GET['count'])) {

//regner med at $resultat1 er fra noe liknende dette

$sql = 'SELECT COUNT(*) FROM lysark WHERE ikkevis!="1";';

$result = mysql_query($sql);

$row = mysql_fetch_array($result);

$rowCount = $row[0];

mysql_free_result($result);

if (isset($_GET['count'])) $count = (int)$_GET['count'];

if ($count < 0 || $count >= $rowCount) $count = 0;

$sql = 'SELECT innhold, sekunder FROM lysark WHERE ikkevis!="1" ORDER BY posisjon LIMIT ' . $count . ', 1;';

$count++;

$result = mysql_query($sql);

$row = mysql_fetch_array($result);

mysql_free_result($result);

die(get_xml($row));

}

?>

function ajax(url, callback, xml) {

xml = true;

var http_request, response, i;

var activex_ids = [

'MSXML2.XMLHTTP.3.0',

'MSXML2.XMLHTTP',

'Microsoft.XMLHTTP'

];

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/xml');

}

} else if (window.ActiveXObject) { // IE6 and older

for (i = 0; i < activex_ids.length; i++) {

try {

http_request = new ActiveXObject(activex_ids);

} catch (e) {}

}

if (!http_request) {

alert('Unfortunately your browser doesn’t support this feature.');

return false;

}

http_request.onreadystatechange = function() {

if (http_request.readyState !== 4) {

// not ready yet

return;

}

if (http_request.status !== 200) {

// ready, but not OK

alert('There was a problem with the request.(Code: ' + http_request.status + ')');

return;

}

if (xml) {

response = http_request.responseXML;

} else {

response = http_request.responseText;

}

// invoke the callback

callback(response);

};

http_request.open('GET', url, true);

http_request.send(null);

}

var ajaxXML;

var imageCounter = 0;

function showImage(xml) {

var items, code, timeout;

items = xml.getElementsByTagName('item');

if (items[0].childNodes[0]) {

code = items[0].childNodes[0].nodeValue;

timeout = items[1].childNodes[0].nodeValue;

} else return 0;

// dette er koden du må endre for å vise lysbilde innholdet riktig

imageViewer = document.getElementById('imageViewer');

imageViewer.innerHTML = code;

imageCounter++;

setTimeout('nextImage()', timeout);

}

function nextImage() {

ajax('<?php print $_SERVER['PHP_SELF']; ?>?count=' + imageCounter, showImage);

}

window.onload = nextImage;

</script>

<div id="imageViewer">

</div>

</body></html>

Endret 27. juli 2008 av grimjoey

nree · 27. juli 2008

Ser veldig bra ut, skal få studert og testet dette etter ferien

Takk for all hjelp hittil

Logg inn

Online "powerpoint", eksempler på javascript/ajax for bytting av "lysbilder"?

Anbefalte innlegg

nree

Lenke til kommentar

Videoannonse

nree

Lenke til kommentar

grimjoey

Lenke til kommentar

nree

Lenke til kommentar

grimjoey

Lenke til kommentar

nree

Lenke til kommentar

grimjoey

Lenke til kommentar

nree

Lenke til kommentar

grimjoey

Lenke til kommentar

nree

Lenke til kommentar

grimjoey

Lenke til kommentar

nree

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Håndveivinga til Elon Musk 1 2 3 4 14

Presidentvalget i USA 2024 1 2 3 4 582

Hvem er aktive 0 medlemmer