Skip to content

davie-robertson/colouring-book

Repository files navigation

<colouring-book> Published on npm

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