• Allgemeines
• Schnittstellen/Objekte
• Canvas-Zustand
• Transformationen
• Rechtecke
• Pfad-Schnittstelle
• Farben und Styles
• Linienstile
• Schatten
• Verknüpfungen
• Bilder zeichnen
• Pixel-Manipulation
• Anwendungen
  • Reflexion (qpReflexion)
  • Analog-Uhr
  • Grafik speichern
  • Grafik speichern 2 (Ajax, toDataURL)
  • 7-Segment-Anzeige
  • Fortschrittsanzeige
  • Farbfilter / Bildkombinationen
  • Regelmäßige Vielecke
  • Tangram
  • blur für <canvas>
  • Runde Ecken
  • Multiline für <canvas> (jQuery PlugIn)
• Links
• Sitemap
• Impressum

Anwendungen - Fortschrittsanzeige

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

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

Download

• JavaScript (kommentiert)
• JavaScript (komprimiert)

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

obj.show();

obj.hide();

obj.clear();

obj.stop();

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

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

obj.drawSegmentCircle(percent, r1, r2);