Color Picker Plugin

Page contents

• Introduction
• Using the color picker in TWikiForms
• Using the color picker in an HTML form
• Using the color picker with disabled plugin
• Installation Instructions
• Plugin Info

Color picker for use in TWiki forms and TWiki applications

Introduction

This TWiki plugin packages the Farbtastic color picker, which is a jQuery plugin developed by Steven Wittens of Acko.net. The package adds a color picker to TWiki forms and TWiki applications.

Using the color picker in TWikiForms

This package adds a color type to TWikiForms:

Type	Description	Size	Value
color	Single-line text box and a color picker to pick a color. The color can also be typed into the text box, such as #123456.	Text box width in number of characters	Initial (default) color

Example form definition:

Name:	Type:	Size	Values:	Tooltip message:
Background color	color	12		Select color

Using the color picker in an HTML form

You can also use the color picker directly in your HTML forms, without having to write any code. Just include this in the topic text:

<form action="...">
%COLORPICKER{ name="text_color" size="12" value="#123456" class="twikiInputField" }%
<form>

This will show an HTML input field named "text_color" and a color picker tied to it.

Parameter	Description	Default	Example
name	Name of input field	(required)	name="text_color"
value	Initial color value, in hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).	(none)	value="#0000ff"
size	Size of input field, in number of characters	(browser default)	size="8"
class	CSS class of input field or the rectangular color block	(none)	class="twikiInputField"
style	Style of input field or the rectangular color block	(none)	style="width: 190px; height: 32px"
type	Type of color widget: • "below" - color picker is located below the input field; • "popup" - pop-up a color picker window when clicking the button next to the input field     (this uses very little vertical space); • "view" - a read-only rectangular block colored in the color value (no color picker); • "view-hex" - like view, in addition shows the color value as an RGB hexadecimal code (no color picker);	type="below"	type="view-hex"
Additional parameters can be supplied; they will be added to the HTML input field or the rectangular color block.

Test: (this only works if the ColorPickerPlugin is installed and enabled)

Using the color picker with disabled plugin

It is also possible to use the color picker in HTML forms with disabled ColorPickerPlugin:

%INCLUDE{ "%SYSTEMWEB%.ColorPickerPlugin" section="code" }%
<form action="...">
%INCLUDE{ "%SYSTEMWEB%.ColorPickerPlugin" section="picker" NAME="demo_color" SIZE="12" VALUE="#123456" EXTRA="class=\"twikiInputField\"" }%
</form>

This will show an HTML input field named "demo_color" and a color picker tied to it. The "code" section should be included once per topic, the "picker" section can be included as many times as needed. The NAME parameter is required; SIZE, VALUE and EXTRA parameters are optional. Use the EXTRA parameter to add additional parameters to the HTML input field.

Test: (this works only if the ColorPickerPlugin is installed and disabled)

Installation Instructions

This plugin is pre-installed. TWiki administrators can upgrade the plugin as needed on the TWiki server.

Plugin Info

• Set SHORTDESCRIPTION = Color picker for use in TWiki forms and TWiki applications

Author:	TWiki:Main.PeterThoeny, TWiki.org
Copyright:	© 2007 Steven Wittens, Acko.net for Farbtastic jQuery plugin © 2010-2013 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin
License:	GPL (GNU General Public License)
Dependencies:	JQueryPlugin (pre-installed)
Version:	2013-02-15

Home:	http://TWiki.org/cgi-bin/view/Plugins/ColorPickerPlugin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/ColorPickerPluginDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/ColorPickerPluginAppraisal

Related Topics: VarCOLORPICKER, TWikiPreferences, TWikiForms, TWikiPlugins