<colouring-book>

This webcomponent follows the open-wc recommendations.

With special thanks to https://github.com/collinph/jl-coloringbook for the original concept and <canvas> code

Installation

npm i colouring-book

API

Properties/Attributes

Name	Type	Default	Description
identity	String	annonymous	a string containing a unique ID for each user (used for local caching of coluring in).
images	Array	''	An array of URLs for each page to be coloured in - defaults to first image in array.
colourPalette	Array	see example	An array of colours (in html/css format) that can be selected by the user - defaults to first colour.
noPrint	Boolean	false	Restricts the user from printing pages with their colouring in.
noSave	Boolean	false	Restricts the user from saving pages locally as .png files.
onThumbnails	Boolean	false	Overlayhs drawing onto the thumbnail image of each page.
preview	String	''	When set to right the thumbnails will appear on the right of the image, default is above images.
inactive	Boolean	'false'	When set to true the component does not allow an interaction with the image.
narrative	String	''	When a URL is provided the UI will overlay a media play button on the first image, this can be used by teachers to give a narrative to a worksheet.

Events

Event Name	Target	Detail	Description
image-selected	colouring-book	image, index	Fired when a new image is selectd.
add-path	colouring-book	image, path	Fired when the a new coluring path is added to an image.
remove-path	colouring-book	image, path	Fired when a path is removed from an image.
clear	colouring-book	image	Fired when all path's are removed from an image.
on-first-updated	colouring-book	images, pathHistory	Custom event fired inside FirstUpdated() that passes all the images loaded and its changes.
print-worksheet	colouring-book	isDownloading, link	Custom event fired onClick of print button.
download-worksheet	colouring-book	isDownloading, link	Custom event fired onClick of download button.

Example

    const img = ['images/L0_P_U1_IW2.pdf-1.png','images/L0_P_U1_IW2.pdf-2.png'];
    const cols=[
            'rgba(87, 87, 87,0.8)',
            'rgba(220, 35, 35,0.8)',
            'rgba(42, 75, 215,0.8)',
            'rgba(29, 105, 20,0.8)',
            'rgba(129, 74, 25,0.8)',
            'rgba(129, 38, 192,0.8)',
            'rgba(160, 160, 160,0.8)',
            'rgba(129, 197, 122,0.8)',
            'rgba(157, 175, 255,0.8)',
            'rgba(41, 208, 208,0.8)',
            'rgba(255, 146, 51,0.8)',
            'rgba(255, 238, 51,0.8)',
            'rgba(233, 222, 187,0.8)',
            'rgba(255, 205, 243,0.8)',
            'white'];
    render(
      html`
        <colouring-book noPrint noSave .images=${img} .colourPalette=${cols} onThumbnails @add-path=${(e) => _addPath(e)}> 
        </colouring-book>
        `
    );

Usage

<script type="module">
  import 'colouring-book/colouring-book.js';
</script>

<colouring-book></colouring-book>

Local Demo with es-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html