diff options
| -rw-r--r-- | public/palette.html | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/public/palette.html b/public/palette.html new file mode 100644 index 0000000..56d113a --- /dev/null +++ b/public/palette.html @@ -0,0 +1,39 @@ +<!doctype html> +<html> +<head> +<title>Palette Test</title> +<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script> +<script type="text/javascript" src="/js/canvasquery.js"></script> +<script type="text/javascript" src="/js/draw.js"></script> +<script type="text/javascript" src="/js/color.js"></script> +<script type="text/javascript" src="/js/util.js"></script> +</head> +<body> +<img src="/img/palette.gif" id="palette"> +</body> +<script type="text/javascript"> +$("#palette").load(function(){ + console.log("hello"); + var offset = $("#palette").offset(); + var paletteImg = $("#palette")[0]; + var palette = cq(paletteImg); + +$("body").append(palette.canvas); + + $("#palette").click(function(e){ + // they are all 8x8 + // the first one starts at (15, 5), next one is 16 pixels down or to the right + // there are 16 rows and 6 columns, so 92 patterns total + var point = new Point(e, offset); + point.subtract({ x: 15, y: 5 }); + point.quantize( 18, 16 ); + point.add({ x: 15, y: 5 }); + + var swatch = palette.clone().crop( point.x, point.y, 8, 8 ); + var swatchURI = swatch.canvas.toDataURL("image/png"); + document.body.style.backgroundImage = 'url(' + swatchURI + ')'; + }); +}); +</script> +</html> + |