Documentation
Drawing
Description
Drawing addon allows users to text, draw and upload images on the digital canvas.
Properties
The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.
| Property name | Description |
|---|---|
| Color | Color of pencil specified in '#RRGGBB' notation or by name e.g. 'pink' |
| Thickness | Width of pencil. Number between 1 and 40. |
| Border | Border size. Number between 0 (no border) and 5 (5px black border) |
| Opacity | Opacity for the whole addon. Number between 0 - 1 |
| Font | The value should be expressed in the same way as in CSS. For example: 1.2rem "Fira Sans", sans-serif For more information, please visit https://www.w3schools.com/cssref/pr_font_font.php |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hide the addon. |
| show | --- | Show the addon. |
| setThickness | number between 1 and 40 | Set thickness of the pencil. |
| setColor | color's name or #RRGGBB notation | Set color and switch to pencil mode. |
| setOpacity | number between 0 and 1 | Set opacity for the whole addon. |
| setEraserOn | --- | Turns on the eraser mode. |
| setEraserOff | --- | Turns off the eraser mode. |
| setEraserThickness | number between 1 and 40 | Set thickness of the eraser. |
| addText | --- | Open text editor. Clicking on non-editor elements will close the text editor and save the text to the canvas. To cancel writing, click the close button belonging to the editor. |
| setFont | The value should be expressed in the same way as in CSS. For example: 1.2rem "Fira Sans", sans-serif For more information, please visit https://www.w3schools.com/cssref/pr_font_font.php |
Set font to be used in the text editor. |
| uploadImage | --- | Open panel to upload an image from the device to the canvas. To delete an image that has been uploaded to canvas (but is still movable), press the "Delete" key on your keyboard. |
| downloadBoard | --- | Download canvas as an image in PNG format. |
CSS classes
| Class name | Description |
|---|---|
| drawing | Class of div containing content to draw. |
| text-handle | Class of the element that is used to drag the editor text. |
| text-close | Class of the element that is used to close the editor text. |
Advanced Connector integration
Each command supported by the Drawing addon can be used in the Advanced Connector addon's scripts. The below example shows how to change color (to green) and thickness (to 13) when the image source is selected and Text module's gap content changes.
EVENTSTART
Name:ItemSelected
Item:green
SCRIPTSTART
var drawing = presenter.playerController.getModule('Drawing1');
drawing.setColor('green');
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text1
Item:1
Value:^medium$
SCRIPTSTART
var drawing = presenter.playerController.getModule('Drawing1');
drawing.setThickness(13);
SCRIPTEND
EVENTEND
Demo presentation
Demo presentation contains examples on how to use the Drawing addon.