MasterColorPicker_instructions.html

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name='description' content='MasterColorPicker: a JavaScript color-picker delivering all the color you can handle.'>
<meta name='keywords' content='color picker, javascript color picker, master color picker, professional color picker, websafe color picker, harmonic color picker'>
<meta name='author' content='Joe Golembieski, SoftMoon-WebWare'>
<meta name='copyright' content='Copyright © 2013, 2014, 2015, 2019, 2020, 2021, 2022, 2023, 2024 Joe Golembieski, SoftMoon-WebWare'>
<meta name='page_last-udate' content='November 15, 2024'>
<title>MasterColorPicker Instructions from SoftMoon-WebWare</title>
<link rel="icon" type="image/x-icon" href="images/SoftMoonWebWare.gif">
<style type="text/css">
body, header, main, section, footer, figure, div, h1, h2, h4, h5, img, ul, ol, dl, menu, li {
	margin: 0;
	padding: 0; }
body {
	min-width: 67em;
	font-family: serif;
	color: #000000;
	background-color: #FFDEAD;
	background-image:  /* SteelBlue */
		linear-gradient(to right, #4682B4FF, 304px, #4682B400 800px),
		linear-gradient(to bottom, #4682B4FF, 266px, #4682B400 700px),
		linear-gradient(to top, #4682B4FF, 38px, #4682B400 100px);
	}

header h1 {
	font-size: 1.618em;
	font-weight: bold;
	clear: both;
	text-align: center;  }
header h1:first-child {
	font-family: sans-serif;
	padding: .618em 1em 0 1em;
	text-align: left; }
header h1 span {
	padding: 0 0 0 2.618em;
	font-size: .764em }  /* ≈ Φ + ((1-Φ) - (1-Φ)*Φ) */

header figure {
	margin-left: .382rem;
	float: left; }
#logo {
	opacity: .78;
	font-size: 1.618em; /*for alt text*/
	font-weight: bold;
	line-height: 150%; }
header figcaption {
	font-size: 1.382em;
	font-weight: bold;
	text-align: center;
	width: 27em; }
header h1 span,
header figcaption span {
	display: block;
	font-style: oblique; }

header + div {
	position: relative; }

nav {
	position: absolute;
	right: .618em;
	left: auto;
	width: 9.618em;
	z-index: 62;
	text-align: center;
	font-size: 1.162em; }
nav menu {
	list-style-type: none;
	text-align: right; }
nav a {
	display: inline-block;
	text-indent: -1em;
	white-space: normal;
	text-align: justify; }


main {
	text-align: center;
	z-index: 1; }
main > p,
main dl {
	text-align: justify;
	text-indent: -.618em;
	font-size: 1.236em;
	width: 27em;
	margin: 0 auto 0 auto;
	padding: 0 1em 1em 1em; }
main > p *,
main dl * {
	text-indent: 0; }
main > p:first-letter {
	font-size: 1.618em;
	font-weight: bold;
	color: #000040; }
main ol {
	font-size: 1.236em;
	width: 27em;
	margin: -1em auto 0 auto;
	padding-left: 1.618em;
	list-style-type: circle;
	text-align: left; }
main code + p,
main ol + p {
	text-indent: 0; }
main code + p:first-letter,
main ol + p:first-letter {
	font-size: inherit;
	font-weight: normal;
	color: inherit; }
main dt {
	text-align: left;
	font-weight: bold; }
main dd {
	text-indent: .618em;
	margin: 0 .618em 0 .618em;  }
main code, main a, .word {
	white-space: nowrap; }
main p code {
	display: inline-block;
	text-align: left; }
main > code {
	display: block;
	text-align: left;
	white-space: pre;
	width: 37em;
	margin: -.618em auto 0 auto;
	font-size: 1.236em; }
main h3 {
	float: right;
	position: relative;
	top: -1em;
	width: 10.618em;
	margin-right: .618em; }
main > ul {
	list-style-type: none;
	margin: 0 11.618em;
	font-size: 1.236em; }
main > ul > li {
	margin-bottom: .618em; }
main > ul ul {
	display: inline-block;
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 1.618em;
	max-width: 37em;
	text-align: left; }
main > ul ul ul {
	list-style-type: circle; }

footer p {
	margin: 0 1.618em;
	font-size: .78em;
	font-weight: bold; }
footer note {
	margin-right: 2.618em; }
footer note:last-child {
	margin-right: 0; }

kbd {
	white-space: nowrap;
	font-family: monospace;
	break-before: avoid;
	break-after: avoid; }
kbd span {
	display: inline-block;
	position: static;
	border: 1px solid #8080FF;
	border-bottom: 2px solid #404080;
	border-right: 2px solid #404080;
	border-radius: 1.618em / 2em;
	color: white;
	background-color: #202040;
	text-align: center;
	margin: 0 .382em;
	padding: 0 .618em;  }
p kbd span {
	font-size: 85.4%;  }

abbr[tm] {
	font-size: .763924em;
	vertical-align: .236076em;
	line-height: 100%; }
abbr[sm] {
	font-size: .382em;
	vertical-align: 1.1618em;
	border-bottom: none; }
code {font-family: monospace;}
.filename {color: #0066FF;}
.attention {color: red;}
strong em {text-transform: uppercase;}

</style>
</head>
<body>
<header>
<h1>Custom Web Software Development</h1>
<figure>
<img id='logo' src="images/SoftMoon.gif" alt="SoftMoon-WebWare">
<figcaption>JavaScript<abbr tm>™</abbr>, <abbr>HTML 5</abbr>, <abbr>CSS 4</abbr>, &amp; <abbr>PHP 8</abbr>:
<span>Innovative Enterprise level Scripting for interactive sites, <acronym title='software as a service'>SaaS</acronym>, &amp; cross-platform desktop apps</span></figcaption>
</figure>
<h1>MasterColorPicker<abbr tm>™</abbr>
<span>all the color you can handle<abbr sm title="service mark">SM</abbr></span></h1>
</header>

<div>
<nav>
on this page:
<menu>
	<li><a href='#file-http'><code>file://</code> <abbr title='versus'>vs.</abbr> <code>http://</code></a></li>
	<li><a href='#named-colors'>Named-color tables</a></li>
	<li><a href='#using_MasterColorPicker'>Using MasterColorPicker</a></li>
	<li><a href='#using_picker'>Using the Picker</a></li>
	<li><a href='#using_swatch'>“color swatches”</a></li>
	<li><a href='#your_target'>Targets beyond <code>&lt;input&gt;</code></a></li>
	<li><a href='#your_filesystem'>Integrating into your filesystem</a></li>
	<li><a href='#your_structure'>Structuring your own <abbr>HTML</abbr> and <abbr>CSS</abbr></a></li>
	<li><a href='#add_rmv_pckr'>Adding &amp; removing color-pickers</a></li>
	<li><a href='#building pickers'>Building your own color-pickers</a></li>
	<li><a href='#about_options'>The “options” panel</a></li>
</menu>
</nav>
</div>

<main id='content'>
<p>SoftMoon-WebWare’s MasterColorPicker package delivers five JavaScript<abbr tm>™</abbr> powered professional quality
interactive graphical color-pickers, an EyeDropper color-picker, plus a named-color-table based color-picker framework with nine
named-color database files included:
<abbr>ANSI</abbr>, Brewer, common, Crayola, <abbr>CSS</abbr>, Material Design, OpenOffice, universal, &amp; X11,
plus (!) a “Pantone® colors” database file generator that takes just a minute to use.&nbsp;
Your chosen colors can be returned in the most popular color-space models including hexadecimal-<abbr>RGB</abbr>,
<abbr title='Red, Green, Blue'>RGB</abbr>,
<abbr title='Hue, Saturation, Lightness'>HSL</abbr>,
<abbr title='Hue, Saturation, brightness; also known as HSV: Hue, Saturation, Value'>HSB/HSV</abbr>,
<abbr title='Hue, Chroma∝, Gray'>HCG</abbr>,
<abbr title='Hue, Whiteness, Blackness'>HWB</abbr>,
<abbr title='cyan, magenta, yellow, black;  used when printing with inks'>CMYK</abbr>,
<abbr title='CIE L*a*b* : Lightness, a-axis, b-axis'>Lab</abbr>,
<abbr title='CIE LCh : Lightness, Chroma, hue'>LCh</abbr>,
<abbr title='CIE L*u*v* : Lightness, u-axis, v-axis'>Luv</abbr>,
<abbr title='CIE LChᵤᵥ : Lightness, Chromaᵤᵥ, hueᵤᵥ'>LChᵤᵥ</abbr>,
<abbr title='Hueᵤᵥ, Saturation, Lightnessᵤᵥ : based on CIE L*u*v*'>HSLᵤᵥ</abbr>,
<abbr title='OK : Lightness, a-axis, b-axis'>OKLab</abbr>,
<abbr title='OK : Lightness, Chroma, hue'>OKLCh</abbr>,
<abbr title='OK : Hue, Saturation, Value'>OKHSV</abbr>,
<abbr title='OK : Hue, Saturation, Lightness'>OKHSL</abbr>,
<abbr title='OK : Hue, White, Black'>OKHWB</abbr>,
<abbr title='OK : Hue, Chroma∝, Gray'>OKHCG</abbr>,
<abbr title='Lightnessᶻ, aᶻ-axis, bᶻ-axis'>Jᶻaᶻbᶻ</abbr>,
<abbr title='Lightnessᶻ, Chromaᶻ, hueᶻ'>JᶻCᶻhᶻ</abbr>,
<abbr title='Intensity, Cᵀ-axis, Cᴾ-axis'>ICᵀCᴾ</abbr>,
<abbr title='Intensity, Chromaᵀᴾ, hueᵀᴾ'>IChᵀᴾ</abbr>, or
<abbr title='CIE XYZ'>XYZ</abbr>,
or when using named-colors their names can also be returned.&nbsp;
The different graphical color-pickers each look at the different available color-spaces in a different way,
giving you complete intuitive control over finding the exact color you want.&nbsp;
Best of all, you can work with one color-space graphically,
while outputting the corresponding conversion value from another color-space.&nbsp;
The five interactive graphical color-pickers included are:</p>
<dl>
	<dt>RainbowMaestro Harmonic Color Picker<abbr tm>™</abbr></dt>
		<dd>Specializes in color-harmony, shows light/dark tints/tones/shades (monochromatic) of a selected hue and its complement,
				triadic complements, split-complements, and analogous colors, all in one color-wheel.
				Includes a “websafe colors” setting;&nbsp;
				Colorblind assistant shows protan, deutan, &amp; tritan simulations of the palette and selected color.</dd>
	<dt>Spectral Progressive Color Picker<abbr tm>™</abbr></dt>
		<dd>Shows the progression of colors in steps based on the <abbr>RGB</abbr> color-space.&nbsp;
				Works with browsers as far back as Internet Exploder 6.</dd>
	<dt>BeezEye Color Picker<abbr tm>™</abbr></dt>
		<dd>Classic color-wheel shows <abbr>HSL</abbr>, <abbr>HSB-HSV</abbr>, <abbr>HCG</abbr>, <abbr>LCh</abbr>,
				<abbr>OKHSL</abbr>, <abbr>OKHSV</abbr>, <abbr>OKHCG</abbr>, <abbr>OKLCh</abbr>,
				<abbr>HSLᵤᵥ</abbr>, <abbr>LChᵤᵥ</abbr>, <abbr>JᶻCᶻhᶻ</abbr>, <abbr>IChᵀᴾ</abbr>,
				and <abbr>CMYK</abbr> color-spaces (one at a time) with user-controlled Lightness/Brightness-Value/Intensity/Gray/Black.</dd>
	<dt>Simple² Color Picker<abbr tm>™</abbr></dt>
		<dd>Works with the <abbr>HSL</abbr> &amp; <abbr>HSB-HSV</abbr> or <abbr>OKHSL</abbr> &amp; <abbr>OKHSV</abbr> color-spaces (both at once) to bring you
				simple access to the tints/tones/shades of any color (hue) from the “pure” (fully chromatic) color to →black, →white, and →gray.</dd>
	<dt>YinYang NíHóng Color Picker<abbr tm>™</abbr></dt>
		<dd>Another classic style, delivers all of the 11,777,216 colors your 24-bit monitor can show within two easy clicks
				using either the <abbr>HSL</abbr>, <abbr>HSB-HSV</abbr>, <abbr>HCG</abbr>, <abbr>OKHSL</abbr>, <abbr>OKHSV</abbr> or <abbr>OKHCG</abbr> color-spaces.</dd>
</dl>
<p>All these graphical color pickers, except for the YinYang NíHóng color picker, are designed to
show colors in definite “steps” of progression, allowing you to easily work with gradients (see our Rainbow-Maker projects)
and find “matching” colors from other hues/tints/tones/shades.&nbsp; The number of steps, or variety of colors,
is user-controllable in real-time, from just a few to “high resolution”.&nbsp;
¡Plus! MasterColorPicker brings you these additional features:</p>
<dl>
<dt>The MyPalette interface</dt>
<dd>allows users to build their own color-table-palettes,
give each color a descriptive name, organize them to their liking,
group them into sub-palettes, and save/retrieve them for future use
or export them to <abbr>CSS</abbr> &amp; <acronym title='GNU Image Manipulation Program'>GIMP</acronym> palette files,
allowing complete and simple management of all colors used throughout an entire project.&nbsp;
¡Plus! the colorblind-assistant included within helps you select colors for your project that work for everyone.</dd>

<dt>The Color-Space Lab</dt>
<dd>gives you direct control of, and displays a color’s definitive values
in the RGB, HSL, HSV/HSB, HCG, HWB, OKHSL, OKHSV/OKHSB, OKHCG, OKHWB, &amp; CMYK color-spaces.&nbsp;
It also allows you to add an Alpha (opacity) value to your selected color, automatically if you choose.&nbsp;
The selected color’s Luminance is shown,
as well as optionally the contrast with a specific previously selected color.&nbsp;
It can update automatically as you hover over a color in a palette;
or you can use it to manually make color-space conversions.</dd>

<dt>The Color Thesaurus</dt>
<dd>shows you the nearest
“named color” in any one of the named-color-table-palettes that you choose.</dd>

<dt>The Gradientor</dt>
<dd>gives you measured color-stops in a gradient,
so you can change the opacity at regular intervals when building complex translucent background or fill gradients;
or to style individual elements (perhaps each element in a list, headlines, whatever)
for a decorative gradient transitional effect.&nbsp;
Or use it in “high-resolution” for fine-art, or whatever!</dd>

<dt>…</dt>
<dd>And much more… … …</dd>
</dl>

<p>Now these ain’t your grandpa’s color pickers, mind you.&nbsp;
The MasterColorPicker project relies on a modern computer with a modern browser.&nbsp;
Browsers used must embrace “modern” standards in the year 2022.&nbsp;
Also, MasterColorPicker was designed as a professional’s tool,
not a toy to be used on an ity-bity laptop, or other portable device with a small monitor.&nbsp;
While most of MasterColorPicker’s panels adjust to the monitor height,
the Color-Space Lab is (for now at least) a fixed size,
and can be trouble to drag and move on a smaller browser window.&nbsp;
A wide screen is also preferable when multiple panels are open at once.&nbsp;
But some smaller monitors may still be manageable.
</p>

<h3 id='file-http'><code>file://</code> <abbr title='versus'>vs.</abbr> <code>http://</code></h3>

<p>MasterColorPicker automatically adapts to the environment that it is used in.&nbsp;
It can be placed in a folder on your personal computer and
loaded into a browser using the <code>file://</code> protocol
(you click on the file in your filesystem for example);
or it can be placed on a server and loaded into a browser using the <code>http://</code> or <code>https://</code> protocol.&nbsp;
The server may be remote, public or private (in “the cloud” or in a private network);
or be a <code>localhost/</code> on your personal computer.&nbsp;
Both protocols offer similar functionality, but server-based usage is much more convenient
if you plan on adding or deleting named-color database tables on a regular basis.&nbsp;
With server-based (<code>http://</code> or <code>https://</code> protocol) usage,
you simply create the named-color database file and add it to the proper folder; that’s it.&nbsp;
Or you can use the MyPalette interface to create your named-color-table and save your file to the server,
and not even worry about which folders where … or about the file formatting details …
MasterColorPicker takes care of it all for you and even lets you auto-load them in the future.&nbsp;
When you are done with your Palette file, simply use the PaletteManager to remove it,
or manually remove it from the server’s folder.&nbsp;
With <code>file://</code> protocol usage, you must manually add and remove
<abbr>HTML</abbr> links to each of the named-color tables
<strong>if you want them to auto-load when MasterColorPicker starts</strong>.&nbsp;
You can find info on doing such in MasterColorPicker’s ☺Help☺ panel while it is up-and-running.
Both <code>file://</code> and <code>http://</code> (&amp; <code>https://</code>) protocol usages
allow you to easily save &amp; load MyPalette and other named-color-table-palette files
to &amp; from your computer’s local filesystem,
or the borwser’s private storage database,
so without a server you are not high-and-dry;
the advantage of server usage is the simplified auto-load feature,
and having a centralized project host center for multiple developers.&nbsp;
</p>

<p>You will find these two (2) files in the root folder that are <strong>tools</strong>
for digital media developers to find the colors of their dream’s desire:
<code class='filename'>MasterColorPicker_desktop.html</code> and
<code class='filename'>MasterColorPicker_desktop.php</code><br>
With the <code class='filename'>.html</code> file, no server is needed;
just click on the file and it will open in your browser.&nbsp;
With the <code class='filename'>.php</code> file you of course need a server with <abbr>PHP</abbr> installed,
and the same desktop <em>tool</em> is available,
but it is an <em>example</em> of how you can incorporate MasterColorPicker into your own web page,
and also of the subtle differences in the CSS and how the palette files are loaded
(no HTML <code>&lt;script&gt;</code> tags needed to load them).&nbsp;
¡Note both files support being used with a server!&nbsp;
There are two simple, primary differences between the files:&nbsp;
First, the <code class='filename'>.html</code> file adds hard-coded links to the named-color-table files;
(¡note both files recognize the environment they are active in, and if served from a server (via <code>http://</code> or <code>https://</code>)
the <code class='filename'>.html</code> file will still allow you save &amp; load palette files to/from the server-host!)&nbsp;
Second, the <code class='filename'>.html</code> file adds a copy of some of the <abbr>CSS</abbr> styling
directly into the HTML markup, which is needed for MasterColorPicker to work,
since, for security reasons, browsers prevent a web page
from reading any other files loaded from the local file system,
including its own <abbr>CSS</abbr> stylesheet file (unless the user selects them by hand).
</p>


<p>The named-colors database files themselves need to be adapted to the protocol they are used in.&nbsp;
With server based (<code>http://</code> or <code>https://</code> protocol) usage,
these files are <acronym title='JavaScript Object Notation'>JSON</acronym> formatted,
and loaded using JavaScript<abbr tm>™</abbr>
to make HTTP calls back to the server (think ajax);
whereas with <code>file://</code> protocol usage,
they are themselves JavaScript<abbr tm>™</abbr> files loaded with an <abbr>HTML</abbr>
<code>&lt;script src='colors-filename.palette.js'&gt;</code> tag.&nbsp;
Without a server, the palette files’ links need to be hard-coded into the web page.&nbsp;
However when using a server, it can tell MasterColorPicker what files are available,
and MasterColorPicker can then load what it wants.&nbsp;
Look at the difference in the two <code class='filename'>MasterColorPicker_desktop</code> files
for an example of this principle.&nbsp;
See also the file <code class='filename'>color_palettes/index.php</code> and note that
it is a relatively simple file that can be replaced with one in another programming language (Node.js, Perl, etc.);
using a server with MasterColorPicker is not limited to one with <abbr>PHP</abbr> installed.&nbsp;
Except for the “demo” <code class='filename'>MasterColorPicker_desktop.php</code> file,
the palette index file is the only active file on the server
(except for some “utility files” that are not technically part of the project and are not required),
and even it can be replaced with a simple <code class='filename'>.txt</code> file.
</p>

<h3 id='named-colors'>Named-color tables</h3>

<p>Because the named-color database tables are required to be in only slightly different formats,
and many of the files are very long, these database files only come packaged in one format:
for <code>file://</code> protocol usage (extension <code class='filename'>.js</code>).&nbsp;
There is an included <abbr>PHP</abbr> powered converter which will convert all the files
to the server (<code>http://</code> or <code>https://</code> protocol)
usage format (extension <code class='filename'>.json</code>).&nbsp;
There is also an instruction file which explains the details on how to do this using the included converter,
and also how to do this by hand (which is remarkably simple) if you don't have <abbr>PHP</abbr> installed.&nbsp;
These two files, <code class='filename'>convert_palette_formats.php</code>
and <code class='filename'>converting_palette_formats.odt</code>,&nbsp;
can be found in the <code class='filename'>color_palettes/</code> folder.</p>

<p>Pantone® named-colors support can be easily included using the
<code class='filename'>color_palettes/convertPantone.html</code> file.&nbsp;
Boot up this <code>.html</code> file in your favorite browser and follow its directions.&nbsp;
The raw data is not included with this package, but can be found on
<a href='https://github.com/Margaret2/pantone-colors/blob/master/pantone-numbers.json' target="GitHub">GitHub: pantone-numbers.json</a></p>

<p>Building your own named-color-tables by hand is simple to do using any basic text-editor.&nbsp;
If you have a list/database of colors, they can easily be incorporated into MasterColorPicker.&nbsp;
Complete instructions on how to do this can be found in the <code class='filename'>README.odt</code> file
in the <code class='filename'>color_palettes</code> folder.&nbsp;
However, MasterColorPicker’s MyPalette interface makes creating them from scratch a snap!</p>

<h3 id='using_MasterColorPicker'>Using MasterColorPicker in your own project</h3>

<p>It’s very easy to incorporate MasterColorPicker into your own project.&nbsp;
To limit download size, but maximize ease of use, the MasterColorPicker package comes with
only the <code class='filename'>_desktop</code> “<strong>tool</strong>” file.&nbsp;
Simply “cut out” the proper section of <abbr>HTML</abbr> from the <code>MasterColorPicker_desktop.html</code> file
(the file is commented so you can tell what to cut), and either make it a new file:
<code class='filename'>color-pickers/SoftMoon-WebWare/MasterColorPicker.htm</code>
that you can load into your webpage, for example using
<code>&lt;?php include "color-pickers/SoftMoon-WebWare/MasterColorPicker.htm"; ?&gt;</code>
in your web-page document at the appropriate place;&nbsp;
or simply paste the MasterColorPicker HTML you cut-out into your own web-page file;
either way you then incorporate the MaterColorPicker <abbr>HTML</abbr>
at whatever place in your document you desire.</p>

<p>Take a look at the “demo” <code class='filename'>MasterColorPicker_desktop.php</code> file
and note that it “includes” the
<code class='filename'>color-pickers/SoftMoon-WebWare/MasterColorPicker.htm</code> file,
and how the required JavaScript<abbr tm>™</abbr> and <abbr>CSS</abbr> files are loaded.&nbsp;
Note that if you want your webpage to be loadable from the local filesystem
using the <code>file://</code> protocol (you click on the file in your filesystem for example),
you must also include links to the named-color-table palette files
(see the <code class='filename'>MasterColorPicker_desktop.html</code> file for that example).&nbsp;
To actually make the “demo” <code class='filename'>MasterColorPicker_desktop.php</code> file
function as the MasterColorPicker tool, you will need to “cut-out” the proper section of HTML
from the <code class='filename'>MasterColorPicker_desktop.html</code> file as described above,
just as you would for your own web-page.&nbsp;
This is to avoid duplication in the package to limit download size.</p>

<p>Link the main <code class='filename'>MasterColorPicker.css</code> file
in the head of your document if you plan on using it.&nbsp;
Note how if you want your web-page to be able to be loaded in a browser
with the <abbr>URL</abbr> using the <code>file://</code> protocol
(you click on the file in your filesystem for example),
you must include a <code>&lt;style id='MasterColorPicker_desktop_stylesheet'&gt;</code> tag
directly in the HTML page (¡not linked!) that includes the well-documented
snippet of <abbr>CSS</abbr> found at the end of the similar <code>&lt;style&gt;</code> tag
in the <code>&lt;head&gt;</code> of the <code class='filename'>MasterColorPicker_desktop.html</code> file.&nbsp;
This is because the stylesheet must be modified directly in real-time by JavaScript,
and browsers block JavaScript from reading files linked or loaded from the local file-system
unless the end-user specifically selects that file by hand.</p>

<p>Your <abbr>HTML</abbr> (web page) file <strong>must</strong> be encoded in <abbr>UTF-8</abbr>.&nbsp;
You should already be using this encoding in all your web page files anyway.&nbsp;
JavaScript<abbr tm>™</abbr> is required to be encoded in <abbr>UTF-8</abbr>,
and this project uses a character set beyond the standard <acronym>ASCII</acronym> characters.&nbsp;
Remember, <abbr>UTF-8</abbr> is <em>the</em> #1 international choice for character encoding.</p>

<h3 id='using_picker'>Using the Picker interface</h3>
<p>MasterColorPicker is built on an instance of SoftMoon-WebWare’s Picker interface,
which creates a new input “type:” picker.&nbsp;
Using this interface is easy.&nbsp;
The most simple way to use this project is to place anywhere within your document any number of
<code>&lt;input type='MasterColorPicker' /&gt;</code> tags and/or
<code>&lt;input type='text' picker-type='MasterColorPicker' /&gt;</code> tags.&nbsp;
The MasterColorPicker will find them when the document is fully loaded and automatically “register them,” i.e.
add the necessary event-handlers to interface with the Picker.&nbsp;
Using <code>&lt;input type='color' picker-type='MasterColorPicker' /&gt;</code> tags can work with the MasterColorPicker
also, and with browsers that already support this natively, you will get the native color-picker plus the MasterColorPicker;&nbsp;
but caution:&nbsp; the <abbr>W3C</abbr> specs say that <code>&lt;input type='color' /&gt;</code> should limit
the user’s input to basic ways of defining colors, which means that your MasterColorPicker implementation should limit
its output to hexadecimal <abbr>RGB</abbr> with a leading <code>#</code> symbol.</p>

<p>If you don’t like non-standard tag attributes, or you otherwise want to link an input tag to the MasterColorPicker,
after the <code class='filename'>MasterColorPicker.js</code> file is loaded, you can use JavaScript<abbr tm>™</abbr> to
link the input tag something like this:
</p>
<code>&#60;script type='text/javascript'&#62;
myInput=document.getElementById('myMasterColorPickerInput')&#59;
MasterColorPicker.registerTargetElement(myInput)&#59;
&#60;/script&#62;</code>

<p>A registered target element activates the Picker when the user clicks on it, or it otherwise receives “focus”.&nbsp;</p>


<h3 id="using_swatch">Using the “color swatches”</h3>

<p>When a color is clicked on, the target element’s value is changed to the color-value-text.&nbsp;
Also, the associated “color swatch” has its background-color changed to the user-selected color,
while its foreground-color becomes either black or white, opposing the background-color’s brightness.&nbsp;
The “color swatch” is either the target element itself when <code>MasterColorPicker.showColorAs='background'</code>,
or when <code>MasterColorPicker.showColorAs='swatch'</code> the color swatch
is determined by the first valid condition in this list:</p>
<ol>
	<li>If the target is as such: <code>&lt;input swatch='myDocumentId' /&gt;</code>
			then the swatch is a document element with an <abbr title='identification attribute'>id</abbr>
			that matches “myDocumentId” if it exists.</li>
	<li>If the target-object has a JavaScript<abbr tm>™</abbr> property “swatch,”
			then the swatch is that property’s value.</li>
	<li>If the JavaScript<abbr tm>™</abbr> Object property <code>MasterColorPicker.swatch</code> is set,
			then the swatch is that property’s value.</li>
	<li>The document Element that follows the target-input.</li>
</ol>
<p>Be sure to read the end of the file <code class='filename'>MasterColorPicker.js</code>
for more details on using the “color swatch”.</p>

<h3 id="your_target">Targets other than text <code>&lt;input&gt;</code>s.</h3>

<p>You don’t need to use an <code>&lt;input type='text'&gt;</code> with MasterColorPicker.&nbsp;
<code>&lt;textarea&gt;</code>s, <code>&lt;select&gt;</code>s, <code>&lt;input type='text' list='datalistID' /&gt;</code>s,
and even document text-nodes are automatically recognized by the <code>MasterColorPicker.pick()</code> method.&nbsp;
By default, the JavaScript<abbr tm>™</abbr> value of
<code>MasterColorPicker.dataTarget.value</code> is set when a color is picked.&nbsp;
If no <code>dataTarget</code> is set then the <code>MasterColorPicker.masterTarget</code> is used, if any.&nbsp;
With text-nodes, the text is changed to the selected color.&nbsp;
However, for drag-&amp;-drop functionality (and the “sizzors” in the EyeDropper) to work flawlessly,
the <code>dataTarget</code> (and <code>masterTarget</code>) should be any
<acronym>DOM</acronym> Element that can receive keyboard focus;
this eliminates the possibility of using text-nodes as data-targets
if the end-user drags and tries to drop an item off the browser window;
setting <code>MasterColorPicker.enablePanelDrag=false</code> can help somewhat,
but doesn’t completely solve the problem.&nbsp;
If it doesn’t naturally activate keyboard focus (like an <code>&lt;input&gt;</code> does)
your JavaScript code should activate its focus in some way that you determine;
and correspondingly, it should have a <code>tabindex="-1"</code> attribute.&nbsp;
Without keyboard focus on your target,
if your end-user tries to drag something off the page and drop it there
it will causes an error in functionality.&nbsp;
Having keyboard focus is also required if you want the MasterColorPicker to “pop-up” &amp; “pop-down”
or otherwise change display-state (in the code this is the <code>MasterColorPicker.activeInterfaceState</code> flag)
though changing class-names on the “panels” (<code>.activeInterface</code>).&nbsp;
<!--
The <code>dataTarget</code> (and <code>masterTarget</code>) may be any
JavaScript<abbr tm>™</abbr> Object.
Or they may be <code>&lt;input type='hidden'&gt;</code> if you don't care to show the user the dirty color-code,
but want to send the value back to the server with a form-submittal.&nbsp;
-->
To supplement the default functionality of picking a color, add a JavaScript<abbr tm>™</abbr> function to the
Array of <code>MasterColorPicker.pickFilters</code>.&nbsp;
To replace this functionality, replace the <code>MasterColorPicker.pick()</code> method with your own function.&nbsp;
See the file <code class='filename'>JS_toolbox/SoftMoon-WebWare/Picker.js</code> for more details.</p>


<h3 id='your_filesystem'>MasterColorPicker’s<abbr tm>™</abbr> file system structure.</h3>

<p>The MasterColorPicker<abbr tm>™</abbr> JavaScript<abbr tm>™</abbr> code-base does not rely on
any particular file-system structure or filenames,
<strong>¡except!</strong> for the <code class='filename'>color_palettes/</code> folder
and its <code class='filename'>index.…</code> file
when using <code>http://</code> or <code>https://</code> protocol to load your web-page (i.e. it is loaded from a server).&nbsp;
As noted above, the included <code class='filename'>index.php</code> file may be replaced
by another <code class='filename'>index.…</code> file in another programming language
or even a simple text file, but it <strong>must</strong> be named “index”
for the server to automatically find it.&nbsp;
The <code class='filename'>color_palettes/</code> folder may be renamed if need be;
however, you must then modify the value <code>SoftMoon.colorPalettes_defaultPath</code>
either directly (<strong>¡before</strong> the color-palettes load!)
or by modifying the file <code class='filename'>JS_toolbucket/SoftMoon-WebWare/RGB_Calc.js</code>
(at the file’s beginning).&nbsp;
The <code class='filename'>color_palettes/html-indexer.php</code> file is optional, but its name also must remain unchanged.&nbsp;
It will allow end-users the ability to get an <abbr>HTML</abbr>-based index with hyperlinks of the
<code class='filename'>color_palettes/</code> folder and its sub-folders by simply typing something like:
<kbd>https://mywebsite.com/color_palettes/?html</kbd> in their browser’s address bar.&nbsp;
Then the included <code class='filename'>color_palettes/index.php</code> file
(which the server will automatically use when no filename is specified in the folder)
will call the <code class='filename'>color_palettes/html-indexer.php</code> file
instead of generating a simple flat text-based index.&nbsp;
If you have sub-folders in your <code class='filename'>color_palettes/</code> folder,
you can then copy the <code class='filename'>html-indexer.php</code> file
into those sub-folders, but then rename it <code class='filename'>index.php</code> in those sub-folders
so the server will automatically use it.&nbsp;
Don’t copy the included <code class='filename'>color_palettes/index.php</code> file into sub-folders;
it is not needed.</p>
<p>Other folders and filenames may be changed or moved to suit your filesystem arrangement and organization.&nbsp;
You simply need to modify the <code>&lt;script&gt;</code> tags that actually load the files to match your new file-paths.&nbsp;
¡The order the <code>&lt;script&gt;</code> files load is important!&nbsp;
You can <code>defer</code> them for faster page rendering.&nbsp;
As of 2022, the hard-coded <code>&lt;script&gt;</code> tag that defines the
<code>SoftMoon.WebWare</code> &amp; <code>SoftMoon.loaded_palettes</code> namespace properties
should always go before any other MasterColorPicker<abbr tm>™</abbr> files or Palette files.</p>
<p>Developers should note that the files in the folder <code class='filename'>+++JS/</code>
modify standard JavaScript<abbr tm>™</abbr> Objects and/or their <code>prototypes</code>.&nbsp;
That is why they have been given their own folder — to make it easier to keep track of in case of conflicts.</p>


<h3 id='your_structure'>Structuring your own <abbr>HTML</abbr> and <abbr>CSS</abbr></h3>

<p>The first releases of MasterColorPicker focused on separating the
JavaScript from the HTML and CSS as much as possible.&nbsp;
As the project evolved and bells and whistles were added,
these three aspects of the project became more and more intertwined.&nbsp;
Modifying any aspect of the project will require careful testing.&nbsp;
In particular, the MyPalette interface is pretty tight.&nbsp;
The end of the <code class='filename'>MasterColorPicker.js</code> file
in particular relies on the standard HTML &amp; CSS files.&nbsp;
Below you will find info on modifying older aspects of the project:</p>

<p>The visual presentation of the individual color-pickers is up to you.&nbsp;
There are a few comments within the supplied <abbr>HTML</abbr>/<abbr>PHP</abbr> files
which will not be repeated here; you should read them.&nbsp;
One general consideration concerns the <code>&lt;canvas&gt;</code> tag widths &amp; heights;&nbsp;
you may modify them, keeping in mind that the color-pickers build their palettes based on the given width
of the <code>&lt;canvas&gt;</code>, so it is best to keep the width/height of the canvases equal
(excepting some of the canvases in the Simple² &amp; YinYang NíHóng pickers).&nbsp;
The important requirements to follow are listed below for each of the color-pickers in the MasterColorPicker project:
</p>
<ul id='picker_requirements'>
<li><h4>RainbowMaestro Harmonic Color Picker<abbr tm>™</abbr></h4>
	<h5><abbr>HTML</abbr> requirements:</h5>
	<ul>
	<li>There must be a “wrapper” tag with an <code>id='RainbowMaestro'</code> containing:
			<ul>
			<li>4 <code>&lt;canvas&gt;</code> tags</li>
			<li>all the corresponding <code>&lt;input /&gt;</code> tags found in the supplied files.</li>
			<li>4 tags with <code>class='subpalette_swatch'</code>.&nbsp;
					They will show the color of the hovered-over color for each individual <code>&lt;canvas&gt;</code>.&nbsp;</li>
			</ul></li>
	<li>Each <code>&lt;canvas&gt;</code> tag must be wrapped in its own “wrapper” tag.</li>
	<li>The <code>&lt;input /&gt;</code> tags in your file must have the same names, types, &amp; values found in the supplied files.</li>
	<li>There should be a tag with <code>id='RainbowMaestro_indicator'</code>.&nbsp;
			It will show the text-output for the hovered-over color.&nbsp;
			It should have text in it by default, if only a blank space, with no other tags, at the beginning.</li>
	<li>There should be a “wrapper” tag with <code>id='RainbowMaestro_hueIndicator'</code>.&nbsp;
			The last tag within this wrapper will show the hovered-over hue as a value in degrees.&nbsp;</li>
	<li>There should be a tag with <code>id='RainbowMaestro_swatch'</code>.&nbsp;
			It will show the color-output for the hovered-over color that matches the text-output.&nbsp;</li>
	</ul>
	<h5><abbr>CSS</abbr> requirements:</h5>
	none.
</li>
<li><h4>Spectral Progressive Color Picker<abbr tm>™</abbr></h4>
	<h5><abbr>HTML</abbr> requirements:</h5>
	Do not alter the <abbr>HTML</abbr> for this picker.
	<h5><abbr>CSS</abbr> requirements:</h5>
	none.
</li>
<li><h4>BeezEye Color Picker<abbr tm>™</abbr></h4>
	<h5><abbr>HTML</abbr> requirements:</h5>
	<ul>
	<li>There must be a “wrapper” tag with an <code>id='BeezEye'</code> containing:
			<ul>
			<li>A <code>&lt;canvas&gt;</code> tag</li>
			<li>all the corresponding <code>&lt;input /&gt;</code> tags found in the supplied files.</li>
			</ul></li>
	<li>The <code>&lt;input /&gt;</code> tags in your file must have the same names, types, &amp; values found in the supplied files.</li>
	<li>There should be a tag with <code>id='BeezEye_indicator'</code>.&nbsp;
			It will show the text-output for the hovered-over color.&nbsp;
			It should have text in it by default, if only a blank space, with no other tags, at the beginning.</li>
	<li>There should be a tag with <code>id='BeezEye_swatch'</code>.&nbsp;
			It will show the color-output for the hovered-over color that matches the text-output.&nbsp;</li>
	</ul>
	<h5><abbr>CSS</abbr> requirements:</h5>
	none.
</li>
<li><h4>Simple² Color Picker<abbr tm>™</abbr></h4>
	<h5><abbr>HTML</abbr> requirements:</h5>
	<ul>
	<li>Your file <strong>must</strong> be encoded in <abbr>UTF-8</abbr>.</li>
	<li>There must be a “wrapper” tag with an <code>id='Simple²'</code> containing:
			<ul>
			<li>5 <code>&lt;canvas&gt;</code> tags</li>
			<li>all the corresponding <code>&lt;input /&gt;</code> tags found in the supplied files.</li>
			</ul></li>
	<li>The <code>&lt;input /&gt;</code> tags in your file must have the same names, types, &amp; values found in the supplied files.</li>
	<li>Each <code>&lt;canvas&gt;</code> tag must be wrapped in its own “wrapper” tag, and each
			wrapper tag must have an id corresponding/matching the ones wrapping the canvas tags in the supplied files;&nbsp;
			be <em>sure</em> to use the proper combinations of caps/lowercase.&nbsp;
			Note some canvases are filled vertically, others horizontally, so set their height/width appropriately.</li>
	<li>There should be a tag with <code>id='Simple²hue'</code>.&nbsp;
			It will show the hue in degrees for the displayed colors.&nbsp;
			It should have text in it by default, if only a blank space, with no other tags, at the beginning.</li>
	<li>There should be a tag with <code>id='Simple²saturation'</code>.&nbsp;
			It will show the saturation level for the displayed colors.&nbsp;
			It should have text in it by default, if only a blank space, with no other tags, at the beginning.</li>
	<li>There should be a tag with <code>id='Simple²lvl'</code>.&nbsp;
			It will show the Brightness/Value/Lightness level for the displayed colors.&nbsp;
			It should have text in it by default, if only a blank space, with no other tags, at the beginning.</li>
	<li>There should be a tag with <code>id='Simple²_indicator'</code>.&nbsp;
			It will show the text-output for the hovered-over color.&nbsp;
			It should have text in it by default, if only a blank space, with no other tags, at the beginning.</li>
	<li>There should be a tag with <code>id='Simple²_swatch'</code>.&nbsp;
			It will show the color-output for the hovered-over color that matches the text-output.&nbsp;</li>
	</ul>
	<h5><abbr>CSS</abbr> requirements:</h5>
	none.
</li>
<li><h4>YinYang NíHóng Color Picker<abbr tm>™</abbr></h4>
	<h5><abbr>HTML</abbr> requirements:</h5>
	<ul>
	<li>Your file <strong>must</strong> be encoded in <abbr>UTF-8</abbr>.</li>
	<li>There must be a “wrapper” tag with an <code>id='YinYangNíHóng'</code> containing:
			<ul>
			<li>3 <code>&lt;canvas&gt;</code> tags</li>
			<li>all the corresponding <code>&lt;input /&gt;</code> tags found in the supplied files.</li>
			</ul></li>
	<li>The <code>&lt;input /&gt;</code> tags in your file must have the same names, types, &amp; values found in the supplied files.</li>
	<li>The first <code>&lt;canvas&gt;</code> tag is the background with the rainbow-ring and main section of the Yin-Yang.&nbsp;
			The second <code>&lt;canvas&gt;</code> tag is the “hue swatches” (the animated disks of the Yin-Yang).&nbsp;
			The third <code>&lt;canvas&gt;</code> tag is the monochromatic gradient (the central part of the color-picker).&nbsp;
			For best results, if you modify the width/height of these canvases, keep them proportional in size to what is
			given in the supplied files.&nbsp;
			Also pay heed to the <abbr>CSS</abbr> positioning of these canvases, one over the other.&nbsp;</li>
	<li>There should be a tag with <code>id='YinYangNíHóng_indicator'</code>.&nbsp;
			It will show the text-output for the hovered-over color.&nbsp;
			It should have text in it by default, if only a blank space, with no other tags, at the beginning.</li>
	<li>There should be a tag with <code>id='YinYangNíHóng_swatch'</code>.&nbsp;
			It will show the color-output for the hovered-over color that matches the text-output.&nbsp;</li>
	</ul>
	<h5><abbr>CSS</abbr> requirements:</h5>
	<ul>
	<li>Pay heed to the <abbr>CSS</abbr> positioning of the 3 canvases, one over the other, based on their size.</li>
	</ul>
</ul>

<p>When the user clicks on a registered target element or it otherwise receives “focus,”
the MasterColorPicker is activated.&nbsp;
When activated, the MasterColorPicker “main panel” and “options panel” (see the <abbr>HTML</abbr>),
as well as the currently selected color-picker,
all receive the class-name “activePicker”.&nbsp;
There are other class-names added to various <abbr>HTML</abbr> elements in the MasterColorPicker under other various conditions.&nbsp;
For more detailed info on what class-names are applied and when, please see the comments in the
<code class='filename'>JS_toolbox/SoftMoon-WebWare/Picker.js</code> file.&nbsp;
To modify these used class-names, modify the values of the JavaScript<abbr tm>™</abbr>
properties of <code>MasterColorPicker.classnames</code>.&nbsp;
By understanding when and why these class-names are applied,
you can create your own <abbr>CSS</abbr> file to control the dynamic display of the MasterColorPicker.</p>

<h3 id='add_rmv_pckr'>Adding &amp; removing color-pickers</h3>

<p>You may add your own color-pickers to, or remove individual color-pickers from the MasterColorPicker framework.&nbsp;
To remove one or more of the included color-pickers, simply remove its <abbr>HTML</abbr>
and JavaScript<abbr tm>™</abbr> from the given files.&nbsp;
The sections are clearly deliminated with comments.&nbsp;
The <code>x_ColorPicker</code> JavaScript<abbr tm>™</abbr> Class is universal to
all color-pickers in the MasterColorPicker framework, and should remain.&nbsp;
Don’t forget to lighten the weight of the <abbr>CSS</abbr> file, but that is not a requirement.&nbsp;<p>

<p>Adding your own (or someone else’s) color-picker is easy.&nbsp;
Its <abbr>HTML</abbr> should be included within the <code>MasterColorPicker_mainPanel</code> (see the supplied files),
and its <abbr title='identification attribute'>id</abbr> should match the choice offered in the <code>palette_select</code>.&nbsp;
You should of course add this choice to the <code>palette_select</code>.&nbsp;
The <code>palette_select</code> choice may have spaces to match the “display name” of your added color-picker,
and these will be removed when matching an <abbr title='identification attribute'>id</abbr>;&nbsp;
for example a choice of “YinYang NíHóng” corresponds to <abbr title='identification attribute'>id</abbr> “YinYangNíHóng”.&nbsp;

<p>To interface another color-picker with the MasterColorPicker framework is easy,
but as powerful things go, this process has details that must be understood to fully utilize.&nbsp;
Most simply, when a color is selected, using JavaScript<abbr tm>™</abbr>,
simply call <code>MasterColorPicker.pick(<var>……colorChoiceText……</var>)</code>;&nbsp;
however this bypasses the central <code>x_ColorPicker</code> framework which can
convert the choice to the user’s color-space preferences,
and set the color of “color swatches”.&nbsp;</p>

<p>Using the <code>x_ColorPicker</code> framework is a bit different, as it is “event” oriented.&nbsp;
Please read the comments in the <code>MasterColorPicker.js</code> file regarding the <code>x_ColorPicker</code> framework,
but here are some basic additional notes.&nbsp;
The <code>x_ColorPicker</code> framework offers
a <code>handleMouse</code> method for onmouseover, onmousemove, and onmouseout events,
and a <code>handleClick</code> method for onclick events.&nbsp;
They require two arguments passed in, yet browsers only pass in the first by default: the <code>event</code> object.&nbsp;
So you must either use your own event handler which calls these <code>x_ColorPicker</code> methods,
or, more conveniently, use the <code>UniDOM</code> framework that is included with this package to add these methods
as event handlers.&nbsp;
Take a close look (in the <code class='filename'>MasterColorPicker.js</code> file at the end of each color-picker’s section)
at how the supplied color-pickers add their event handlers using the
<code>UniDOM</code> framework, and how the <code>args</code> object is passed on to the <code>x_ColorPicker</code> methods
by adding it as a final argument passed to <code>UniDOM.addEventHandler(………)</code>.&nbsp;</p>

<h3 id='building pickers'>Building your own color-pickers</h3>

<p id='registering_interfaces'>SoftMoon-WebWare’s Picker Class framework
on which the MasterColorPicker is based is a powerful tool that creates
an <code>&lt;input /&gt;</code> “type = picker”.&nbsp;
Your color-picker can be as complex as you need it to be, with multiple “interface panels,”
interactive inputs that modify the picker and/or its choices, etc.&nbsp;
Please carefully read the <code class='filename'>JS_toolbox/SoftMoon-WebWare/Picker.js</code> file and its comments
about “registering” these interface panels and interface elements.&nbsp;
Registering them adds the necessary event handlers for them to work correctly with the MasterColorPicker framework.&nbsp;
Panels are registered using <code>MasterColorPicker.registerInterfacePanel(<var>……element……</var>)</code>
&nbsp;All <abbr>HTML</abbr> elements that require keyboard “focus”
(such as <code>&lt;input type='text|file|number|<var>etc.</var>' /&gt;</code> <code>&lt;select&gt;</code> <code>&lt;textarea&gt;</code>)
that are part of your picker but are <em><strong>not</strong></em> on a registered “interface panel”  must be registered
using <code>MasterColorPicker.registerInterfaceElement(<var>……element……</var>)</code>
</p>

<!--  h3 id='about_options'>The “options” panel</h3>

<p>The <abbr>HTML</abbr> options panel may offer your users more control of the returned color than you need them to have.&nbsp;
You may only want values returned as hexadecimal-<abbr>RGB</abbr>, or whatever.&nbsp;
The color-pickers included in the MasterColorPicker project all rely on
SoftMoon-WebWare’s JavaScript<abbr tm>™</abbr> <code>RGB_Calc</code> Class for all their
color-space conversion needs.&nbsp;
This class has several flags that you can set
(see the comments in the <code class='filename'>JS_toolbox/SoftMoon-WebWare/RGB_Calc.js</code> file),
and simply remove the options from the <abbr>HTML</abbr> options panel.&nbsp;
The <code>palette_mode</code> must remain in the <abbr>HTML</abbr> somewhere
(to work with the <code>x_ColorPicker</code> framework),
but it can be reduced to something like:
<code>&lt;input type='hidden' id='palette_mode' value='hex' /&gt;</code>.&nbsp;
If you do remove options from the options panel, you may remove some, most, or all of the file
<code class='filename'>color-pickers/SoftMoon-WebWare/color-space_autoReformatter.js</code>.</p>

<p>The <code>MasterColorPicker_optionsPanel</code> may be moved into the
<code>MasterColorPicker_mainPanel</code> (see the comments in the file) and if using the supplied <abbr>CSS</abbr> file,
it will pop-up and pop-down with the main panel, or if you know <abbr>CSS</abbr>,
it’s a simple modification to the <abbr>CSS</abbr> file to achieve the same result.&nbsp;</p  -->


</main><!-- close #content -->

<footer>
<p>SoftMoon-WebWare and its websites do not use or store “cookies” or other data on your computer/device
(except for application demos that require your intent to do so, to store “settings” and the data you generate and desire to save).&nbsp;
No personal data is transferred to any other entity
(except with your intent as previously stated while using “demos”,
and said data is only transferred to SoftMoon-WebWare.com and is <em>not</em> saved).&nbsp;
You are not being tracked, quantified, or mined for data when visiting our sites.&nbsp;
We hope you enjoy the advertisement-free experience that shuns the growing worldwide corporate-fascism movement.</p>
<p>All content found on this page &amp; site Copyright © 2010, 2012, 2013, 2014, 2015, 2019, 2020, 2021, 2022, 2024  by SoftMoon-WebWare and its owner,
all rights reserved, unless otherwise specifically noted.&nbsp;
Trademarks and Service-Marks are property of SoftMoon-WebWare and its owner,
all rights reserved, unless otherwise specifically noted.</p>
<p>
<note>“JavaScript” is a trademark of Oracle Corporation.</note>
<note>“Mozilla” &amp; “Firefox” are trademarks of Mozilla Corporation / Mozilla Foundation.</note>
<note>“Google” &amp; “Chrome” are trademarks of Google LLC.</note>
<note>“Opera” &amp; “Opera Mobile” are trademarks of Opera Software ASA.</note>
<note>“Apple” &amp; “Safari” are trademarks of Apple Inc.</note>
<note>“Microsoft,” “Edge,” &amp; “Internet Explorer” are trademarks of Microsoft Corporation.</note>
<note>“Pantone” is a trademark of Pantone LLC.</note>
</p>
</footer>
</body>
</html>