JQAutoColorContrib

Assign colors automatically based on text properties

Description

Sometimes assigning colors manually is a tendious task. How about assigning colors to various elements on a web page automatically based on the text content? This is exactly what this javascript plugin does: you select an element and a source of text, which will then be mapped onto a color that is assigned to a css property of the target element. The kind of color may be parametrized using a range of saturations, lightness and hues. The source text is then hashed and mapped to a matching color.

Examples

Colored text box

Colored circles

Color icons

Certificate

Check

Camera

Color boxes

Gradient

Syntax

This is a pure javascript extension. So you need to use JQREQUIRE to load the library to a page where you want to use it. Then add the css class jqAutoColor to an HTML element, e.g.

<div class="jqAutoColor" data-saturation='...' data-lightness='...' ... >
...
</div>

Use HTML5 data parameters to specify parameters to the autoColor plugin. All parameters are optional.

Parameter	Description	Default
source	jQuery selector of an element to extract text data from	current element
target	jQuery selector of the element to colorize	current element
text	string to derive a color from	text content of the target element
seed	additional string to be appended to the source text to seed the hash process when computing a color hue	0
property	css property to apply the generated color to; if left undefined the background color will be changed while also setting the forground color to a matching value: dark or light based on the darkness of the background tint; if set to radial-gradient generate a two-color background gradient using the shift-color parameter to compute the second color	background
dark	whill be used to select a matching foreground color when the css property is left undefined	#222
light	whill be used to select a matching foreground color when the css property is left undefined	#fff
hue-from	hue range start which to select colors from	0
hue-to	hue range end which to select colors from	359
saturation	string or array of saturation values	[50,65,80]
lightness	string or array of lightness values	[50,65,80]
shift-color	array of rgb values to create a secondary color based on the first in gradient backgrounds	[-10,-10,-20]

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.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)

cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Dependencies

Name	Version	Description
Foswiki::Plugins::JQueryPlugin	>=9.20	Required.

Change History

31 Aug 2022	fixed computation of matching foreground color
04 May 2022	fix setting properties other than the background
18 Nov 2019	implement auto-generated gradient backgrounds
01 Jul 2019	skip auto-color if text is empty
28 Mar 2018	initial release