mirror of
https://github.com/PitPik/colorPicker.git
synced 2025-07-30 13:24:29 -06:00
Restructuring
…and added path support for non BASE64 URI browsers
This commit is contained in:
peterd
parent
301ac6e3e1
commit
b37a93479e
64
color.html
64
color.html
@ -1,64 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link href="color.css" rel="stylesheet" type="text/css">
|
||||
<title>color_new</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="testPatch"> </div>
|
||||
|
||||
<div id="colorValues"> </div>
|
||||
|
||||
<div id="sliders" class="sliders">
|
||||
<div id="rgbR"><div></div></div>
|
||||
<div id="rgbG"><div></div></div>
|
||||
<div id="rgbB"><div></div></div>
|
||||
|
||||
<div id="hslH"><div></div></div>
|
||||
<div id="hslS"><div></div></div>
|
||||
<div id="hslL"><div></div></div>
|
||||
</div>
|
||||
|
||||
<div id="hsv_map">
|
||||
<canvas id="surface" width="200" height="200"></canvas>
|
||||
<div class="cover"></div>
|
||||
<div class="hsv-cursor"></div>
|
||||
<canvas id="brightness" width="25" height="200"></canvas>
|
||||
<div class="hsv-v-cursor" id="hsv_cursor">
|
||||
<div class="hsv-vl-cursor"></div>
|
||||
<div class="hsv-vr-cursor"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="color_squares">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div id="model_display"></div>
|
||||
|
||||
<!--[if IE]>
|
||||
<object id='wtPlugin' classid='CLSID:092dfa86-5807-5a94-bf3b-5a53ba9e5308'></object>
|
||||
<![endif]-->
|
||||
<!--[if !IE]> <-->
|
||||
<object id="wtPlugin" type="application/x-wacomtabletplugin">
|
||||
<param name="onload" value="pluginLoaded" />
|
||||
</object>
|
||||
<!--> <![endif]-->
|
||||
|
||||
|
||||
<!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->
|
||||
<!--[if IE]><script type="text/javascript" src="excanvas_r3/excanvas.js"></script><![endif]-->
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
<script type="text/javascript" src="tools.js"></script>
|
||||
<script type="text/javascript" src="color_init.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -68,11 +68,13 @@
|
||||
CSSPrefix: 'cp-',
|
||||
scale: 1,
|
||||
allMixDetails: true,
|
||||
alphaBG: 'w'
|
||||
alphaBG: 'w',
|
||||
imagePath: '',
|
||||
// noAlpha: true,
|
||||
// customBG: '#808080'
|
||||
// size: 0,
|
||||
// cmyOnly: false,
|
||||
// initStyle: 'display: none',
|
||||
|
||||
// memoryColors: [{r: 100, g: 200, b: 10}]// , a: 0.5
|
||||
|
||||
@ -88,7 +90,7 @@
|
||||
// noRGBg: false,
|
||||
// noRGBb: false,
|
||||
|
||||
// CSSStrength: 'div.',
|
||||
// ------ CSSStrength: 'div.',
|
||||
// XYZMatrix: XYZMatrix,
|
||||
// XYZReference: {},
|
||||
// grey: grey,
|
||||
@ -305,9 +307,10 @@
|
||||
|
||||
_data._cssFunc = _data._cssFunc.
|
||||
replace(/§/g, prefix).
|
||||
replace('_patches.png', !_isIE ? urlData + _data._patchesPng : '_patches.png').
|
||||
replace('_vertical.png', !_isIE ? urlData + _data._verticalPng : '_vertical.png').
|
||||
replace('_horizontal.png', !_isIE ? urlData + _data._horizontalPng : '_horizontal.png');
|
||||
replace('_patches.png', !_isIE ? urlData + _data._patchesPng : _options.imagePath + '_patches.png').
|
||||
replace('_vertical.png', !_isIE ? urlData + _data._verticalPng : _options.imagePath + '_vertical.png').
|
||||
replace('_horizontal.png', !_isIE ? urlData + _data._horizontalPng :
|
||||
_options.imagePath + '_horizontal.png');
|
||||
if (!style.styleSheet) {
|
||||
style.appendChild(document.createTextNode(_data._cssFunc));
|
||||
}
|
||||
@ -322,9 +325,9 @@
|
||||
style.setAttribute('type', 'text/css');
|
||||
_data._cssMain = _data._cssMain.
|
||||
replace(/§/g, prefix).
|
||||
replace('_bgs.png', !_isIE ? urlData + _data._bgsPng : '_bgs.png').
|
||||
replace('_icons.png', !_isIE ? urlData + _data._iconsPng : '_icons.png').
|
||||
replace('_blank.png', !_isIE ? urlData + _data._blankPng : '_blank.cur').
|
||||
replace('_bgs.png', !_isIE ? urlData + _data._bgsPng : _options.imagePath + '_bgs.png').
|
||||
replace('_icons.png', !_isIE ? urlData + _data._iconsPng : _options.imagePath + '_icons.png').
|
||||
replace('_blank.png', !_isIE ? urlData + _data._blankPng : _options.imagePath + '_blank.cur').
|
||||
replace('"Courier New",', !_isIE ? '' : '"Courier New",');
|
||||
// style.appendChild(document.createTextNode(_data._cssFunc));
|
||||
if (!style.styleSheet) {
|
||||
@ -340,6 +343,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
app.children[0].style.cssText = _options.initStyle || '';
|
||||
|
||||
return (_options.appenTo || document.body).appendChild(app.children[0]);
|
||||
}
|
||||
|
||||
|
||||
@ -181,8 +181,8 @@
|
||||
|
||||
<script type="text/javascript" src="colorPicker.dev.js"></script>
|
||||
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
<script type="text/javascript" src="colorPicker.js"></script>
|
||||
<script type="text/javascript" src="../colors.js"></script>
|
||||
<script type="text/javascript" src="../colorPicker.js"></script>
|
||||
<script type="text/javascript">
|
||||
// var myDevMode = new ColorPicker({
|
||||
// devPicker: document.getElementsByClassName('cp-app')[0],
|
||||
151
developer/colorPicker.sys.css
Normal file
151
developer/colorPicker.sys.css
Normal file
@ -0,0 +1,151 @@
|
||||
.rgb-r .cp-sldl-1,
|
||||
.rgb-g .cp-sldl-1,
|
||||
.rgb-b .cp-sldl-1,
|
||||
.hsv-h .cp-sldl-1, .hsv-h .cp-sldr-1, .hsv-h .cp-sldr-2,
|
||||
.hsv-s .cp-sldr-1,
|
||||
.hsv-v .cp-sldr-1,
|
||||
.hsl-h .cp-sldl-1, .hsl-h .cp-sldr-1, .hsl-h .cp-sldr-2,
|
||||
.hsl-s .cp-sldr-1,
|
||||
.hsl-l .cp-sldr-1,
|
||||
.no-rgb-r .rgb-r .cp-sldr-2, .no-rgb-r .rgb-r .cp-sldr-3, .no-rgb-r .rgb-r .cp-sldr-4,
|
||||
.no-rgb-g .rgb-g .cp-sldr-2, .no-rgb-g .rgb-g .cp-sldr-3, .no-rgb-g .rgb-g .cp-sldr-4,
|
||||
.no-rgb-b .rgb-b .cp-sldr-2, .no-rgb-b .rgb-b .cp-sldr-3, .no-rgb-b .rgb-b .cp-sldr-4 {
|
||||
visibility: hidden;
|
||||
}
|
||||
.rgb-r .cp-sldl-2, .rgb-r .cp-sldl-3,
|
||||
.rgb-g .cp-sldl-2, .rgb-g .cp-sldl-3,
|
||||
.rgb-b .cp-sldl-2, .rgb-b .cp-sldl-3 {
|
||||
background-image: url(_patches.png);
|
||||
}
|
||||
.cp-slds div {
|
||||
background-image: url(_vertical.png);
|
||||
}
|
||||
.hsv-h .cp-sldl-2, .hsv-s .cp-sldl-1, .hsv-v .cp-sldl-1,
|
||||
.hsl-h .cp-sldl-2, .hsl-s .cp-sldl-1, .hsl-l .cp-sldl-1 {
|
||||
background-image: url(_horizontal.png);
|
||||
}
|
||||
.hsv-s .cp-sldr-4, .hsv-v .cp-sldl-3, .hsl-s .cp-sldr-4, .hsl-l .cp-sldl-3 {
|
||||
background: #000;
|
||||
}
|
||||
.hsl-s .cp-sldr-3, .hsl-l .cp-sldl-4 {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.rgb-r .cp-sldr-1 {background-color: #F00;}
|
||||
.rgb-g .cp-sldr-1 {background-color: #0F0;}
|
||||
.rgb-b .cp-sldr-1 {background-color: #00F;}
|
||||
/* ---- RGB R ---- */
|
||||
.rgb-r .cp-sldl-2 {background-position: -1664px 0px;}
|
||||
.rgb-r .cp-sldl-3 {background-position: -896px 0px;}
|
||||
.rgb-r .cp-sldr-1 {background-position: 0px -2432px;}
|
||||
.rgb-r .cp-sldr-2 {background-position: 0px -2944px;}
|
||||
.rgb-r .cp-sldr-3 {background-position: 0px -4480px;}
|
||||
.rgb-r .cp-sldr-4 {background-position: 0px -3202px;}
|
||||
/* ---- RGB G ---- */
|
||||
.rgb-g .cp-sldl-2 {background-position: -640px 0px;}
|
||||
.rgb-g .cp-sldl-3 {background-position: -384px 0px;}
|
||||
.rgb-g .cp-sldr-1 {background-position: 0px -2432px;}
|
||||
.rgb-g .cp-sldr-2 {background-position: 0px -4736px;}
|
||||
.rgb-g .cp-sldr-3 {background-position: 0px -3968px;}
|
||||
.rgb-g .cp-sldr-4 {background-position: 0px -3712px;}
|
||||
/* ---- RGB B ---- */
|
||||
.rgb-b .cp-sldl-2 {background-position: -1152px 0px;}
|
||||
.rgb-b .cp-sldl-3 {background-position: -1408px 0px;}
|
||||
.rgb-b .cp-sldr-1 {background-position: 0px -2432px;}
|
||||
.rgb-b .cp-sldr-2 {background-position: 0px -3456px;}
|
||||
.rgb-b .cp-sldr-3 {background-position: 0px -4224px;}
|
||||
.rgb-b .cp-sldr-4 {background-position: 0px -2688px;}
|
||||
/* ---- HSV H ---- */
|
||||
.hsv-h .cp-sldl-2 {background-position: 0px 0px;}
|
||||
.hsv-h .cp-sldl-3 {background-position: 0px -2432px;}
|
||||
.hsv-h .cp-sldr-4 {background-position: 0px -1664px;}
|
||||
/* ---- HSV S ---- */
|
||||
.hsv-s .cp-sldl-1 {background-position: -256px 0px;}
|
||||
.hsv-s .cp-sldl-2 {background-position: 0px -2432px;}
|
||||
.hsv-s .cp-sldl-3 {background-position: 0px -2176px;}
|
||||
.hsv-s .cp-sldr-2 {background-position: 0px -1920px;}
|
||||
/* ---- HSV B ---- */
|
||||
.hsv-v .cp-sldl-1 {background-position: -256px 0px;}
|
||||
.hsv-v .cp-sldl-2 {background-position: 0px -1920px;}
|
||||
.hsv-v .cp-sldr-2 {background-position: 0px -2432px;}
|
||||
.hsv-v .cp-sldr-4 {background-position: 0px -2176px;}
|
||||
/* ---- HSL H ---- */
|
||||
.hsl-h .cp-sldl-2 {background-position: -768px 0px;}
|
||||
.hsl-h .cp-sldl-3 {background-position: 0px -5184px;}
|
||||
.hsl-h .cp-sldr-4 {background-position: 0px -1664px;}
|
||||
/* ---- HSL S ---- */
|
||||
.hsl-s .cp-sldl-1 {background-position: -256px 0px;}
|
||||
.hsl-s .cp-sldl-2 {background-position: 0px -5184px;}
|
||||
.hsl-s .cp-sldl-3 {background-position: 0px -2176px;}
|
||||
.hsl-s .cp-sldr-2 {background-position: 0px -5824px;}
|
||||
/* ---- HSL L ---- */
|
||||
.hsl-l .cp-sldl-1 {background-position: -256px 0px;}
|
||||
.hsl-l .cp-sldl-2 {background-position: 0px -5824px;}
|
||||
.hsl-l .cp-sldr-2 {background-position: 0px -5184px;}
|
||||
.hsl-l .cp-sldr-4 {background-position: 0px -2176px;}
|
||||
/* ---- RGB R ---- */
|
||||
.S .rgb-r .cp-sldl-2 {background-position: -128px -128px;}
|
||||
.S .rgb-r .cp-sldl-3 {background-position: 0px 0px;}
|
||||
.S .rgb-r .cp-sldr-1 {background-position: 0px -1408px;}
|
||||
.S .rgb-r .cp-sldr-2 {background-position: 0px -128px;}
|
||||
.S .rgb-r .cp-sldr-3 {background-position: 0px -896px;}
|
||||
.S .rgb-r .cp-sldr-4 {background-position: 0px -256px;}
|
||||
/* ---- RGB G ---- */
|
||||
.S .rgb-g .cp-sldl-2 {background-position: -256px -128px;}
|
||||
.S .rgb-g .cp-sldl-3 {background-position: -256px 0px;}
|
||||
.S .rgb-g .cp-sldr-1 {background-position: 0px -1408px;}
|
||||
.S .rgb-g .cp-sldr-2 {background-position: 0px -1024px;}
|
||||
.S .rgb-g .cp-sldr-3 {background-position: 0px -640px;}
|
||||
.S .rgb-g .cp-sldr-4 {background-position: 0px -512px;}
|
||||
/* ---- RGB B ---- */
|
||||
.S .rgb-b .cp-sldl-2 {background-position: -128px 0px;}
|
||||
.S .rgb-b .cp-sldl-3 {background-position: 0px -128px;}
|
||||
.S .rgb-b .cp-sldr-1 {background-position: 0px -1408px;}
|
||||
.S .rgb-b .cp-sldr-2 {background-position: 0px -384px;}
|
||||
.S .rgb-b .cp-sldr-3 {background-position: 0px -768px;}
|
||||
.S .rgb-b .cp-sldr-4 {background-position: 0px 0px;}
|
||||
/* ---- HSV H ---- */
|
||||
.S .hsv-h .cp-sldl-2 {background-position: -640px 0px;}
|
||||
.S .hsv-h .cp-sldl-3 {background-position: 0px -1408px;}
|
||||
.S .hsv-h .cp-sldr-4 {background-position: 0px -1536px;}
|
||||
/* ---- HSV S ---- */
|
||||
.S .hsv-s .cp-sldl-1 {background-position: -512px 0px;}
|
||||
.S .hsv-s .cp-sldl-2 {background-position: 0px -1408px;}
|
||||
.S .hsv-s .cp-sldl-3 {background-position: 0px -1280px;}
|
||||
.S .hsv-s .cp-sldr-2 {background-position: 0px -1152px;}
|
||||
/* ---- HSV B ---- */
|
||||
.S .hsv-v .cp-sldl-1 {background-position: -512px 0px;}
|
||||
.S .hsv-v .cp-sldl-2 {background-position: 0px -1152px;}
|
||||
.S .hsv-v .cp-sldr-2 {background-position: 0px -1408px;}
|
||||
.S .hsv-v .cp-sldr-4 {background-position: 0px -1280px;}
|
||||
/* ---- HSL H ---- */
|
||||
.S .hsl-h .cp-sldl-2 {background-position: -1024px 0px;}
|
||||
.S .hsl-h .cp-sldl-3 {background-position: 0px -5440px;}
|
||||
.S .hsl-h .cp-sldr-4 {background-position: 0px -1536px;}
|
||||
/* ---- HSL S ---- */
|
||||
.S .hsl-s .cp-sldl-1 {background-position: -512px 0px;}
|
||||
.S .hsl-s .cp-sldl-2 {background-position: 0px -5440px;}
|
||||
.S .hsl-s .cp-sldl-3 {background-position: 0px -1280px;}
|
||||
.S .hsl-s .cp-sldr-2 {background-position: 0px -5696px;}
|
||||
/* ---- HSL L ---- */
|
||||
.S .hsl-l .cp-sldl-1 {background-position: -512px 0px;}
|
||||
.S .hsl-l .cp-sldl-2 {background-position: 0px -5696px;}
|
||||
.S .hsl-l .cp-sldr-2 {background-position: 0px -5440px;}
|
||||
.S .hsl-l .cp-sldr-4 {background-position: 0px -1280px;}
|
||||
/* ---- HSV S ---- */
|
||||
.XXS .hsv-s .cp-sldl-2 {background-position: 0px -5120px;}
|
||||
.XXS .hsv-s .cp-sldl-3 {background-position: 0px -5056px;}
|
||||
.XXS .hsv-s .cp-sldr-2 {background-position: 0px -4992px;}
|
||||
/* ---- HSV B ---- */
|
||||
.XXS .hsv-v .cp-sldl-2 {background-position: 0px -4992px;}
|
||||
.XXS .hsv-v .cp-sldr-2 {background-position: 0px -5120px;}
|
||||
.XXS .hsv-v .cp-sldr-4 {background-position: 0px -5056px;}
|
||||
/* ---- HSL S ---- */
|
||||
.XXS .hsl-s .cp-sldl-2 {background-position: 0px -5568px;}
|
||||
.XXS .hsl-s .cp-sldl-3 {background-position: 0px -5056px;}
|
||||
.XXS .hsl-s .cp-sldr-2 {background-position: 0px -5632px;}
|
||||
/* ---- HSL L ---- */
|
||||
.XXS .hsl-l .cp-sldl-2 {background-position: 0px -5632px;}
|
||||
.XXS .hsl-l .cp-sldl-3 {background-position: 0px -5056px;}
|
||||
.XXS .hsl-l .cp-sldr-2 {background-position: 0px -5568px;}
|
||||
.XXS .hsl-l .cp-sldr-4 {background-position: 0px -5056px;}
|
||||
48
developer/fusion.html
Normal file
48
developer/fusion.html
Normal file
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>fusion technologie</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="myImage" style="width: 256px; height: 256px;"></img>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var myImage = document.getElementById('myImage'),
|
||||
width = 256,
|
||||
height = 1,
|
||||
x = 0, count = 0,
|
||||
|
||||
canvas = document.createElement('canvas'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
imageData = ctx.createImageData(width, height),
|
||||
data = imageData.data,
|
||||
base64TXT = '';
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
for (x = 0; x < 255; x++) {
|
||||
count = 0;
|
||||
data[(x * 4) + count++] = 0;
|
||||
data[(x * 4) + count++] = 0;
|
||||
data[(x * 4) + count++] = 0;
|
||||
data[(x * 4) + count++] = 255 - x;
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
base64TXT = canvas.toDataURL("image/png");
|
||||
|
||||
console.log('horiontal:' + base64TXT.length);
|
||||
|
||||
myImage.style.backgroundImage = 'url(' + base64TXT + ')';
|
||||
|
||||
})(window);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
20
developer/patches.html
Normal file
20
developer/patches.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
Xbackground: #fff url(raster.png);
|
||||
}
|
||||
</style>
|
||||
<title>patches</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<canvas id="shades" style="display: none"></canvas>
|
||||
<img id="MyPix" style="background: #fff url(raster.png);"></img>
|
||||
|
||||
<script type="text/javascript" src="patches.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
43
developer/patches.js
Normal file
43
developer/patches.js
Normal file
@ -0,0 +1,43 @@
|
||||
;(function(window, undefined){
|
||||
"use strict"
|
||||
|
||||
var shades = document.getElementById('shades'),
|
||||
ctx = shades.getContext('2d'),
|
||||
myImage,
|
||||
counter = 1,
|
||||
scale = 1,
|
||||
dim = 256 / scale,
|
||||
DIM = 255,
|
||||
imageData = ctx.createImageData(dim * counter, dim),
|
||||
data = imageData.data,
|
||||
x = 0, y = 0, count = 0, z = 0;
|
||||
|
||||
shades.width = dim * counter;
|
||||
shades.height = dim;
|
||||
|
||||
for (x = 0; x < dim; x += 1) {
|
||||
for (y = 0; y < dim; y += 1) {
|
||||
count = (x * dim * 4 * counter) + (y * 4);
|
||||
z = 0;
|
||||
|
||||
|
||||
// data[z + count++] = DIM - x * scale;
|
||||
// data[z + count++] = DIM - x * scale;
|
||||
// data[z + count++] = DIM - x * scale;
|
||||
// data[z + count++] = Math.abs(DIM - x * 2 * scale);
|
||||
|
||||
data[z + count++] = 128; // 127 ???
|
||||
data[z + count++] = 128;
|
||||
data[z + count++] = 128;
|
||||
data[z + count++] = Math.abs(DIM - y * scale);
|
||||
|
||||
z += DIM * 4;
|
||||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
|
||||
myImage = shades.toDataURL("image/png");
|
||||
console.log(myImage.length)
|
||||
document.getElementById("MyPix").src = myImage;
|
||||
})(window);
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 102 B After Width: | Height: | Size: 102 B |
|
Before Width: | Height: | Size: 70 B After Width: | Height: | Size: 70 B |
BIN
images/_horizontal.png
Normal file
BIN
images/_horizontal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 B |
|
Before Width: | Height: | Size: 594 B After Width: | Height: | Size: 594 B |
BIN
images/_patches.png
Normal file
BIN
images/_patches.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
images/_vertical.png
Normal file
BIN
images/_vertical.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -2,8 +2,8 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<!-- <link href="colorPicker.sys.css" rel="stylesheet" type="text/css"> -->
|
||||
<link href="colorPicker.css" rel="stylesheet" type="text/css">
|
||||
<!-- <link href="developer/colorPicker.sys.css" rel="stylesheet" type="text/css"> -->
|
||||
<!-- <link href="developer/colorPicker.css" rel="stylesheet" type="text/css"> -->
|
||||
<link href="index.css" rel="stylesheet" type="text/css">
|
||||
<title>colorPicker_new</title>
|
||||
</head>
|
||||
@ -57,8 +57,8 @@
|
||||
|
||||
<!-- <div id="model_display"></div> -->
|
||||
<!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->
|
||||
<!-- <script type="text/javascript" src="color.ext.js"></script> -->
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
|
||||
<script type="text/javascript" src="colors.js"></script>
|
||||
<!-- script type="text/javascript" src="tools.js"></script -->
|
||||
<script type="text/javascript" src="colorPicker.data.js"></script>
|
||||
<script type="text/javascript" src="colorPicker.js"></script>
|
||||
|
||||
33
index.js
33
index.js
@ -446,6 +446,7 @@
|
||||
isColorPicker = colorSourceSelector.value === 'ColorPicker';
|
||||
|
||||
myColor = window.myColor = color_Colors;
|
||||
// color_ColorPicker.nodes.colorPicker.style.cssText = '';
|
||||
// mySecondColor = window.mySecondColor = new ColorPicker({instanceName: 'mySecondColor'});
|
||||
|
||||
// in case ColorPicker is not there...
|
||||
@ -468,7 +469,9 @@
|
||||
}
|
||||
|
||||
|
||||
function conversionTest () {
|
||||
function conversionTest (skipDisplay) {
|
||||
if (skipDisplay) console.time('convertAll');
|
||||
|
||||
// conversion test
|
||||
var convert = myColor.color ? myColor.color.convertColor : myColor.convertColor,
|
||||
x = 0.85, y = 0.33, z = 0.23, k = 0.1,
|
||||
@ -506,20 +509,22 @@
|
||||
// do nothing
|
||||
} else {
|
||||
value = convert(color, fromMode + '2' + toMode);
|
||||
colorOut = [];
|
||||
for (var s in color) {
|
||||
colorOut.push(s + ': ' + color[s]);
|
||||
}
|
||||
colorOut = fromMode === 'HEX' ? '"' + color + '"' : '{' + colorOut.join(', ') + '}';
|
||||
if (!skipDisplay) {
|
||||
colorOut = [];
|
||||
for (var s in color) {
|
||||
colorOut.push(s + ': ' + color[s]);
|
||||
}
|
||||
colorOut = fromMode === 'HEX' ? '"' + color + '"' : '{' + colorOut.join(', ') + '}';
|
||||
|
||||
valueOut = [];
|
||||
for (var s in value) {
|
||||
valueOut.push(s + ': ' + value[s]);
|
||||
}
|
||||
valueOut = toMode === 'HEX' ? '"' + value + '"' : '{' + valueOut.join(', ') + '}';
|
||||
valueOut = [];
|
||||
for (var s in value) {
|
||||
valueOut.push(s + ': ' + value[s]);
|
||||
}
|
||||
valueOut = toMode === 'HEX' ? '"' + value + '"' : '{' + valueOut.join(', ') + '}';
|
||||
|
||||
console.log('convertColor(' + colorOut + ', "' + fromMode +
|
||||
'2' + toMode + '") = ' + valueOut);
|
||||
console.log('convertColor(' + colorOut + ', "' + fromMode +
|
||||
'2' + toMode + '") = ' + valueOut);
|
||||
}
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
@ -528,6 +533,8 @@
|
||||
}
|
||||
}
|
||||
console.log('Tested ' + counter + ' conversion combinations (excluding same to same)');
|
||||
if (!skipDisplay) console.log('Call conversionTest(true) for timer (incl. calculations in for loops though...)');
|
||||
if (skipDisplay) console.timeEnd('convertAll');
|
||||
}
|
||||
|
||||
window.conversionTest = conversionTest;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user