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 nodata-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>
- 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