Automatsche schermupdate van content

[gibsonneke]

Beste mensen,

Als project dien ik iets te ontwikkelen met de functionaliteit van een digital signage systeem. Voor de mensen die hier niet mee bekend zijn. Kort gezegd komt het er op neer dat er in de back-end content (images, text, video) upgeload wordt, er daarvan presentaties aangemaakt worden en deze dan gepland worden op een bepaalde zone.

In de front-end kan men zich aanmelden (op basis van die zelfde zone). Als er vervolgens een presentatie gepland is voor die zone dan wordt deze weergegeven. (soort van diasysteem)

Nu zit ik met het probleem als er aan een bepaalde zone een nieuwe presentatie wordt gepland dat de zone dit niet automatische weergeeft. Ik dien telkens manueel te refreshen.

Een volledige update van de gehele pagina is ook uitgesloten omdat anders telkens de presentatie vanaf het begin wordt afgespeeld. (Ik werk met een array met alle afbeeldingen die zich telkens herhaald, indien ik de volledige pagina refresh dan wordt deze array terug op positie 0 geplaatst)

Het zou dus een goede oplossing zijn om maar een bepaalde variabele binnen PHP constant te refreshen zonder de gehele pagina te refreshen.

Iemand die hier een oplossing voor weet?

 

[Frats]

http://en.wikipedia.org/wiki/Ajax_(programming)

Javascript die afentoe de server pingt, nieuwe content ophaalt, en die toevoegt aan de huidige sessie van de browser, zonder alles te refreshen

 

[gibsonneke]

http://en.wikipedia.org/wiki/Ajax_(programming)

Javascript die afentoe de server pingt, nieuwe content ophaalt, en die toevoegt aan de huidige sessie van de browser, zonder alles te refreshen

Mijn huidige situatie is zo:

Ik heb een variabele (array) waarin alle content in de presentatie die gepland staat voor die locatie op dat uur in terecht komt.

Deze content lees ik vervolgens uit in javascript en run zo een soort van diavoorstelling.

Ik had nu graag deze telkens deze variabele gerefreshed (eigenlijk is dit dan een functie aanroepen die een sql uitvoert op de database)

Is het nu mogelijk om enkel dit te doen zonder de gehele pagina te refreshen? En indien ja zou ik dan aub enkele tips mogen hebben want ik heb niet echt ervaring met ajax.

En ook gaat mijn javascript nu door die array met een soort van interval alvorens hij naar het volgende item binnen de array gaat. Ik wil natuurlijk wel niet iedere keer dat ik die waarden opnieuw ophaal in die variabele dat men voorstelling dan opnieuw begint. Zal dit zo zijn?

 

[That Guy]

Omdat javascript client-side runt, en geintepreteerd wordt, kan dit denk ik wel.

Even een schema:

1. laad pagina. Even voor het idee: diashow = ['iets','nogiets','moar','test','no 5'];
2. begin timeOut() met javascript om diashow te laten zien
3. na 2 seconde is de diashow op de helft.
4. verander waarde diashow naar: diashow = ['iets','nogiets','moar','HA!',veranderd'];
5. 3e seconde (dia): pak de 3e waarde uit je diashow-array.
​

ofwel, dit is het idee:

//js
var diashowArray = ['test','meer','test2','moar','nummer5'];

function showDia(id)
{
   var dia = diashowArray[id];
   showDiaOpScherm(dia);   //oid

   updateDiaArray();
   setTimeout("showDia(" + (id+1) + ");",1000);
}

function updateDiaArray()
{
   //pseudo
   var verkregen = AjaxGet("update.php");
   verkregen = "diashowArray[" + verkregen + "];";

   //de magie:
   eval(verkregen);
}


//begin op page-load:
showDia(0);

nu zal je 'update.php' er zo uit zien:

$retval = '';
$count = 0;
$q = mysql_query("SELECT iets FROM diashow");
//loop door dia's
while($d = mysql_fetch_object($q)){
   if(2%$count == 0){
      $retval .= "'" + $d->iets + "',";
   }else{
      $retval .= "'" + $d->iets + "'";
   }
   $count++;
}

eco $retval;

op deze manier zal de php pagina dus zoiets echo-en:

'dia1','bla','bbq','omgwtf','saz'

deze wordt dan in javascript zo omgezet. var verkregen zal dan dus dit zijn:

diashowArray[ 'dia1','bla','bbq','omgwtf','saz' ];

met de 'evil' eval() zal deze als javascript-waarde worden geparsed, zodat je array veranderd word. Eval evalueert een string, en parsed deze dan. Ofwel, in dit geval veranderd hij de array.

Verder kan je een Ajax-tutorial hier vinden: http://www.helpmij.nl/forum/showthread.php?t=410639 (van mij)

:thumb:



ohja, trouwens. Nu zal de updateDiaArray() functie elke keer opgeroepen worden als er een dia gezien laat worden (...?). Dit kan je natuurlijk ook om de 2 dia's doen, of om de minuut, of.... verzin het.

 

[gibsonneke]

Omdat javascript client-side runt, en geintepreteerd wordt, kan dit denk ik wel.

Even een schema:

1. laad pagina. Even voor het idee: diashow = ['iets','nogiets','moar','test','no 5'];
2. begin timeOut() met javascript om diashow te laten zien
3. na 2 seconde is de diashow op de helft.
4. verander waarde diashow naar: diashow = ['iets','nogiets','moar','HA!',veranderd'];
5. 3e seconde (dia): pak de 3e waarde uit je diashow-array.
​

ofwel, dit is het idee:

//js
var diashowArray = ['test','meer','test2','moar','nummer5'];

function showDia(id)
{
   var dia = diashowArray[id];
   showDiaOpScherm(dia);   //oid

   updateDiaArray();
   setTimeout("showDia(" + (id+1) + ");",1000);
}

function updateDiaArray()
{
   //pseudo
   var verkregen = AjaxGet("update.php");
   verkregen = "diashowArray[" + verkregen + "];";

   //de magie:
   eval(verkregen);
}


//begin op page-load:
showDia(0);

nu zal je 'update.php' er zo uit zien:

$retval = '';
$count = 0;
$q = mysql_query("SELECT iets FROM diashow");
//loop door dia's
while($d = mysql_fetch_object($q)){
   if(2%$count == 0){
      $retval .= "'" + $d->iets + "',";
   }else{
      $retval .= "'" + $d->iets + "'";
   }
   $count++;
}

eco $retval;

op deze manier zal de php pagina dus zoiets echo-en:

deze wordt dan in javascript zo omgezet. var verkregen zal dan dus dit zijn:

met de 'evil' eval() zal deze als javascript-waarde worden geparsed, zodat je array veranderd word. Eval evalueert een string, en parsed deze dan. Ofwel, in dit geval veranderd hij de array.

Verder kan je een Ajax-tutorial hier vinden: http://www.helpmij.nl/forum/showthread.php?t=410639 (van mij)

:thumb:



ohja, trouwens. Nu zal de updateDiaArray() functie elke keer opgeroepen worden als er een dia gezien laat worden (...?). Dit kan je natuurlijk ook om de 2 dia's doen, of om de minuut, of.... verzin het.

Bedankt voor uw antwoord.

De weergave van afbeeldingen heb ik ondertussen al

Script om afbeeldingen op te halen en in een array te plaatsen.

<?php

    $locationid = $_SESSION['zone_id'];
    $images = array();
   
    $schedule = get_schedule_by_locationid($locationid);
   
    if($schedule){
        $presentationid = $schedule['presentationid'];
       
        $result_set_libraryitems = get_libraryitems_by_presentationid($presentationid);
       
        while ($array = mysql_fetch_array($result_set_libraryitems)){
            $id_library_item = $array['libid'];
           
            $library_item = get_library_by_id($id_library_item);
           
            array_push($images, "../upload/".$library_item['content']);
        }
    }

?>

Script om php array van afbeeldingen in javascript te plaatsen en er wat effecten aan toe te voegen om dit ook daadwerkelijk weer te geven (soort van diavoorstelling)

<script text="javascript">
    //set slideShowSpeed (milliseconds)
    var slideShowSpeed = 5000;
   
    //duration of crossfade (seconds)
    var crossFadeDuration = 3;
   
    //specify the image files
    var Pic = new Array();
   
    //method to convert an array from php to an array in javascript
    <?php
    //in the below lines we get the values of the php array one by one and update it in the script array.
        for($i=0;$i < count($images); $i++){
            print "Pic.push(\"$images[$i]\" );"; //this line updates the script array with new entry
        }
    ?>
   
    var t;
    var j = 0;
    var p = Pic.length;
   
    var preLoad = new Array();
   
    for (i = 0; i < p; i++){
        preLoad[i] = new Image();
        preLoad[i].src = Pic[i];
    }
   
    function runSlideShow(){
       
        setSettingsImages();
       
        if (document.all){
            document.images.SlideShow.style.filter="blendTrans(duration=2)";
            document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
            document.images.SlideShow.filters.blendTrans.Apply();
        }
       
        document.images.SlideShow.src = preLoad[j].src;
       
        if (document.all){
            document.images.SlideShow.filters.blendTrans.Play();
        }
       
        j = j + 1;
        if (j > (p-1)) j=0;
        t = setTimeout('runSlideShow()', slideShowSpeed);
    }
</script>

Script om weergave in html toe te passen:

<body onload="runSlideShow()">

    <img src="../images/background_viewer.jpg" name='SlideShow' id="slideshow" />
     
</body>

Dit werk allemaal goed en de verschillende afbeeldingen in de array worden doorlopend weergegeven.

Echter wil ik nu ook dat er iets in mijn pagina zit dat telkens controleert of er nieuwe content beschikbaar is en dit dan ook vervolgens in mijn array stopt. (in php)

Ik wil dus enkel het PHP gedeelte herladen zonder aan de rest van de pagina te komen.

Is dit mogelijk?