Voortgangsindicator VI: Snake in de tekst
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 15 000 priemgetallen wilt laten berekenen, is je PC even bezig...
Voor de rekenaars onder ons: het 15 000e priemgetal is 163 841.
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 die je vroeger had in het startscherm van Windows
XP en Vista.
Opmerking: Voor dit doel worden ook wel progress-bars gebruikt, die dan steeds opnieuw bij
nul beginnen. Dat is verwarrend. Niet doen dus, maar gebruik een 'molentje' of deze snake als je niet
weet hoe lang een proces gaat duren.
Het molentje en de progress-bar worden behandeld in de items Voortgangsindicator
I t.m. V. Je vindt ze in de rubriek Berekeningen uitvoeren.
Als je op de knop Start Voorbeeld klikt wordt er een script gestart dat een lange berekening simuleert.
Er verschijnt een figuur waarin wordt getoond dat de simulatie actief is. Dit is de snake. Als de berekening
klaar is stopt de beweging.
Als je vervolgens op Stop Voorbeeld klikt, stopt de simulatie. Na een klik op Einde verdwijnt
de snake.
De code van 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 pisnake1.js. Deze moet worden veranderd om hem
te gebruiken.
- De variabele maxProgressSteps bepaalt de lengte van de bar. In het voorbeeld is maxProgressSteps = 12.
- 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 vóór de bar verschijnt.
- Andere wijzigingen zijn niet nodig.
- In de <BODY>, op de plaats waar de progress-bar moet verschijnen, moet de function Init_Snake() worden aangeroepen. Deze function zet de snake-bar in de bladzijde, maar de bar wordt nog niet zichtbaar.
- Bij het begin van het rekenproces wordt de function Reset_Snake() aangeroepen. Deze maakt de snake-bar leeg en maakt hem zichtbaar.
- De function Progress_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_Snake() weer worden aangeroepen.
- Aan het einde van het rekenproces kan de snake-bar onzichtbaar worden gemaakt door aanroepen van
End_Snake(). Het is echter niet strikt noodzakelijk om het te doen.
- Het is niet mogelijk om meer dan één snake-bar 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_Snake()
- Maak de snake-bar zichtbaar:
- Reset_Snake()
- Rekenproces: Stel dat je de snake elke 25 rekenstappen een stap wilt laten zetten.
- var i = 0;
while (.....) {Voer berekeningen uit
}
i++;
if ((i % 25) == 0) Progress_Snake(); - Einde van het Rekenproces:
- window.alert('Berekening is gereed')
- Laat de snake-bar verdwijnen (indien gewenst):
- End_Snake()
- Je kunt de verschijningsvorm ("skin") van de snake-bar veranderen. Dat doe je door de
onderstaande figuurtjes te vervangen door andere:
pibar_l.gif pibar_r.gif pibar_me.gif pibar_mp.gif - In de downloadfile tref je onderstaande skins aan:
Naam Uiterlijk pibar_l pibar_r pibar_me pibar_mp XP-style Geschikt voor de meeste toepassingen. Maak deze bar niet breder dan 20 stappen, anders wordt het lelijk...Lijn met Kader 
Geschikt voor langdurige processen. Maak de bar zo lang als je wilt. De vier figuurtjes zijn elk één pixel breed. Aanbevolen wordt om de breedte van pibar_me.gif en pibar_mp.gif te vergroten, zolang ze maar even breed blijven. Het is dan gemakkelijker om een duidelijke snake te maken. Hoeveel pibar_me.gif en pibar_mp.gif breder moeten worden is een zaak van persoonlijke voorkeur.
pibar_me is bijna helemaal transparant en daardoor moeilijk zichtbaar.Enkele Lijn 
Zelfde als voorgaande, maar nu zonder het kader. Merk op dat pibar_l.gif, pibar_r.gif en pibar_me.gif volledig transparant zijn. Ze zijn elk één pixel breed. Ook hier wordt aanbevolen om pibar_me.gif en pibar_mp.gif breder te maken; hoeveel dat moet zijn hangt af van je eigen smaak.Sterretjes 
Geschikt voor niet al te langdurige toepassingen. Maak deze bar niet breder dan 10 stappen, anders wordt het lelijk...
pibar_me is geheel transparant.Zwaargewicht 
Qua toepassing vergelijkbaar met "Lijn met Kader" en "Enkele Lijn", maar nu een beetje versierd. pibar_me en pibar_mp zijn elk één pixel breed. Ook hier wordt aanbevolen om pibar_me.gif en pibar_mp.gif breder te maken; hoeveel dat moet zijn hangt af van je eigen smaak.
pibar_me is op deze bladzijde vrij moeilijk te zien.Je eigen skin kan hier ook bij staan!
Stuur even een mailtje, dan neem ik contact met je op. Het plaatje moet in .GIF-formaat zijn, afmeting 96 x 19 pixels. - Je installeert een andere skin door de bestaande bestanden pibar_l.gif, pibar_r.gif, pibar_me.gif en pibar_mp.gif gewoon te overschrijven met de versie die hoort bij de betreffende skin.
- De hier getoonde skins zijn maar een paar van de ontelbare mogelijkheden. De kleuren kun je eenvoudig aanpassen aan de opmaak van je website. De .GIF-bestanden moeten een transparante achtergrond hebben.
- Als je je eigen skins wilt bouwen, kan dat natuurlijk ook. Zorg er voor dat de figuurtjes goed bij
elkaar passen. Het is met name belangrijk dat pibar_me.gif en pibar_mp.gif even breed zijn.
De hoogte van de figuurtjes kun je vrij kiezen. Wel moeten ze allemaal even hoog zijn om ze goed op elkaar te laten aansluiten. - Deze skins zijn volledig compatibel met de skins die worden gebruikt in het item Voortgangsindicator IV: Progress-bar in tekst.
Eventuele nieuwe skins worden alleen gepubliceerd in het item over de progress-bar, niet op deze pagina.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script src="pisnake1.js"></script>
(Zet dit in de <BODY>, op de plaats waar dat nodig is).
<script>
Init_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: voorb197.zip, 17 547 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 een popup.
