[javascript] serie plaatjes weergeven met timer - Softwareontwikkeling

zaterdag 5 maart 2005 16:28

Acties:

Topicstarter

Ik ben een site aan het maken en daar het volgende in mogelijk zijn:

- Random wordt er gekozen uit een serie van 4 foto's
- Deze 4 foto's worden achter elkaar gepresenteerd (1 tegelijk dus) en dan een x aantal keer herhaald
- De weergave tijd moet per foto te bepalen zijn (in 10de van sec)
- De 'animatie' moet gestart en gestopt kunnen worden en daartussen moet een timer lopen

De random serie die gekozen wordt en de tijd van de timer moet op een 1 of andere manier opgeslagen worden (in database/ mail/ etc.).

Dit is wat ik nu heb:

code:

<HTML><HEAD><TITLE>Randomplaatje</TITLE>
<script type="text/javascript"> 

aantalfoto=2
extensie=".jpg"

fotonr=Math.floor(Math.random() * aantalfoto)

document.write("[img]"+fotonr+"a"+extensie+">")
document.write("<img[/img]")
document.write("[img]"+fotonr+"c"+extensie+">")
document.write("<img[/img]")

document.write("<p>"+fotonr+"</p>")

</script>
</HEAD>

Deze code kiest random een serie foto's (0a,0b,0c,0d of 1a,1b,1c,1d) en geeft die weer

Maar deze moeten dus in serie gepresenteerd worden volgens de bovenstaande eisen.

Dat opslaan van gegevens is van latere zorg en lukt me wel.

Dit moet dus lukken in Javascript, ik weet alleen nog niet hoe dit handig kan, iemand een idee?

(als je de bedoeling nog niet begrijpt, zie het dan als animated gifjes die random worden gekozen en gestart en gestopt kunnen worden, maar dan met 16bits kleuren, in gif lukt het me dan ook al, maar het gaat om echte foto's en 256 kleuren is te weinig dan)

[ Voor 15% gewijzigd door floduR op 05-03-2005 16:34 ]

zaterdag 5 maart 2005 16:48

Acties:

Morrar

Moeten die plaatjes ge-document.write() worden? Wil je nu 4 plaatjes op een rij tonen of wil je nu een plaatje laten wisselen zodat er in totaal 4 plaatjes getoond worden (als in animated gif). Ik heb zelf een scriptje gemaakt dat plaatjes omwisselt, zeg maar zoals de laatste optie:
http://www.lukaskoning.nl...pt/lk_slideshow_demo.html

Gebruik hier (dacht ik, is tijd geleden) een origineel array met alle URL's naar de plaatjes en een kopie ervan. Vervolgens trek ik er met Array.splice() steeds 1 plaatje uit de kopie van het array met plaatjes. De kopie wordt dan steeds kleiner, herhaling van plaatjes is niet mogelijk omdat deze uit het array gehaald worden. Als de kopie leeg is, gewoon weer het initiele array met URL's kopieren...

De rest van de instellingen kun je bij mijn scriptje ook maken, als je in de source kijkt zie je ongeveer hoe. Komt er grofweg op neer dat je een functie herhaaldelijk aanroept met window.setInterval() (of window.setTimeout() en die laten herhalen).

[ Voor 29% gewijzigd door Morrar op 05-03-2005 16:56 ]

zaterdag 5 maart 2005 16:57

Acties:

floduR

Topicstarter

Morrar schreef op zaterdag 05 maart 2005 @ 16:48:
Moeten die plaatjes ge-document.write() worden? Ik heb zelf een scriptje gemaakt dat plaatjes omwisselt, maar steeds het plaatje vervangt:
http://www.lukaskoning.nl...pt/lk_slideshow_demo.html

Gebruik hier (dacht ik, is tijd geleden) een origineel array met alle URL's naar de plaatjes en een kopie ervan. Vervolgens trek ik er met Array.splice() steeds 1 plaatje uit de kopie van het array met plaatjes. De kopie wordt dan steeds kleiner, herhaling van plaatjes is niet mogelijk omdat deze uit het array gehaald worden. Als de kopie leeg is, gewoon weer het initiele array met URL's kopieren...

Het hoeft inderdaad niet ge-document.write() worden, als de plaatjes maar wisselen en het totaal maar werkt.

Maar dit is wat teveel voor wat ik nodig heb, bij mij moet er alleen bij het pagina laden een random iets gekozen worden en daarna steeds 4 fixed plaatjes opeenvolgend laten zien (500ms - 100ms - 500ms - 100ms) en dat iets van 15x herhaald. Maar ik kan er wel wat mee, maar ik ben maar een beginner in scripting, hou het het liefst simpel dus.

[ Voor 7% gewijzigd door floduR op 05-03-2005 16:59 ]

zaterdag 5 maart 2005 17:08

Acties:

Morrar

Ok, take 2 dan maar

Ik was al bang dat het een beetje overkill zou zijn dat script

Ik zal ff wat in elkaar zetten wat minder omvangrijk is... Even geduld a.u.b.

code:

<html>
    <head>
        <script language="javascript">
            var Slides = Array();
            Slides[0] = Array({"u":"img0a.jpg", "t": 5000}, {"u":"img0b.jpg", "t":5000}, {"u":"img0c.jpg", "t":1000}, {"u":"img0d.jpg", "t": 5000});
            Slides[1] = Array({"u":"img1a.jpg", "t": 5000}, {"u":"img1b.jpg", "t":5000}, {"u":"img1c.jpg", "t":1000}, {"u":"img1d.jpg", "t": 5000});
            
            var iSlideSerie = Math.floor(Math.random() * Slides.length);
            var iSlideNr = 0;
            var oSlideTimer = null;
            
            function SwapSlides()
            {  //Get placehoder image
               oImg = document.getElementById("Placeholder");
               
                //Swap image
                oImg.src = Slides[iSlideSerie][iSlideNr]['u'];
            
                //Update SlideNr
                iSlideNr++;
                if(iSlideNr > 3) { iSlideNr = 0; }
            
               //Set time out (ie display time)
               window.setTimeout(SwapSlides, Slides[iSlideSerie][iSlideNr]['t']);
            }
            
            function ControlSlides(sMode)
            {   if(sMode == "start") { SwapSlides(); }
                else
                {    if(oSlideTimer)
                     {   self.clearTimeout(oSlideTimer);
                         oSlideTimer = null;
                     }
                }
            }
    </script>
    </head>
    <body onload="ControlSlides('start');">
        <img id="Placeholder">
    </body>
</html>

zoiets? achter u zet je de naam van een plaatje, achter t de display tijd... Sorry voor de brakke notatie... heb nu even geen tijd meer om echt iets goed in elkaar te zetten... Moet er helaas vandoor nu

Tijd is dus per plaatje in te stellen... Pause moet je zelf maar even inplementeren, maar met ControlSlides() is dat denk ik eevnoudig te doen. Succes!

[ Voor 135% gewijzigd door Morrar op 05-03-2005 17:40 ]

zaterdag 5 maart 2005 19:52

Acties:

alienfruit

the alien you never expected

Als je lang genoeg wacht krijg je op onderstaand website ook te maken met plaatjes+timer: Veilig internetten voor kinderen.

zondag 6 maart 2005 14:43

Acties:

floduR

Topicstarter

Morrar schreef op zaterdag 05 maart 2005 @ 17:08:

<code>

zoiets? achter u zet je de naam van een plaatje, achter t de display tijd... Sorry voor de brakke notatie... heb nu even geen tijd meer om echt iets goed in elkaar te zetten... Moet er helaas vandoor nu Tijd is dus per plaatje in te stellen... Pause moet je zelf maar even inplementeren, maar met ControlSlides() is dat denk ik eevnoudig te doen. Succes!

Dit werkt al heel leuk, hiermee kom ik al een heel eind. Ik ga er even mee experimenteren om er o.a. een start en stop in te zetten, een timeout voor de animatie (na 15 cycles ofzo) en waardes uitlezen (timer e.d.).
De timer zit er nog niet in toch? Die hoeft ook alleen maar te reageren op de start-stop knop, ook nog even uitvinden (moet wel makkelijk zijn, zijn zat voorbeelden van op internet).

Vet bedankt!!

zondag 6 maart 2005 16:51

Acties:

Morrar

Zat een bugje in die SwapSlides() functie, de laatste regels moeten zijn:

code:

1 2	//Set time out (ie display time) oSlideTimer = window.setTimeout(SwapSlides, Slides[iSlideSerie][iSlideNr]['t']);

Je kunt vervolgens het cyclen starten met een aanroep ControlSlides('start') en stoppen met ControlSlides('stop') of ControlSlides(). Die laatste kun je eventueel ook op een time-out zetten:

code:

function Init()
{   ControlSlides('start');
    window.setTimeout(ControlSlides, 14000);
}

En dan <body onload="Init();">. Het cyclen stopt dan na 14 seconden... Is dat wat je bedoeld? En die timer wil je die er dan nog in? Is dit alles wat je nodig hebt? Of wil je 15x cyclen en dan de tijd opnemen? (dus niet stoppen na een aantal milliseconden, maar na een vast aantal keer)

[ Voor 5% gewijzigd door Morrar op 06-03-2005 16:52 ]

zondag 6 maart 2005 21:34

Acties:

floduR

Topicstarter

Morrar schreef op zondag 06 maart 2005 @ 16:51:
<verhaal>

Oke, het werkte al eigenlijk, zonder die bugfix, waar was het precies voor?

Wat ik nog moest is inderdaad een start-stop functie, zelf had ik al 'stop' geprobeerd e.d., maar pas met () deed hij het, bedankt daarvoor!

En wat betreft tijd en timer, de lengte hoeft niet zo precies, iets van 15-25 sec, dus het liefst na een volle cyclus (maar dat kan ik ook wel uitrekenen, wat het makkelijkste is dus).

Als de animatie gestart wordt, dan moet er een timertje beginnen die handmatig gestopt kan worden (samen met de animatie). De timer moet ook stoppen als de ingestelde maximum tijd is gehaald. (timer staat dus in principe los van de rest)
Ik heb een timertje gevonden op internet, die werkt wel redelijk. Alleen moet ik de waarde van de timer en het nummer van de foto-reeks uitlezen en opslaan/mailen.

Ik zal even de toepassing uitleggen, zodat het misschien nog duidelijker wordt:
Het is een (psychologisch)onderzoek naar hoe wij veranderingen waarnemen in een foto. Het gaat om identieke foto's, met 1 verschil, die constant knipperen, met een (grijze) gap ertussen (zonder gap zie je het te snel).

dus: [400ms origineel] -> [80ms gap] -> [400ms origineel-met-1-verandering] -> [80ms gap] -> begin

Wat wordt onderzocht, is dus hoe snel men die ene verandering ziet in verschillende situaties (vandaar de random keuze in het begin). De proefpersonen moeten het dus handmatig starten en als ze het zien op 'stop' klikken. De tijd en de random gekozen reeks, worden dan opgeslagen en vergeleken. (als het klaar is, zal ik het plaatsen, kan je meedoen)

Dit is wat ik nu heb:
http://www.homepages.hetnet.nl/~terp84/onderzoek/index.html

(de plaatjes zijn puur concept, niet geoptimaliseerd of goed voor het onderzoek)
Misschien goed om de plaatjes te pre-loaden ofzo?

[ Voor 16% gewijzigd door floduR op 06-03-2005 21:44 ]

zondag 6 maart 2005 23:54

Acties:

Morrar

Heyhey een mede psycholoog? Ben zelf net klaar en nu in de running voor een AIO plek, maar dat even terzijde. Ben denk ik wel ongeschikt als proefpersoon, want dit soort onderzoeken ken ik al en je wilt graag "onbedorven" proefpersonen

Maar tot zover de offtopic. Heb weinig tijd dus even kort een paar dingen.

Zo'n timer is makkelijk in te bouwen idd. Je kan gewoon bij die ControlSlides('start') de tijd wegschrijven naar een globale variabele. Als vervolgens de proefpersoon op stop drukt ( = ControlSlides('stop') of ControlSlides() ), dan trek je de tijd in die globale variabele af van de huidige tijd en klaar is kees. Dus zoiers:

code:

//Dit kan beter helemaal bovenaan bij de andere vars
var iStartTime = -1;
var iTimeTaken = -1;

//Aangepaste ControlSlides()
function ControlSlides(sMode)
{   if(sMode == "start")
    {   //Set start time
        var oStartDate = new Date();
        iStartTime = oStartDate.getTime();

        //Start cycling
        SwapSlides();
    }
    else
    {    if(oSlideTimer)
         {   //Stop time and calculate
             var oStopDate = new Date();
             iTimeTaken = oStopDate.getTime() - iStartTime;
             //alert(iTimeTaken); //Uncomment voor testen

             //Stop cycling
             self.clearTimeout(oSlideTimer);
             oSlideTimer = null;
         }
    }
}

De plaatjes preloaden werkt niet meer in nieuwe browsers. Beter allebei laden op een aparte div en die dan wisselen door de z-Index aan te passen....

[ Voor 11% gewijzigd door Morrar op 06-03-2005 23:59 ]

maandag 7 maart 2005 14:42

Acties:

floduR

Topicstarter

Goed zeg, die code is een 10de van die ik gevonden had, perfect! (en nog preciezer ook)

De site is nu functioneel, nog wat details aanpassen en de goeie plaatjes maken. Wel grappig dat je ook psychologie hebt gedaan, toevallig.

Wat nog rest is nu om de gegevens op te slaan en een manier dat mensen maar 1x het onderzoek kunnen doen. Een cookie ofzo, die controleerd of het onderzoek op die computer al gedaan is, en dat je anders de animatie niet kan starten, lijkt me niet zo moeilijk. Daar ga ik nu even naar kijken.

edit:
Er moet ook nog een timeout in voor de hele animatie, hoe werkt dat? Dit moet dezelfde werking hebben als dat je op 'stop' klikt, ook het wegschrijven van gegevens. (de knop moet ook gedisabled worden, om dubbele info te voorkomen, dat werkt nu als je gewoon op stop klikt)

[ Voor 27% gewijzigd door floduR op 08-03-2005 00:54 ]