Farb-Kreise mit Objekt-Grafik

Addition von RGB-Farben

Modell RGB   CMY  
Radius: 100px
Offset: 75%
Rotation:

Farb-Modelle

Das RGB-System ist in der Informatik besonders wichtig, weil Farben intern immer in diesem System gespeichert werden.
Andere Farb-Modelle (z.B. CMY, HSB) werden bei Bedarf aus den RGB-Daten umgerechnet.


Ein Blatt Papier erscheint weiß, weil es das einfallende Licht der Umgebung diffus reflektiert. Der Drucker bringt darauf die Filter-Farben Cyan, Magenta und Gelb an, die einen Teil des Lichts absorbieren (subtrahieren). Das verbleibende Licht lässt den Ausdruck farbig erscheinen.


Diese und andere Varianten der Beschreibung betreffen jedoch nur das 'User-Interface'.
Intern (in einer Grafik-Datei, zur Steuerung des Bildschirms, ...) wird in jedem Fall das → RGB-System verwendet.

Experimente mit der HTTP-GET-Methode


Die RGB Mini-Webseite akzeptiert diese GET-Argumente:
NameBedeutungStandard-WertBereich
angleDreh-Winkel in Grad00...360
offsetEntfernung vom Zentrum in % des Radius750...120
radiusRadius der Farbkreise in Bildpunkten (Pixeln)10010...5000
animationAnimationKein Wert
pureKeine ÜberschriftKein Wert

Die beiden letzten Variablen brauchen keinen Wert. Beispiel (Standardwerte mit Animation):
rgb.html?animation


HTML-Quelltext

Aus diesem Text hat ihr Browser die oben gezeigte ↑ Objekt-Grafik hergestellt.
Die Datei verwendet keinerlei externe Resourcen und ist daher portabel:

Sie können die Zeilen-Nummern mit Mausklick abschalten und den Text in einer Datei  rgb.html  am eigenen PC speichern: Diese lässt sich mit jedem modernen Browser anzeigen oder in eigene Webseiten einbetten.

Zur Steuerung stehen 2 unabhängige Methoden zur Verfügung:
Mit der HTTP-GET-Methode kann man bereits beim erstmaligen Laden alle Variablen einstellen.
Mit diesen Links werden vor-programmierte Versionen geladen:
▶ Grafik  mit Radius=50px, Offset=75%
▶ Grafik  mit Radius=150px, Animation
Alternativ kann man die im Quelltext enthaltenen Javascript-Funktionen fernsteuern und damit die Grafik auch nach dem Laden beliebig verändern: Diese Methode wird im ↑ Live-Beispiel dieser Seite verwendet.

Das <style>-Element enthält die → CSS-Regeln zur Formatierung der HTML- und der SVG-Objekte

Das umfangreiche <script>-Element enthält die → Javascript-Programme. Mit ihnen werden die Eigenschaften der Grafik nach Bedarf geändert.

Im <body>-Element der Mini-Webseite sind nur 2 <div>-Elemente enthalten: Das erste ist leer und dient zur optionalen Aufnahme einer Überschrift. Das zweite enthält ein <svg>-Element mit allen ObjektGrafik-Elementen.

In den nächsten ↓ Kapiteln werden einige Details der Programmierung kommentiert.

Programmierung von Grafik & Steuerung


Die beiden beteiligten Webseiten werden zur Unterscheidung mit den Begriffen parent und child bezeichnet.
In den folgenden Kapiteln werden einige Maßnahmen sowohl aus Sicht des parent-Dokuments als auch des child-Dokuments kommentiert.


Grafik:  child-Dokument

Das child-Dokument enthält die Objekt-Grafik.
Diese Mini-Webseite enthält nur 2 wesentliche Elemente: Eine ↓ SVG Objekt-Grafik und die ↓ Javascript-Programme zur Animation und interaktiven Steuerung.
Der oben angezeigte ↑ child-Quelltext ist portabel: Sie können ihn am eigenen PC speichern und damit experimentieren.

parent-HTML


Alle hier angeführten Beispiele sind zur besseren Übersicht auf die wesentlichen Details gekürzt.


Als Wert des Attributs wird der Name jener Javascript-Funktion angegeben, welche nach dem vollständigen Laden des gesamten parent-Dokuments ausgeführt wird (hier: do_onload() ).
Diese Funktion wird verwendet, um die Steuer-Elemente in einen definierten Anfangs-Zustand zu versetzen.



Zur interaktiven Steuerung muss dieses Element ein eindeutiges name-Attribut (hier: svg) erhalten.
In der Praxis gibt man zusätzlich auch die gewünschte Breite und Höhe des InnenRahmens an.


Die 3 → SchiebeRegler erlauben eine rasche und sichere Bedienung. Als Beipiel dient der Regler zur Steuerung des Rotations-Winkels:
<input type="range" name="rng3" min="0" max="360" onchange="do_f1rng3()"/>
Jedes Eingabe-Element muss ein eindeutiges name-Attribut und ein onchange-Attribut erhalten. Letzteres gibt den Namen jener Javascript-Funktion an, die bei einer Änderung des Eingabe-Elements ausgeführt wird (hier do_f1rng3() ).



Das Element muss ein onclick-Attribut erhalten. Damit wird jene Javascript-Funktion bezeichnet, die beim Anklicken ausgeführt wird (hier: do_animation_toggle() ).

parent-Javascript


Die Programme dienen zur Steuerung der eingebetteten Web-App, d.h. eines anderen, eigenständigen Dokuments.


Ereignisse (Events)

Alle hier enthaltenen Javascript-Programm werden (nur dann) ausgeführt, wenn bestimmte Ereignisse (Events) auftreten. Solche Programme werden als Event-Handler bezeichnet.

In diesem Web werden Event-Handler Funktionen meist mit der Vorsilbe do_ benannt, damit man ihre Funktion bereits am Namen erkennt.



In diesem Beispiel werden alle 3 verwendeten SchiebeRegler auf definierte Anfangs-Werte gesetzt.
Die <input>-Elemente werden in Objekt-Syntax adressiert: Dokument, Formular-Name, Regler-Name, Eigenschaft, jeweils mit einem Punkt getrennt.
Die Werte werden als Text (String) eingesetzt.
Diese Methode funktioniert - im Gegensatz zur Angabe von value-Attributen im HTML-Quelltext - auch bei wiederholtem Laden einer Webseite zuverlässig.


Zuerst wird der aktuelle Wert des SchiebeReglers (hier: der Rotation) gelesen und an die Variable angle zugewiesen.
Der Regler wird in Objekt-Syntax adressiert: Dokument, Formular-Name, Regler-Name, Eigenschaft.
Der als Text (String) gelesene Wert wird mit der Standard-Funktion parseInt() in eine ganze Zahl umgewandelt.
Der Zahlenwert wird an die Variable my_rotation des eingebetteten child-Dokuments zugewiesen.
Zuletzt wird die Funktion draw() des child-Dokuments ausgeführt und damit die Eigenschaften der Grafik-Objekte geändert.
Variable und Funktionen des child-Dokuments werden angegeben, indem man den Namen jenes <iframe>-Elements voransetzt, in welchem das child-Dokument enthalten ist (hier: svg).



Die globale Variable animation_running verwaltet den aktuellen Zustand der Animation. Ihr aktueller Wert wird von der ↓ Feedback-Funktion svg_info() geschrieben.

Wenn die Animation gerade läuft, dann wird die Variable ani_do des child-Dokuments auf den Wert false gesetzt. Das genügt, um die Animation zu beenden.

Wenn die Animation nicht läuft, dann wird die Variable ani_do des child-Dokuments auf den Wert true gesetzt und danach seine Funktion animation() ausgeführt.

Das child-Dokument wird in jedem Fall mit dem vorangesetzten Namen des <iframe>-Elements (hier: svg) adressiert.



Die Funktion svg_info() erhält als Argument ein Objekt mit mehreren Eigenschaften (hier: svgobj).

Als Beispiel wird die Eigenschaft rotation des Objekts an die Variable angle zugewiesen, und diese danach an den Wert des für die Rotation zuständigen SchiebeReglers rng3

Der aktuelle Zustand der Animation wird an die globale Variable animation_running des parent-Dokuments zugewiesen und zur ↑ Steuerung des <button>-Elements verwendet.

child-HTML


Der Quelltext einer Web-App ist unabhängig davon, ob sie alleinstehend verwendet oder in eine parent-Webseite eingebettet wird.



Die Mini-Webseiten mit der jeweiligen Grafik sind portabel:

  Sie können die Zeilen-Nummern mit Mausklick abschalten und den Text in einer Datei  rgb.html  am eigenen PC speichern: Diese lässt sich mit jedem modernen Browser anzeigen oder in eigene Webseiten einbetten.



Das Element <meta name="viewport"> dient zur automatischen Anpassung an Mobil-Geräte.

Ein <style>-Element enthält die CSS-Regeln zur Formatierung der HTML- und SVG-Elemente.

Ein <script>-Element enthält einige Javascript-Programme, mit denen die Eigenschaften der Grafik nach Bedarf geändert werden.

Das <body>-Element enthält nur 2 <div>-Elemente:
Das erste <div>-Element ist leer und dient zur Aufnahme einer optionalen Überschrift.
Das zweite <div>-Element enthält alle ObjektGrafik-Elemente.



Als Wert des onload-Attributs wird der Name jener Javascript-Funktion angegeben, die nach dem vollständigen Laden aller Elemente ausgeführt wird (hier: do_onload() )

child-SVG



Jede Grafik wird von hinten nach vorne aufgebaut:
Die zuerst programmierten Elemente werden von allen später angeordneten Elementen überdeckt.

Im Gegensatz zu einer Pixel-Grafik ist die Abdeckung in einer Objekt-Grafik jedoch reversibel: Wenn man die obersten Elemente verschiebt oder entfernt, dann werden darunter liegende Elemente wieder sichtbar.

Alle Elemente, deren Eigenschaften nach dem erstmaligen Laden geändert werden sollen, müssen eindeutige id-Attribute erhalten.



Die (links) mit den Buchstaben x,y,w bezeichneten Variablen muss man in der Praxis durch passende Zahlenwerte ersetzen.

Beide Gruppen-Elemente müssen eindeutige id-Attribute erhalten.

Die Gruppe g2 enthält das Attribut
transform="rotate(w)"
Dieses Atribut gibt die Drehung in Grad (0°..360°) an. Man kann diesen Wert mit Javascript ändern und damit die gesamte Gruppe um den Ursprung ihres individuellen Koordinaten-Systems drehen.



Die Koordinaten des Mittelpunkts werden mit den Attributen cx und cy festgelegt. Der Wert cy=-75 bezeichnet eine Anfangs-Position von 75px (Bildpunkten) oberhalb (!) des Ursprungs.

Mit dem Attribut r wird der Radius programmiert.

Ein style-Attribut legt die → CSS-Eigenschaft fill (Füll-Farbe) fest.


Pfad-Elemente müssen ein d-Attribut (description) enthalten. Als Wert dieses Attributs wird ein Text eingesetzt, der nach speziellen Regeln aufgebaut ist - ähnlich wie die Anweisungen einer eigens dazu bestimmten Programmiersprache.

SVG-Pfade bei W3Schools, MDN (Mozilla), W3C



Zur Programmierung der Pfade sind Kenntnisse der Analytischen Geometrie  hilfreich.


Alternative: SMIL

Zur Animation kann man die 'Programmiersprache' SMIL verwenden:
Die gesamte Animation wird mit einer einzigen <animateMotion>-Anweisung gesteuert..

Sowohl SVG als auch SMIL sind Mitglieder der → XML-Familie. Der (besonders kompakte) Quelltext besteht daher aus einfachem lesbarem Text.


Beispiele mit SVG-Filtern in diesem Web:
→ Schatten, → WikiBooks-Logo

Links: SVG-Filter bei W3Schools und beim W3C, Animation mit SMIL bei Wikipedia und beim W3C

child-Javascript



Mit diesen Links wird der Quelltext der ↗ RGB-Grafik oder der ↗ CMY-Grafik alleinstehend angezeigt: Sie können den Text mit RechtsKlick in einem eigenen Fenster laden und bequem neben den Kommentaren dieser Seite anzeigen.



Ohne weitere Maßnahmen werden sie so angewendet wie im Quelltext codiert, d.h. die Grafik wird mit diesen Standard-(default)-Werten erstellt.

Man kann die Werte dieser Variablen mit ↓ GET-Argumenten oder mit ↓ Fernsteuerung ändern und damit eine Grafik mit anderen Eigenschaften anzeigen.



Funktion get_nodes() weist alle Elemente, deren Eigenschaften oft (mit Animation) geändert werden, an globale Variable zu.

Funktion get_arguments() analysiert die Adress-Zeile des Browsers und isoliert allfällige ↓ GET-Argumente im globalen Array geta

Funktion check_arguments() untersucht das Array der GET-Argumente und ändert die globalen Variablen, wenn passende GET-Argumente angegeben wurden.

Funktion draw() ändert die Eigenschaften der SVG ObjektGrafik-Elemente nach den aktuellen Werten der globalen Variablen.

Funktion animation() startet die Animation, wenn die globale Variable ani_do=true ist.



Die → Verarbeitung der GET-Argumente ist auf 2 Funktionen aufgeteilt:

Funktion get_arguments() analysiert die Adress-Zeile des Browsers und isoliert allfällige GET-Argumente in einem globalen Array. Sie ist allgemein gehalten und daher mit jedem beliebigen Dokument verwendbar.

Funktion check_arguments() ist speziell auf das jeweilige Dokument abgestimmt. Sie sucht nach bestimmten Argument-Namen, prüft (validiert) deren Werte und setzt sie an Stelle der jeweiligen Vorgaben ein.

Man kann GET-Argumente auch traditionell mit → PHP-Programmen am Server-PC verarbeiten. Javascript wird jedoch am Client-PC ausgeführt, entlastet daher den Server und verbessert die Gesamt-Leistung für alle Clients.



Ein ↑ HTML-Formular bietet die Steuer-Elemente (SchiebeRegler).
Mit den onchange-Ereignissen der Eingabe-Elemente werden ↑ Javascript-Funktionen gestartet, diese wiederum ändern die globalen Vorgabe-Variablen der Grafik und veranlassen ihre erneute Berechnung.



Die Änderung des Radius unterscheidet sich wesentlich von anderen Maßnahmen: In diesem Fall muss man die Größe der gesamten child-Webseite ändern.

Es wäre möglich, die Größe mit einem einzigen von SVG angebotenen Attribut transform="scale(s)" zu ändern. In der Praxis dieses speziellen Beispiels hat es sich allerdings besser bewährt, die Eigenschaften aller Elemente einzeln zu berechnen.


Zur Änderung einer beliebigen Eigenschaft wird die Standard-Funktion setAttribute() verwendet.
Beispiel: Der Mittelpunkt des roten Kreises wird an die Position cy=-150 verschoben:
var rmy = -150;
nred.setAttribute('cy',rmy);

Zur Änderung einer CSS-Eigenschaft wird das Sub-Objekt style verwendet.
Beispiel: So wird das zentrale Objekt (Weisses Gleichdick) angezeigt oder verborgen:
nwhite.style.display = 'inline';
nwhite.style.display = 'none';



Die Animation beginnt mit dem Aufruf der Funktion animation()

Sie ändert die aktuellen Werte von Dreh-Winkel und Offset und ordnet anschließend die erneute Berechnung mit Funktion draw() an.

Zuletzt wird mit der Standard-Methode setTimeout() ein Ereignis programmiert, mit dem die gleiche Funktion animation() nach einer Wartezeit erneut aufgerufen wird.

Der Zyklus wird fortgesetzt, solange die globale Variable ani_do gesetzt und die Datei geladen ist.



Diese Maßnahme dient dazu, dem parent-Dokument die aktuellen Daten mitzuteilen. Da es nicht sicher ist, ob es diese Funktion überhaupt gibt, werden diese Anweisungen in einen try{}-Block eingeschlossen.