From 760c35f835ef179bc398abc57bcea39bc9ec401e Mon Sep 17 00:00:00 2001 From: yo mama Date: Mon, 16 Feb 2015 00:10:13 -0800 Subject: finishing mode --- css/main.css | 4 ++ css/overlay.css | 28 ++++++++ css/sketch.css | 42 ++++++++++++ img/logo.gif | Bin 0 -> 117877 bytes img/logo.png | Bin 8810 -> 0 bytes index.html | 58 ++++++++++++++-- js/display_result.js | 3 + js/overlay.js | 3 + js/sketch.js | 182 +++++++++++++++++++++++++++++++++++++++++++++++++++ makePattern.py | 1 + myjson.json | 1 + newimagefromjson.py | 24 +++---- sketch.html | 26 +++++++- 13 files changed, 348 insertions(+), 24 deletions(-) create mode 100644 css/overlay.css create mode 100644 css/sketch.css create mode 100644 img/logo.gif delete mode 100644 img/logo.png create mode 100644 js/display_result.js create mode 100644 js/overlay.js create mode 100644 js/sketch.js create mode 100644 myjson.json diff --git a/css/main.css b/css/main.css index c691562..21cb054 100644 --- a/css/main.css +++ b/css/main.css @@ -1,6 +1,10 @@ +html,body{ + min-height: 100%; +} body{ padding-top:5px; font-family: 'Roboto', sans-serif; + position: relative; } .title{ font-family: 'Orienta', sans-serif; diff --git a/css/overlay.css b/css/overlay.css new file mode 100644 index 0000000..b406f71 --- /dev/null +++ b/css/overlay.css @@ -0,0 +1,28 @@ +#overlay{ + position:absolute; + height:100%; + width:100%; + top:0; + left:0; + background: rgba(245,245,245,0.8); + z-index: 100; + +} +#overlay > .close{ + position: absolute; + padding: 10px; + top: 10px; + left: 10px; + border: 1px solid gray; + background: white; + cursor: pointer; +} +#overlay > .content{ + top: 10px; + left: 150px; + padding: 10px; + border: 1px solid gray; + background: white; + position: absolute; + +} diff --git a/css/sketch.css b/css/sketch.css new file mode 100644 index 0000000..1fa0266 --- /dev/null +++ b/css/sketch.css @@ -0,0 +1,42 @@ + +#canvas_wrapper{ +// position:absolute; + display: inline-block; +white-space: no-wrap; +word-wrap: break-word; +-webkit-user-select: none; +-moz-user-select: none; +user-select: none; +// pointer-events: none; + +} +.canvas_cell{ + border: 1px solid black; + display: inline-block; + width: 1em; + height: 1em; +} +.canvas_row{ +// position: absolute; +} + +.brush_tools{ + margin:5px; + padding:5px; + display: inline-block; + background: whitesmoke; + border: 1px solid gray; + cursor: pointer; +} +#drawing_finished{ + padding:5px; + margin-top:10px; + text-transform:bold; + display:block; + width:100%; +} +#brush{ + background:gray; + color: white; + border: 1px solid black; +} diff --git a/img/logo.gif b/img/logo.gif new file mode 100644 index 0000000..6cf5742 Binary files /dev/null and b/img/logo.gif differ diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index 64432e3..0000000 Binary files a/img/logo.png and /dev/null differ diff --git a/index.html b/index.html index 61f9ce5..da4ec0e 100644 --- a/index.html +++ b/index.html @@ -4,21 +4,24 @@ + +
- +
 
- +
- Choose your pattern: + FIRST: Choose your pattern:
+
@@ -177,29 +180,70 @@
-
+
+
+ OR: Create your Own pattern... +
+
- Choose your image: + NEXT: Choose your image:
Image Url:
- Or Upload: + +
- +
+
+
CANCEL
+
+
+
Draw an image below. +
(Each square will be 1 sq. pixel)
+
+
+
+ + + + + + + +
+ ROWS +
+ COLUMNS +
+ +
+
Brush
+
Eraser
+
+ Show grid? + + +
+
+
+
site by pepper...thanks to jules (http://asdf.us/ascii) and timb (superpaint...RIP)
+ + + diff --git a/js/display_result.js b/js/display_result.js new file mode 100644 index 0000000..48e0d94 --- /dev/null +++ b/js/display_result.js @@ -0,0 +1,3 @@ +$("#display_result").show(); +$("#display_result").hide(); + diff --git a/js/overlay.js b/js/overlay.js new file mode 100644 index 0000000..809b69b --- /dev/null +++ b/js/overlay.js @@ -0,0 +1,3 @@ +$("#overlay > .close").click(function(){ + $("#overlay").hide(); +}); diff --git a/js/sketch.js b/js/sketch.js new file mode 100644 index 0000000..f341d00 --- /dev/null +++ b/js/sketch.js @@ -0,0 +1,182 @@ +//dragging event + +var COLUMNS_MAX = 20; +var ROWS_MAX = 20; +var isDragging = false; +$("body").mousedown(function() { + $(window).mousemove(function() { + isDragging = true; + $(window).unbind("mousemove"); + }); +}).mouseup(function() { + var wasDragging = isDragging; + isDragging = false; + $(window).unbind("mousemove"); + if (!wasDragging) { //was clicking + } +}); + +var c; + +window.active_tool = "brush"; +var brush_tools; + + + +function BrushTools(){ + var brushtools = this; + this.brush = $("#brush"); + this.eraser = $("#eraser"); + this.brush_tools = $(".brush_tools"); + this.active_css = { + "border" : "1px solid black", + "background" : "gray", + "color" : "white", + }, + this.inactive_css = { + "border" : "1px solid gray", + "background" : "whitesmoke", + "color" : "black", + }; + this.activate = function(elem){ + $(elem).css(this.active_css); + window.active_tool = $(elem).attr("id"); + }; + this.deactivate = function(elem){ + $(elem).css(this.inactive_css); + }; +// this.cursors = { +// "brush" : "img/brush.png", +// "eraser" : "img/eraser.png", +// }; + this.brush_tools.click(function(){ + var that = this; + window.active_tool = $(this).attr("id"); + brushtools.activate(that); + brushtools.brush_tools.each(function(){ + if(this != that){ + brushtools.deactivate(this); + } + }); +// $("#canvas_wrapper").css( +// "cursor" , "url("+brushtools.cursors[window.active_tool]+")" +// ) + }); +} + + + + +function GridCanvas(){ + var gridcanvas = this; + this.rows = 10; + this.cols = 10; + this.current_rows = []; + this.container = $("#canvas_wrapper"); + this.paint = function(elem){ + $(elem).attr("painted", "1"); + $(elem).css("background", "black"); + }; + this.erase = function(elem){ + $(elem).attr("painted", "0"); + $(elem).css("background", "white"); + }; + this.initialize = function(cols, rows){ + this.container.html(""); + this.rows = (rows > 0) ? rows : 1; + this.cols = (cols > 0) ? cols : 1; + if (this.rows > ROWS_MAX){ + this.rows = ROWS_MAX; + } + if (this.cols > COLUMNS_MAX){ + this.cols = COLUMNS_MAX; + } + this.cols = cols; + for (var i = 0; i< this.rows; i++){ + var row = document.createElement("div"); + $(row).attr("id", "row_"+i) + $(row).addClass("canvas_row") + for (var j = 0; j< this.cols; j++){ + var cell = document.createElement("span"); + $(cell).addClass("canvas_cell") + $(cell).attr("painted", "0") + $(cell).addClass("column_"+j) + $(cell).html(" ") + $(cell).click(function(){ + if (window.active_tool == 'brush'){ + gridcanvas.paint(this); + }else if(window.active_tool == 'eraser'){ + gridcanvas.erase(this); + } + }); + $(cell).mouseover(function(){ + if (isDragging){ + if (window.active_tool == 'brush'){ + gridcanvas.paint(this); + }else if(window.active_tool == 'eraser'){ + gridcanvas.erase(this); + } + } + }); + $(row).append(cell) + } + this.container.append(row) + } + } + this.toggleGrid = function(){ + if ($("#show_grid").prop("checked")){ + $(".canvas_cell").css("border","1px solid black"); + }else{ + $(".canvas_cell").css("border","none"); + } + } + this.serialize = function(){ + var matrix = []; + for (var i = 0; i < this.rows; i++){ + var row_storage = []; + $("#row_"+i+"> span").each(function(){ + row_storage.push($(this).attr("painted")); + }); + matrix.push(row_storage); + } + return JSON.stringify({ + "matrix" : matrix, + "width" : this.cols, + "height" : this.rows, + }) + } +} +$("#cols").change(function(){ + var cols = $(this).val() + c.initialize(cols, c.rows); +}); +$("#rows").change(function(){ + var rows = $(this).val() + c.initialize(c.cols, rows); +}); + + + +$(document).ready(function(){ +$("#create_your_own").click(function(){ + $("#overlay > .close").html("CANCEL"); + $("#draw").show(); + +}); +$("#overlay > .close").click(function(){ + console.log("hello"); + $("#draw").hide(); +}); + + c = new GridCanvas(); + brush_tools = new BrushTools(); + c.initialize($("#cols").val(), $("#rows").val()); + $("#show_grid").change(function(){ + c.toggleGrid(); + }); + $("#drawing_finished").click(function(){ + + console.log(c.serialize()); + }); + +}); diff --git a/makePattern.py b/makePattern.py index d460865..d9bbf54 100755 --- a/makePattern.py +++ b/makePattern.py @@ -35,6 +35,7 @@ def error(s): def hexdir(filename): " creates a two-letter directory name " return sha1(filename.encode()).hexdigest()[:2] +#repage command convert original.png -resize 425x92 -repage 425x92+0+0 new.png class Pattern: def __init__(self): diff --git a/myjson.json b/myjson.json new file mode 100644 index 0000000..ac685e7 --- /dev/null +++ b/myjson.json @@ -0,0 +1 @@ +{"matrix":[["0","0","0","0","0","0","0","0","0","0"],["0","0","0","1","1","0","0","0","0","0"],["0","0","1","1","0","0","0","0","0","0"],["0","0","1","1","1","1","0","0","0","0"],["0","1","1","0","0","0","0","0","0","0"],["1","0","0","0","0","0","0","0","0","0"],["1","1","1","1","1","1","1","1","1","1"],["0","0","0","0","0","1","1","0","0","1"],["0","0","0","0","0","0","1","0","1","1"],["0","0","0","0","0","0","0","1","1","0"]],"width":"10","height":"10"} diff --git a/newimagefromjson.py b/newimagefromjson.py index 25fdfcd..5f62bd1 100644 --- a/newimagefromjson.py +++ b/newimagefromjson.py @@ -1,13 +1,14 @@ #!/usr/bin/python2.7 import simplejson as json -import Image +from PIL import Image +import sys -f = open("jsonfile", 'r'); +f = open("myjson.json", 'r'); myjson = f.read(); f.close(); specs = json.loads(myjson); -img = Image.new('RGBA', (int(specs.width), int(specs.height), "black")); +img = Image.new('RGBA', (int(specs['width']), int(specs['height']))); def boolToColor(boolean): if boolean: @@ -16,17 +17,10 @@ def boolToColor(boolean): return (255,255,255,0) pixels = img.load(); -for i in specs.matrix: - for j in specs.matrix[i]: - pixels[i,j] = boolToColor(specs.matrix[i][j]); - - -img = Image.new( 'RGBA', (500,500), "black") # create a new black image -pixels = img.load() # create the pixel map - - -for i in range(img.size[0]): # for every pixel: - for j in range(img.size[1]): - pixels[i,j] = (255, 255, 255, 255) # set the colour accordingly +#for i in range(0, 9, 2): +# dosomething(i) +for i in range(0, len(specs['matrix'])): + for j in range(0, len(specs['matrix'][i])): + pixels[j,i] = boolToColor(int(specs['matrix'][i][j])); img.save("myimage.png", "PNG") diff --git a/sketch.html b/sketch.html index fe22e7a..c519820 100644 --- a/sketch.html +++ b/sketch.html @@ -58,6 +58,8 @@ user-select: none;
Brush
Eraser
+Show grid? + -- cgit v1.2.3-70-g09d2