Difference: ColorPickerPlugin (1 vs. 6)

Revision 62018-07-06 - TWikiContributor

 

Color Picker Plugin 

<--
   Contributions to this plugin package are appreciated. Please update this page at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPluginDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
Page contents
screenshot-edit.png 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.
An attribute of type="popup" shows a button that, when clicked, opens a color picker popup. 		Text box width in number of characters Initial (default) color

Example form definition:

Name: Type: Size Values: Tooltip message: Attributes:
Background color color 12   Select color type="popup"

Note: The type="popup" attribute requires TWiki-6.0.2 or later.

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.

Show details toggleopen.gif Hide details toggleclose.gif 
<--/twistyPlugin twikiMakeVisibleInline-->

  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.

  • Or, follow these manual installation steps:
    • Download the ZIP file from the extension home on twiki.org (see below).
    • Unzip ColorPickerPlugin.zip in your twiki installation directory.
    • Set the ownership of the extracted directories and files to the webserver user.
    • Install the dependencies (if any).

  • Plugin configuration and testing:
    • Run the configure script and enable the plugin in the Plugins section.
    • Configure additional plugin settings in the Extensions section if needed.
    • Test if the installation was successful using the examples provided. 

<--/twistyPlugin-->

Plugin Info

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

Author: TWiki:Main.PeterThoeny, TWiki.org
Changed:
<
<
Copyright: © 2007 Steven Wittens, Acko.net for Farbtastic jQuery plugin
© 2010-2015 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin
>
>
Copyright: © 2007 Steven Wittens, Acko.net for Farbtastic jQuery plugin
© 2010-2018 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin
 
Sponsor: Wave Systems Corp. for type parameter
License: GPL (GNU General Public License)
Dependencies: JQueryPlugin (pre-installed)
Changed:
<
<
Version: 2015-01-10
>
>
Version: 2018-07-05
 
Show Change History toggleopen.gif Hide Change History toggleclose.gif 
<--/twistyPlugin twikiMakeVisibleInline-->
Added:
>
>
2018-07-05: TWikibug:Item7841: Copyright update to 2018
2016-01-08: TWikibug:Item7708: Copyright update to 2016
 
2015-01-10: TWikibug:Item7604: Switch to GPL v3
2014-12-29: TWikibug:Item7601: Implement new type="popup" parameter for popup color widget
2014-12-20: TWikibug:Item7601: New type parameter to set the type of color widget
2014-12-11: TWikibug:Item7577: TWiki form field type with configure attributes, color type supports form, onblur, onfocus, onchange, onselect, onmouseover, onmouseout, pattern, placeholder, spellcheck, style, tabindex, title, translate
2013-02-15: TWikibug:Item7148: Fix for color picker not working if initial value of TWiki forms field of type color is empty
2013-01-09: TWikibug:Item7091: Dependency clarification; use TWISTY for installation instructions
2012-12-03: TWikibug:Item7020: Add VarCOLORPICKER with category; doc improvements
2012-08-11: TWikibug:Item6837: Doc fixes; updated installation instructions
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) 
<--/twistyPlugin-->
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

META FILEATTACHMENT attachment="screenshot-edit.png" attr="h" comment="" date="1290756224" name="screenshot-edit.png" path="screenshot-edit.png" size="29633" user="TWikiContributor" version="1"

Revision 52015-01-11 - TWikiContributor

 

Color Picker Plugin 

<--
   Contributions to this plugin package are appreciated. Please update this page at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPluginDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
Changed:
<
<
>
>
 
Page contents
screenshot-edit.png 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
Changed:
<
<
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
>
>
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.
An attribute of type="popup" shows a button that, when clicked, opens a color picker popup. 		Text box width in number of characters Initial (default) color
  Example form definition:
Changed:
<
<
Name: Type: Size Values: Tooltip message:
Background color color 12   Select color
>
>
Name: Type: Size Values: Tooltip message: Attributes:
Background color color 12   Select color type="popup"
 
Added:
>
>		Note: The type="popup" attribute requires TWiki-6.0.2 or later.
 

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.

Show details toggleopen.gif Hide details toggleclose.gif 
<--/twistyPlugin twikiMakeVisibleInline-->

  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.

  • Or, follow these manual installation steps:
    • Download the ZIP file from the extension home on twiki.org (see below).
    • Unzip ColorPickerPlugin.zip in your twiki installation directory.
    • Set the ownership of the extracted directories and files to the webserver user.
    • Install the dependencies (if any).

  • Plugin configuration and testing:
    • Run the configure script and enable the plugin in the Plugins section.
    • Configure additional plugin settings in the Extensions section if needed.
    • Test if the installation was successful using the examples provided. 

<--/twistyPlugin-->

Plugin Info

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

Author: TWiki:Main.PeterThoeny, TWiki.org
Changed:
<
<
Copyright: © 2007 Steven Wittens, Acko.net for Farbtastic jQuery plugin
© 2010-2013 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin
>
>
Copyright: © 2007 Steven Wittens, Acko.net for Farbtastic jQuery plugin
© 2010-2015 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin
Added:
>
>
Sponsor: Wave Systems Corp. for type parameter
 
License: GPL (GNU General Public License)
Dependencies: JQueryPlugin (pre-installed)
Changed:
<
<
Version: 2013-02-15
>
>
Version: 2015-01-10
 
Show Change History toggleopen.gif Hide Change History toggleclose.gif 
<--/twistyPlugin twikiMakeVisibleInline-->
Added:
>
>
2015-01-10: TWikibug:Item7604: Switch to GPL v3
2014-12-29: TWikibug:Item7601: Implement new type="popup" parameter for popup color widget
2014-12-20: TWikibug:Item7601: New type parameter to set the type of color widget
2014-12-11: TWikibug:Item7577: TWiki form field type with configure attributes, color type supports form, onblur, onfocus, onchange, onselect, onmouseover, onmouseout, pattern, placeholder, spellcheck, style, tabindex, title, translate
 
2013-02-15: TWikibug:Item7148: Fix for color picker not working if initial value of TWiki forms field of type color is empty
2013-01-09: TWikibug:Item7091: Dependency clarification; use TWISTY for installation instructions
2012-12-03: TWikibug:Item7020: Add VarCOLORPICKER with category; doc improvements
2012-08-11: TWikibug:Item6837: Doc fixes; updated installation instructions
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) 
<--/twistyPlugin-->
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

META FILEATTACHMENT attachment="screenshot-edit.png" attr="h" comment="" date="1290756224" name="screenshot-edit.png" path="screenshot-edit.png" size="29633" user="TWikiContributor" version="1"

Revision 42013-02-16 - TWikiContributor

 

Color Picker Plugin 

<--
   Contributions to this plugin package are appreciated. Please update this page at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPluginDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
screenshot-edit.png 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

Changed:
<
<		Note: You do not need to install anything on the browser to use this extension. The following instructions are for the administrator who installs the extension on the TWiki server.
>
>		This plugin is pre-installed. TWiki administrators can upgrade the plugin as needed on the TWiki server.
Added:
>
>
Show details toggleopen.gif Hide details toggleclose.gif 
<--/twistyPlugin twikiMakeVisibleInline-->
 
  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.

  • Or, follow these manual installation steps:
    • Download the ZIP file from the extension home on twiki.org (see below).
    • Unzip ColorPickerPlugin.zip in your twiki installation directory.
    • Set the ownership of the extracted directories and files to the webserver user.
    • Install the dependencies (if any).

  • Plugin configuration and testing:
    • Run the configure script and enable the plugin in the Plugins section.
    • Configure additional plugin settings in the Extensions section if needed.
    • Test if the installation was successful using the examples provided.
Added:
>
>		 
<--/twistyPlugin-->
 

Plugin Info

  • Set SHORTDESCRIPTION = Color picker for use in TWiki forms and TWiki applications
Added:
>
>
 
Author: TWiki:Main.PeterThoeny, TWiki.org
Changed:
<
<
Copyright: © 2007 Steven Wittens, Acko.net for Farbtastic jQuery plugin
© 2010-2012 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin
>
>
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)
Changed:
<
<
Dependencies:
NameVersionDescription
TWiki::Plugins::JQueryPlugin>=1.0Required; download from TWiki:Plugins/JQueryPlugin
Version: 2012-12-03
Change History: 
<-- versions below in reverse order -->
 
>
>
Dependencies: JQueryPlugin (pre-installed)
Version: 2013-02-15
%TWISTY{
Added:
>
>		 mode="div" showlink="Show Change History http://twiki.oats.inaf.it/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" hidelink="Hide Change History http://twiki.oats.inaf.it/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" }%
2013-02-15: TWikibug:Item7148: Fix for color picker not working if initial value of TWiki forms field of type color is empty
2013-01-09: TWikibug:Item7091: Dependency clarification; use TWISTY for installation instructions
 
2012-12-03: TWikibug:Item7020: Add VarCOLORPICKER with category; doc improvements
2012-08-11: TWikibug:Item6837: Doc fixes; updated installation instructions
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)
Added:
>
>		</> 
<--/twistyPlugin-->
 
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

META FILEATTACHMENT attachment="screenshot-edit.png" attr="h" comment="" date="1290756224" name="screenshot-edit.png" path="screenshot-edit.png" size="29633" user="TWikiContributor" version="1"

Revision 32012-12-04 - TWikiContributor

 

Color Picker Plugin 

<--
   Contributions to this plugin package are appreciated. Please update this page at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPluginDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
screenshot-edit.png 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>
Changed:
<
<		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.
>
>		This will show an HTML input field named "text_color" and a color picker tied to it.
 
Added:
>
>
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

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

  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.

  • Or, follow these manual installation steps:
    • Download the ZIP file from the extension home on twiki.org (see below).
    • Unzip ColorPickerPlugin.zip in your twiki installation directory.
    • Set the ownership of the extracted directories and files to the webserver user.
    • Install the dependencies (if any).

  • Plugin configuration and testing:
    • Run the configure script and enable the plugin in the Plugins section.
    • Configure additional plugin settings in the Extensions section if needed.
    • Test if the installation was successful using the examples provided.

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-2012 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin
License: GPL (GNU General Public License)
Dependencies:
NameVersionDescription
TWiki::Plugins::JQueryPlugin>=1.0Required; download from TWiki:Plugins/JQueryPlugin
Changed:
<
<
Version: 2012-08-11
>
>
Version: 2012-12-03
 
Change History: 
<-- versions below in reverse order -->
 
Added:
>
>
2012-12-03: TWikibug:Item7020: Add VarCOLORPICKER with category; doc improvements
 
2012-08-11: TWikibug:Item6837: Doc fixes; updated installation instructions
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
Changed:
<
<		Related Topics: TWikiPreferences, TWikiForms, TWikiPlugins
>
>		Related Topics: VarCOLORPICKER, TWikiPreferences, TWikiForms, TWikiPlugins
 
META FILEATTACHMENT attachment="screenshot-edit.png" attr="h" comment="" date="1290756224" name="screenshot-edit.png" path="screenshot-edit.png" size="29633" user="TWikiContributor" version="1"

Revision 22012-08-11 - TWikiContributor

 

Color Picker Plugin 

<--
   Contributions to this plugin package are appreciated. Please update this page at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPluginDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
screenshot-edit.png 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
Changed:
<
<
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
>
>
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. 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) 

<--
 
 
 
-->
Deleted:
<
<

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

Changed:
<
<		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.
>
>		Note: You do not need to install anything on the browser to use this extension. The following instructions are for the administrator who installs the extension on the TWiki server.
 
Changed:
<
<		Like many other TWiki extensions, this module is shipped with a fully
>
>
  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.
Deleted:
<
<		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)
 
Deleted:
<
<
  • 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.
 
Changed:
<
<
>
>
  • Or, follow these manual installation steps:
Added:
>
>
    • Download the ZIP file from the extension home on twiki.org (see below).
    • Unzip ColorPickerPlugin.zip in your twiki installation directory.
    • Set the ownership of the extracted directories and files to the webserver user.
    • Install the dependencies (if any).
 
Added:
>
>
  • Plugin configuration and testing:
    • Run the configure script and enable the plugin in the Plugins section.
    • Configure additional plugin settings in the Extensions section if needed.
    • Test if the installation was successful using the examples provided.
 
Added:
>
>
 

Plugin Info

  • Set SHORTDESCRIPTION = Color picker for use in TWiki forms and TWiki applications
Changed:
<
<
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
>
>
Author: TWiki:Main.PeterThoeny, TWiki.org
Copyright: © 2007 Steven Wittens, Acko.net for Farbtastic jQuery plugin
© 2010-2012 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki ColorPickerPlugin
 
License: GPL (GNU General Public License)
Dependencies:
NameVersionDescription
TWiki::Plugins::JQueryPlugin>=1.0Required; download from TWiki:Plugins/JQueryPlugin
Changed:
<
<
Version: 21489 (2011-08-20)
>
>
Version: 2012-08-11
 
Change History: 
<-- versions below in reverse order -->
 
Added:
>
>
2012-08-11: TWikibug:Item6837: Doc fixes; updated installation instructions
 
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

META FILEATTACHMENT attachment="screenshot-edit.png" attr="h" comment="" date="1290756224" name="screenshot-edit.png" path="screenshot-edit.png" size="29633" user="TWikiContributor" version="1"

Revision 12011-06-12 - TWikiContributor

 

Color Picker Plugin 

<--
   Contributions to this plugin package are appreciated. Please update this page at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPluginDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
screenshot-edit.png 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. 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)
  • 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:
NameVersionDescription
TWiki::Plugins::JQueryPlugin>=1.0Required; download from TWiki:Plugins/JQueryPlugin
Version: 21489 (2011-08-20)
Change History: 
<-- versions below in reverse order -->
 
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

META FILEATTACHMENT attachment="screenshot-edit.png" attr="h" comment="" date="1290756224" name="screenshot-edit.png" path="screenshot-edit.png" size="29633" user="TWikiContributor" version="1"
View topic | History: r6 < r5 < r4 < r3 | More topic actions...
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.ColorPickerPlugin.