Restructuring

…and added path support for non BASE64 URI browsers
pull/16/head
peterd 10 years ago
parent 301ac6e3e1
commit b37a93479e

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

@ -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;}

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

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 392 B

Before

Width:  |  Height:  |  Size: 594 B

After

Width:  |  Height:  |  Size: 594 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

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>

@ -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(', ') + '}';
valueOut = [];
for (var s in value) {
valueOut.push(s + ': ' + value[s]);
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(', ') + '}';
console.log('convertColor(' + colorOut + ', "' + fromMode +
'2' + toMode + '") = ' + valueOut);
}
valueOut = toMode === 'HEX' ? '"' + value + '"' : '{' + valueOut.join(', ') + '}';
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…
Cancel
Save