1 files changed, 27 insertions, 12 deletions
diff --git a/image.html b/image.html
index 0ddae0a..4a7fbfd 100644
--- a/image.html
+++ b/image.html
@@ -1,16 +1,26 @@
+<style>
+label { min-width: 40px; display: inline-block; }
+</style>
 <body>
-<div>
-<input type="text" id="url_el" placeholder="enter a url">
-<br>
-width <input type="range" min="1" max="120" value="40" id="width_el">
-<span id="width_span"></span>x<span id="height_span"></span>
-</br>
-ratio <input type="range" min="0.0" max="8" value="2" step="0.005" id="ratio_el">
-nearest neighbor <input type="checkbox" checked id="nn_el">
-</div>
-<div id="image_style"></div>
-<input type="text" id="text_style">
+  <div>
+    <input type="text" id="url_el" placeholder="enter a url">
+    <br>
+    <label for="width_el">width</label> <input type="range" min="1" max="120" value="40" id="width_el">
+    <span id="width_span"></span>x<span id="height_span"></span>
+    </br>
+    <label for="ratio_el">ratio</label> <input type="range" min="0.0" max="8" value="2" step="0.005" id="ratio_el">
+    <label for="nn_el">nearest neighbor</label> <input type="checkbox" checked id="nn_el">
+    <label for="palette_el">palette</label>
+    <select id="palette_el">
+      <option default value="colors">all colors</label>
+      <option value="hues">hues only</label>
+      <option value="grays">grayscale</label>
+    </select>
+  </div>
+  <div id="image_style"></div>
+  <input type="text" id="text_style">
 </body>
+
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="js/color_code.js"></script>
 <script>
@@ -31,7 +41,12 @@ url_el.addEventListener('change', function(){
 })
 nn_el.addEventListener('change', function(){
   nn = $(nn_el).prop('checked')
-    MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+  MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+})
+palette_el.addEventListener('change', function(){
+  var palette = $(palette_el).val()
+  MircColor.set_colors( MircColor[palette] )
+  MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
 })
 ratio_el.addEventListener("input", function(){
   ratio = parseFloat( ratio_el.value )