Seiteninhalt

• Fortschrittsanzeige mit JS und <canvas>
• Beipiel
• Integration in die Seite
• HTML
• Externes JavaScript
• Inline-JavaScript
• Optionen
• Eigenschaften
• callback-Funktionen
• API
• Browserkompatibilität
• Anregungen und Verbesserungsvorschläge

Fortschrittsanzeige mit JS und <canvas>

Mit Hilfe von JavaScript (JS) und dem HTML 5 - Element <canvas> wurde eine kreisrunde Fortschrittsanzeige umgesetzt. Die Funktions- weise und Konfigurationsmöglichkeiten werden in diesem Dokument vorgestellt.

Das resultierende Script wird in einer komprimierten sowie in einer unkomprimierten Version bereit gestellt.

• qpCanvasProgressBar_compressed.js
• qpCanvasProgressBar.js

Soll die Fortschrittsanzeige auch im Internet Explorer verfügbar gemacht werden, muss das explorercanvas-Script eingebunden werden. Dieses steht unter nachstendem Link zum Download bereit.

• explorercanvas.js

Beispiel

Das Beispiel demonstriert einige Funktionen des Scripts.

hide show clear stop

20 % 0-100% (in 5 Sek.) 0-100% (in 5%-Steps)

Integration in die Seite

Um korrekt zu funktionieren, müssen diverse Vorbereitungen getroffen werden. Diese werden nun beschrieben.

HTML

Zur Anzeige wird das HTML5-Element <canvas> verwendet.

<canvas id="canvas_id"></canvas>

Die ID muss vorhanden sein, da sie zum Referenzieren des Elements dient.

Externes JavaScript

Als nächstes wird das für die Fortschrittsanzeige benötigte JavaScript im head-Bereich des Dokuments als externe JS eingebunden. Damit stehen das neue Objekt und dessen Funktionalität zur Verfügung.

Soll der Internet Explorer unterstützt werden, wird an dieser Stelle außerdem explorercanvas eingebunden.

<script src="qpCanvasProgressBar.js" type="text/javascript"></script>
<script src="explorercanvas.js" type="text/javascript"></script>

Inline-JavaScript

Um das Objekt mit den zusätzlichen Funktionalitäten nutzen zu können, muss es zunächst initialisiert werden. Dazu wird es im onload-Event mit einem Objekt als Argument aufgerufen.

<script type="text/javascript">
window.onload = function(){
  // Initialisieren des Objekts
  objCanvas = new qpCanvas({
    /* Optionen (siehe weiter unten) */
  });
}
</script>

Über die Referenz (objCanvas) kann auf die erforderlichen Methoden und Eigenschaften des Objekts zugegriffen werden.

Optionen

Das Objekt stellt eine Reihe Optionen zur Verfügung, die zur Konfiguration der Fortschrittsanzeige verwendet werden. Dabei werden sie als Eigenschaften oder callback-Funktionen dem Objekt übergeben, das während der Instanziierung als Argument übergeben wird.

Eigenschaften

• id

  ID des Canvas-Elements (canvas_id im Beispiel)

  Datentyp: string

• width, height

  Höhe und Breite des Canvas-Elements

  Es sollten diese Eigenschaften zur Bestimmung der Dimensionbenutzt werden, da es bei der Verwendung von CSS-Eigenschaften zu Kompatibilitätsproblemen in einigen Browsern kommen kann.

  Datentyp: integer

• segments

  Anzahl der Segmente, die im Kreis angezeigt werden sollen

  Datentyp: integer

• segspace

  Abstand zwischen den Segmenten

  Datentyp: double
  Wertebereich: 0.0 .. 1.0

• bgFull

  Hintergrundfarbe des Kreises in hexadezimaler Schreibweise
  (#RGB oder #RRGGBB, wobei gilt:
  R = Rotwert 0..F, G = Grünwert 0..F, B = Blauwert 0..F)

  Datentyp: string

• bgMid

  Hintergrundfarbe des Kreises bis zu den Segmenten in hexadezimaler Schreibweise
  (#RGB oder #RRGGBB, wobei gilt:
  R = Rotwert 0..F, G = Grünwert 0..F, B = Blauwert 0..F)

  Über diese Eigenschaft kann im Internet Explorer der Eindruck vermittelt werden, die Segmente würde nicht bis zur Mitte gehen.

  Datentyp: string

• bgFullShow

  Boolesches Flag, das entscheidet, ob der äussere Hintergrundkreis angezeigt werden soll.
  - true = ja (default)
  - false = nein

  Datentyp: bool

• bgMidShow

  Boolesches Flag, das entscheidet, ob der innere Kreis angezeigt werden soll.
  - true = ja (default)
  - false = nein

  Ist dieses Flag gesetzt, so wird in Browsern, die Pfadverknüpfungen untestützen, der innere Kreis vom Canva-Inhalt subtrahiert. Damit kann der Hintergrund unter dem Canvas-Elements sichtbar gemacht werden.

  Datentyp: bool

• classname

  Name einer CSS-Klasse, die zum Formatieren des Canvas-Elements verwendet werden soll.

  Datentyp: string

• center

  Boolesches Flag, das entscheidet, ob das Canvas-Element horizontal und vertikal zentriert zu seinem relativ positionierten Elternelement ausgerichtet werden soll.
  - true = ja (default)
  - false = nein

  Datentyp: bool

callback-Funktionen

• onComplete

  Funktion, die aufgerufen wird, nachdem eine der periodischen Methoden drawCircleByPercent oder drawCircleByTimeAndSteps bis zum Ende abgearbeitet wurde.

  onComplete: function(){
  /* this verfügbar */
}
• onStart

  Funktion, die aufgerufen wird, bevor eine der periodischen Methoden drawCircleByPercent oder drawCircleByTimeAndSteps abgearbeitet wird.

  onStart: function(){
  /* this verfügbar */
}
• onAfterStep

  Funktion, die aufgerufen wird, nachdem ein Einzelsegment gezeichnet wurde.

  onAfterStep: function(intPercent){
  /* this verfügbar */
}

  intPercent aktueller Prozentwert

API

Weiterhin bietet das Objekt eine Benutzerschnittstelle. Hierüber kann auf unterschiedliche Art und Weise manipulativ eingegriffen werden.

obj ist in den folgenden Codefragmenten eine Referenz auf ein korrekt instanziiertes Fortschrittsanzeigen-Objekt.

• show

  Blendet die Fortschrittsanzeige ein.

  obj.show();
• hide

  Blendet die Fortschrittanzeige aus.

  obj.hide();
• clear

  Löscht den Inhalt des Canvas-Elements.

  obj.clear();
• stop

  Stoppt einen periodisch ablaufenden Prozess.

  obj.stop();
• drawCircleByTimeAndSteps

  Vervollständigt die Fortschrittsanzeige in einem vorgegebenen Zeitraum und einer vorgegebenen Anzahl an Schritten bis 100%.

  obj.drawCircleByTimeAndSteps(sec, steps, r1, r2);

  sec Anzahl der Sekunden bis 100 Prozent (integer)
  steps Anzahl der Schritte bis 100 Prozent (integer)
  r1 Grösse des äusseren Radius (integer)
  r2 Grösse des inneren Radius (integer)
  

• drawCircleByPercent

  Vervollständigt die Fortschrittsanzeige in einer vorgegebenen Prozentschrittweite und einer Intervallgrösse bis 100%.

  obj.drawCircleByPercent(start, delta, time, r1, r2);

  start Startwert in Prozent (double)
  delta Schrittgrösse in Prozent (double)
  time Zeitintervall pro Schritt (integer)
  r1 Grösse des äusseren Radius (integer)
  r2 Grösse des inneren Radius (integer)
  

• drawSegmentCircle

  Zeichnet die Segmentanzeige bis zum übergebenen Prozentwert.

  obj.drawSegmentCircle(percent, r1, r2);

  percent Prozentwert (integer)
  r1 Grösse des äusseren Radius (integer)
  r2 Grösse des inneren Radius (integer)
  

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

• IE 5+
• Firefox 1.5+
• Opera 9+
• Mozilla 1.5+
• Safari (Win) 3+
• Google Chrome

Anregungen und Verbesserungsvorschläge

Anregungen und Verbeserungsvorschläge können gerne hier gepostet werden. Selbstverständlich steht dafür auch das Kontaktformular zur Verfügung.

Foto: aboutpixel.de | chival