Voortgangsindicator II: Molentje in 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 vind je een beschrijving van een priemgetallen zeef. Die is redelijk snel, zolang je er niet te veel van vraagt. Maar als je bijvoorbeeld 7500 priemgetallen wilt laten berekenen, is je PC even bezig...
Voor de rekenaars onder ons: het 7500^e priemgetal is 76 207.

Op deze plaats wordt een script voorgesteld dat voor een permanente beweging op het scherm zorgt zolang het script loopt: een molentje. Het idee en de toepassing van dit molentje stamt uit eind jaren '80 - begin jaren '90 van de vorige eeuw, toen PC's nog vrijwel uitsluitend onder MS-DOS draaiden. Dit is een gemoderniseerde versie.

Het molentje verschijnt in een popup-je. Klik op de knop Voorbeeld. Het molentje verschijnt en draait. Als je daarna nog een keer op de knop klikt gaat het molentje de andere kant op draaien.
Als het rekenproces proces gereed is, moet de molen stoppen, maar wel zichtbaar blijven zodat de gebruiker kan zien dat zijn sommen klaar zijn. De tekst verandert (Klik op de knop Gereed...)
Als je op Stop klik stopt de molen (als die nog draait) en verdwijnt.

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 drie items besproken:
  1. Inbouwen in je website
  2. Globale werking van het script
  3. Inbouwen van de molen in een rekenproces.
   
• De popup is geen "echte" popup. Er wordt geen apart window voor geopend. De popup is feitelijk tabel die in de HTML-code wordt opgenomen. Met behulp van de attributen style en id wordt deze dynamisch gewijzigd zodat het lijkt op een popup.
  Bijkomend voordeel: Je wordt niet gehinderd door popup-blockers.
   
• De benodigde JavaScript code staat in de file pimolen2.js. Deze hoeft niet te worden veranderd om hem te gebruiken.
• Het script bevat vier functions die de beweging van het molentje sturen:
  Init_Molen(Tekst, Draairichting), Molen(), Tekst_Molen(Tekst) en End_Molen().
   
• Je maakt de molen met behulp van een <table>, die je invoegt in de HTML-code. De table staat in een <DIV>-blok; dit heeft een id. Het i><DIV>-blok kan fungeren als popup door de combinatie van de styles visibility:hidden en position:absolute.
• De styles visibility:hidden en position:absolute zijn essentieel voor het functioneren van de popup en moeten niet worden veranderd.
• Door de manier waarop de styles hier zijn geprogrammeerd verschijnt de popup op de plaats waar die in de HTML-code is geplaatst. Je kunt dat ook aanpassen door de style-attributen top:...px en left:...px toe te voegen.
   
• De table heeft twee rijen met elk één cel. De bovenste cel bevat de beschrijvende tekst van de molen (zeg maar: koptekst), de onderste cel bevat de molen zelf.
  Beide cellen hebben een id dat gebruikt wordt om de inhoud van die cellen dynamisch te kunnen wijzigen.
• Als je verschillende kopteksten gebruikt moet de bovenste cel een width attribuut hebben. Daarmee stel je de breedte van de popup in, die dan voor alle teksten geldt. Het voorkomt dat de breedte van de popup steeds wijzigt.
• Als je geen koptekt wilt dan kan dat. Verwijder de betreffende rij gewoon uit de tabel. Bij de aanroep van Init_Molen() (zie hier onder) moet je wel een Tekst meegeven. Een lege string volstaat.
  Als je de koptekst verwijdert moet je wel een width-attribuut meegeven aan de cel waar het molentje in draait, om te voorkomen dat de breedte van de popup steeds verandert.
   
• Aanbevolen wordt om de onderste cel een height-attribuut mee te geven. Je kunt daarmee wat ruimte onder en boven het molentje maken. Dat staat mooi.
• Het gebruik van het attribuut valign is hier niet handig. Niet doen dus.
• Beide cellen hebben ook een style-attribuut. Daarmee kan de popup helemaal naar eigen inzicht worden opgemaakt. De instelling "text-align:center;" is echter van essentieel belang voor de opmaak van de popup en moet daarom niet worden gewijzigd of weggelaten.
   
• De code van de tabel wordt onderaan deze bladzijde getoond.
   
• Als je de molen wilt gaan gebruiken moet je hem eerst initialiseren. Dat doe je door het aanroepen van Init_Molen(Tekst,Draairichting). Als de initialisatie succesvol is verlopen verschijnt de popup.
  De twee parameters van Init_Molen()hebben de volgende betekenis:
  

  Parameter	Betekenis
  Tekst	Dit is beschrijvende tekst bij de molen. Hier Voortgang: Deze parameter mag worden weggelaten als Draairichting niet wordt gebruikt. In dat geval wordt voor Tekst een default waarde gebruikt: Proces:. Deze default waarde geldt ook als voor Tekst een lege string wordt gegeven.
  Draairichting	Getal. Als dit ongelijk is aan nul wordt de draairichting van de molen omgekeerd. Gebruik 0 om de draairichting ongewijzigd te laten. Deze parameter mag worden weggelaten. In dat geval is Draairichting = 0.

  
   
• De wieken van het molentje worden verzet door de function Molen() aan te roepen.
  Het molentje is opgebouwd uit de karakters —, \, | en /. Elke keer als Molen() wordt aangeroepen worden de wieken één stap verzet.
  In het rekenproces roep je Molen() bijvoorbeeld elke tien of elke honderd stappen aan. Het hangt af van het rekenproces hoe vaak je Molen() moet aanroepen. Als je dat te vaak doet draait de molen als een razende rond. Als je het te weinig doet zie je nauwelijks beweging en schiet het het zijn doel voorbij.
   
• Je verandert de koptekst door Tekst_Molen() aan te roepen. De parameter heeft de volgende betekenis:

  Parameter	Betekenis
  Tekst	Dit overschrijft de parameter Tekst die bij Init_Molen() is gebruikt. Op deze bladzijde is Tekst bij de aanroep van Tekst_Molen() gelijk aan Gereed.... Deze parameter mag worden weggelaten. In dat geval wordt voor Tekst een default waarde gebruikt, namelijk wat je met Init_Molen()hebt ingesteld. Deze default waarde geldt ook als voor Tekst een lege string wordt gegeven.

  
  Aanroep van deze function heeft geen zin als de koptekst uit de popup is verwijderd (zie boven).
   
• Je stopt de molen door End_Molen() aan te roepen. Deze function heeft geen parameters, maar maakt de popup onzichtbaar door de style visibility te veranderen van visible in hidden.
   
• Als je dit gebruikt ziet de programma structuur er globaal zo uit:

  Maak de molen:

  Init_Molen()

  Rekenproces: Stel dat je de molen elke twintig rekenstappen wilt verzetten

  var i = 0;
  while (.....) {

  Voer berekeningen uit
   
   i++;
  if ((i % 20) == 0) Molen();

  }

  Einde van het Rekenproces:

  Tekst_Molen()

  Stop de molen:

  End_Molen()

  
   
• Tekst_Molen() kan ook gedurende het rekenproces worden aangeroepen om de koptekst te wijzigen.
   
• Deze voortgangsindicator kan worden ingezet met alle langdurige bewerkingen. De werking van het script kan namelijk net zolang worden volgehouden als gewenst is; er is geen "bovengrens".

Gebruik:

• Een deel van de code staat in de <BODY>
• Een ander deel van code staat gedeeltelijk in de <HEAD>, 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>).

<script src="pimolen2.js"></script>

<div id="MolenPopup" style="visibility:hidden; position:absolute;">
<table border="0" cellspacing="0" cellpadding="1"><tr>
<td id="MolenTekst" width="90" style="text-align:center; font-weight:bold; background-color:#ffd700; color:#000000; border: thin solid navy;">
&nbsp;</td></tr><tr>
<td id="Molen" height="45" style="text-align:center; font-size:16pt; font-weight:bold; background-color:#ffdacd; color:#800000; border: thin solid navy;">
&nbsp;</td></tr></table></div>

Downloaden:
 
Druk op de knop:  File: voorb175.zip, 1314 bytes.

Opmerking:
 
Nogmaals: gebruik dit alleen als je weet wat je doet!
 
Elders op deze site staat een vergelijkbaar molentje, dat echter wordt getoond in de pagina. Hoewel dat ook niet echt eenvoudig in het gebruik is, is het toch een stuk eenvoudiger dan deze versie. Zie het item "Voortgangsindicator I: Molentje in tekst".
 
Een 'mooiere' versie van het script om popups te maken vind je in het item Lokale Popup in een DIV-tag II: mouseclick.