Browse files

show hex values in saved slots

  • Loading branch information...
1 parent 77d2368 commit 0e06bd4140d979b766282fe9c4d01652cf832a30 @DTrejo committed Mar 13, 2012
Showing with 73 additions and 27 deletions.
  1. +56 −24 public/index.html
  2. +17 −3 public/js/colorslice.js
View
80 public/index.html
@@ -1,45 +1,77 @@
<!doctype html>
<html lang="en">
- <head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="aristo/css/aristo.css" type="text/css">
- <style type="text/css">
- body {
- margin: 3em auto;
- padding: 0em;
- font-family: Apex,"Helvetica Neue","HelveticaNeue","Lucida Grande", Helvetica, Arial, sans-serif;
- font-size: 100%;
- max-width: 33em;
- color: #222;
- background:#dfdfdf;
- }
- h1 > a {color: #222;text-decoration: none;}
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="aristo/css/aristo.css" type="text/css">
+ <style type="text/css">
+ body {
+ margin: 3em auto;
+ padding: 0em;
+ font-family: Apex,"Helvetica Neue","HelveticaNeue","Lucida Grande", Helvetica, Arial, sans-serif;
+ font-size: 100%;
+ max-width: 33em;
+ color: #222;
+ background: #dfdfdf;
+ }
+ h1 > a {
+ color: #222;
+ text-decoration: none;
+ }
canvas {
- background:#fff;
+ background: #fff;
-moz-border-radius: 3px;
border-radius: 3px;
- cursor:normal;
+ cursor: normal;
}
#colors > p {
border: 1px solid #999;
margin: 1em;
+ font-family: monaco, Andale Mono, "Courier New", monospace;
}
#colors > p > img {
display: inline;
padding: 2px;
}
+ .col3 {
+ width: 100%;
+ display: block;
+ overflow: hidden;
+ }
+ .col3 > div {
+ width: 32%;
+ display: inline-block;
+ }
</style>
- </head>
+</head>
<body>
<h1><a href="http://colorslice.dtrejo.com/">Color Slice</a></h1>
<p>Drag and drop images from your desktop. Click to capture a color.</p>
- <canvas id="screen" width="500" height="500">No canvas support. If you're using IE email the creator of this and tell him he forgot to use IECanvas!</canvas>
- <p>Zoom &mdash; Color Swatch &mdash; Click to save your color!</p>
- <canvas id="zoom" width="100" height="100"></canvas>
- <canvas id="swatch" width="100" height="100"></canvas>
+
+ <canvas id="screen" width="500" height="500">No canvas support. If you're
+ using IE email the creator of this and tell him he forgot to use
+ IECanvas!</canvas>
+ <p>Click to save your color!</p>
+ <div class="col3">
+ <div>
+ <p>Zoom view</p>
+ <canvas id="zoom" width="100" height="100"></canvas>
+ </div>
+ <div>
+ <p>Color Swatch</p>
+ <canvas id="swatch" width="100" height="100"></canvas>
+ </div>
+ <div>
+ <p>Current Color</p>
+ <canvas id="swatch" width="100" height="100"></canvas>
+ </div>
+ </div>
+
+ <!-- saved swatches go here -->
+ <p>Saved Swatches</p>
<div id="colors">
+ <p>(None yet, click a pixel on your image to save one!)</p>
</div>
<h2>Supported Browsers</h2>
@@ -52,8 +84,8 @@
</ul>
<p>Made by <a href="http://dtrejo.com/">David Trejo</a></p>
- <script src="jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/lib/excanvas.compiled.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/colorslice.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery-1.4.2.min.js"></script>
+ <script src="js/lib/excanvas.compiled.js"></script>
+ <script src="js/colorslice.js"></script>
</body>
</html>
View
20 public/js/colorslice.js
@@ -84,12 +84,13 @@ function mouseup(event) {
var imageData = swatchcontext.getImageData(0, 0, 4, 4);
var d = imageData.data;
var colors = [d[0], d[1], d[2], d[3]];
- var color = 'rgba('+ colors.join(', ') +')';
+ var rgba = 'rgba('+ colors.join(', ') + ')';
+ var hex = toHex(rgba);
var miniswatch = $('<img>').attr('src', swatch.toDataURL('image/png'))
.attr('width', 16)
.attr('height', 16);
- var para = $('<p>').text(color)
+ var para = $('<p>').text(rgba + '; /* ' + hex + ' */')
.prepend(miniswatch)
.hide();
$('#colors').prepend(para);
@@ -137,7 +138,7 @@ function crossBrowserElementPos(e) {
e = e || window.event;
var obj = e.target || e.srcElement;
var x = 0, y = 0;
- while(obj.offsetParent) {
+ while (obj.offsetParent) {
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
@@ -168,4 +169,17 @@ if(!window.console) {
this.log = function(str) {};
this.dir = function(str) {};
};
+}
+
+//
+// via http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
+//
+// Usage:
+// equals(colorToHex('rgb(120, 120, 240)'), '#7878f0');
+//
+function toHex(c) {
+ var m = /rgba?\((\d+), (\d+), (\d+)/.exec(c);
+ console.log(m);
+ return m ? '#' + ( m[1] << 16 | m[2] << 8 | m[3] ).toString(16)
+ : c;
}

0 comments on commit 0e06bd4

Please sign in to comment.