@ -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>
|
@ -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 |
After Width: | Height: | Size: 392 B |
Before Width: | Height: | Size: 594 B After Width: | Height: | Size: 594 B |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 1.2 KiB |