<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. | noThumbnails | Boolean | false | Applies the colouring in to the thumbnail images of each page. | preview | String | '' | When set to right the thumbnails will appear on the right of the image, default is above images.

Events

| Event Name | Target | Detail | Description | ---------- | ------------ | ------------------ | ----------- | image-selected | colouring-book | image | 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.

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