initial commit

waldyrious · Apr 10, 2016 · c080754 · c080754
commit c080754
Show file tree

Hide file tree

Showing 12 changed files with 6,754 additions and 0 deletions.
diff --git a/HCL Viewer.htm b/HCL Viewer.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HCL Viewer</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="dependencies/jquery-ui.css">
+ <script type="text/javascript" src="dependencies/jquery_002.js"></script>
+ <script type="text/javascript" src="dependencies/jquery-ui.js"></script>
+ <script type="text/javascript" src="dependencies/jquery.js"></script>
+ <script type="text/javascript" src="dependencies/three.js"></script>
+ <script type="text/javascript" src="hclController.js"></script>
+ <script type="text/javascript" src="lch2rgb.js"></script>
+ <script type="text/javascript" src="data.js"></script>
+ <script type="text/javascript" src="colorSurface.js"></script>
+ <script type="text/javascript" src="colorCanvas.js"></script>
+ <link rel="stylesheet" href="color.css">
+</head>
+<body>
+
+ <h3>HCL Viewer</h3>
+
+ <div id="topContainer" style="height:500px">
+ <div class="modebox">
+ <span class="slabel">Mode:</span>
+ <span class="modeBtn" id="clBtn"><span class="btnLbl">CxL</span></span>
+ <span class="modeBtn" id="hlBtn"><span class="btnLbl">HxL</span></span>
+ <span class="modeBtn" id="hcBtn"><span class="btnLbl">HxC</span></span>
+ </div>
+ <div class='sliderbox'><span class="slabel">H</span><span class="svalue" id="hvalue"></span><div id="hSlider" class="hclSlider"></div></div>
+ <div class='sliderbox'><span class="slabel">C</span><span class="svalue" id="cvalue"></span><div id="cSlider" class="hclSlider"></div></div>
+ <div class='sliderbox'><span class="slabel">L</span><span class="svalue" id="lvalue"></span><div id="lSlider" class="hclSlider"></div></div>
+
+ <div id="threed"></div><canvas id="canvas" ></canvas>
+ <p><a href="notes.html">Implementation notes.</a></p>
+ </div>
+
+ <script type="text/javascript">
+ var canvasWidth, canvasHeight;
+ var responsiveListeners = [];
+ function addResponsiveListener(list) {
+ responsiveListeners.push(list);
+ }
+ $(window).resize(function() {
+ calcCanvasSize();
+ responsiveListeners.forEach(function(list) {
+ list();
+ });
+ })
+
+ function calcCanvasSize() {
+ var w = window.innerWidth;
+ if (w < 500) {
+ // canvasWidth = canvasHeight = Math.floor(w*0.7); 
+ canvasWidth = canvasHeight = Math.floor(Math.min(w-10, window.innerHeight*0.5)); 
+ } else if (w < 768) {
+ canvasWidth = canvasHeight = Math.floor(w * 0.45);
+ } else {
+ canvasWidth = canvasHeight = Math.floor((w - 220) * 0.5);
+ // canvasWidth = canvasHeight = Math.min(window.innerWidth*0.35, 500);
+ }
+ $('#threed').css({'width': canvasWidth + 'px', 'height': canvasHeight + 'px'});
+ $('#canvas').css({'width': canvasWidth + 'px', 'height': canvasHeight + 'px'});
+ }
+ calcCanvasSize();
+
+ var hclController = hcl_controller();
+ buildColorSurface();
+ buildColorCanvas();
+ </script>
+
+</body>
+</html>
diff --git a/color.css b/color.css
@@ -0,0 +1,149 @@
+html {
+ font-family: Verdana, Arial, sans-serif;
+}
+
+@media screen and (max-width: 767px) {
+ html {
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ border: none; 
+ }
+
+ .sliderbox {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+ vertical-align: middle;
+ width: 100%;
+ }
+
+ .modebox {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: stretch;
+ vertical-align: middle;
+ width: 100%;
+ } 
+
+ .modeBtn {
+ flex-basis: auto;
+ flex-grow: 1;
+ text-align: center;
+ border: 1px solid #cccccc;
+ }
+
+ .btnLbl {
+ padding-top: 20%;
+ padding-bottom: 20%;
+ line-height: 40px;
+ }
+
+ .slabel {
+ margin-right: 5px;
+ }
+
+ .svalue {
+ margin-right: 5px;
+ min-width: 3em;
+ }
+
+ #threed {
+ display: inline-block;
+ }
+ #canvas {
+ display: inline-block;
+ }
+}
+
+@media screen and (max-width: 500px) {
+ #threed {
+ display: block;
+ margin: auto;
+ }
+ #canvas {
+ display: block;
+ margin: auto;
+ }
+}
+
+
+@media screen and (min-width: 768px) {
+ .sliderbox {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ vertical-align: top;
+ height: 100%;
+ }
+
+ .modebox {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: stretch;
+ vertical-align: top;
+ height: 100%;
+ } 
+
+ .modeBtn {
+ flex-basis: auto;
+ flex-grow: 1;
+ text-align: center;
+ border: 1px solid #cccccc;
+/* padding-top: 50%;
+ padding-bottom: 50%;*/
+ }
+
+ .btnLbl {
+ line-height: 50px;
+ }
+
+ .svalue {
+ min-width: 2em;
+ margin-bottom: 5px;
+ }
+
+ #threed {
+ display: inline-block;
+ }
+ #canvas {
+ display: inline-block;
+ }
+}
+
+
+
+.modeBtn.active {
+ background-color: #aaaaaa;
+}
+
+.sliderbox .slabel {
+ flex-basis: auto;
+ flex-grow: 0;
+ text-align: center;
+ font-weight: bold;
+}
+
+.slabel.disabled {
+ color: #ccc;
+}
+
+.sliderbox .svalue {
+ flex-basis: auto;
+ flex-grow: 0;
+ text-align: center;
+}
+
+.svalue.disabled {
+ color: #ccc;
+}
+
+
+.sliderbox .hclSlider {
+ flex-grow: 1;
+}
+
diff --git a/colorCanvas.js b/colorCanvas.js
@@ -0,0 +1,124 @@
+function buildColorCanvas() {
+ var canvas = document.getElementById('canvas');
+ var ctx = canvas.getContext('2d');
+
+ // L : 0..100
+ // C : 0..128
+ // H : 0..360
+
+ function drawHL() {
+ var img = ctx.createImageData(canvas.width, canvas.height);
+ var pix = img.data;
+ var width = canvas.width;
+ var height = canvas.height;
+
+ // draw HxL cylinder
+ var C = hclController.c();
+ for (var i=0; i < height; i++) {
+ var L = ((height - i) / height) * 100;
+ for (var j=0; j < width; j++) {
+ var H = (j / width) * 360; 
+ var rgb = lch2rgb(L, C, H);
+ if (!rgb.clipped) {
+ var p = ((i * width) + j) * 4;
+ pix[p] = rgb[0];
+ pix[p+1] = rgb[1];
+ pix[p+2] = rgb[2];
+ pix[p+3] = 255;
+ }
+ }
+ }
+ ctx.putImageData(img, 0, 0);
+ }
+
+ function drawCL() {
+ var img = ctx.createImageData(canvas.width, canvas.height);
+ var pix = img.data;
+ var width = canvas.width;
+ var height = canvas.height;
+
+ // draw HxL cylinder
+ var H = hclController.h();
+ for (var i=0; i < height; i++) {
+ var L = ((height - i) / height) * 100;
+ for (var j=0; j < width; j++) {
+ var C = (j / width) * 140; 
+ var rgb = lch2rgb(L, C, H);
+ if (!rgb.clipped) {
+ var p = ((i * width) + j) * 4;
+ pix[p] = rgb[0];
+ pix[p+1] = rgb[1];
+ pix[p+2] = rgb[2];
+ pix[p+3] = 255;
+ }
+ }
+ }
+ ctx.putImageData(img, 0, 0);
+ }
+
+ function drawHC() {
+ var img = ctx.createImageData(canvas.width, canvas.height);
+ var pix = img.data;
+ var width = canvas.width;
+ var height = canvas.height;
+
+ var h2 = height * 0.5;
+ var w2 = width * 0.5;
+ var TWO_PI = Math.PI + Math.PI;
+
+ // draw HxL cylinder
+ var L = hclController.l();
+ for (var i=0; i < height; i++) {
+ var ry = h2 - i;
+ var pctY = ry / h2;
+ for (var j=0; j < width; j++) {
+ var rx = j - w2;
+ var pctX = rx / w2;
+ var C = Math.sqrt(pctX*pctX + pctY*pctY) * 140;
+ var H = Math.atan2(ry, rx);
+ // if (H < 0) {
+ // H += Math.PI + Math.PI;
+ // }
+ H = H / TWO_PI * 360;
+ var rgb = lch2rgb(L, C, H);
+ if (!rgb.clipped) {
+ var p = ((i * width) + j) * 4;
+ pix[p] = rgb[0];
+ pix[p+1] = rgb[1];
+ pix[p+2] = rgb[2];
+ pix[p+3] = 255;
+ }
+ }
+ }
+ ctx.putImageData(img, 0, 0);
+ }
+
+
+ function redraw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ switch (hclController.mode()) {
+ case 'hl':
+ drawHL();
+ break;
+ case 'cl':
+ drawCL();
+ break;
+ case 'hc':
+ drawHC();
+ break;
+ }
+ }
+
+ hclController.addListener(function() {
+ redraw();
+ });
+
+ function responsive() {
+ canvas.width = canvasWidth;
+ canvas.height = canvasHeight;
+ redraw(); 
+ }
+ addResponsiveListener(responsive);
+ responsive();
+
+}