Documentation
Drawing
Description
The Drawing module allows users to draw, write, 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/ |
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/ |
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. |
Events
The Drawing addon sends ValueChanged type events to Event Bus when a user interacts with it.
The modified event is sent when the canvas is modified, that is, it occurs not only when the drawing is completed, but also when the erasing is completed, the image or text is inserted.
| Field name | Description |
|---|---|
| Name | ValueChanged |
| Item | N/A |
| Value | modified |
| Score | N/A |
The empty event occurs on reset
| Field name | Description |
|---|---|
| Name | ValueChanged |
| Item | N/A |
| Value | empty |
| Score | N/A |
and just before page close (due to a switch to another lesson page) when canvas is clear (e.g., drawing not started or after reset).
| Field name | Description |
|---|---|
| Name | PreDestroyed |
| Item | N/A |
| Value | empty |
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 editor. |
| text-close | Class of the element that is used to close the text editor. |
Advanced Connector integration
Each command supported by the Drawing module can be used in the Advanced Connector module's scripts. The following example 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.