dumping color codes to irc

1 files changed, 167 insertions, 0 deletions

diff --git a/public/assets/js/lib/views/PhotoView.js b/public/assets/js/lib/views/PhotoView.js
new file mode 100644
index 0000000..e7b0732
--- /dev/null
+++ b/public/assets/js/lib/views/PhotoView.js
@@ -0,0 +1,167 @@
+var PhotoView = (function(){
+
+  var hue = 0, sat = 0, lum = 0
+  var nn, invert, width
+  var timeout
+
+  var PhotoView = View.extend({
+
+    el: "#photo",
+  
+    events: {
+      "change #width_el": "updateWidth",
+      "change #ratio_el": "updateRatio",
+      "change #hue_el": "updateHue",
+      "change #saturation_el": "updateSat",
+      "change #luminance_el": "updateLum",
+      "change #invert_el": "updateInvert",
+      "change #palette_el": "updatePalette",
+      "change #nn_el": "updateNN",
+      "click .post-btn": "post",
+      "click .close-btn": "hide",
+    },
+  
+    initialize: function(){
+      Photo.set_recolor_fn(function(rgb){
+        if (invert) {
+          rgb[0] = 255 - rgb[0]
+          rgb[1] = 255 - rgb[1]
+          rgb[2] = 255 - rgb[2]
+        }
+        var hsl = rgb2hsl(rgb)
+        hsl[0] = mod(hsl[0] + hue, 1.0)
+        hsl[1] = clamp(hsl[1] + sat, 0.0, 1.0)
+        hsl[2] = clamp(hsl[2] + lum, 0.0, 1.0)
+        return hsl2rgb.apply(this, hsl)
+      })
+
+      this.$width = this.$("#width_el")
+      this.$widthSpan = this.$("#width_span")
+      this.$heightSpan = this.$("#height_span")
+      this.$ratio = this.$("#ratio_el")
+      this.$nn = this.$("#nn_el")
+      this.$invert = this.$("#invert_el")
+      this.$palette = this.$("#palette_el")
+      this.$canvasRapper = this.$("#canvas_rapper")
+      this.camera = new UploadView({ el: this.$(".camera-btn") })
+
+      this.canvas = document.createElement("canvas")
+      this.ctx = this.canvas.getContext('2d')
+      this.$canvasRapper.append(this.canvas)
+      
+      width = parseInt( this.$width.val() )
+      ratio = parseFloat( this.$ratio.val() )
+      nn = this.$nn.prop('checked')
+      invert = this.$invert.prop('checked')
+      this.$widthSpan.html(width)
+
+      this.img = new Image ()
+      this.img.onload = function(){
+        this.$ratio.val()
+        this.updateRatio()
+      }.bind(this)
+
+      this.load("/assets/img/test.png")
+    },
+    
+    load: function(url){
+      this.img.src = url
+      console.log("load", url)
+      this.show()
+    },
+  
+    show: function(){
+      $("body").addClass("photo")
+    },
+  
+    hide: function(){
+      $("body").removeClass("photo")
+    },
+    
+    update: function(){
+      Photo.fromCanvas(this.img, this.toCanvas.bind(this), { width: width, ratio: ratio, neighbor: nn })
+    },
+
+    updateWidth: function(){
+      width = parseInt( this.$width.val() )
+      this.$widthSpan.html( width )
+      this.$heightSpan.html( "..." )
+      this.deferUpdate()
+    },
+    updateRatio: function(){
+      ratio = parseFloat( this.$ratio.val() )
+      if (ratio < 0.03) return
+      this.$widthSpan.html( width )
+      this.$heightSpan.html( "..." )
+      this.deferUpdate()
+    },
+
+    deferUpdate: function(){
+      clearTimeout( timeout )
+      timeout = setTimeout(this.update.bind(this), 50)
+    },
+
+    updateHue: function(){
+    },
+    updateSat: function(){
+    },
+    updateLum: function(){
+    },
+    updateInvert: function(){
+      invert = this.$invert.prop('checked')
+      this.update.bind(this)
+    },
+    updateNN: function(){
+      nn = this.$nn.prop('checked')
+      this.update.bind(this)
+    },
+    updatePalette: function(){
+      var palette = this.$palette.val()
+      Photo.set_colors( Photo[palette] )
+      this.update.bind(this)
+    },
+
+    toCanvas: function(rows){
+      this.rows = rows
+      var wpx = 6, hpx = 12
+      var rgb_colors = Photo.colors.map(function(c){ return "rgb(" + c + ")" })
+      this.canvas.width = rows[0].length * wpx
+      this.canvas.height = rows.length * hpx
+      var ctx = this.ctx
+      rows.forEach(function(row, j){
+        row.forEach(function(lex, i){
+          ctx.fillStyle = rgb_colors[lex]
+          ctx.fillRect(i*wpx,j*hpx,wpx,hpx)
+        })
+      })
+      this.$heightSpan.html( rows.length )
+      // 
+    },
+    
+    post: function(){
+      if (! this.rows) return
+      var color_code = Photo.mirc(this.rows)
+
+//       var fd = new FormData()
+//       fd.append('image', color_code)
+      var _csrf = $("meta[name='_csrf']").attr('content')
+
+      var request = $.ajax({
+        url: "/_irc/post",
+        type: "post",
+        data: { image: color_code, _csrf: _csrf },
+//         processData: false,
+//         contentType: false,
+      })
+      request.done(this.success.bind(this))
+    },
+    
+    success: function(){
+      
+    },
+
+  })
+  
+  return PhotoView
+
+})()