cross
Foswiki General Assembly will be held on 28th November 2019, 1200 UTC on Freenode IRC channel #foswiki-association. See AgendaTenthGeneralAssembly
TIP JQAutoColorContrib is not installed on Foswiki.org.

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

Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima? Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius! Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Colored circles

example1.png

Color icons

Certificate

Check

Camera

Color boxes

example2.png

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

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

None

Change History

01 Jul 2019 skip auto-color if text is empty
28 Mar 2018 initial release

PackageForm edit

Author Michael Daum
Version 1.01
Release 01 Jul 2019
Description Assign colors automatically based on text properties
Copyright 2018-2019, Michael Daum, All Rights Reserved
License GPL (GNU General Public License)
Home https://foswiki.org/Extensions/JQAutoColorContrib
Support https://foswiki.org/Support/JQAutoColorContrib
Repository https://github.com/foswiki/JQAutoColorContrib
ExtensionClassification Interface and Visualisation
ExtensionType ContribPackage
Compatibility
IncompatibleWith
ImageUrl example1.png
DemoUrl http://
SupportUrl JQAutoColorContrib
ModificationPolicy CoordinateWithAuthor
Topic attachments
I Attachment Action Size Date Who Comment
JQAutoColorContrib.md5md5 JQAutoColorContrib.md5 manage 177 bytes 01 Jul 2019 - 09:58 MichaelDaum  
JQAutoColorContrib.sha1sha1 JQAutoColorContrib.sha1 manage 201 bytes 01 Jul 2019 - 09:58 MichaelDaum  
JQAutoColorContrib.tgztgz JQAutoColorContrib.tgz manage 78 K 01 Jul 2019 - 09:57 MichaelDaum  
JQAutoColorContrib.zipzip JQAutoColorContrib.zip manage 83 K 01 Jul 2019 - 09:57 MichaelDaum  
JQAutoColorContrib_installerEXT JQAutoColorContrib_installer manage 5 K 01 Jul 2019 - 09:58 MichaelDaum  
example1.pngpng example1.png manage 40 K 01 Jul 2019 - 09:57 MichaelDaum  
example2.pngpng example2.png manage 29 K 01 Jul 2019 - 09:57 MichaelDaum  
Topic revision: r2 - 01 Jul 2019, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy