Voortgangsindicator IV: Progress-bar in tekst
JavaScript is niet bedoeld voor het uitvoeren van grote ingewikkelde berekeningen. Als je het toch doet 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 het
werk 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.
Voor langdurige processen waarvan de voortgang in een percentage kan worden uitgedrukt is een Progress-bar
heel geschikt. Een progress-bar is een steeds langer wordende staaf, die aangeeft hoever het werk is gevorderd.
Veel browsers laten de voortgang van het laden van een pagina zien met een progress-bar. Andere toepassingen
zijn er bij: bestanden kopiëren, CD's branden, software installeren, enzovoort.
Ik heb zelf ooit eens een toepassing geschreven in Turbo Pascal 6.0. Op een zwoele zomeravond heb ik er
een paar versies van gemaakt in HTML en JavaScript.
Op deze bladzijde wordt een progress-bar voorgesteld die werkt in een figuur die in de tekst verschijnt. Elders op
deze site, in de rubriek Bekeningen uitvoeren, vind je uitvoeringen die in een tekstveld in een formulier of in
een popup verschijnen.
Als je op de knop Start Voorbeeld klikt wordt er een script gestart dat een lange berekening simuleert.
Er verschijnt een figuur waarin de voortgang van de simulatie wordt getoond. Dit is de progress-bar; deze wordt
steeds langer. Als de balk vol is, is de berekening klaar.
Als je vervolgens op Stop Voorbeeld klikt, stopt de simulatie. Na een klik op Einde verdwijnt
de progress-bar.
De code van de progress-bar kun je downloaden om zelf te gebruiken. Hierbij staan ook nog een paar alternatieven voor de opmaak van de progress-bar (skins). Het gebruik van de skins wordt verder op deze bladzijde besproken.
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 progress-bar
- Inbouwen in je website
- Globale werking van het script
- Inbouwen van de progress-bar in een rekenproces.
- De progress-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
stap-voor-stap vervangen door
.
Hierdoor wordt de bar steeds langer, maar de grootte van de totale figuur blijft ongewijzigd.
- De linker- en rechterrand worden gevormd door de figuurtjes:
- De benodigde JavaScript code staat in de file pibar2.js. Deze moet worden veranderd om hem
te gebruiken.
- De variabele maxProgressSteps bepaalt het aantal stappen dat de bar kan maken. Daarmee stel je dus de lengte van de bar in. In het voorbeeld is maxProgressSteps = 20.
- Met de variabele BarText 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_Bar() worden aangeroepen. Deze function zet de progress-bar in de bladzijde, maar de bar wordt nog niet zichtbaar.
- Bij het begin van het rekenproces wordt de function Reset_Bar() aangeroepen. Deze maakt de progress-bar leeg en maakt hem zichtbaar.
- De function Progress_Bar() zorgt ervoor dat een één blokje aan de progress-bar wordt toegevoegd.
Deze function moet tijdens het rekenproces dus een aantal malen worden aangeroepen.
Deze function werkt alleen als de bar nog niet vol is. - Bij herstarten van het rekenproces moet Reset_Bar() weer worden aangeroepen. Dat is ook het geval als de bar vol is en de berekening nog doorgaat.
- Aan het einde van het rekenproces kan de progress-bar onzichtbaar worden gemaakt door aanroepen van
End_Bar(). Het is echter niet strikt noodzakelijk om het te doen.
- Het is niet mogelijk om meer dan één progress-bar op een bladzijde te zetten.
- Als je MaxProgressSteps te klein kiest, zal de balk al vol zijn vóórdat de berekening
is afgelopen. Daardoor zal de voortgang van het laatste deel van de berekeningen niet meer goed zichtbaar
zijn.
Omgekeerd geldt ook: Als je MaxProgressSteps te groot kiest zal de balk nooit helemaal vollopen.
- Opmerking: Bij het voorbeeld zijn wat extra toeters en bellen gebruikt. Die blijven hier
verder onbesproken.
- Als je dit gebruikt ziet de programma structuur er globaal zo uit:
- Plaats en initialiseer de progress-bar, deze blijft nog onzichtbaar:
- Init_Bar()
- Maak de progress-bar zichtbaar:
- Reset_Bar()
- Rekenproces: Stel dat het rekenproces uit 85 stappen bestaat. De progress-bar bevat 20 stappen, dus elke 85/20 = 4 stappen moet de progess-bar worden verlengd (de bar is dus al vol als het rekenproces nog niet helemaal is afgelopen).
- for (i=0; i<85; i++) {
Voer berekeningen uit
}
if ((i % 4) == 0) Progress_Bar(); - Einde van het Rekenproces:
- window.alert('Berekening is gereed')
- Laat de progress-bar verdwijnen (indien gewenst):
- End_Bar()
- Je kunt de verschijningsvorm ("skin") van de progress-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 40 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. Om de bar sneller vol te laten lopen kun je de breedte van pibar_me.gif en pibar_mp.gif vergroten, zolang ze maar even breed blijven.
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 kun je pibar_me.gif en pibar_mp.gif breder maken om de bar sneller vol te laten lopen.Sterretjes 
Geschikt voor niet al te langdurige toepassingen. Maak deze bar niet breder dan 15 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.
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.
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="pibar2.js"></script>
(Zet dit in de <BODY>, op de plaats waar dat nodig is).
(Voeg code toe in de <HEAD> en/of de <BODY> waar je hem nodig hebt, zoals hierboven is beschreven).<script>
Init_Bar();
</script>
Downloaden:
Druk op de knop:
File: voorb181.zip, 17 385 bytes.
Opmerking:
Nogmaals: gebruik dit alleen als je weet wat je doet!
Elders op deze site staan vergelijkbare progress-bars, die echter worden getoond in
een formulierveld of in een popup.
