Voortgangsindicator VIII: Snake in een popup
JavaScript is niet bedoeld om grote, ingewikkelde berekeningen uit te voeren. Als je het toch probeert zul
je vaak lang moeten wachten op het resultaat. Ook kan je PC erg traag worden.
In dergelijke gevallen is het handig als je op het scherm kunt zien dat er voortgang wordt geboekt bij de
berekeningen en dat de PC of de browser -dus- niet hangt of zo. Het voorkomt ook dat de browser een melding
geeft dat een script niet reageert omdat er geen interactie met het scherm is.
Voorbeeld:
Op deze website, in de rubriek "Rekenen", vind je een beschrijving
van een priemgetallen zeef. Die is redelijk snel, zolang je er niet
te veel van vraagt. Maar als je bijvoorbeeld 6000 priemgetallen wilt laten berekenen, is je PC even bezig...
Voor de rekenaars onder ons: het 6000e priemgetal is 53 359.
Voor langdurige processen waarvan niet te bepalen is hoe lang het gaat duren is een snake heel
geschikt. Een snake is een rijtje karakters of figuurtjes dat in een horizontale balk beweegt. De beweging
geeft aan dat het proces vordert.
Een goed voorbeeld van een toepassing is de balk met de bewegende blokjes in het startscherm van Windows XP en Vista.
Op deze bladzijde wordt een snake voorgesteld die werkt in een popup. Elders op deze site, in de rubriek Rekenen, vind je uitvoeringen die in de tekst of in een formulier-veld verschijnen.
Als je op de knop Start Voorbeeld klikt wordt er een script gestart dat een lange berekening simuleert.
Er verschijnt een popup met daarin een figuur waarin de voortgang van de simulatie wordt getoond. Dit is
de snake. Als de beweging stopt, is de berekening klaar.
Als je vervolgens op Stop Voorbeeld klikt, stopt de simulatie. Na een klik op Einde verdwijnt
de popup.
De code van de popup met de snake kun je downloaden om zelf te gebruiken.
Opmerking:
Hoewel deze code op zich vrij eenvoudig is, raad ik het beginnende programmeurs af om dit te gebruiken.
De toepassing er van is namelijk vrij lastig. Feitelijk is het pure overhead; de voortgang van het rekenproces
wordt steeds even onderbroken om het scherm bij te werken. Je moet daarom heel goed weten waar en wannéér
je het rekenproces moet / kunt onderbreken.
Gebruik het dus alleen als je er echt een zinvolle toepassing voor hebt.
- Er worden vier items besproken:
- Opbouw van de snake-bar
- Inbouwen in je website
- Globale werking van het script
- Inbouwen van de snake-bar in een rekenproces.
- De snake-bar wordt opgebouwd uit drie stukken: De linker rand, het middenstuk en de rechter
rand.
- De linker- en rechterrand worden gevormd door de figuurtjes:
en
- Het middenstuk wordt gevormd door een aantal malen dit figuurtje te tonen:
- Het aantal malen dat dit figuurtje in de bar wordt opgenomen wordt bepaald door de variabele maxProgressSteps bij de initialisatie van de progress-bar.
- Tijdens het rekenproces wordt
tijdelijk vervangen door
.
Hierdoor "loopt" de snake.
- De linker- en rechterrand worden gevormd door de figuurtjes:
- De benodigde JavaScript code staat in de file pisnake3.js. Deze moet worden veranderd om hem
te gebruiken.
- De variabele maxProgressSteps bepaalt de lengte van de bar. In het voorbeeld is maxProgressSteps = 25.
- Met de variabele snakeLength stel je de lengte van de snake in. In het voorbeeld is snakeLength = 5. Een goede waarde voor snakeLength is één derde tot de helft van maxProgressSteps. Het is mogelijk om snakeLength > maxProgressSteps te nemen, maar dan gaat een deel van het effect verloren.
- Met de variabele SnakeText stel je de tekst in die boven de bar in de popup verschijnt.
- Andere wijzigingen zijn niet nodig.
- In de <BODY>, op de plaats waar de popup met de snake-bar moet verschijnen, moet de function Init_Popup_Snake() worden aangeroepen. Deze function zet de popup met de snake-bar in de bladzijde, maar de popup wordt nog niet zichtbaar.
- Bij het begin van het rekenproces wordt de function Reset_Popup_Snake() aangeroepen. Deze maakt de snake-bar leeg en maakt de popup zichtbaar.
- De function Progress_Popup_Snake() zorgt ervoor dat er één blokje aan de voorkant
van de snake wordt toegevoegd. Zonodig wordt aan de achterkant één blokje weggehaald.
Deze function moet tijdens het rekenproces dus een aantal malen worden aangeroepen.
Als de snake aan het einde van de bar is gekomen begint deze uit zichzelf overnieuw. - Bij herstarten van het rekenproces moet Reset_Popup_Snake() weer worden aangeroepen.
- Aan het einde van het rekenproces kan de popup onzichtbaar worden gemaakt door aanroepen van
End_Popup_Snake(). Het is echter niet strikt noodzakelijk om het te doen.
- Het is niet mogelijk om meer dan één popup op een bladzijde te zetten.
- Als je dit gebruikt ziet de programma structuur er globaal zo uit:
- Plaats en initialiseer de snake-bar, deze blijft nog onzichtbaar:
- Init_Popup_Snake()
- Maak de popup zichtbaar:
- Reset_Popup_Snake()
- Rekenproces: Stel dat je de snake elke 20 rekenstappen een stap wilt laten zetten.
- var i = 0;
while (.....) {Voer berekeningen uit
}
i++;
if ((i % 20) == 0) Progress_Popup_Snake(); - Einde van het Rekenproces:
- window.alert('Berekening is gereed')
- Laat de popup verdwijnen (indien gewenst):
- End_Popup_Snake()
- Je kunt de verschijningsvorm ("skin") van de snake veranderen. Dat doe je door de
onderstaande figuurtjes te vervangen door andere:
pibar_l.gif pibar_r.gif pibar_me.gif pibar_mp.gif - Het veranderen van skins wordt uitgebreid besproken in het item:
Voortgangsindicator VI: Snake in de tekst. De download file die daarbij hoort bevat een paar skins, die je zonder meer met deze popup kunt toepassen.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script src="pisnake3.js"></script>
(Zet dit in de <BODY>, op de plaats waar dat nodig is).
<script>
Init_Popup_Snake();
</script>
(Voeg code toe in de <HEAD> en/of de <BODY> waar je hem nodig hebt, zoals hierboven is beschreven).
Downloaden:
Druk op de knop:
File: voorb201.zip, 3743 bytes.
Opmerking:
Nogmaals: gebruik dit alleen als je weet wat je doet!
Elders op deze site staan vergelijkbare snake-bars, die echter worden getoond in een formulierveld of in de tekst.
Een 'mooiere' versie van het script om popups te maken vind je in het item Lokale Popup in een DIV-tag II:
mouseclick.
