Description
Displays a canvas where the end user can draw with his/her mouse or finger to color pictures and/or draw on an empty canvas. An editor allows you to define a palette of colors, a set of images to eventually include in the canvas, a set of markers, while properties in the selection inspector allow to define its appearance, such as canvas background and border, icons, tools and so on.
When option Autosave User Artwork is enabled, the last end user drawing will be automatically saved and later restored when re-opening the page.
Double click on the coloring game placeholder on stage to open the coloring game editor:
On the left panel of the editor you can define a set images to be colored (just use the + and - buttons to add/remove images) and drag them to reorder. Please check out the section How to create a correct image for the Coloring Game for more informations about choosing/creating the right images. Just leave the list empty if you want end user to to draw on an empty canvas.
Use controls on the right side of the Coloring Game Editor to define a set colors and marker sizes (just use the + and - buttons to add/remove items) for end user to use when drawing.
How to create a correct image for the Coloring Game
The coloring game widget allows the user to color a set of given images. When the user draws on the canvas using his finger or the mouse, it actually draws “under” the image. Thus, to make the widget work correctly and get the intended behaviour, you need a transparent image, saved in a format that supports transparency, e.g. PNG:
Wrong Image:
Correct Image:
Properties
Coloring Game widget supports most of the Generic Object Properties, plus the ones listed below. To edit properties of a Coloring Game widget, select it and use the selection inspector at the right of your project window.
| Images | Click to open the Coloring Game Editor to define images, colors and marker sizes |
| Canvas Background | The color of the background of the drawing area |
| Options ▹ Autosave User Artwork | When enabled, the last end user drawing will be saved and later restored when re-opening the page |
| Tools ▹ Marker | Enables the use of the marker tool for the end user |
| Tools ▹ Crayon | Enables the use of the crayon tool for the end user |
| Tools ▹ Filler | Enables the use of the filler (paint bucket) tool for the end user |
| Tools ▹ Eraser | Enables the use of the eraser tool for the end user |
| Tools ▹ Clear | Displays an icon that allows the end user to clear the canvas and restore the initial state |
| Show Controls | If disabled, all widget toolbars will be hidden and only the canvas will be visible and the user |
| Controls Background | Defines the background colors of the areas containing the end user controls |
| Toolbar Height | Defines the height, in pixels of the area containing tools, colors and marker sizes |
| Images Bar Height | Defines the height, in pixels of the area containing thumbnails of the images for the coloring game |
| Marker Icon | Defines a custom icon to use for the marker tool, leave empty to use the default one |
| Crayon Icon | Defines a custom icon to use for the crayon tool, leave empty to use the default one |
| Filler Icon | Defines a custom icon to use for the filler tool, leave empty to use the default one |
| Eraser Icon | Defines a custom icon to use for the eraser tool, leave empty to use the default one |
| Clear Icon | Defines a custom icon to use for the clear button, leave empty to use the default one |
Events
Coloring Game widget triggers all Widget Events. To edit event handlers for a Coloring Game widget, select it and use the Interactivity Panel on the right side of the project window.
Actions
Coloring Game widget can be used as target of most Generic Actions, plus more actions that allow to change its state and build a completely custom interface using PubCoder actions:
Clear Coloring Game
Clears any drawings done by the end user on the canvas, restoring its initial state.
Properties
| Target | The Coloring Game to be cleared |
Set Coloring Game Image
Switches the current image on a Coloring Game
Properties
| Target | The Coloring Game to switch image to |
| Image Index | Index of the image to activate, in the same order as they are listed in the Coloring Game Editor |
Set Coloring Game Tool
Switches the current tool on a Coloring Game
Properties
| Target | The Coloring Game to switch tool to |
| Tool | One between Marker, Crayon, Filler, Eraser |
Set Coloring Game Tool Color
Switches the current drawing color on a Coloring Game
Properties
| Target | The Coloring Game to switch drawing color to |
| Color | The color to set |
Set Coloring Game Tool Size
Switches the marker size of a Coloring Game
Properties
| Target | The Coloring Game to switch marker size to |
| Size | Defines the size to set for the marker, in pixels |
Code
Here’s an example of how a coloring game widget with some tools and images is exported on the html page:
<div id="obj4" class="SCPageObject SCDrawer">
<div id="obj4Container">
<canvas width="732" height="296" class="drawing-area" />
<canvas width="732" height="296" class="drawing-area-touch" />
<canvas width="5" height="5" class="drawing-tmp-area" />
<div class="tool-bar">
<div class="drawing-tools">
<img class="tool-item tool tool-marker selected" src="..." />
<img class="tool-item tool tool-crayon" src="..." />
<img class="tool-item tool tool-filler" src="..." />
<img class="tool-item tool tool-eraser" src="..." />
</div>
<div class="drawing-clear"></div>
<div class="drawing-colors">
<img class="tool-item color selected" data-color="#7F3A80" src="..." />
<img class="tool-item color" data-color="#2B76B3" src="..." />
<img class="tool-item color" data-color="#588B33" src="..." />
</div>
<div class="drawing-size">
<div class="sizeContainer tool-item"><div class="size selected" data-size="5"></div></div>
<div class="sizeContainer tool-item"><div class="size" data-size="10"></div></div>
<div class="sizeContainer tool-item"><div class="size" data-size="20"></div></div>
</div>
</div>
<div class="drawing-images" style="display: block; left: 110.5px;">
<img class="drawing-background selected" id="drawing-background-obj4-1" src="..." />
<img class="drawing-background" id="drawing-background-obj4-2" src="..." />
<img class="drawing-background" id="drawing-background-obj4-3" src="..." />
</div>
</div>
</div>