Voortgangsindicator V: Progress-bar in popup
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 een popup verschijnt.
Elders op deze site, in de rubriek Bekeningen uitvoeren, vind je uitvoeringen die in een tekstveld in een formulier
of in de tekst 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 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 popup.
De code 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 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 pibar3.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 = 25.
- Met de variabele BarText stel je de tekst in die boven de bar verschijnt.
- Andere wijzigingen zijn niet nodig.
Als je wilt dat de tekst voor of achter de progress-bar komt te staan moet je de table in de function Init_Popup_Bar() aanpassen. Dat is ook het geval als je andere kleuren wilt voor de popup.
- In de <BODY>, op de plaats waar de popup moet verschijnen, moet de function Init_Popup_Bar() worden aangeroepen. Deze function zet de popup met progress-bar in de bladzijde, maar de popup wordt nog niet zichtbaar.
- Bij het begin van het rekenproces wordt de function Reset_Popup_Bar() aangeroepen. Deze maakt de progress-bar leeg en maakt de popup zichtbaar.
- De function Progress_Popup_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_Popup_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_Popup_Bar(). Het is echter niet strikt noodzakelijk om het te doen.
- Het is niet mogelijk om meer dan één popup met 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_Popup_Bar()
- Maak de progress-bar zichtbaar:
- Reset_Popup_Bar()
- Rekenproces: Stel dat het rekenproces uit 117 stappen bestaat. De progress-bar bevat 25 stappen, dus elke 117/25 = 5 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<117; i++) {
Voer berekeningen uit
}
if ((i % 5) == 0) Progress_Popup_Bar(); - Einde van het Rekenproces:
- window.alert('Berekening is gereed')
- Laat de progress-bar verdwijnen (indien gewenst):
- End_Popup_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 - Het veranderen van skins wordt uitgebreid besproken in het item:
Voortgangsindicator IV: Progress-bar in tekst. De download file die daarbij hoort bevat een paar skins, die je zonder meer met deze popup kunt toepassen.
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="pibar3.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_Popup_Bar();
</script>
Downloaden:
Druk op de knop:
File: voorb182.zip, 3701 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 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.
