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
    • rgbcolor.js

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. 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.

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. 
Bei einer vieleckigen Region lässt sich die Form ändern, indem man auf eine hervorgehobene Ecke draufklickt und mit gedrückter Maustaste diese dann verschiebt. Durch das Klicken in der Mitte von zwei Punkten (durch einen kleineren Kreis hervorgehoben) und anschließendes Bewegen des Mauszeigers lassen sich neue Punkte erstellen. 

Untergeordnete Regionen werden gegebenenfalls abgeschnitten und werden gelöscht, sobald diese eine Weite oder Höhe von 0 haben.
Die Änderungen werden übernommen, sobald die primäre Maustaste losgelassen wird. Liegt die Region teilweise außerhalb der übergeordneten Region, so wird diese auf die übergeordnete Region zugeschnitten. 

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.

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

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"
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.