Canvas (WebWidget)
Enables the creation of flexible information graphics. Among other things, the Canvas WebWidget enables the visualisation of location-based information in order to represent a situation or an issue. These can be understood more easily and clearly.
Thanks to the separation of the position indication and the information, several information graphics can be created with one layout. Changes can also be displayed quickly.
The layout, which contains all possible or required positions, must be created with the mouse before visualising the information in the integrated layout editor. It consists of regions, points, connections and layout paths, which are then referenced in the data to be displayed. Regions can be filled in and/or bordered and points and layout paths can be connected to paths.
The positioning of the data to be visualised, which are sent to the layout as data objects, is therefore done via the IDs or the hierarchical name defined in the layout.
In addition to the purely graphical information, tooltips can be defined, which display further information when the mouse pointer is on the object.
Use
Dependencies
- canvas.html
- canvas-directive.js
- dependencies
- canvas.css
- rgbcolor.js
Create layouts
If a background image has been defined via set_background , the layout editor can be called up by the grid menu item Edit Layout. In the toolbar that appears, you can then select a tool. By clicking completely with the secondary mouse button, the current action is ended or cancelled. By pressing the escape key the current action is always cancelled. Broadly defined connections remain however.
The tools in the layout editor
| Tools | Description |
|---|---|
| Rectangle | With the rectangle tool, rectangular regions can be defined. To do so, press the primary key and move the mouse to draw a region. By releasing the key the region is confirmed. Afterwards you can change the designations. The secondary mouse button cancels the creation of a region when the region is drawn. If the number input in the toolbar is greater than 1, the defined region is divided into equal parts corresponding to the number entered. The direction selection determines the orientation of the dividing lines. The individual regions are then added numbered with a name prefix that can be defined after creation. If the Auto Checkbox is set, a region is suggested based on colour differences when the primary mouse button is pressed. By moving the mouse while holding down the button, the position of the bottom right corner can be corrected. When the key is released, the region is created. During recognition, the system searches for possible boundaries on the vertical and horizontal of the point. Double-clicking on a region zooms into the region and sets the region as the parent region for the next regions. By pressing the escape key the hierarchy level is reduced by one level if nothing is defined at the moment. |
| Polygon | The polygon tool can be used to define polygonal regions. To do this, the primary mouse button is clicked at each position where a corner of the polygon is to be. Clicking on the first placed corner confirms the region and a window opens to change the labels. If the region itself overlaps, it is changed to a non-overlapping region. If the number entered in the toolbar is greater than 1, the defined region is divided into equal parts corresponding to the number entered. The direction selection determines the orientation of the dividing lines. The individual regions are then added numbered with a name prefix that can be defined after creation. Double-clicking on a region zooms into the region and sets the region as the parent region for / parent region of the next regions. Pressing the escape key, if nothing is currently defined, reduces the hierarchy level by one level. |
| Item | With the point tool, individual points can be added. |
| Connection | With the connection tool, connections between two points can be defined. If you click on a point where there is no point, a new point is set. Links allow a path to draw a route between the two points. If a connection has not yet been defined, i.e. it has only been clicked once, the secondary mouse button cancels the action and, if necessary, removes the point again once it has been created by the action. If a connection has already been defined, then the secondary mouse button terminates the action. |
| Path | With the path tool, complete paths (layout paths) can be defined, which can then be referenced like points in the data object of type path. Two arrows show the defined direction in the ayout-edito. |
| Move | The Move tool allows you to move the view while holding down the primary mouse button. The view can also be moved by pressing the Ctrl key. |
| Zoom | The Zoom tool allows you to zoom to or from a point by turning the mouse wheel. By pressing the Ctrl key you can also zoom without explicitly selecting the tool. |
Context menu in the editor
If no definition is currently being made, the secondary mouse button can be used to open a menu in which all elements to which the mouse pointer is currently positioned can be selected. The context menu contains the following options:
| Name | Element | Description |
|---|---|---|
| Change name | Region | Allows subsequent changes to the ID and name of the region. |
| Change ID | Point, layout path | Allows subsequent changes to the ID. |
| Delete | Region, point, layout path Connection | Deletes the selected item. All subordinate regions or directly linked elements (links, paths) are also deleted. |
| Edit | Region | By clicking and then holding down within the region, the region can be moved. Subordinate regions are also moved. If the region is rectangular, the size can be changed by selecting one side of the region by clicking on it and then moving it while holding down the mouse button. Subordinate regions are cut off if necessary and are deleted as soon as they have a width or height of 0. Pressing the secondary mouse button cancels editing. |
| Move | Item | Allows you to move the point by holding down the mouse button. |
| Define as parent region | Region | Focuses on the selected region and defines it as the superordinate region of the next regions. |
| Convert shape to polygon | Region ( rectangle only) | Changes the shape of the selected region to a polygonal region. |
| Convert shape to rectangle | Region (only polygon with rectangular shape) | Changes the shape of the selected region to a rectangular region. |
The normal context menu from the browser opens when you right-click again if the context menu is already open.
Note on positions and sizes
All positions and sizes depend on the size of the background image. So if the background image is exchanged, the layout will have a different basic scaling on the view. The sizes transferred in the data object can therefore also lead to objects of different sizes in the basic view.
Message interface
| Name | Parameters | Description |
|---|---|---|
| Push News (IV→HTML) | ||
| set_background | Background | This message changes the background image. |
| set_layout | Layout | This message loads a previously created layout. It can then be edited or assigned by create_objects. |
| create_objects | Array (Data) | This message can be used to add objects. |
| delete_objects | Array(String) | This message can be used to remove specific objects by passing the IDs of the objects to be deleted. |
| delete_all_objects | String | - | This message can be used to remove all objects or all objects of one type. If nothing is passed, all objects are removed. The types are: "path", "region". |
| clear_widget | - | Resets the Canvas WebWidget. |
| Events (HTML→IV) | ||
initialize | - | This message is the first message that the WebWidget sends once it has initialized. It indicates that push messages can now be received and processed. |
| save_layout | This message sends a layout object representing the current layout and is called up when the user clicks on the grid menu button "Save". | |
The background object
The background object contains the background image to be shown. The following field is mandatory.
| Field | Type | Description |
|---|---|---|
| image | string | The background image for the canvas in Base64 format with the abbreviation "data:image/png;base64,". If the image is in a format other than .png, then "png" must be replaced with the appropriate type. |
The layout object
The layout object contains the layout, which can be populated with data objects.
This should normally only be edited in the Canavas web widget. The application should only save the layout with save_layout and return it unchanged with set_layout.
| Field | Type | Description |
|---|---|---|
| paths | Array (LayoutPath) | An array of LayoutPath objects that can be accessed by data objects of type "path". |
| points | Array (Point) | An array of point objects that can be accessed by data objects. |
| region | Region | A region object, which contains the regions that can be accessed by data objects of the type "region". |
The LayoutPath object
| Field | Type | Description |
|---|---|---|
| id | String | The unique ID of the path, which was defined in the layout editor. |
| fullpath | Array(String) | An array containing the IDs of the points in the order in which the path connects them. |
The point object
| Field | Type | Description |
|---|---|---|
| Position | Vector | The coordinates of the point before scaling |
| id | String | The unique ID of the point, which was defined in the layout editor |
| distanceTo | Object | An object with the respective IDs (string) of the connected points as key and the distance without scaling to the respective points as value (number). |
The Region Object
| Field | Type | Description |
|---|---|---|
| id | String | The unique ID of the region, which was defined in the layout editor. |
| map | Object(Region) | An object that contains all subordinate regions of the region. The names of the respective regions are the keys and the regions are the values. |
| form | String | The shape of the region. Possible values are "rectangle" and "polygon". |
| corners | ARRAY (Vector) | The position of the individual corners of a polygon. |
| topLeft | Vector | The position of the upper left corner of the region. |
| bottomRight | Vector | The position of the lower right corner of the region |
The Vector Object
| Field | Type | Description |
|---|---|---|
| x | Number | The X-coordinate of a point on the canvas |
| y | Number | The Y-coordinate of a point on the canvas |
The Data Object
The data object represents an object that is displayed on the canvas and contains its information. Highlighted fields are mandatory.
| Field | Type | Default value | Description |
|---|---|---|---|
| All types | |||
| type | String | - | The type of the object. The types are: "region", "path", "popUp" |
| id | String | - | The unique ID of the object. |
| tooltip | String | - | The text that is displayed when the mouse pointer is over the object. |
| Only type region | |||
| position | Array(String) | String | - | The position of the object. Either the ID of the region as string or the name hierarchy as array(string) of a region, which is defined in the layout, can be specified. |
| border | Number | 0 | The thickness of the edge of the object. |
borderColor | String | "black" | The colour of the border. Supports HTML colour name, rgb, rgba and hex format. If a value for alpha is specified, the borderOpacity field is ignored. |
borderOpacity | Number | 1 | The alpha value of the colour for the border. Only values from 0 to 1 (inclusive). Ignored if the borderColor field already has an alpha value. |
| allowPopUp | Boolean | FALSE | Whether the image of the region can be clicked to display a pop-up. |
| Image | String | - | An image in Base64 format with the prefix "data:image/png;base64," which is displayed in the object If the image is in a format other than .png, then "png" must be replaced with the appropriate type. |
| imageDrawMode | String | "keepRatio" | The way the image is displayed. If a polygonal region is used as the position, the areas that are not in the region are not displayed. Possible values are: - "keepRatio": The image is resized to fit the region while maintaining the aspect ratio. Has no effect if the image fits completely into the region. - "stretch": The image is scaled to the full size of the region. |
| maximizeImage maximizeImage | Boolean | FALSE | If true, the image takes up the largest possible area of the region. Has no effect if imageDrawMode is "stretch". |
| imagePosition imagePosition | String | Array(String) | "centre" | The fixation point of the image in the region. Is indicated by two parameters (one for vertical and one for horizontal positioning). Missing parameters correspond to the default value ("centre"). Possible positions are "left", "right", "top", "bottom", "centre". Percentages (from 0% to 100%) are also possible, in which case the order x before y must apply. |
| Only type path | |||
| path | String | Array(String) | - | The route of the path. Either an ID of a path defined in the layout (layout path) or an array containing ID of points and layout paths can be specified. If an array is specified, the points are connected in the specified order. If there is no direct connection, the shortest route is chosen. If a layout path is contained in the array, the order in which the path was defined in the layout is chosen. |
thickness | Number | 8 | The thickness of the line. |
| Only type region and path | |||
| color | String | "rgba(0, 0, 0, 0.5)" | The colour that fills the object. Supports HTML colour name, rgb, rgba and hex format. If a value for alpha is specified, the opacity field is ignored. |
| opacity | Number | 1 | The alpha value of the fill colour. Only values from 0 to 1 (inclusive). The value is ignored if the color field already has an alpha value. |
| Only type PopUp | |||
| image | String | - | The image of the pop-up in Base64 format with the prefix "data:image/png;base64,", If the image is in a format other than .png, then "png" must be replaced with the appropriate type. As a preview, the image is scaled to the entire specified size or standard size. |
| position | String | - | The ID of a point to determine the position of the clickable pop-up preview. The position of the point corresponds to the centre of the preview. |
| size | Number | Array(Number) | If no value is passed, a size independent of the background is used. | The size of the clickable pop-up preview to enlarge. In the array, the first number corresponds to the width, the second to the height. If a single number is passed, the preview is square. |
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}