diff options
| -rw-r--r-- | css/sally.css | 42 | ||||
| -rw-r--r-- | image.html | 1 | ||||
| -rw-r--r-- | index.html | 13 | ||||
| -rw-r--r-- | js/app.js | 1 | ||||
| -rw-r--r-- | js/blit.js | 17 | ||||
| -rw-r--r-- | js/lex.js | 9 | ||||
| -rw-r--r-- | js/matrix.js | 53 | ||||
| -rw-r--r-- | js/ui/brush.js | 14 | ||||
| -rw-r--r-- | js/ui/canvas.js | 20 | ||||
| -rw-r--r-- | js/ui/controls.js | 74 | ||||
| -rw-r--r-- | js/ui/keys.js | 16 | ||||
| -rw-r--r-- | js/ui/palette.js | 61 | ||||
| -rw-r--r-- | webcam.html | 7 |
13 files changed, 182 insertions, 146 deletions
diff --git a/css/sally.css b/css/sally.css index 70daf9d..9621d18 100644 --- a/css/sally.css +++ b/css/sally.css @@ -27,20 +27,20 @@ a:link, a:visited {text-decoration: none; color: #3b3740} {overflow: auto;} .rapper, .block { - float: left; - height:auto; - width:auto; - background-color: #000000; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + float: left; + height:auto; + width:auto; + background-color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } .rapper { - white-space:pre-wrap; - word-wrap: break-word; + white-space:pre-wrap; + word-wrap: break-word; } .block { - padding:4px; + padding:4px; } .block:nth-child(n+2) { padding-left: 30px; @@ -49,15 +49,15 @@ a:link, a:visited {text-decoration: none; color: #3b3740} cursor: pointer; } .transparent { - background-color: transparent; - background-image: url(../img/gray-dither.gif); - background-size: 8px 8px; + background-color: transparent; + background-image: url(../img/gray-dither.gif); + background-size: 8px 8px; } @media (-webkit-min-device-pixel-ratio: 2) { - .transparent { - background-size: 4px 4px; - } + .transparent { + background-size: 4px 4px; + } } span { min-width: 8px; line-height: 15px; display: inline-block; } .rapper { cursor: crosshair; } @@ -80,10 +80,10 @@ textarea { font-size:12pt; width: 37%; height: 300px; background: #333; color: # margin: 3px; } .dropper #canvas_rapper { - cursor: url(../img/dropper.gif) 0 15, auto; + cursor: url(../img/dropper.gif) 0 15, auto; } .bucket #canvas_rapper { - cursor: url(../img/bucket.png) 3 15, auto; + cursor: url(../img/bucket.png) 3 15, auto; } .close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; } #webcam_rapper { display: none; position: absolute; top: 0px; left: 0px; width:100%;height:100%; box-sizing:border-box; border: 40px solid rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5); } @@ -105,7 +105,7 @@ textarea { font-size:12pt; width: 37%; height: 300px; background: #333; color: # display: none; } .custom { - float: left; - margin-right: 5px; - margin-bottom: 5px; + float: left; + margin-right: 5px; + margin-bottom: 5px; } @@ -1,3 +1,4 @@ +<meta charset="UTF-8"> <style> label { min-width: 70px; display: inline-block; } </style> @@ -1,3 +1,4 @@ +<meta charset="UTF-8"> <link rel="stylesheet" href="css/sally.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="css/ak.css" type="text/css" charset="utf-8" /> @@ -9,9 +10,9 @@ <div style="clear:both"> <div class="block"> - <div id="palette_rapper"></div><br> - <div id="custom_rapper"></div> - </div> + <div id="palette_rapper"></div><br> + <div id="custom_rapper"></div> + </div> <div id="brush_container" class="block"> <div id="brush_rapper"> </div> @@ -20,7 +21,7 @@ <span id="bg_checkbox" class="tool">x bg</span><br> <span id="char_checkbox" class="tool">x char</span><br> <br> - <span id="add_custom_el" class="tool">+ add</span> + <span id="add_custom_el" class="tool">+ add</span> </div> <div id="tools_rapper" class="block"> <span id="square_el" class="tool">square</span><br> @@ -68,8 +69,8 @@ </div> <div id="webcam_rapper" class="transparent"> - <span class="close" id="webcam_close">x</span> - <iframe id="webcam_iframe"></iframe> + <span class="close" id="webcam_close">x</span> + <iframe id="webcam_iframe"></iframe> </div> <input type="text" id="cursor_input"> @@ -5,7 +5,6 @@ var erasing = false var selecting = false var filling = false var changed = false -var fillColor = 1 // black var focused var canvas, tools, palette, controls, brush, mode, current_tool, current_canvas @@ -47,5 +47,22 @@ var blit = (function(){ } }) } + blit.circle = function(A, lex){ + var hw = brush.w/2|0, hh = brush.h/2|0 + A.forEach(function(lex,x,y) { + var len = Math.sqrt(Math.pow(x-hw,2)+Math.pow(y-hh,2)) + if (len > Math.abs(hw)) { + lex.clear() + } + }) + } + blit.cross = function(A, lex){ + A.forEach(function(lex,x,y) { + if ((x+y)%2) { + lex.clear() + } + }) + } + return blit })() @@ -78,10 +78,11 @@ Lex.prototype.erase = function (){ this.opacity = 1 this.build() } -Lex.prototype.fill = function(fg, bg){ - this.fg = fg - this.bg = bg - this.opacity = 1 +Lex.prototype.fill = function(lex){ + this.fg = lex.fg + this.bg = lex.bg + this.char = lex.char + this.opacity = lex.opacity this.build() } Lex.prototype.eq = function(lex){ diff --git a/js/matrix.js b/js/matrix.js index bc09099..7327727 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -23,31 +23,31 @@ Matrix.prototype.rebuild = function (){ this.append() this.bind() this.generate && this.generate() - check_if_lost_focus() + check_if_lost_focus() } Matrix.prototype.clone = function () { - var base = this - var clone = new Matrix(this.w, this.h, function(x,y){ - return base.getCell(x,y).clone() - }) - clone.f = this.f - return clone + var base = this + var clone = new Matrix(this.w, this.h, function(x,y){ + return base.getCell(x,y).clone() + }) + clone.f = this.f + return clone } Matrix.prototype.assign = function (mat) { - var base = this - this.demolish() - this.w = mat.w - this.h = mat.h -// this.f = function(){} - this.initialize(function(x,y){ - var el = mat.getCell(x,y).clone() - el.build() - return el - }) + var base = this + this.demolish() + this.w = mat.w + this.h = mat.h +// this.f = function(){} + this.initialize(function(x,y){ + var el = mat.getCell(x,y).clone() + el.build() + return el + }) this.append() this.bind() - check_if_lost_focus() - return this + check_if_lost_focus() + return this } Matrix.prototype.bind = function () {} @@ -85,14 +85,17 @@ Matrix.prototype.clear = function(){ Matrix.prototype.erase = function(){ this.forEach(function(lex,x,y){ lex.erase() }) } -Matrix.prototype.fill = function(fg, bg){ - this.fg = fg - this.bg = bg - this.forEach(function(lex,x,y){ - lex.fill(fg,bg) - lex.build() +Matrix.prototype.fill = function(lex){ + this.fg = lex.fg + this.bg = lex.bg + this.char = lex.char + this.opacity = lex.opacity + this.forEach(function(el,x,y){ + el.fill(lex) + el.build() }) } + Matrix.prototype.build = function(){ this.forEach(function(lex,x,y){ lex.build() diff --git a/js/ui/brush.js b/js/ui/brush.js index 730cfc0..53c0e46 100644 --- a/js/ui/brush.js +++ b/js/ui/brush.js @@ -32,8 +32,8 @@ var brush = (function(){ lex.erase() } else { - fillColor = brush.bg - lex.fill(brush.fg, brush.bg) + fillColor = brush.bg + lex.fill(brush) } lex.focus() }) @@ -47,7 +47,7 @@ var brush = (function(){ lex.erase() } else { - lex.fill(brush.fg, brush.bg) + lex.fill(brush) } lex.focus() }) @@ -70,10 +70,10 @@ var brush = (function(){ } brush.assign = function(lex){ - brush.char = lex.char - brush.fg = lex.fg - brush.bg = lex.bg - brush.opacity = 1 + brush.char = lex.char + brush.fg = lex.fg + brush.bg = lex.bg + brush.opacity = 1 } brush.char = " " diff --git a/js/ui/canvas.js b/js/ui/canvas.js index 059b24c..75131c1 100644 --- a/js/ui/canvas.js +++ b/js/ui/canvas.js @@ -24,16 +24,16 @@ var canvas = current_canvas = (function(){ dragging = true current_canvas = canvas if (e.altKey) { - if (e.shiftKey) { - blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2)) - draw.set_last_point(e, point) - } - else { - brush.assign(lex) - brush.generate() - dragging = false - } - return + if (e.shiftKey) { + blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2)) + draw.set_last_point(e, point) + } + else { + brush.assign(lex) + brush.generate() + dragging = false + } + return } else if (drawing) { draw.down(e, lex, point) diff --git a/js/ui/controls.js b/js/ui/controls.js index 734472d..1a8011c 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -7,18 +7,14 @@ var controls = (function(){ brush.generate = controls.cross.generate brush.generate() drawing = true - filling = false brush.modified = false } controls.cross.generate = function(){ - brush.forEach(function(lex,x,y) { - if ((x+y)%2) { - lex.clear() - } - else { - lex.assign(brush) - } - }) + brush.fill(brush) + blit.cross(brush) + } + controls.cross.done = function(){ + drawing = false } controls.circle = new Tool (circle_el) @@ -29,20 +25,11 @@ var controls = (function(){ brush.modified = false } controls.circle.generate = function(){ - var fg = brush.fg, bg = brush.bg - var hw = brush.w/2|0, hh = brush.h/2|0 - brush.forEach(function(lex,x,y) { - var len = Math.sqrt(Math.pow(x-hw,2)+Math.pow(y-hh,2)) - if (len > Math.abs(hw)) { - lex.clear() - } - else { - lex.assign(brush) - } - }) + brush.fill(brush) + blit.circle(brush) } controls.circle.done = function(){ - drawing = false + drawing = false } controls.square = new Tool (square_el) @@ -53,11 +40,10 @@ var controls = (function(){ drawing = true } controls.square.generate = function(){ - var fg = brush.fg, bg = brush.bg - brush.fill(fg,bg) + brush.fill(brush) } controls.square.done = function(){ - drawing = false + drawing = false } controls.text = new Tool (text_el) @@ -82,7 +68,7 @@ var controls = (function(){ document.body.classList.add("bucket") } controls.fill.done = function(){ - filling = false + filling = false document.body.classList.remove("bucket") } @@ -93,26 +79,26 @@ var controls = (function(){ controls.webcam = new Tool (webcam_el) controls.webcam.load = function(){ - this.loaded = true - webcam_close.addEventListener("click", function(){ controls.webcam.blur() }) - window.addEventListener("message", function(e){ - if (e.origin !== window.location.origin) return - controls.webcam.blur() - controls.circle.focus() - import_textarea.value = e.data - clipboard.import_colorcode() - }) + this.loaded = true + webcam_close.addEventListener("click", function(){ controls.webcam.blur() }) + window.addEventListener("message", function(e){ + if (e.origin !== window.location.origin) return + controls.webcam.blur() + controls.circle.focus() + import_textarea.value = e.data + clipboard.import_colorcode() + }) } controls.webcam.use = function(){ - if (! this.loaded) { - this.load() - } - webcam_iframe.src = "webcam.html" - webcam_rapper.style.display = "block" + if (! this.loaded) { + this.load() + } + webcam_iframe.src = "webcam.html" + webcam_rapper.style.display = "block" } controls.webcam.done = function(){ - webcam_iframe.src = "" - webcam_rapper.style.display = "none" + webcam_iframe.src = "" + webcam_rapper.style.display = "none" } controls.grid = new Checkbox (grid_el) @@ -281,9 +267,9 @@ var controls = (function(){ canvas.resize(canvas.w, h) } - add_custom_el.addEventListener("click", function(){ - custom.clone() - }) + add_custom_el.addEventListener("click", function(){ + custom.clone() + }) } diff --git a/js/ui/keys.js b/js/ui/keys.js index fc958b0..f76d562 100644 --- a/js/ui/keys.js +++ b/js/ui/keys.js @@ -7,7 +7,7 @@ var keys = (function(){ // console.log("keycode:", e.keyCode) if (e.altKey) { - document.body.classList.add("dropper") + document.body.classList.add("dropper") } switch (e.keyCode) { @@ -19,7 +19,7 @@ var keys = (function(){ e.preventDefault() brush.contract(1) brush.modified = false - check_if_lost_focus() + check_if_lost_focus() break } case 221: // ] @@ -83,12 +83,12 @@ var keys = (function(){ current_canvas.focusLex(y + direction[0], x + direction[1]) } }) - - cursor_input.addEventListener("keyup", function(e){ + + cursor_input.addEventListener("keyup", function(e){ if (! e.altKey) { - document.body.classList.remove("dropper") + document.body.classList.remove("dropper") } - }) + }) } @@ -96,6 +96,6 @@ var keys = (function(){ })() function check_if_lost_focus() { - if (! focused || ! focused.span) - focused = canvas.aa[0][0] + if (! focused || ! focused.span) + focused = canvas.aa[0][0] }
\ No newline at end of file diff --git a/js/ui/palette.js b/js/ui/palette.js index 871dd74..f42ad6b 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -1,15 +1,32 @@ +var fillColor = 1 // black + var palette = (function(){ - var palette_index = localStorage.getItem("ascii.palette") || 1 - var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse] - var palette_fn = palette_list[palette_index] - var palette = new Matrix (32, 2, function(x,y){ + var palette_index = localStorage.getItem("ascii.palette") || 1 + var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse] + var palette_fn = palette_list[palette_index] + var palette_chars = " ▓▒░" + var palette = new Matrix (32, 5, function(x,y){ var lex = new Lex (x,y) - lex.bg = palette_fn(x>>1) - lex.opacity = 1 - lex.build() return lex }) + palette.repaint = function(){ + palette.forEach(function(lex,x,y){ + if (y < 2) { + lex.bg = palette_fn(x>>1) + lex.fg = fillColor + } + else { + lex.bg = fillColor + lex.fg = palette_fn(x>>1) + } + lex.char = palette_chars[y] + lex.opacity = 1 + lex.build() + if (lex.char == "_") lex.char = " " + }) + } + palette.repaint() palette.bind = function(){ palette.forEach(function(lex, x, y){ @@ -19,25 +36,35 @@ var palette = (function(){ lex.span.addEventListener('mousedown', function(e){ e.preventDefault() if (e.shiftKey) { - palette_index = (palette_index+1) % palette_list.length - localStorage.setItem("ascii.palette", palette_index) - palette_fn = palette_list[palette_index] - palette.forEach(function(lex,x,y){ - lex.bg = palette_fn(x>>1) - lex.build() - }) - return + palette_index = (palette_index+1) % palette_list.length + localStorage.setItem("ascii.palette", palette_index) + palette_fn = palette_list[palette_index] + palette.repaint() + return } - brush.fg = lex.bg + brush.fg = lex.fg brush.bg = lex.bg + brush.char = lex.char + brush.opacity = lex.opacity if (! brush.modified) { brush.generate() } if (filling || e.ctrlKey) { - fillColor = lex.bg + fillColor = lex.bg } }) + lex.span.addEventListener('contextmenu', function(e){ + e.preventDefault() + fillColor = y ? lex.fg : lex.bg + palette.repaint() + brush.fg = lex.fg + brush.char = lex.char + brush.opacity = lex.opacity + brush.generate() + return + }) + }) } diff --git a/webcam.html b/webcam.html index edf4ddc..5b40d6e 100644 --- a/webcam.html +++ b/webcam.html @@ -1,3 +1,4 @@ +<meta charset="UTF-8"> <link rel="stylesheet" href="css/sally.css" type="text/css" charset="utf-8" /> <style> #controls { width: 220px; float: left; padding: 10px; } @@ -109,9 +110,9 @@ function save (){ MircColor.fromCanvas(camera, saveText, { width: width, ratio: ratio, neighbor: nn }) function saveText(rows) { text_style.value = MircColor.ascii(rows) - if (window.self !== window.top) { - window.parent.postMessage(text_style.value, "*"); - } + if (window.self !== window.top) { + window.parent.postMessage(text_style.value, "*"); + } } } nn_el.addEventListener('change', function(){ |