diff options
| author | yo mama <pepper@scannerjammer.com> | 2015-09-22 00:51:40 -0700 |
|---|---|---|
| committer | yo mama <pepper@scannerjammer.com> | 2015-09-22 00:51:40 -0700 |
| commit | d3e7b5708deffbed864c916de22663f48333c58b (patch) | |
| tree | ef76784a7827baff88c03670bf22832a3f146b17 /share/frontend/impattern/sketch.html | |
| parent | 86c79f4372d7b2e7640a26473c7a4d331cdf7d16 (diff) | |
finishing server
Diffstat (limited to 'share/frontend/impattern/sketch.html')
| -rw-r--r-- | share/frontend/impattern/sketch.html | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/share/frontend/impattern/sketch.html b/share/frontend/impattern/sketch.html new file mode 100644 index 0000000..c519820 --- /dev/null +++ b/share/frontend/impattern/sketch.html @@ -0,0 +1,231 @@ +<html> +<head> +<link href='css/normalize.css' rel='stylesheet' type='text/css'> +<style type="text/css"> +#canvas_wrapper{ +// position:absolute; + display: inline-block; +white-space: pre-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{ + padding:5px; + display: inline-block; + background: whitesmoke; + border: 1px solid gray; + cursor: pointer; +} +#brush{ + background:gray; + color: white; + border: 1px solid black; +} +</style> + +</head> +<body> + +<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">COLS</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> +</body> +<script src="js/jquery.min.js" type="text/javascript"></script> +<script type="text/javascript"> +//dragging event +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; + 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(){ + + 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> +</html> |