<?php // auto_color_chart.php Copyright © 2012 Joe Golembieski, SoftMoon WebWare
// Pantone® is a Registered Trademark of Pantone LLC
// release 1.0 2-7-2012
/*
Note that these color charts and palettes will work without an enclosing form,
but to retain the settings on the “Spectral” palette (and also which Palette is selected)
this file may be included inside an existing web <form></form>
*/
require_once 'RGBaa.php';
require_once 'lbreak_at.php';
require_once 'file_path_exists.php';
require_once 'include_modules.php';
if (file_path_exists('colorcharts')) include_modules('colorcharts');
?>
<script src='JS_toolbucket/SoftMoon.picker_support.js' type='text/javascript'></script>
<div id='picker_select'>
<label>palette: <select id='palette_select' name='palette' onchange='ColorPicker.chooseTable();'>
<?php foreach (RGBaa::$color_palettes as $palette => $colors) {
echo "<option",($_POST['palette']===$palette) ? " selected='selected'" : "",">$palette</option>\n";} ?>
<option<?php if ($_POST['palette']==='Spectral' or $_POST['palette']=="") echo " selected='selected'"?>>Spectral</option>
<option<?php if ($_POST['palette']==='Flexi') echo " selected='selected'"?>>Flexi</option>
<option<?php if ($_POST['palette']==='MyPalette') echo " selected='selected'"?>>MyPalette</option>
</select></label>
<label>mode<select id='palette_mode' name='palette_mode' onchange='SoftMoon.buildSpectralPalette()'>
<option<?php if ($_POST['palette_mode']==='hex' or $_POST['palette_mode']=="") echo " selected='selected'"?>>hex</option>
<option<?php if ($_POST['palette_mode']==='RGB') echo " selected='selected'"?>>RGB</option>
</select></label>
<label>MyPalette<select name='myPalette'>
<option>right-click</option>
<option>save selected</option>
<option>save all</option>
</select></label>
</div>
<div id='color_picker_wrap'
onclick='ColorPicker.targetElmnt.focus(); return true;'
onmouseover='ColorPicker.fadeout(false)'
onmouseout='ColorPicker.fadeout(true)'>
<?php
$caption='<h6>{$palette} color-picker</h6>click to choose';
foreach (RGBaa::$color_palettes as $palette => $colors) {
if ($paletteName===NULL or $paletteName===$palette):
uksort($colors, 'strcasecmp');
// all-lowercase entries are considered alternative spellings - so ditch ’em:
foreach ($colors as $clr => $rgb) {if (preg_match('/^[a-z]+$/', $clr)) unset($colors[$clr]);} ?>
<table class='color_chart' id='<?php echo $palette; ?>'>
<caption><?php echo is_string($caption) ? preg_replace('/\{\$palette\}/', $palette, $caption) : "$palette colors"; ?></caption>
<tbody>
<tr class='noColor'><td style="border: 2px dotted white"></td><td>none</td><td>—</td><td>—</td></tr>
<script type='text/javascript'>//<![CDATA[
(function() { //build Color Chart
var colors=<?php echo lbreak_at(120, "],", json_encode($colors)); ?>;
for (var c in colors) { clrhex=SoftMoon.rgb_to_hex(colors[c]);
document.write(
'<tr><td style="background-color: #' +clrhex+ '"></td><td>' +c+ '</td><td>' +clrhex+ '</td><td>rgb(' +colors[c][0]+ ', ' +colors[c][1]+ ', ' +colors[c][2]+ ")</td></tr>\n"
);}
}()); //execute this function above
//]]></script>
</tbody>
<?php if (preg_match('/pantone/i', $palette)): ?>
<tfoot>
<tr><td colspan='4'>Pantone® is a Registered Trademark of Pantone LLC</td></tr>
<tr><td colspan='4'>Colors displayed on your monitor may not exactly match official Pantone® colors</td></tr>
</tfoot>
<?php endif; ?>
</table>
<?php endif; } ?>
<script type='text/javascript'>//<![CDATA[
//the chart must be currently displayed to set the width of the color swatches correctly
(function() { //activateColorChart
var colorTable=document.getElementsByTagName('table'), tc=colorTable.length, count, colors, j, i;
for (j=0; j<tc; j++) { if (colorTable[j].className=='color_chart') {
colors=colorTable[j].getElementsByTagName('tbody')[0].getElementsByTagName('td'); count=0;
for (i=0; i<colors.length; i++) {
if (colors[i].previousSibling===null) {
if (colors[i].parentNode.className == ""
|| colors[i].parentNode.className == "noColor")
colors[i].onclick=function() {ColorPicker.addTo(this.nextSibling.firstChild.data, this.parentNode.parentNode.parentNode.id); return false;};
else colors[i].onclick=function() {ColorPicker.addTo(this.nextSibling.nextSibling.firstChild.data, ""); return false;};
if (colors[i].parentNode.offsetHeight>7) colors[i].style.width=(colors[i].parentNode.offsetHeight*1.618).toString() + "px";
if (colors[i].parentNode.className == "noColor")
colors[i].style.border='2px dotted white';
else colors[i].style.backgroundColor='#' + colors[i].nextSibling.nextSibling.firstChild.data; }
else {
if (colors[i].previousSibling.previousSibling===null && colorTable[j].id!=='HTML')
colors[i].onclick=function() {ColorPicker.addTo(this.firstChild.data, this.parentNode.parentNode.parentNode.id); return false;};
else colors[i].onclick=function() {ColorPicker.addTo(this.firstChild.data, ""); return false;} } }
colorTable[0].parentNode.style.display='none'; } }
}()); //execute this anonymous function above
//]]></script>
<table class='palette' id='Spectral'><caption><h6>Spectral Harmonic Palette Creator & Color-Picker</h6>click to choose<span></span></caption>
<thead><tr><td colspan='100'><table>
<tr>
<td colspan='6'><label>hue variety: <input type='range' name='hue_variety' value='<?php echo is_numeric($_POST['hue_variety']) ? $_POST['hue_variety'] : "30";?>' max='100' min='10' step='1' onchange='SoftMoon.buildSpectralPalette()' /></label>
<label>mix variety: <input type='range' name='mix_variety' value='<?php echo is_numeric($_POST['mix_variety']) ? $_POST['mix_variety'] : "7";?>' max='20' min='5' step='1' onchange='SoftMoon.buildSpectralPalette()' /></label><br />
<label>x-shift: <input type='range' name='x_shift' value='<?php echo is_numeric($_POST['x_shift']) ? $_POST['x_shift'] : "0";?>' max='6.28' min='0' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></label>
<label>y-shift: <input type='range' name='y_shift' value='<?php echo is_numeric($_POST['y_shift']) ? $_POST['y_shift'] : "0";?>' max='1' min='0' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></label>
<label>mix shift: <input type='range' name='phase_shift' value='<?php echo is_numeric($_POST['phase_shift']) ? $_POST['phase_shift'] : "4.71";?>' max='9.42' min='0' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></label></td><!-- Opera limits the number of digits in the value,min,max fields -->
</tr>
<tr><th></th><th>channel</th><th>intensity</th><th>variation</th><th>shift</th><th>frequency</th></tr>
<tr style='color:red'><td>RED</td>
<td>
<input type='radio' name='red_c' value='1'<?php if ($_POST['red_c']==='1' or ($_POST['red_c']!=='2' and $_POST['red_c']!=='3')) echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
<input type='radio' name='red_c' value='2'<?php if ($_POST['red_c']==='2') echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
<input type='radio' name='red_c' value='3'<?php if ($_POST['red_c']==='3') echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
</td>
<td><input type='range' name='red_i' value='<?php echo is_numeric($_POST['red_i']) ? $_POST['red_i'] : "128";?>' max='255' min='0' step='1' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='red_v' value='<?php echo is_numeric($_POST['red_v']) ? $_POST['red_v'] : "128";?>' max='255' min='0' step='1' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='red_s' value='<?php echo is_numeric($_POST['red_s']) ? $_POST['red_s'] : "0";?>' max='6.28' min='0' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='red_f' value='<?php echo is_numeric($_POST['red_f']) ? $_POST['red_f'] : "1";?>' max='2' min='0.01' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></td>
</tr>
<tr style='color:lime'><td>GREEN</td>
<td>
<input type='radio' name='grn_c' value='1'<?php if ($_POST['grn_c']==='1') echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
<input type='radio' name='grn_c' value='2'<?php if ($_POST['grn_c']==='2' or ($_POST['grn_c']!=='1' and $_POST['grn_c']!=='3')) echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
<input type='radio' name='grn_c' value='3'<?php if ($_POST['grn_c']==='3') echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
</td>
<td><input type='range' name='grn_i' value='<?php echo is_numeric($_POST['grn_i']) ? $_POST['grn_i'] : "128";?>' max='255' min='0' step='1' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='grn_v' value='<?php echo is_numeric($_POST['grn_v']) ? $_POST['grn_v'] : "128";?>' max='255' min='0' step='1' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='grn_s' value='<?php echo is_numeric($_POST['grn_s']) ? $_POST['grn_s'] : "0";?>' max='6.28' min='0' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='grn_f' value='<?php echo is_numeric($_POST['grn_f']) ? $_POST['grn_f'] : "1";?>' max='2' min='0.01' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></td>
</tr>
<tr style='color:#4040FF'><td>BLUE</td>
<td>
<input type='radio' name='blu_c' value='1'<?php if ($_POST['blu_c']==='1') echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
<input type='radio' name='blu_c' value='2'<?php if ($_POST['blu_c']==='2') echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
<input type='radio' name='blu_c' value='3'<?php if ($_POST['blu_c']==='3' or ($_POST['blu_c']!=='2' and $_POST['blu_c']!=='1')) echo " checked='checked'"; ?> onchange='SoftMoon.buildSpectralPalette()' />
</td>
<td><input type='range' name='blu_i' value='<?php echo is_numeric($_POST['blu_i']) ? $_POST['blu_i'] : "128";?>' max='255' min='0' step='1' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='blu_v' value='<?php echo is_numeric($_POST['blu_v']) ? $_POST['blu_v'] : "128";?>' max='255' min='0' step='1' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='blu_s' value='<?php echo is_numeric($_POST['blu_s']) ? $_POST['blu_s'] : "0";?>' max='6.28' min='0' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></td>
<td><input type='range' name='blu_f' value='<?php echo is_numeric($_POST['blu_f']) ? $_POST['blu_f'] : "1";?>' max='2' min='0.01' step='0.01' onchange='SoftMoon.buildSpectralPalette()' /></td>
</tr>
</table></td></tr></thead>
<tbody>
</tbody>
</table>
<script type='text/javascript'>//<![CDATA[
// SoftMoon.sinebow based on:
// makeColorGradient thanks to: http://www.krazydad.com/makecolors.php
SoftMoon.sinebow=function(settings, phase, callback) { var freq=2*Math.PI/settings.hue_variety;
for (var i = 0; i < settings.hue_variety; ++i) { callback(
Math.max(0, Math.min(255, Math.sin((2-settings.red_f)*i*freq + settings.red_s + phase.r) * settings.red_v + settings.red_i)),
Math.max(0, Math.min(255, Math.sin((2-settings.grn_f)*i*freq + settings.grn_s + phase.g) * settings.grn_v + settings.grn_i)),
Math.max(0, Math.min(255, Math.sin((2-settings.blu_f)*i*freq + settings.blu_s + phase.b) * settings.blu_v + settings.blu_i)) ); } }
SoftMoon.buildSpectralPalette=function() {
var spectral=document.getElementById('Spectral');
var settings=new Object;
if (navigator.userAgent.match( /MSIE/i )) board=SoftMoon.MSIEgetElementsByTagName(spectral.getElementsByTagName('thead')[0], 'input');
else board=spectral.getElementsByTagName('thead')[0].getElementsByTagName('input');
for (var i in board) {
if ( typeof board[i] == 'object' && board[i] instanceof Node
&& (board[i].getAttribute('type')==='range' || board[i].checked) )
switch (typeof board[i].value) {
case 'string': {settings[board[i].name]=parseFloat(board[i].value); break;}
case 'number': {settings[board[i].name]=board[i].value; break;} } }
var palette=spectral.getElementsByTagName('tbody')[1];
var phase, phaseOff, html="", yShift=settings.y_shift*settings.mix_variety*3;
var mFlag=document.getElementById('palette_mode');
mFlag=(mFlag.options[mFlag.selectedIndex].text=='hex');
settings.phase_shift=9.42-settings.phase_shift-Math.PI;
settings.x_shift=6.28-settings.x_shift;
settings.red_c-=1; settings.grn_c-=1; settings.blu_c-=1;
for (i=yShift; i<yShift+settings.mix_variety*3; i++) {
phase=((2*Math.PI/3)/settings.mix_variety)*i;
phaseOff=settings.phase_shift*((settings.mix_variety-i)/settings.mix_variety) + settings.x_shift;
html=html+"<tr>";
SoftMoon.sinebow(settings,
{r:phase*settings.red_c + phaseOff, g:phase*settings.grn_c + phaseOff, b:phase*settings.blu_c + phaseOff},
function(r,g,b) { var clr=SoftMoon.rgb_to_hex([r,g,b]);
html=html+'<td style="background-color:#' +clr+ '" title="' +(mFlag ? clr : (parseInt(r)+', '+parseInt(g)+', '+parseInt(b)))+ '" onclick=\'ColorPicker.addTo(this.title, ""); return false;\' onmouseover="SoftMoon.spectralColor(this.title)" onmouseout=\'SoftMoon.spectralColor.indicator.innerHTML=""\'></td>' } );
html=html+"</tr>\n"; }
if (navigator.userAgent.match( /MSIE/i )) SoftMoon.MSIEsetTBodyInnerHTML(palette, html);
else palette.innerHTML=html; } //by specs, you can not use “innerHTML” until after the page is fully loaded
SoftMoon.spectralColor=function(clr) { var c;
if (clr.indexOf(",") > 0) c=SoftMoon.rgb_to_hex(clr.split(","));
else c=clr;
SoftMoon.spectralColor.indicator.innerHTML=clr + "<span style='background-color: #" + c + "'></span>"; }
SoftMoon.spectralColor.indicator=document.getElementById('Spectral').firstChild.getElementsByTagName('span')[0];
// fix MS Internet Exploder’s lameness -
// - but you will need a JS package such as:
// http://www.frequency-decoder.com/2010/11/18/unobtrusive-slider-control-html5-input-range-polyfill
// to make the <input type='range' /> work
SoftMoon.MSIEsetTBodyInnerHTML=function(tbody, html) {
var temp = SoftMoon.MSIEsetTBodyInnerHTML.temp;
temp.innerHTML = '<table><tbody>' + html + '</tbody></table>';
tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody); }
SoftMoon.MSIEsetTBodyInnerHTML.temp = document.createElement('div');
// fix MS Internet Exploder’s lameness -
// it will not recognize <input type='radio' /> tags when using the native getElementsByTagName() method
SoftMoon.MSIEgetElementsByTagName=function(elmnt, tag) {
var kids=elmnt.childNodes, found=new Array;
for (var i=0; i<kids.length; i++) {
if (kids[i].nodeType==1 && kids[i].nodeName==tag.toUpperCase()) found.push(kids[i]);
else if (kids[i].hasChildNodes()) found=found.concat(arguments.callee(kids[i], tag)); }
return found; }
//]]></script>
<table class='palette' id='Flexi'><caption><h6>Flexi Color Picker</h6>click to choose</caption>
<tbody><tr>
<td id="picker"></td>
<td id="slide"></td>
</tr></tbody>
<tfoot><tr><td colspan='2'>http://www.daviddurman.com/flexi-color-picker</td></tr></tfoot>
</table>
<script type="text/javascript" src="color-pickers/DavidDurman-FlexiColorPicker-ae38173/Flexi_colorpicker.js"></script>
<script type="text/javascript">//<![CDATA[
FlexiColorPicker(
document.getElementById('slide'),
document.getElementById('picker'),
function(hex, hsv, rgb) { var m=document.getElementById('palette_mode');
ColorPicker.addTo( (m.options[m.selectedIndex].text=='hex') ? hex.toUpperCase() : (parseInt(rgb.r)+', '+parseInt(rgb.g)+', '+parseInt(rgb.b)), "");} );
//]]></script>
</div><!-- close color_picker_wrap -->
<script type="text/javascript">//<![CDATA[
with (SoftMoon) { var ColorPicker=new Picker(
document.getElementById('color_picker_wrap'),
{picker_select: document.getElementById('palette_select')} ); }
//]]></script>
|
Stumble It!
Bookmark in del.icio.us
Download
