image processing

williamngan · Apr 18, 2015 · 2321c92 · 2321c92
1 parent cc3e8ae
commit 2321c92
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 58 deletions.
diff --git a/css/style.css b/css/style.css
@@ -44,8 +44,8 @@ body {
 #svg {
   position: absolute;
   top: 150px;
-  right: 330px;
-  left: 30px;
+  right: 380px;
+  left: 50px;
   bottom: 60px;
   overflow: visible; }
   #svg > svg {
@@ -64,17 +64,18 @@ h1 {
   height: 150px; }
 
 #canvas {
-  position: absolute;
-  top: -10000px;
-  left: -10000px; }
+  padding: 0px 10px 5px 20px; }
 
 #menu {
   position: absolute;
   top: 0;
   right: 0;
-  width: 300px;
+  width: 320px;
   bottom: 0;
-  background-color: #eeeef1; }
+  background-color: #f0f2f7;
+  border-left: 1px solid #e9edf4;
+  padding: 10px;
+  padding-top: 100px; }
   #menu p {
     padding: 0px 10px 5px 20px; }
     #menu p label {
@@ -83,12 +84,24 @@ h1 {
       min-width: 120px;
       color: #888888; }
       #menu p label.checkbox {
+        cursor: pointer;
         line-height: 30px; }
+        #menu p label.checkbox:hover {
+          color: #09f; }
         #menu p label.checkbox > * {
           display: inline-block;
           vertical-align: middle; }
+      #menu p label.sub {
+        margin-bottom: 20px; }
       #menu p label.fileinput {
-        margin-bottom: 10px; }
+        margin-top: 10px; }
+      #menu p label.hint {
+        color: #bbb; }
+      #menu p label.imageSelect {
+        color: #09f;
+        cursor: pointer; }
+        #menu p label.imageSelect:hover {
+          color: #007acc; }
     #menu p input[type="number"] {
       padding: 5px;
       width: 100px; }
@@ -100,8 +113,14 @@ h1 {
   #menu hr {
     margin: 20px;
     border: none;
-    border-top: 1px solid #ddd; }
+    border-top: 1px solid #e2e7f0; }
 
 #preview {
-  width: 150px;
-  max-width: 150px; }
+  position: fixed;
+  top: -10000px;
+  left: -10000px;
+  max-width: 150px;
+  max-height: 150px; }
+
+#imageOnlyControl {
+  display: none; }
diff --git a/css/style.scss b/css/style.scss
@@ -50,7 +50,7 @@ body {
 
 #svg {
   position: absolute;
-  top: $head_h; right: 330px; left: 30px; bottom: 60px;
+  top: $head_h; right: 380px; left: 50px; bottom: 60px;
   overflow: visible;
 
 
@@ -75,14 +75,18 @@ h1 {
 
 
 #canvas {
-  position: absolute;
-  top: -10000px; left: -10000px;
+  //position: absolute;
+  //bottom: 0px; left: 0px;
+  padding: 0px 10px 5px 20px
 }
 
 #menu {
   position: absolute;
-  top: 0; right: 0; width: 300px; bottom: 0;
-  background-color: #eeeef1;
+  top: 0; right: 0; width: 320px; bottom: 0;
+  background-color: darken($bg, 1);
+  border-left: 1px solid darken($bg, 3);
+  padding: 10px;
+  padding-top: 100px;
 
   p {
     padding: 0px 10px 5px 20px;
@@ -94,11 +98,21 @@ h1 {
       color: $grey2;
 
       &.checkbox {
+        cursor: pointer;
+        &:hover { color: #09f;}
         line-height: 30px;
         > * { display: inline-block; vertical-align: middle;}
       }
 
-      &.fileinput { margin-bottom: 10px;}
+      &.sub { margin-bottom: 20px;}
+      &.fileinput { margin-top: 10px;}
+      &.hint { color: #bbb;}
+
+      &.imageSelect {
+        color: #09f;
+        cursor: pointer;
+        &:hover { color: darken(#09f, 10);}
+      }
     }
 
     input[type="number"] {
@@ -119,13 +133,18 @@ h1 {
   hr {
     margin: 20px;
     border: none;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid darken($bg, 5);
   }
 }
 
 
 
 #preview {
-  width: 150px;
-  max-width: 150px;
+  position: fixed;
+  top: -10000px; left: -10000px;
+  max-width: 150px; max-height: 150px;
+}
+
+#imageOnlyControl {
+  display: none;
 }
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
 
 	<link href="css/style.css" type="text/css" rel="stylesheet">
 	<script type="text/javascript" src="js/d3.min.js"></script>
+	<script type="text/javascript" src="js/jsfeat-min.js"></script>
 
 </head>
 <body>
@@ -16,7 +17,7 @@
 		<h1>Kubist</h1>
 	</div>
 
-	<div id="canvas"></div>
+
 
 	<div id="svg">
 
@@ -26,6 +27,22 @@ <h1>Kubist</h1>
 
 
 	<div id="menu">
+		<p>
+			<label class="sub">Select image</label><label>&nbsp;</label>
+
+			<label class="imageSelect" onclick="loadImage(this)" data-id="mao.jpg">A guy</label>
+			<label class="imageSelect" onclick="loadImage(this)" data-id="bauhaus.jpg">A dance</label>
+			<label class="imageSelect" onclick="loadImage(this)" data-id="bay.jpg">A view</label>
+			<label class="hint">Choose your own...</label>
+
+			<label class="fileinput">
+				<input type="file" id="fileInput" />
+			</label>
+
+		</p>
+
+		<hr />
+
 		<p>
 			<label>Points</label>
 			<input type="number" id="pointsInput" value="50" />
@@ -37,7 +54,10 @@ <h1>Kubist</h1>
 				<option value="delaunay">Triangle</option>
 				<option value="voronoi">Cell</option>
 			</select>
-			<label>&nbsp;</label><label class="checkbox"><input type="checkbox" id="gradientInput" /> <span>Color Gradient</span></label>
+			<span id="imageOnlyControl">
+				<label>&nbsp;</label><label class="checkbox"><input type="checkbox" id="gradientInput" /> <span>Color Gradient</span></label>
+				<label>&nbsp;</label><label class="checkbox"><input type="checkbox" id="featureInput" /> <span id="analyzeLabel">Analyze image</span></label>
+			</span>
 		</p>
 
 		<p>
@@ -51,13 +71,10 @@ <h1>Kubist</h1>
 		</p>
 
 
-
 		<hr />
-
 		<p>
-			<label class="fileinput">Image</label>
-			<input type="file" id="fileInput" />
 			<img id="preview" alt="" />
+			<div id="canvas"></div>
 		</p>
 	</div>