1 files changed, 51 insertions, 0 deletions
diff --git a/image.html b/image.html
new file mode 100644
index 0000000..5729d60
--- /dev/null
+++ b/image.html
@@ -0,0 +1,51 @@
+<body>
+<div>
+<input type="text" id="url_el" placeholder="enter a url">
+width <input type="range" min="1" max="120" value="40" id="width_el">
+<span id="width_span"></span>x<span id="height_span"></span>
+</div>
+<div id="image_style"></div>
+<div id="text_style"></div>
+</body>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="js/color_code.js"></script>
+<script>
+var url = 'img/rainwagon.gif'
+var width = parseInt( width_span.innerHTML = width_el.value )
+var width_timeout
+MircColor.fromUrl(url, toCanvas, width)
+
+url_el.addEventListener('change', function(){
+  url = "/cgi-bin/proxy?" + url_el.value
+  MircColor.fromUrl("/cgi-bin/proxy?" + url, toCanvas, width)
+})
+width_el.addEventListener("input", function(){
+  width = parseInt( width_el.value )
+  width_span.innerHTML = width
+  height_span.innerHTML = "..."
+  clearTimeout( width_timeout )
+  width_timeout = setTimeout(function(){
+    MircColor.fromUrl(url, toCanvas, width)
+  }, 300)
+})
+function toCanvas(rows){
+  var px = 8
+  var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d')
+  var rgb_colors = MircColor.colors.map(function(c){ return "rgb(" + c + ")" })
+  canvas.width = rows[0].length * px
+  canvas.height = rows.length * px
+  rows.forEach(function(row, j){
+    row.forEach(function(lex, i){
+      ctx.fillStyle = rgb_colors[lex]
+      ctx.fillRect(i*px,j*px,px,px)
+    })
+  })
+  height_span.innerHTML = rows.length
+  image_style.innerHTML = ""
+  image_style.appendChild(canvas)
+  var span = document.createElement('span')
+  text_style.innerHTML = MircColor.ascii(rows)
+}
+
+</script>
+