Color Picker Plugin

Page contents

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

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

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. The size, value and class parameters are optional. Additional parameters can be supplied; they will be added to the HTML input field.

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)

Detailed Documentation

This package includes a small Perl module to make it easier to use the color picker from other TWiki plugins. This module includes the functions:

addHEAD

TWiki::Plugins::ColorPickerPlugin::addHEAD( )

addHEAD needs to be called before TWiki::Plugins::ColorPickerPlugin::renderForEdit is called.

renderForEdit

TWiki::Plugins::ColorPickerPlugin::renderForEdit($name, $value, [, \%options]) -> $html

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
- See the installation supplement on TWiki.org for more information.
If you have any problems, then you can still install manually from the command-line:
1. Download one of the .zip or .tgz archives
2. Unpack the archive in the root directory of your TWiki installation.
3. Run the installer script ( perl <module>_installer )
4. Run configure and enable the module, if it is a plugin.
5. Repeat for any missing dependencies.
If you are still having problems, then instead of running the installer script:
1. Make sure that the file permissions allow the webserver user to access all files.
2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
3. Manually edit LocalSite.cfg to set any configuration variables.

Plugin Info

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

Author: TWiki:Main.PeterThoeny, Twiki Inc

Copyright: © 2007 Steven Wittens, Acko.net for Farbtastic jQuery plugin
© 2010-2011 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin

License: GPL (GNU General Public License)

Dependencies:
Name Version Description
TWiki::Plugins::JQueryPlugin >=1.0 Required; download from TWiki:Plugins/JQueryPlugin

Version: 21489 (2011-08-20)

Change History:

2011-06-11: TWikibug:Item6725: Change global package variables from "use vars" to "our"

2010-11-30: TWikibug:Item6610: Rewrite ColorPickerContrib into ColorPickerPlugin

2010-11-27: TWikibug:Item6609: In TWikiForms type table, automatically list the color form field type defined in this contrib -- TWiki:Main.PeterThoeny

2010-11-26: TWikibug:Item6606: Complete rewrite of contrib using Farbtastic color picker -- TWiki:Main.PeterThoeny

2006-10-27: Initial version of ColorPickerContrib by TWiki:Main.FlavioCurti using Colorpicker by Norman Timmler (inlet media e.K., Hamburg, Germany)

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: TWikiPreferences, TWikiForms, TWikiPlugins

Revision r1 - 2011-06-12 - 06:14:03 - TWikiContributor Edit