localstorage fork

author: jules <jules@okfoc.us> 2014-01-20 19:02:51 -0500
committer: jules <jules@okfoc.us> 2014-01-20 19:02:51 -0500
commit: 88e537899767c7b35e9e6f7352345bf15c555278 (patch)
tree: 8137dba9fe24e41c6735aa49928d763616a09beb
parent: 2f81c4d9311309ebcf603bec30a7712bd7a75132 (diff)
3 files changed, 132 insertions, 131 deletions
diff --git a/cgi-bin/javascript_example.js b/cgi-bin/javascript_example.js
deleted file mode 100644
index 1e7e31f..0000000
--- a/cgi-bin/javascript_example.js
+++ /dev/null
@@ -1,39 +0,0 @@
-function save_shader(){
-    typeof shader_id_root == 'undefined' ? shader_id_root = "" : shader_id_root
-    var params = {
-      script : $("#shader").val(),
-      image_url : $("#url").val(),
-      username : user.username,
-      shader_id : shader_id_root 
-    }
-    console.log(params)
-    $.post("/cgi-bin/im/shader/save", params, function(resp){
-      console.log(resp);
-      data = JSON.parse(resp)
-      if (data.ERROR ){
-        alert(data.ERROR)
-        return false
-      }
-      if (! shader_id_root) {
-        shader_id_root = data.id;
-      }
-
-      var blob = dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png"))
-      var form = new FormData();
-  
-      form.append("id", data.id);
-      form.append("qqfile", blob);
-      $.ajax({
-        url: "/cgi-bin/im/shader/thumbnail_upload",
-        type: "POST",
-        data: form,
-        processData: false,
-        contentType: false,
-      }).done(function(resp){
-        console.log(resp);
-      });
-
-    })
-    //maintain the shader_id_root...
-    return shader_id_root; 
-}
diff --git a/cgi-bin/shader_api.js b/cgi-bin/shader_api.js
deleted file mode 100644
index dd43130..0000000
--- a/cgi-bin/shader_api.js
+++ /dev/null
@@ -1,92 +0,0 @@
-;var ShaderAPI = {}
-ShaderAPI.limit = 24
-
-// info - fetch a single shader
-//   id: shader id
-ShaderAPI.info = function(id, cb){
-  ShaderAPI.fetch({
-    f: "info",
-    id: id
-  }, cb)
-}
-
-// all - fetch all shaders
-ShaderAPI.all = function(cb){
-  ShaderAPI.fetch({
-    f: "all"
-  }, cb)
-}
-
-// range - fetch a pageful of results
-//   limit: number of shaders to fetch
-//   offset: number of results to skip
-ShaderAPI.range = function(limit, offset, cb){
-  ShaderAPI.fetch({
-    f: "range",
-    limit: limit || ShaderAPI.limit,
-    last: offset
-  }, cb)
-}
-
-// latest - get the latest N shaders
-//   limit: number of shaders to fetch
-ShaderAPI.latest = function(limit, cb){
-  ShaderAPI.fetch({
-    f: "range",
-    limit: limit || ShaderAPI.limit
-  }, cb)
-}
-
-// page - get a page of N results
-//   page: page number, start counting at 1
-//   limit: number of shaders to fetch
-ShaderAPI.page = function(page, limit, cb){
-  ShaderAPI.fetch({
-    f: "range",
-    last: (page-1) * limit,
-    limit: limit || ShaderAPI.limit
-  }, cb)
-}
-
-// history - get all previous versions of a shader
-//   id: shader id
-ShaderAPI.history = function(id, cb){
-  ShaderAPI.fetch({
-    f: "history",
-    id: id
-  }, cb)
-}
-
-// username - get all ids by a user
-ShaderAPI.username = function(username, cb){
-  ShaderAPI.fetch({
-    f: "username",
-    username: username
-  }, cb)
-}
-
-// list_users - list all users
-ShaderAPI.list_users = function(list_users, cb){
-  ShaderAPI.fetch({
-    f: "list_users"
-  }, cb)
-}
-
-// originals - get the earliest version of all named shaders
-ShaderAPI.originals = function(cb){
-  ShaderAPI.fetch({
-    f: "originals"
-  }, cb)
-}
-
-// fetch - AJAX wrapper
-ShaderAPI.fetch = function(params, cb){
-  $.getJSON("/cgi-bin/im/shader/view", params, function(data){
-    if (data.SUCCESS) {
-      cb(null, data.data)
-    }
-    else if (data.ERROR) {
-      cb(data.ERROR, data.data)
-    }
-  })
-}
diff --git a/dither-localstorage.html b/dither-localstorage.html
new file mode 100644
index 0000000..5e9bff9
--- /dev/null
+++ b/dither-localstorage.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html>
+<head>
+<title>Dither</title>
+<style>
+  form { display: inline-block; }
+  #gallery-images { display: block; max-height: 210px; overflow-y: auto; }
+  #gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; }
+</style>
+</head>
+<body>
+
+<div id="gallery">
+  <form id="gallery-search">
+    <input type="text" id="dumpfm-search-query" value="duck bill">
+    <button id="gallery-search">DUMP SEARCH</button>
+  </form>
+  <button id="gallery-random">IM RANDOM</button>
+  <span id="status"></span>
+  <div id="gallery-images"></div>
+</div>
+
+<div id="dither">
+<button id="random">random</button>
+<button id="pattern2">pattern2</button>
+<button id="pattern3">pattern3</button>
+<button id="pattern4">pattern4</button>
+<button id="pattern2Lite">pattern2lite</button>
+<button id="pattern3Lite">pattern3lite</button>
+<button id="pattern4Lite">pattern4lite</button>
+<button id="floydSteinberg">floyd-steinberg</button>
+<button id="right">right</button>
+</div>
+<div id="images"></div>
+
+
+</body>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/vendor/gif.js"></script>
+<script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
+<script type="text/javascript">
+
+var algo = 'random';
+var url = "img/abyss.png";
+var imgs = []
+var anim = []
+var complete = 0
+var viewport = cq(100, 100)
+$("#images").append(viewport.canvas)
+
+var ui = function(){}
+
+ui.init = function(){
+  gallery.choose = ui.choose
+  gallery.init()
+  ui.bind()
+  ui.animate()
+  asdf.random()
+}
+
+ui.bind = function(){
+  var buttons = $("#dither button")
+  for (var i = 0; i < buttons.length; i++) {
+    (function(n){
+      buttons[n].onclick = function(){
+        algo = buttons[n].id;
+        ui.build()
+      }
+    })(i)
+  }
+}
+
+ui.choose = function(){
+  status("loading image..")
+  loadImage( this.src, ui.ready );
+}
+
+ui.ready = function(){
+  status("ready")
+  loading = false
+  if (window.gif) {
+    frames = gif.frames
+  }
+  else {
+    fc = cq(img.width, img.height)
+    fc.drawImage(img, 0, 0)
+    frames = [ { ctx: fc.context } ]
+  }
+  w = viewport.canvas.width = frames[0].ctx.canvas.width
+  h = viewport.canvas.height = frames[0].ctx.canvas.height
+  ui.build()
+}
+
+ui.build = function (){
+  anim = []
+  for (var i in frames) {
+    anim.push( ui.dither(frames[i].ctx).context )
+  }
+}
+
+ui.animate = function(t){
+  requestAnimationFrame(ui.animate)
+  if (! anim.length) return;
+  
+  if (window.gif && window.gif.currentFrame) {
+    var idx = gif.currentFrame(t)
+    var frame = anim[idx]
+  }
+  else {
+    var frame = anim[0]
+  }
+  viewport.clearRect(0,0,w,h).drawImage(frame.canvas, 0, 0, w, h);
+}
+
+ui.dither = function (frame){
+  var cc = cq(w, h)
+  cc.drawImage(frame.canvas, 0, 0, w, h);
+  cc[algo + "Dither"]( )
+  return cc
+}
+
+function status(s){ $("#status").html(s); console.log(s) }
+
+$(ui.init)
+
+</script>
+</html>
+
author	jules <jules@okfoc.us>	2014-01-20 19:02:51 -0500
committer	jules <jules@okfoc.us>	2014-01-20 19:02:51 -0500
commit	88e537899767c7b35e9e6f7352345bf15c555278 (patch)
tree	8137dba9fe24e41c6735aa49928d763616a09beb
parent	2f81c4d9311309ebcf603bec30a7712bd7a75132 (diff)