Voortgangsindicator III: Progress-bar in formulierveld

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 formulier-veld. Elders op deze site, in de rubriek Bekeningen uitvoeren, vind je uitvoeringen die in de tekst 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 tekst-invoer veld, waarin de voortgang van de simulatie wordt getoond. Dit is de progress-bar; deze wordt steeds langer. Als het veld vol is, is de berekening klaar. Het tekstveld is alleen-lezen, je kunt er dus zelf niets in invoeren.
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.

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 drie items besproken:
  1. Inbouwen in je website
  2. Globale werking van het script
  3. Inbouwen van de progress-bar in een rekenproces.
   
• De benodigde JavaScript code staat in de file pibar1.js. Deze hoeft niet te worden veranderd om hem te gebruiken, behalve als je de size van het formulierveld verandert (zie verder).
• Om te zorgen dat de progress-bar er in de verschillende browsers (ongeveer) hetzelfde uitziet is er een STYLE-class aanwezig, zie de code aan het einde van deze bladzijde. Deze class kan vrij worden aangepast, met de volgende beperkingen:
  
  • Het attribuut visibility moet aanwezig zijn. De waarde hidden zorgt ervoor dat de progress-bar niet onmiddellijk zichtbaar is bij het laden van de pagina. Deze waarde kan desgewenst worden veranderd in visible. Als je dat doet is het veld met de progress-bar direct zichtbaar bij het laden van de pagina.
  • Het attribuut font-family is noodzakelijk om te voorkomen dat de weergave in verschillende browsers gaat afwijken. Dit probleem treedt o.a. op met Opera.
• De progress-bar zelf is een tekst-input veld. Dit kan onderdeel zijn van een groter formulier maar ook als zelfstandig element worden ingezet. In het laatste geval kunnen bij de betreffende <FORM>-tag alle attributen worden weggelaten (óók name, id en action!)
   
• Het script bevat drie functions die de progress-bar sturen:
  ProgresBarInit(), ProgressBarStep() en ProgressBarEnd().
   
• De function ProgresBarInit() maakt een nieuwe progress-bar aan. Zonodig wordt de bar zichtbaar gemaakt. Aanroep van deze function is noodzakelijk om de bar correct te laten starten. Deze function moet worden uitgevoerd vóórdat het rekenproces begint.
• Het aantal stappen (streepjes) dat in de bar past wordt bepaald door de variabele MaxProgressSteps. In het voorbeeld op deze bladzijde is voor MaxProgressSteps de waarde 25 gebruikt. In combinatie met de size van het tekstveld (26) en het gebruikte font ("Courier New", weight=900) ontstaat een progress-bar die er in de meeste browsers goed uitziet.
• Als je bijvoorbeeld het aantal stappen wilt veranderen zul je de size daarop moeten aanpassen.
  Als je de size wilt veranderen zul je het aantal stappen moeten aanpassen.
   
• De function ProgressBarStep() zorgt ervoor dat een één streepje aan de progress-bar wordt toegevoegd. Deze function moet tijdens het rekenproces dus een aantal malen worden aangeroepen.
• De function ProgressBarEnd() kan worden aangeroepen aan het einde van de berekening, maar echt nodig is dat niet. Hij zorgt ervoor dat de progress-bar onzichtbaar (hidden) wordt. Als je visibility in het STYLE-block op visible hebt gezet, kun je de aanroep van ProgressBarEnd() beter weglaten!
   
• Als je MaxProgressSteps te klein kiest (of size te groot), zal de balk nooit helemaal vollopen.
  Omgekeerd geldt ook: Als je MaxProgressSteps te groot kiest (of size te klein), zal de balk vol zijn vóórdat de berekening is afgelopen.
   
• 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:

  Initialiseer de progress-bar en maak hem zichtbaar:

  ProgressBarInit()

  Rekenproces: Stel dat het rekenproces uit 75 stappen bestaat. De progress-bar bevat 25 stappen, dus elke 75/25 = 3 stappen moet de progess-bar worden verlengd.

  for (i=0; i<75; i++) {

  Voer berekeningen uit
   
    if ((i % 3) == 0) ProgressBarStep();

  }

  Einde van het Rekenproces:

  window.alert('Berekening is gereed')

  Laat de progress-bar verdwijnen (indien gewenst):

  ProgressBarEnd()

Gebruik:

• De code staat gedeeltelijk in de <HEAD>, gedeeltelijk in de <BODY> en
• gedeeltelijk in het JavaScript dat de berekeningen uitvoert.
  Dit kan zowel in de <HEAD> als in de <BODY> zijn.

De code ziet er als volgt uit:
 
( Zet dit in de <HEAD>).

<style>
.ProgressBar {
  font-family: verdana, sans-serif;
  ;color: #000080;
  font-weight: 900;
  visibility: hidden;
}
</style>
 
<script src="pibar1.js"></script>

(Zet dit in de <BODY>, op de plaats waar je het nodig hebt; verwijder eventueel de form-tag).

<form>
<input type="text" name="TheBar" id="TheBar" size="26" readonly class="ProgressBar">
</form>

(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: voorb180.zip, 1008 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 de tekst of in een popup.