Class: ColoringWidget

PR. ColoringWidget

The Colouring Widget allows a user to select a colour or texture and then ‘paint’ that texture by clicking/tapping within regions within an SVG.

The widget requires that it wraps a valid SVG, it then takes that SVG, creates an internal representation and uses that to manipulate the SVG to create the colouring behaviour.

Additional buttons that house the colouring event (i.e. hold the texture or colour to paint with) are required for the widget to have functionality although the SVG will still be drawn without these. The texture will be repeated as a fill when used to paint in regions of the SVG.

The texture should reference a local file or URL that contains a pattern to use as a fill, this will commonly be a jpg file. The colour parameter is a comma-delimited rgb string referring to a colour, such as 0,255,0 for fully saturated green. The string should be comma-delimited and closed-up (i.e. no spaces) to be considered valid.

HTML Parameters - Widget

The following parameters are required.

data-widget="COLORING" Required
The identifier for the widget type.

The following parameters are optional, although recommended.

id="{{id}} Optional
It is usually preferable to include this but it is not strictly necessary (if the colouring button needs to reference a specific colouring widget then this is required).

HTML Parameters - Button

The following parameters are required.

data-widget="BUTTON" Required
The identifier for the widget type.
data-action="COLORING_EVENT" Required
The action associated with the colouring widget. This button applies a colouring event to the colouring widget based on the other parameters on the button.

The following parameters are optional.

id="{{id}} Optional
It is usually preferable to include this but it is not strictly necessary.
data-target="{{string}}" Optional
If referencing a specific colouring widget then this is required.
data-texture="{{string}} Optional
The URL or file location of a texture, commonly a jpeg.
data-rgb-colour="{{string}}" Optional
Comma delimited rgb string referring to a colour e.g 255,0,0 for fully saturated red.

Example

Basic Implementation
This example shows a Colouring Widget wrapping an SVG (omitted for brevity) and two buttons to control what to paint with. The texture button references an image file to use as the texture whilst the colour button describes a colour using rgb values. As there is only one colouring widget on the page and both buttons are used to specify a paint colour/texture there is no data-target on the buttons to reference the widget.

<!-- Colouring Widget - Wraps an SVG -->
<div id="coloringID" data-widget="COLORING">
<svg>
<!-- SVG declaration omitted for brevity -->
</svg>
</div>
<!-- Texture Button -->
<div id="uid1" data-action="COLORING_EVENT" data-widget="BUTTON" data-texture="../assets/texture.jpg" ></div>
<!-- Colour Button -->
<div id="uid2" data-action="COLORING_EVENT" data-widget="BUTTON" data-rgb-colour="255,0,255"></div>
Author:
  • AppStudio Widgets
Source:
  • widgets/ColoringWidget.js, line 2

Extends

  • PR.BaseWidget

Members

<static, constant> COLOR_APPLIEDString

Event dispatched if the color/texture is successfully applied on an svg shape.

Source:
  • widgets/ColoringWidget.js, line 480

currentFillString

Holds the current solid color that will be applied on the svg.

Source:
  • widgets/ColoringWidget.js, line 97

currentPatternId

Holds the current pattern id that will be applied to the svg.

Source:
  • widgets/ColoringWidget.js, line 102

elHTMLDivElement

Container element that holds this widget.

Source:
  • widgets/ColoringWidget.js, line 107

imageObj_String

Holds the image path and the corresponding pattern id that is created. The key is the path of the image
and the value is the patter id.

Source:
  • widgets/ColoringWidget.js, line 83

svgDefinitions

Reference to the tag that hold the pattern tags for creating textures/gradients.

Source:
  • widgets/ColoringWidget.js, line 118

svgElementString

Reference to the SVG element tag within the el.

Source:
  • widgets/ColoringWidget.js, line 113

Methods

generatePatternId( imgSrc ) → {String}

Generates a unique id based on the name of the pattern image.
Get the image name and remove any spaces present.

Parameters:
Name Type Description
imgSrc
Returns:
String
Source:
  • widgets/ColoringWidget.js, line 158

initialize( element )

Acts like a constructor, this function triggered by default when you create an object.
Initializes the variables with values from the data markup.

Parameters:
Name Type Description
element

The HTML DOM Element which acts like a slideshow.

Throws:
Error HTML Element not attached.
Source:
  • widgets/ColoringWidget.js, line 130

initVars_( )

Initialize the variables, fetch the attribute values from the mark up and assign them to instance variables.

Source:
  • widgets/ColoringWidget.js, line 308

onColoring_( data ) → {Boolean}

Event triggered when a color palette is selected, could be a color or a texture.

Parameters:
Name Type Description
data
Returns:
Boolean
Source:
  • widgets/ColoringWidget.js, line 170
Top