Documentation
Drawing
Description
The Drawing module 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 the pencil specified in '#RRGGBB' notation or by name e.g., 'pink'. |
| Thickness | Width of the pencil. Number between 1 and 40. |
| Border | Border size. Number between 0 (no border) and 5 (5px black border). |
| Opacity | Opacity for the whole module. 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 | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| setThickness | number between 1 and 40 | Set the thickness of the pencil. |
| setColor | color's name or #RRGGBB notation | Set the color and switch to pencil mode. |
| setOpacity | number between 0 and 1 | Set opacity for the whole module. |
| setEraserOn | --- | Turns on the eraser mode. |
| setEraserOff | --- | Turns off the eraser mode. |
| setEraserThickness | number between 1 and 40 | Set the thickness of the eraser. |
| addText | --- | Open text editor. To cancel writing, click the close button belonging to the editor. Clicking the canvas will close the text editor and save the text to the canvas. |
| 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 the panel to upload an image from the device to the canvas. To delete an image that has been uploaded to the canvas (but is still movable), press the "Delete" key on your keyboard. |
| downloadBoard | --- | Download the canvas as an image in the 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 text's editor. |
| text-close | Class of the element that is used to close the text's editor. |
Advanced Connector integration
Each command supported by the Drawing module can be used in the Advanced Connector module's scripts. The example below shows how to change the color (to green) and thickness (to 13) when the image source is selected and the 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 of how to use the Drawing module.