-
Notifications
You must be signed in to change notification settings - Fork 1
/
MasterColorPicker_instructions.html
857 lines (797 loc) · 49 KB
/
MasterColorPicker_instructions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
<!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='July 21, 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>, & <abbr>PHP 8</abbr>:
<span>Innovative Enterprise level Scripting for interactive sites, <acronym title='software as a service'>SaaS</acronym>, & 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><input></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 & 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, & X11,
plus (!) a “Pantone® colors” database file generator that takes just a minute to use.
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>, or
<abbr title='CIE XYZ'>XYZ</abbr>,
or when using named-colors their names can also be returned.
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.
Best of all, you can work with one color-space graphically,
while outputting the corresponding conversion value from another color-space.
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;
Colorblind assistant shows protan, deutan, & 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.
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>,
and <abbr>CMYK</abbr> color-spaces (one at a time) with user-controlled Lightness/Brightness-Value/Gray/Black.</dd>
<dt>Simple² Color Picker<abbr tm>™</abbr></dt>
<dd>Works with the <abbr>HSL</abbr> & <abbr>HSB-HSV</abbr> or <abbr>OKHSL</abbr> & <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. The number of steps, or variety of colors,
is user-controllable in real-time, from just a few to “high resolution”.
¡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> & <acronym title='GNU Image Manipulation Program'>GIMP</acronym> palette files,
allowing complete and simple management of all colors used throughout an entire project.
¡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, & CMYK color-spaces.
It also allows you to add an Alpha (opacity) value to your selected color, automatically if you choose.
The selected color’s Luminance is shown,
as well as optionally the contrast with a specific previously selected color.
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.
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.
The MasterColorPicker project relies on a modern computer with a modern browser.
Browsers used must embrace “modern” standards in the year 2022.
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.
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.
A wide screen is also preferable when multiple panels are open at once.
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.
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.
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.
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.
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.
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.
When you are done with your Palette file, simply use the PaletteManager to remove it,
or manually remove it from the server’s folder.
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>.
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> (& <code>https://</code>) protocol usages
allow you to easily save & load MyPalette and other named-color-table-palette files
to & 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.
</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.
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><script></code> tags needed to load them).
¡Note both files support being used with a server!
There are two simple, primary differences between the files:
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 & load palette files to/from the server-host!)
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.
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><script src='colors-filename.palette.js'></code> tag.
Without a server, the palette files’ links need to be hard-coded into the web page.
However when using a server, it can tell MasterColorPicker what files are available,
and MasterColorPicker can then load what it wants.
Look at the difference in the two <code class='filename'>MasterColorPicker_desktop</code> files
for an example of this principle.
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.
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>).
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>).
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.
These two files, <code class='filename'>convert_palette_formats.php</code>
and <code class='filename'>converting_palette_formats.odt</code>,
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.
Boot up this <code>.html</code> file in your favorite browser and follow its directions.
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.
If you have a list/database of colors, they can easily be incorporated into MasterColorPicker.
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.
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.
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.
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><?php include "color-pickers/SoftMoon-WebWare/MasterColorPicker.htm"; ?></code>
in your web-page document at the appropriate place;
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.
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).
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.
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.
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><style id='MasterColorPicker_desktop_stylesheet'></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><style></code> tag
in the <code><head></code> of the <code class='filename'>MasterColorPicker_desktop.html</code> file.
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>.
You should already be using this encoding in all your web page files anyway.
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.
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.
Using this interface is easy.
The most simple way to use this project is to place anywhere within your document any number of
<code><input type='MasterColorPicker' /></code> tags and/or
<code><input type='text' picker-type='MasterColorPicker' /></code> tags.
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.
Using <code><input type='color' picker-type='MasterColorPicker' /></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;
but caution: the <abbr>W3C</abbr> specs say that <code><input type='color' /></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><script type='text/javascript'>
myInput=document.getElementById('myMasterColorPickerInput');
MasterColorPicker.registerTargetElement(myInput);
</script></code>
<p>A registered target element activates the Picker when the user clicks on it, or it otherwise receives “focus”. </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.
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.
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><input swatch='myDocumentId' /></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><input></code>s.</h3>
<p>You don’t need to use an <code><input type='text'></code> with MasterColorPicker.
<code><textarea></code>s, <code><select></code>s, <code><input type='text' list='datalistID' /></code>s,
and even document text-nodes are automatically recognized by the <code>MasterColorPicker.pick()</code> method.
By default, the JavaScript<abbr tm>™</abbr> value of
<code>MasterColorPicker.dataTarget.value</code> is set when a color is picked.
If no <code>dataTarget</code> is set then the <code>MasterColorPicker.masterTarget</code> is used, if any.
With text-nodes, the text is changed to the selected color.
However, for drag-&-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.
If it doesn’t naturally activate keyboard focus (like an <code><input></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.
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.
Having keyboard focus is also required if you want the MasterColorPicker to “pop-up” & “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>).
<!--
The <code>dataTarget</code> (and <code>masterTarget</code>) may be any
JavaScript<abbr tm>™</abbr> Object.
Or they may be <code><input type='hidden'></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.
-->
To supplement the default functionality of picking a color, add a JavaScript<abbr tm>™</abbr> function to the
Array of <code>MasterColorPicker.pickFilters</code>.
To replace this functionality, replace the <code>MasterColorPicker.pick()</code> method with your own function.
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).
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.
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).
The <code class='filename'>color_palettes/html-indexer.php</code> file is optional, but its name also must remain unchanged.
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.
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.
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.
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.
You simply need to modify the <code><script></code> tags that actually load the files to match your new file-paths.
¡The order the <code><script></code> files load is important!
You can <code>defer</code> them for faster page rendering.
As of 2022, the hard-coded <code><script></code> tag that defines the
<code>SoftMoon.WebWare</code> & <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>.
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.
As the project evolved and bells and whistles were added,
these three aspects of the project became more and more intertwined.
Modifying any aspect of the project will require careful testing.
In particular, the MyPalette interface is pretty tight.
The end of the <code class='filename'>MasterColorPicker.js</code> file
in particular relies on the standard HTML & CSS files.
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.
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.
One general consideration concerns the <code><canvas></code> tag widths & heights;
you may modify them, keeping in mind that the color-pickers build their palettes based on the given width
of the <code><canvas></code>, so it is best to keep the width/height of the canvases equal
(excepting some of the canvases in the Simple² & YinYang NíHóng pickers).
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><canvas></code> tags</li>
<li>all the corresponding <code><input /></code> tags found in the supplied files.</li>
<li>4 tags with <code>class='subpalette_swatch'</code>.
They will show the color of the hovered-over color for each individual <code><canvas></code>. </li>
</ul></li>
<li>Each <code><canvas></code> tag must be wrapped in its own “wrapper” tag.</li>
<li>The <code><input /></code> tags in your file must have the same names, types, & values found in the supplied files.</li>
<li>There should be a tag with <code>id='RainbowMaestro_indicator'</code>.
It will show the text-output for the hovered-over color.
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>.
The last tag within this wrapper will show the hovered-over hue as a value in degrees. </li>
<li>There should be a tag with <code>id='RainbowMaestro_swatch'</code>.
It will show the color-output for the hovered-over color that matches the text-output. </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><canvas></code> tag</li>
<li>all the corresponding <code><input /></code> tags found in the supplied files.</li>
</ul></li>
<li>The <code><input /></code> tags in your file must have the same names, types, & values found in the supplied files.</li>
<li>There should be a tag with <code>id='BeezEye_indicator'</code>.
It will show the text-output for the hovered-over color.
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>.
It will show the color-output for the hovered-over color that matches the text-output. </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><canvas></code> tags</li>
<li>all the corresponding <code><input /></code> tags found in the supplied files.</li>
</ul></li>
<li>The <code><input /></code> tags in your file must have the same names, types, & values found in the supplied files.</li>
<li>Each <code><canvas></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;
be <em>sure</em> to use the proper combinations of caps/lowercase.
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>.
It will show the hue in degrees for the displayed colors.
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>.
It will show the saturation level for the displayed colors.
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>.
It will show the Brightness/Value/Lightness level for the displayed colors.
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>.
It will show the text-output for the hovered-over color.
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>.
It will show the color-output for the hovered-over color that matches the text-output. </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><canvas></code> tags</li>
<li>all the corresponding <code><input /></code> tags found in the supplied files.</li>
</ul></li>
<li>The <code><input /></code> tags in your file must have the same names, types, & values found in the supplied files.</li>
<li>The first <code><canvas></code> tag is the background with the rainbow-ring and main section of the Yin-Yang.
The second <code><canvas></code> tag is the “hue swatches” (the animated disks of the Yin-Yang).
The third <code><canvas></code> tag is the monochromatic gradient (the central part of the color-picker).
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.
Also pay heed to the <abbr>CSS</abbr> positioning of these canvases, one over the other. </li>
<li>There should be a tag with <code>id='YinYangNíHóng_indicator'</code>.
It will show the text-output for the hovered-over color.
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>.
It will show the color-output for the hovered-over color that matches the text-output. </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.
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”.
There are other class-names added to various <abbr>HTML</abbr> elements in the MasterColorPicker under other various conditions.
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.
To modify these used class-names, modify the values of the JavaScript<abbr tm>™</abbr>
properties of <code>MasterColorPicker.classnames</code>.
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 & removing color-pickers</h3>
<p>You may add your own color-pickers to, or remove individual color-pickers from the MasterColorPicker framework.
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.
The sections are clearly deliminated with comments.
The <code>x_ColorPicker</code> JavaScript<abbr tm>™</abbr> Class is universal to
all color-pickers in the MasterColorPicker framework, and should remain.
Don’t forget to lighten the weight of the <abbr>CSS</abbr> file, but that is not a requirement. <p>
<p>Adding your own (or someone else’s) color-picker is easy.
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>.
You should of course add this choice to the <code>palette_select</code>.
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>;
for example a choice of “YinYang NíHóng” corresponds to <abbr title='identification attribute'>id</abbr> “YinYangNíHóng”.
<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.
Most simply, when a color is selected, using JavaScript<abbr tm>™</abbr>,
simply call <code>MasterColorPicker.pick(<var>……colorChoiceText……</var>)</code>;
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”. </p>
<p>Using the <code>x_ColorPicker</code> framework is a bit different, as it is “event” oriented.
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.
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.
They require two arguments passed in, yet browsers only pass in the first by default: the <code>event</code> object.
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.
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>. </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><input /></code> “type = picker”.
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.
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.
Registering them adds the necessary event handlers for them to work correctly with the MasterColorPicker framework.
Panels are registered using <code>MasterColorPicker.registerInterfacePanel(<var>……element……</var>)</code>
All <abbr>HTML</abbr> elements that require keyboard “focus”
(such as <code><input type='text|file|number|<var>etc.</var>' /></code> <code><select></code> <code><textarea></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.
You may only want values returned as hexadecimal-<abbr>RGB</abbr>, or whatever.
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.
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.
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><input type='hidden' id='palette_mode' value='hex' /></code>.
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. </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).
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).
You are not being tracked, quantified, or mined for data when visiting our sites.
We hope you enjoy the advertisement-free experience that shuns the growing worldwide corporate-fascism movement.</p>
<p>All content found on this page & 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.
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” & “Firefox” are trademarks of Mozilla Corporation / Mozilla Foundation.</note>
<note>“Google” & “Chrome” are trademarks of Google LLC.</note>
<note>“Opera” & “Opera Mobile” are trademarks of Opera Software ASA.</note>
<note>“Apple” & “Safari” are trademarks of Apple Inc.</note>
<note>“Microsoft,” “Edge,” & “Internet Explorer” are trademarks of Microsoft Corporation.</note>
<note>“Pantone” is a trademark of Pantone LLC.</note>
</p>
</footer>
</body>
</html>