Voortgangsindicator VII: Snake in een formulierveld

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 5000 priemgetallen wilt laten berekenen, is je PC even bezig...
Voor de rekenaars onder ons: het 5000^e priemgetal is 48 611.

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.

Op deze bladzijde wordt een snake voorgesteld die werkt in een formulier-veld. Elders op deze site, in de rubriek Rekenen, 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 formulier-veld 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:
  1. Opbouw van de snake-bar
  2. Inbouwen in je website
  3. Globale werking van het script
  4. Inbouwen van de snake-bar in een rekenproces.
   
• De benodigde JavaScript code staat in de file pisnake2.js. Deze hoeft niet te worden veranderd om hem te gebruiken, behalve als je de size van het formulierveld verandert (zie verder), en als je de lengte van de snake wilt veranderen.
• Om te zorgen dat de snake-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 snake-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. Gebruik hier alleen monospace-fonts.
• De snake-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 vier functions die de snake sturen:
  Init_Snake(), Reset_Snake(), Progress_Snake() en End_Snake().
   
  • De function Init_Snake() maakt de snake-bar leeg en maakt hem zichtbaar. 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 (sterretjes) dat in de bar past wordt bepaald door de variabele MaxSnakeSteps. In het voorbeeld op deze bladzijde is voor MaxSnakeSteps de waarde 25 gebruikt. In combinatie met de size van het tekstveld (26) en het gebruikte font ("Courier New", weight=900) ontstaat een snake-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 Progress_Snake() zorgt ervoor dat de snake één stapje naar rechts maakt. Als de snake aan de rechterkant uit beeld is verdwenen begint deze vanzelf weer opnieuw. Deze function moet tijdens het rekenproces dus een aantal malen worden aangeroepen.
  • De function End_Snake() kan worden aangeroepen aan het einde van de berekening, maar echt nodig is dat niet. Hij zorgt ervoor dat de snake-bar onzichtbaar (hidden) wordt. Als je visibility in het style-block op visible hebt gezet, kun je de aanroep van End_Snake() beter weglaten!
     
  • Als je MaxSnakeSteps te klein kiest (of size te groot), zal de snake nooit helemaal aan de rechterkant komen.
    Omgekeerd geldt ook: Als je MaxSnakeSteps te groot kiest (of size te klein), zal de snake (nadat deze aan de aan de rechterkant is verdwenen) even wegblijven vóórdat hij weer terug komt.
     
• Opmerking: In het voorbeeld is een sterretje gebruikt om de snake mee te maken. Als je dat wilt veranderen (bijvoorbeeld in een vertical bar) moet je in pisnake2.js regel 33 wijzigen:
  
  SnakeString += '*'; wordt: SnakeString += '|';
   
• 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 snake-bar en maak hem zichtbaar:

  Init_Snake()

  Rekenproces: Stel dat je de snake elke 30 rekenstappen een stap wilt laten zetten.

  Reset_Snake()

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

  Voer berekeningen uit
   
   i++;
  if ((i % 30) == 0) Progress_Snake();

  }

  Einde van het Rekenproces:

  window.alert('Berekening is gereed')

  Laat de snake-bar verdwijnen (indien gewenst):

  End_Snake()

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>
.SnakeBar {
  font-family: "Courier New", Courier, monospace;
  color: #000080;
  font-weight: 900;
  visibility: hidden;
}
</style>
 
<script src="pisnake2.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="SnakeBar">
</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: voorb199.zip, 1169 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 de tekst of in een popup.