diff options
| author | yo mama <pepper@scannerjammer.com> | 2015-02-16 00:10:13 -0800 |
|---|---|---|
| committer | yo mama <pepper@scannerjammer.com> | 2015-02-16 00:10:13 -0800 |
| commit | 760c35f835ef179bc398abc57bcea39bc9ec401e (patch) | |
| tree | 6fddb5f6b55c898a68e4bb3826d0fc524007ca40 | |
| parent | c3b34223ef6390ad2801edaa3e3b825c7df1cb98 (diff) | |
finishing mode
| -rw-r--r-- | css/main.css | 4 | ||||
| -rw-r--r-- | css/overlay.css | 28 | ||||
| -rw-r--r-- | css/sketch.css | 42 | ||||
| -rw-r--r-- | img/logo.gif | bin | 0 -> 117877 bytes | |||
| -rw-r--r-- | img/logo.png | bin | 8810 -> 0 bytes | |||
| -rw-r--r-- | index.html | 58 | ||||
| -rw-r--r-- | js/display_result.js | 3 | ||||
| -rw-r--r-- | js/overlay.js | 3 | ||||
| -rw-r--r-- | js/sketch.js | 182 | ||||
| -rwxr-xr-x | makePattern.py | 1 | ||||
| -rw-r--r-- | myjson.json | 1 | ||||
| -rw-r--r-- | newimagefromjson.py | 24 | ||||
| -rw-r--r-- | sketch.html | 26 |
13 files changed, 348 insertions, 24 deletions
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 Binary files differnew file mode 100644 index 0000000..6cf5742 --- /dev/null +++ b/img/logo.gif diff --git a/img/logo.png b/img/logo.png Binary files differdeleted file mode 100644 index 64432e3..0000000 --- a/img/logo.png +++ /dev/null @@ -4,21 +4,24 @@ <link href='css/normalize.css' rel='stylesheet' type='text/css'> <link href='css/unsemantic-grid-responsive.css' rel='stylesheet' type='text/css'> <link href='css/main.css' rel='stylesheet' type='text/css'/> +<link href='css/overlay.css' rel='stylesheet' type='text/css'/> +<link href='css/sketch.css' rel='stylesheet' type='text/css'/> </head> <body> <div id="top-row" class="grid-100 mobile-grid-100"> <div id="impattern" class="grid-50 mobile-grid-50"> - <img src="img/impattern.png"/> + <img src="img/logo.gif"/> </div> <div id="sample" class="grid-50 mobile-grid-50"> </div> </div> - +<hr> <div class="grid-100 mobile-grid-100" id="choose_your_pattern"> - Choose your pattern: + <b>FIRST:</b> Choose your pattern: </div> +</br> <table class="dithertable" id="dithertable"> <tr> <!--{{{--> @@ -177,29 +180,70 @@ <!--}}}--> </tr> </table> - </br> +</br> +<div class="grid-100 mobile-grid-100" id="create_your_own"> + <b>OR:</b> <a href="">Create your Own</a> pattern... +</div> +<hr> <div class="grid-100 mobile-grid-100" id="controls"> <div class="grid-100 mobile-grid-100" id="choose_your_image"> - Choose your image: + <b>NEXT:</b> Choose your image: </div> <div class="parameter grid-50 mobile-grid-50"> Image Url:<input type="text/css" class="image_input" value="Enter an image url here"></input> </div> <div class="parameter grid-50 mobile-grid-50"> - Or Upload:<button>Upload</button> + +<!-- Or Upload:<button>Upload</button>--> </div> </div> <div id="submit_wrapper" class="grid-100 mobile-grid-100" > - <button class="grid-33 push-33 mobile-grid-50 big_button" id="submit">SUBMIT</button> + <button class="grid-33 push-33 mobile-grid-50 big_button" id="submit">ROCK OUT</button> </div> <div class="processing dontshowme"></div> <div class="result dontshowme"></div> +<div id="overlay"> + <div class="close">CANCEL</div> + <div class="content"> + <div id="draw"> + <div>Draw an image below. + </br>(Each square will be 1 sq. pixel)</div> + </br> + <div id="canvas_wrapper"> + </div> + <table> + <tr> + <td> + <input size="2" type="text" id="rows" value="10">ROWS</input> + </td> + </tr> + <tr> + <td> + <input size="2" type="text" id="cols" value="10">COLUMNS</input> + </td> + </tr> + </table> + + <div id="tools"> + <div id="brush" class="brush_tools">Brush</div> + <div id="eraser" class="brush_tools">Eraser</div> + </div> + <input type="checkbox" id="show_grid" checked>Show grid?</input> + <button id="drawing_finished">DONE</button> + + </div> + </div> +</div> +<div id="acknowledgments">site by pepper...thanks to jules (http://asdf.us/ascii) and timb (superpaint...RIP)</div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/Math.uuid.js"></script> <script type="text/javascript" src="js/main.js"></script> +<script type="text/javascript" src="js/sketch.js"></script> +<script type="text/javascript" src="js/overlay.js"></script> +<script type="text/javascript" src="js/choose_your_own.js"></script> </body> </html> 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; <div id="brush" class="brush_tools">Brush</div> <div id="eraser" class="brush_tools">Eraser</div> </div> +<input type="checkbox" id="show_grid" checked>Show grid?</input> +<button id="drawing_finished">DONE</button> </body> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> @@ -125,6 +127,8 @@ function BrushTools(){ } + + function GridCanvas(){ var gridcanvas = this; this.rows = 10; @@ -174,6 +178,13 @@ function GridCanvas(){ 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++){ @@ -183,7 +194,11 @@ function GridCanvas(){ }); matrix.push(row_storage); } - return matrix; + return JSON.stringify({ + "matrix" : matrix, + "width" : this.cols, + "height" : this.rows, + }) } } $("#cols").change(function(){ @@ -197,12 +212,19 @@ $("#rows").change(function(){ - $(document).ready(function(){ 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()); + }); + }); </script> |
