build macpaint swatches

1 files changed, 91 insertions, 0 deletions

diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index ffbd935..474d4c1 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -5,6 +5,9 @@ var WallpaperPicker = View.extend({
 	events: {
 		"click .paper1": 'pick',
 	},
+	
+	initialize: function(){
+	},
 
 	toggle: function(){
     this.$el.toggleClass("active");
@@ -18,3 +21,91 @@ var WallpaperPicker = View.extend({
 	}
 
 })
+
+// pattern
+// scale
+// foreground
+// background
+
+var WallpaperManager = function () {
+
+	var image = new Image ()
+	var imageData
+	var w, h
+	
+	this.masks = []
+	
+	this.init = function(){
+		this.load()
+	}
+	
+	this.load = function(){
+		image.onload = function(){
+			this.loadImageData()
+			this.buildMasks()
+			app.tube('wallpaper-ready')
+		}.bind(this)
+		
+		image.src = "/assets/img/palette.gif"
+	}
+	
+	this.loadImageData = function(){
+		var canvas = document.createElement('canvas')
+		var ctx = canvas.getContext('2d')
+		w = canvas.width = image.naturalWidth
+		h = canvas.height = image.naturalHeight
+		ctx.drawImage(image, 0,0)
+		imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data
+	}
+	
+	this.buildMasks = function(){
+		var mask
+		for (var y = 0; y < 6; y++) {
+			for (var x = 0; x < 16; x++) {
+				mask = this.buildMask(x,y)
+				this.masks.push(mask)
+			}
+		}
+	}
+	
+	this.buildMask = function(x,y){
+		// add the offset of the top-left swatch
+		x = (x * 18) + 15
+		y = (y * 16) + 5
+
+		var mask = new Array(64)
+		var t = 0
+		for (var i = 0; i < 8; i++) {
+			for (var j = 0; j < 8; j++) {
+				t = ( w*(y+j) + x+i ) * 4
+				mask[j*8+i] = imageData[t] === 0
+			}
+		}
+		return mask
+	}
+	
+	this.buildSwatches = function(black, white, scale) {
+		var swatches = this.masks.map(function(mask){
+			return this.buildSwatch(mask,black,white,scale)
+		}.bind(this))
+		
+		return swatches
+	}
+	
+	this.buildSwatch = function(mask,black,white,scale){
+		black = 'rgba(' + black.join(',') + ')'
+		white = 'rgba(' + white.join(',') + ')'
+		var canvas = document.createElement("canvas")
+		canvas.width = 8*scale
+		canvas.height = 8*scale
+		var ctx = canvas.getContext('2d')
+		for (var i = 0; i < 8; i++) {
+			for (var j = 0; j < 8; j++) {
+				ctx.fillStyle = mask[j*8+i] ? black : white
+				ctx.fillRect(i*scale, j*scale, scale, scale)
+			}
+		}
+		return canvas
+	}
+	
+}
\ No newline at end of file