Lade...
 

Canvas

Canvas (WebWidget)

 

Informationsgrafik mit Beispieldaten
Informationsgrafik mit Beispieldaten

Ermöglicht die Erstellung von flexiblen Informationsgrafiken. So ermöglicht das Canvas WebWidget unter anderem die Visualisierung von ortsgebundenen Informationen, um eine Situation oder ein Sachverhalt darzustellen. Diese können dadurch einfacher und deutlicher verstanden werden.

Dank der Trennung von Positionsangabe und den Informationen lassen sich mit einem Layout mehrere Informationsgrafiken erstellen. Auch Änderungen können so schnell dargestellt werden.

Das Layout, welches alle möglichen beziehungsweise benötigten Positionen beinhält, muss vor dem Visualisieren der Informationen im integrierten Layout-Editor mit der Maus erstellt werden. Es besteht aus Regionen, Punkten, Verbindungen und Layout-Pfaden, welche dann bei den darzustellenden Daten referenziert werden. Regionen können ausgefüllt und oder umrandet werden und Punkte und Layout-Pfade können zu Pfaden verbunden werden. 

Die Positionierung der zu visualisierenden Daten, welche als Data-Objekte zum Layout geschickt werden, erfolgt also über die IDs oder den hierarchischen Namen, welche im Layout definiert wurden.

Neben den rein grafischen Informationen lassen sich dann noch Tooltips definieren, durch welche man weitere Informationen angezeigt bekommt, wenn sich der Mauszeiger auf dem Objekt befindet.

 

Verwendung

Web(orga, APP("canvas.html"), 0, 0, 100, 50)

Abhängigkeiten

  • canvas.html
  • canvas-directive.js
  • dependencies
    • canvas.css

Layouts erstellen

Beispiellayout
Beispiellayout

Der Layout-Editor kann durch das Grid-Menu-Item Layout bearbeiten aufgerufen werden. In der darauf erscheinenden Toolbar kann man dann ein Werkzeug auswählen. Durch das vollständige Klicken mit der sekundären Maustaste wird die Aktuelle Aktion beendet beziehungsweise abgebrochen. Durch das betätigen der Escape-Taste wird die aktuelle Aktion immer abgebrochen. Breits definierte Verbindungen bleiben jedoch bestehen.

Die Werkzeuge im Layout-Editor

Werzeug Beschreibung
Rechteck

Mit dem Rechteck-Werkzeug lassen sich rechteckige Regionen definieren. Dazu wird die die primäre Taste gedrückt und die Maus zum Aufziehen einer Region bewegt. Durch das Loslassen der Taste wird die Region bestätigt. Anschließend kann man die Bezeichnungen ändern. Die Sekundäre Maustaste bricht beim Aufziehen der Region das Erstellen ab.

Wenn die Nummer-Eingabe in der Toolbar größer als 1 ist, dann wird die definierte Region in der eingegebenen Anzahl entsprechenden gleich große Teile aufgeteilt und kann mit einen optionalen Namenspräfix hinzugefügt werden.

Wenn die Auto-Checkbox gesetzt ist, wird anhand von Farbunterschieden eine Region beim Drücken der primären Maustaste vorgeschlagen. Durchs Bewegen der Maus bei gedrückter Taste lässt sich die Position der Ecke unten rechts korrigieren. Wenn die Taste wieder losgelassen wird, dann wird die Region erstellt. Beim Erkennen wird auf der Vertikalen und Horizontalen des Punktes nach möglichen Begrenzungen gesucht. 

Durch ein Doppelklick auf eine Region wird in die Region gezoomt und die Region als Parent für die nächsten Regionen festgelegt. Durch das betätigen der Escape-Taste wird, wenn gerade nichts definiert wird, die Hierarchie-Stufe um eine Stufe reduziert.

Punkt

Mit dem Punkt-Werkzeug lassen sich einzelne Punkte hinzufügen.

Verbindung Mit dem Verbindung-Werkzeug lassen sich Verbindungen zwischen zwei Punkten definieren. Wenn an eine Stelle geklickt wird, an welcher kein Punkt vorhanden ist, wird ein neuer Punkt gesetzt. Verbindungen erlauben einem Pfad, eine Route zwischen den jeweiligen zwei Punkten zu ziehen. Wenn noch keine Verbindung definiert wurde, also nur einmal geklickt wurde, dann bricht die sekundäre Maustaste die Aktion ab und entfernt gegebenenfalls den Punkt wieder, wenn er durch die Aktion erstellt wurde. Wenn bereits eine Verbindung definiert wurde, dann beendet die sekundäre Maustaste die Aktion. 
Pfad Mit dem Pfad-Werkzeug lassen sich vollständige Pfade (Layout-Pfade) definieren, die dann wie Punkte im Data-Objekt des Typs path referenziert werden können.
Bewegen Das Bewegen-Werkzeug erlaubt es die Ansicht bei gedrückter primärer Maustaste zu bewegen. Durch das Drücken der Strg-Taste kann, wenn gerade nichts definiert wird, ebenfalls die Ansicht verschoben werden.
Zoomen Das Zoomen-Werkzeug ermöglicht das Zoomen zu oder von einem Punkt durch das Drehen des Mausrades. Durch Drücken der Strg-Taste kann auch ohne die explizite Auswahl des Werkzeuges gezoomt werden.

Kontextmenu im Editor

Wenn gerade nicht definiert wird, lässt sich mit der sekundären Maustaste ein Menu aufrufen, in welchem man alle Elemente, auf die sich der Mauszeiger gerade befindet, auswählen kann. Das Kontextmenü enthält folgende Optionen:

Name Element Beschreibung
Bezeichnung ändern Region Ermöglicht nachträgliche Änderungen an der ID und am Namen der Region. 
ID ändern Punkt,  Layout-Pfad Ermöglicht nachträgliche Änderungen an der ID.
Löschen

Region,  Punkt,  Layout-Pfad Verbindung

Löscht das ausgewählte Element. Alle untergeordnete Regionen oder direkt miteinander Verknüpfte Elemente (Verbindungen, Pfade) werden ebenfalls gelöscht.
Bearbeiten Region

Ermöglicht nachträgliches ändern der Größe einer Region, indem man ein Seite der Region durch Draufklicken auswählt und mit gedrückter Maustaste die Seite verschiebt. Untergeordnete Regionen werden gegebenenfalls abgeschnitten und werden gelöscht, sobald diese eine Weite oder Höhe von 0 haben.

Durch Klicken und anschließendes gedrückt halten in der Region, kann die Region verschoben werden. Untergeordnete Regionen werden ebenfalls verschoben. 

Bewegen Punkt Ermöglicht es mit gedrückter Maustaste den Punkt zu verschieben.

Das normale Kontextmenü vom Browser öffnet sich bei einem erneuten Rechtsklick, wenn das Kontextmenu bereits offen ist.

Nachrichtenschnittstelle

Name Parameter Beschreibung
Push-Nachrichten (IV→HTML)
set_background Background Durch diese Nachricht wird das Hintergrundbild gändert.
set_layout Layout Durch diese Nachricht wird ein zuvor erstelltes Layout geladen. Anschließend kann es dann bearbeitet oder durch create_objects belegt werden. 
create_objects Array(Data) Durch diese Nachricht können Objekte hinzugefügt werden. 
delete_objects Array(String) Durch diese Nachricht können spezifische Objekte entfernt werden, indem die IDs der zu löschende Objekte übergeben werden.
delete_all_objects String | - Durch diese Nachricht können alle Objekte oder alle Objekte eines Typs entfernt werden. Wenn nichts übergeben wird, werden alle Objekte entfernt. Die Typen sind: "path", "region".
clear_widget - Setzt das Canvas WebWidget zurück.
Ereignisse (HTML→IV)

initialize

- Diese Nachricht ist die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Es signalisiert, dass nun Push-Nachrichten empfangen und verarbeitet werden können.
save_layout

Layout

Diese Nachricht schickt ein Layout-objekt, welches das aktuelle Layout repräsentiert, und wird aufgerufen, wenn der Benutzer auf den Grid-Menu Button "Speichern" klickt.

 

Das Background-Objekt

Das Background-Objekt beinhaltet das zu zeigende Hintergrundbild. Das folgendes Feld ist obligatorisch.

Feld Typ Beschreibung
image string Das Hintergrundbild für das Canvas im Base64-Format mit dem Kürzel "data:image/png;base64,". Wenn es sich bei dem Bild um ein anderes Format als .png handelt, dann muss "png" mit dem jeweiligen Typ ersetzt werden.

 

Das Layout-Objekt

Das Layout-Objekt beinhaltet das Layout, welches mit Data-Objekten bestückt werden kann.
Dies sollte im Normalfall nur im Canavas-Webwidget bearbeitet werden. Die Anwendung sollte das Layout bei save_layout lediglich speichern und mit set_layout unverändert zurücksenden.

Feld Typ Beschreibung
paths Array(LayoutPath) Ein Array von LayoutPath-Objekten, die von Data-Objekten des Typs "path" angesteuert werden können.
points Array(Point) Ein Array von Point-Objekten, die von Data-Objekten angesteuert werden können.
region Region Ein Region-Objekt, welche die Regionen beinhaltet, welche von Data-Objekten des Typs "region" angesteuert werden können.
Das LayoutPath-Objekt
Feld Typ Beschreibung
id String Die eindeutige ID des Pfades, welche im Layout-Editor festgelegt wurde.
fullpath Array(String) Ein Array, welcher die IDs der Punkte in der Reihenfolge enthält, wie der Pfad diese verbindet.
Das Point-Objekt
Feld Typ Beschreibung
Position  Vector Die Koordinaten des Punktes bevor eine Skalierung
id String Die eindeutige ID des Punktes, welche im Layout-Editor festgelegt wurde
distanceTo Object Ein Objekt mit den jeweiligen IDs (String) der verbundenen Punkte als Key und die Entfernung ohne Skalierung zu den jeweiligen Punkten als Wert (Number).
Das Region-Objekt
Feld Typ Bescheibung
id String Die eindeutige ID der Region, welche im Layout-Editor festgelegt wurde.
map Object(Region) Ein Objekt, welches alle untergeordneten Regionen der Region enthält. Dabei sind die Namen der jeweiligen Region die keys und die Regionen die Werte.
containedKeys Array(String) Ein Array, welcher alle Namen der Regionen, welcher der Region direkt untergeordnete sind, in der Reihenfolge, wie sie zuletzt geändert wurden (der Name), beinhält.
pathOfParent Array(String) Enthält die Namen der Übergeordnete Regionen.
topLeft Vector Die Position der oberen linken Ecke der Region.
bottomRight Vector Die Position der unteren rechten Ecke der Region
Das Vector-Objekt
Feld Typ Beschreibung
x Number Die X-Koordinate eines Punktes auf dem Canvas
y Number Die Y-Koordinate eines Punktes auf dem Canvas

 

Das Data-Objekt

Das Data-Objekt repräsentiert ein Objekt, welches auf dem Canvas angezeigt wird, und beinhaltet dessen Informationen. Hervorgehobene Felder sind obligatorisch.

Feld Typ Standardwert Beschreibung
Alle Typen
type String - Der Typ des Objektes. Die Typen sind: "region", "path"
id String - Die eindeutige ID des Objektes.
tooltip String "" Der Text der angezeigt wird, wenn der Mauszeiger über dem Objekt ist. 
color String "rgba(0, 0, 0, 0.5)" Die Farbe, die das Objekt ausfüllt. Unterstützt HTML-Color-Name- , rgb-, rgba- und hexformat. Wenn ein Wert für Alpha angegeben ist, wird das Feld opacity ignoriert.
opacity Number 1 Der Alpha-Wert der Füll-Farbe. Nur Werte von 0 bis 1 (inklusiv). Der Wert wird ignoriert, wenn das Feld color bereits einen Alpha-Wert hat. 
Nur Typ region
border Number 0 Die Dicke des Randes des Objektes.

borderColor

String "black" Die Farbe des Randes. Unterstützt HTML-Color-Name- , rgb-, rgba- und hexformat. Wenn ein Wert für Alpha angegeben ist, wird das Feld borderOpacity ignoriert.

borderOpacity

Number 1 Der Alpha-Wert der Farbe für den Rand. Nur Werte von 0 bis 1 (inklusiv). Wird ignoriert, wenn das Feld borderColor bereits einen Alpha-Wert hat. 
position Array(String) | String - Die Position des Objektes. Es kann entweder die ID der Region als String oder die Namens-Hierarchie als Array(String) einer Region, welche im Layout definiert ist, angegeben werden.
Nur Typ path
path String | Array(String) - Die Route des Pfades. Es kann entweder eine ID eines im Layout definierten Pfades (Layou-Pfad) oder ein Array, welcher ID von Punkten und Layout-Pfads enthält, angegeben werden. Wenn ein Array angegeben wird, werden die Punkte in der angegebenen Reihenfolge miteinander verbunden. Besteht keine direkte Verbindung, wird die kürzte Route gewählt. Ist ein Layout-Pfad im Array enthalten, wird die Reihenfolge gewählt, wie der Pfad im Layout definiert wurde.

thickness

Number 8 Die Dicke der Linie.

InstantView®