Canvas (WebWidget)
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
Abhängigkeiten
- canvas.html
- canvas-directive.js
- dependencies
- canvas.css
- rgbcolor.js
Layouts erstellen
Wenn über set_background ein Hintergrundbild festgelegt wurde, dann kann der Layout-Editor 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. Die Richtungsauswahl bestimmt dabei die Ausrichtung der Trennlinien. Die einzelnen Regionen werden dann mit einem nach dem Erstellen festlegbaren Namenspräfix nummeriert hinzugefügt. 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 übergeordnete Region 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. |
Vieleck |
Mit dem Vieleck-Werkzeug lassen sich vieleckige Regionen definieren. Dazu wird die primäre Maustaste an jeder Stelle geklickt, an welcher eine Ecke des Vieleckes sein soll. Durch das Anklicken der zuerst platzierten Ecke wird die Region bestätigt und ein Fenster zum Ändern der Bezeichnungen öffnet sich. Sollte sich die Region selbst überschneiden, so wird diese zu einer sich nicht selbst überschneidende Region geändert. 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. Die Richtungsauswahl bestimmt dabei die Ausrichtung der Trennlinien. Die einzelnen Regionen werden dann mit einem nach dem Erstellen festlegbaren Namenspräfix nummeriert hinzugefügt. Durch ein Doppelklick auf eine Region wird in die Region gezoomt und die Region als Parent Region für / übergeordnete Region der 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. Zwei Pfeile zeigen dabei im ayout-Edito die definierte Richtung an. |
Bewegen | Das Bewegen-Werkzeug erlaubt es die Ansicht bei gedrückter primärer Maustaste zu bewegen. Durch das Drücken der Strg-Taste kann 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 |
Durch Klicken und anschließendes Gedrückthalten innerhalb der Region, kann die Region verschoben werden. Untergeordnete Regionen werden mitverschoben. Bei einer rechteckigen Region kann die Größe geändert werden indem man eine Seite der Region durch Draufklicken auswählt und diese dann mit gedrückter Maustaste verschiebt. Untergeordnete Regionen werden gegebenenfalls abgeschnitten und werden gelöscht, sobald diese eine Weite oder Höhe von 0 haben. Das Betätigen der sekundären Maustaste bricht das Bearbeiten ab. |
Bewegen | Punkt | Ermöglicht es mit gedrückter Maustaste den Punkt zu verschieben. |
Als übergeordnete Region festlegen | Region | Fokussiert die ausgewählte Region und legt sie als übergeordnete Region der nächsten Regionen fest. |
Form zu Vieleck konvertieren | Region (nur Rechteck) | Ändert die Form der ausgewählten Region zu einer vieleckigen Region. |
Form zu Rechteck konvertieren | Region (nur Vieleck mit rechteckartige Form) | Ändert die Form der ausgewählten Region zu einer rechteckigen Region. |
Das normale Kontextmenü vom Browser öffnet sich bei einem erneuten Rechtsklick, wenn das Kontextmenu bereits offen ist.
Hinweis zu Positionen und Größen
Alle Positionen und Größen sind abhängig von der Größe des Hintergrundbildes. Bei einem Austausch des Hintergrundbildes hat das Layout also eine andere Grundskalierung auf der Ansicht. Auch die im Data-Objekt übergebenen Größen können also in der Grundansicht zu unterschiedlich großen Objekten führen.
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 | 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 folgende 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. |
form | String | Die Form der Region. Mögliche Werte sind „rectangle“ und „polygon“. |
corners | ARRAY(Vector) | Die Position der einzelnen Ecken eines Vieleckes. |
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", "popUp" |
id | String | - | Die eindeutige ID des Objektes. |
tooltip | String | - | Der Text der angezeigt wird, wenn der Mauszeiger über dem Objekt ist. |
Nur Typ region | |||
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. |
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. |
allowPopUp | Boolean | FALSE | Ob das Bild der Region geklickt werden kann, um ein Pop-Up anzuzeigen. |
Image | String | - | Ein Bild im Base64-Format mit dem Präfix "data:image/png;base64,", welches im Objekt angezeigt wird. Wenn es sich bei dem Bild um ein anderes Format als .png handelt, dann muss "png" mit dem jeweiligen Typ ersetzt werden. |
imageDrawMode | String | "keepRatio" | Die Art und Weise, wie das Bild dargestellt wird. Bei einer vieleckigen Region als Position werden die Bereiche, die nicht in der Region liegen, nicht angezeigt. Mögliche Werte sind: • „keepRatio“: Das Bild wird so verkleinert, dass es in die Region passt, wobei das Seitenverhältnis beibehalten wird. Hat keinen Einfluss, wenn das Bild vollständig in die Region passt. • „stretch“: Das Bild wird auf die gesamte Größe der Region skaliert. • „cut“: Es wird nur der Ausschnitt des Bildes dargestellt, welcher in die Region passt. |
maximizeImage | Boolean | FALSE | Wenn true, dann nimmt das Bild die größtmögliche Fläche der Region ein. Hat keine Auswirkung, wenn imageDrawMode „stretch“ ist. |
imagePosition | String | Array(String) | "center" | Der Fixierpunkt des Bildes in der Region. Wird durch zwei Parameter (ein für die vertikale und ein für die horizontale Positionierung) angegeben. Fehlende Parameter entsprechen dem Standartwert („center“). Mögliche Positionsangaben sind "left", "right", "top", "bottom", "center". Auch Prozentangaben (von 0% bis 100%) sind möglich, wobei dann die Reihenfolge x vor y gelten muss. Hat keine Auswirkung, wenn imageDrawMode „stretch“ ist. |
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. |
Nur Typ region und path | |||
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 PopUp | |||
image | String | - | Das Bild des Pop-Ups im Base64-Format mit dem Präfix "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. Als Vorschau wird das Bild auf die gesamte angegebene Größe beziehungsweise Standardgröße skaliert. |
position | String | - | Die ID eines Punktes zur Bestimmung der Position des anklickbaren Pop-Up Vorschau. Die Position des Punktes entspricht den Mittelpunkt der Vorschau. |
size | Number | Array(Number) | Wenn kein Wert übergeben wird, wird eine vom Background unabhängige Größe verwendet. | Die Größe der zum Vergrößern anklickbaren Pop-Up-Vorschau. Im Array entspricht die erste Zahl die Breite, die zweite die Höhe. Wird eine einzelne Zahl übergeben, dann ist die Vorschau quadratisch. |