forked from KatieFrogs/Dots-Converter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
24 lines (24 loc) · 46.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head><body><title>Dots converter</title><style>body{background-color:#ffe;transition:background-color .5s;color:#800000;font-family:sans-serif;margin:0;cursor:default}.button,input[type=submit],#filebutton,select{background:#ea8;border:1px solid #800;color:#800;font-weight:bold;cursor:default;font-size:13px;box-sizing:border-box;display:table-cell;width:150px;height:45px;text-align:center;vertical-align:middle}#select{padding:0;font-size:10px;width:100px;height:30px;zoom:1.5;display:block}#filebutton{position:relative;overflow:hidden;font-family:sans-serif}#files{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}#redbox,#txt{background:#f0e0d6;font:13px arial,sans-serif;padding-bottom:25px}#txt{width:100%;box-sizing:border-box;border:0;color:#800000;resize:none;padding:2em 25px 5px 25px;outline:0;overflow-x:auto;overflow-y:hidden}#txlw,#helplink{margin:5px 20px}#filebutton::after{content:'...'}#filebutton.fileselected::after{content:' \2713'}#pensize{width:50px}#drawcontainer{clear:both;white-space:nowrap;position:relative}#drawcanvas,#blankbraille{padding:1px 0 0 1px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAAAAADbWoUHAAAANUlEQVR4AWNwcPgPRQgWg8N/GDgAZzH8xwKwqhxo7Qf+H4AiOGuI+6jnfw8UwVmDykejcQQA2XHsQ3DMeJoAAAAASUVORK5CYII=)}#blockcanvas{padding:1px 0 0 1px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAAAAADbWoUHAAAAJElEQVR4AWNwcPgPRQgWg8N/TMDwHwvAqnIQah/1EU21j/oIANhB/mhpDiIUAAAAAElFTkSuQmCC')}a,#helplink{color:#00a;cursor:pointer}.bold{font-weight:bold}#toolbar,#boolbar{float:left;zoom:1.5}#toolbar div,#boolbar div{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABGAgMAAAA1J7tMAAAADFBMVEUAAAAAAACAgID///93WAP1AAAAAnRSTlP/AOW3MEoAAAHzSURBVHgBndJBihQxFMbxlJqNm0GZd4emV96g02KBiDCpnvef8wxCb9z33nElhXfQjRtP04PbgTKvkzIplFb8Fg35VfHlJdXOAgwsMvPrspQlr/M6iCc4P7Ou94hClCGxzHz9XVRUeCVKrHx1JIp6JLHWks09QbRTQHBdYZ2+4VIyh1D4epKGhyiZrx5oSlCfOVWXLVGAzFaNDTjz9sS7LwKIQs/Q8GdKIh5gOHG8Y47DQmZPTfv0X9mCBZWGN9P0ABGIHlDX8lsgdBDVflyXudt464NePWhhffJwjzoniD4z9ieOz8fbvKWoWolkfjM6MS6fwZH55crtK3dd4csPjyqr72e+fVpLolBY3KpsiRJh5nCXBzTezqyy25fjMLSsUg6Pp58ZYb4qd/5i//PrLGk9jp9uDkAErwnkYpqOmfeUv2YaqzKdsY/Gx4YDELvg9diWEAU0SeIXDasHnCNxW5LLu8SPFxxmvjiKs2SOUko2icdxZvVly2nBdHnAH8bvKod8nK/OLXh3OB3eJQ4N3xx+XVU0trCIGvPH/J1VClnq0+ihBy6H/jJzJFHoGrbQM4BK5tXH9ysnoAiKcfTl7cqDSk90vrICslXZshv3WG1lWxiXt89zLbFJzmxZBwSiXx6n8IDJ8vDGuWR5VQv+/WJ/AoGP1vI9ymKLAAAAAElFTkSuQmCC) no-repeat;background-clip:content-box;width:16px;height:16px;outline:1px solid #9aa;border:2px solid #cee;margin:0 0 1px 1px;background-color:#cee;display:inline-block}#toolbar div:active,#boolbar div:active{background-color:#acc;border-color:#acc}.resize{width:14px;height:14px;border:1px solid #aaa;background:#eee;display:inline-block;top:16px;cursor:nw-resize;position:absolute}.resize::after{content:attr(data-size);visibility:hidden;position:absolute;display:block;width:70px;margin:16px 0 0 16px}.resize:hover::after,.resize:active::after{visibility:visible}td{padding:0;vertical-align:middle}form{display:inline}#blockcontainer{position:relative;cursor:default;clear:both}#blockmenu{position:absolute;background:none;border-spacing:0;border-collapse:collapse;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#blockmenu td{width:30px;height:30px;border:1px solid #000;text-align:center;vertical-align:middle;background:#fff;color:#888;font-size:18px}#boolbar{position:relative;z-index:1}#helpcontainer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);max-height:100%;overflow:auto;margin:auto}#helpcontent{max-width:600px;text-align:justify;font-size:18px;background:#ffe;margin:auto;padding:25px}#exampleart{font:13px arial,sans-serif}#filters{white-space:nowrap}#filters td{padding-left:10px}#drawroot,#blockroot,#redbox{clear:both;min-width:100%}input[type=range]{-webkit-appearance:none;width:100%;height:10px;padding:10px 0;margin:15px 0 0 0;outline:0;background:linear-gradient(to right,#000 50%,#fff 50%) no-repeat;border-top:1px solid #800;position:absolute;bottom:0;left:0}input[type=range]::before{content:'Contrast: ' attr(alt);display:block;position:absolute;top:-17px;left:5px;color:#800;font-size:13px;font-weight:bold}#leftbuttons{float:left;display:flex}#maxwidth,#maxheight{width:100%;height:27px;font-size:16px;padding:0 5px}</style><style id="blankstyle">.braillegrid{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAdElEQVRIie2VQQoAMQgDfZoP9FH5WfbUY9vIuodFAwULQ+h4qbk73Z0keZsVztblFgASZxKVSP0LR/l9oUQl8o3yggEcZ4XrusPSQolKZJT3SSlHBEkyIo6zwnXdYWmhRCUyyvv8409RTmqHUmH5C0e5gfID38SmJWednBsAAAAASUVORK5CYII=)!important}</style><div id="leftbuttons"><div><select id="select"><option value="0" selected="selected">Dots</option><option value="1">Full blocks</option><option value="2">Half blocks</option></select><div id="drawbutton" onclick="draw.toggle()" class="button" style="background:#f95;border-color:#d00;color:#d00">Dots editor</div></div><div><div id="filebutton">Choose file<form id="fileform"><input id="files" type="file"></form></div><div></div><div id="blockbutton" onclick="draw.toggle(0,1)" class="button">Block editor</div></div><div><div class="dotstab" style=""><div onclick="dots.file()" id="todots" class="button">Image to Dots</div></div><div class="blockstab" style="display:none"><div onclick="dots.file()" id="toblocks" class="button">Image to Blocks</div></div><div></div><div onclick="draw.todots(2)" class="button">Image from editor</div></div><div style="display: none;" class="blockstab"><div class="button" id="toblockdraw">To block drawing</div></div><div class="dotstab"><div class="button" style="height:90px">Blank dots character:<div style="display:flex;justify-content:center"><canvas width="20" height="40" id="blankbraille" oncontextmenu="return !1"></canvas><div style="text-align:left"><label><input id="blankrandom" type="checkbox">Randomize</label><br><label><input id="showblank" onchange="dots.format()" type="checkbox">Show on grid</label></div></div></div></div><div><label><div class="button">Width<br><input min="0" id="maxwidth" type="number"></div></label><div></div><label><div class="button">Height<br><input min="0" id="maxheight" type="number"></div></label></div><div><label><div class="button"><input id="crop" checked="checked" type="checkbox">Crop</div></label><div></div><label><div class="button"><input id="trim" checked="checked" type="checkbox">Trim</div></label></div><div class="button" style="position:relative"><div class="dotstab" style=""><input id="fuzzw" min="0" max="255" value="128" val="128" alt="50%" type="range"></div><div class="blockstab" style="display:none"><input id="fuzzx" min="0" max="255" value="128" val="128" alt="50%" type="range"></div></div></div><div id="drawroot" style="display:none"><div id="toolbar"><div style="background-position: 0px 0px; border-color: red;" onclick="draw.tool.black()" id="color1" title="Black brush"></div><div style="background-position: 0px -18px; border-color: rgb(255, 221, 221);" onclick="draw.tool.white()" id="color2" title="White brush"></div><div style="background-position: 0px -36px;" onclick="draw.tool.gray()" id="color3" title="Gray brush"></div><div style="background-position: -18px 0px; border-color: red;" onclick="draw.tool.pencil()" id="tool1" title="Pencil tool"></div><div style="background-position: -18px -18px;" onclick="draw.tool.bucket()" id="tool4" title="Fill tool"></div><div style="background-position: -18px -36px;" onclick="draw.tool.line()" id="tool2" title="Line tool"></div><div style="background-position: 0px -54px;" onclick="draw.tool.square()" id="tool3" title="Rectangle tool"></div><div style="background-position: -18px -54px;" onclick="draw.tool.circle()" id="tool5" title="Ellipsis tool"></div><div style="background-position: -36px -54px;" onclick="draw.tool.move()" id="tool6" title="Move tool"></div><div style="background-position: -72px -54px; border-color: red;" onclick="draw.tool.grid()" id="grid1" title="Grid"></div><br><div style="background-position:-72px 0" onclick="draw.tool.undo()" title="Undo"></div><div style="background-position:-72px -18px" onclick="draw.tool.redo()" title="Redo"></div><div style="background-position:-36px 0" onclick="draw.tool.fliph()" title="Horizontal Flip"></div><div style="background-position:-36px -18px" onclick="draw.tool.flipv()" title="Vertical Flip"></div><div style="background-position:-36px -36px" onclick="draw.tool.clear()" title="Erase canvas"></div><div style="background-position:-54px 0" onclick="draw.tool.rotatecw()" title="Rotate clockwise"></div><div style="background-position:-54px -18px" onclick="draw.tool.rotateccw()" title="Rotate counter-clockwise"></div><div style="background-position:-54px -36px" onclick="draw.tool.invert()" title="Invert colors"></div><div style="background-position:-54px -54px" onclick="draw.tool.trim()" title="Auto crop image"></div><div style="background-position: -72px -36px; border-color: red;" onclick="draw.tool.autoexport()" id="export1" title="Auto export"></div></div><div style="height:60px;display:table-cell;vertical-align:middle;padding-left:10px"><label>Brush size:<input id="pensize" value="1" min="1" max="100" type="number"></label></div><div id="drawcontainer" style="width:1000px;height:720px"><canvas id="drawcanvas" width="1000" height="720" oncontextmenu="return !1" style="display: block;"></canvas><div id="drawresize" class="resize" data-size="100x72" style="left:1000px;top:720px"></div></div><br><div id="drawexport" onclick="draw.todots(1)" class="button">Export</div><div onclick="dots.toimage(1)" class="button">Import</div></div><div id="blockroot" style="display:none"><div id="boolbar"><div style="background-position:-36px -36px" onclick="block.clear()" title="Erase canvas"></div></div><div id="blockcontainer"><canvas id="blockcanvas" width="1000" height="720" oncontextmenu="return !1"></canvas><div id="blockresize" class="resize" data-size="50x18" style="left:1000px;top:720px"></div><table id="blockmenu" style="display:none"><tbody><tr><td>░</td><td>▀</td><td>x</td></tr><tr><td>▌</td><td style="background:none"></td><td>▐</td></tr><tr><td>█</td><td>▄</td><td>▒</td></tr></tbody></table></div><br><div id="blockexport" onclick="block.toblocks()" class="button">Export</div><div onclick="block.fromblocks()" class="button">Import</div></div><div id="redbox"><form action="block-draw" id="blockdrawform" method="post"><textarea id="txt" onchange="dots.bytes()" onkeyup="dots.bytes()" onkeydown="dots.bytes()" name="text" rows="10" wrap="off"></textarea></form><div id="txlw">Size:<span id="txtchars"><span class="bold">0</span> characters</span> (<span id="txtbytes"><span class="bold">0</span> bytes</span>)</div><span id="helplink">Help</span></div><div id="helpcontainer"><div id="helpcontent">This
tool can be used to convert pictures into unicode symbols from either
braille patterns or blocks. You can use any image, but the preferred
ones are those with purely black and white pixels and size lower than
200 pixels in width and height. Select the picture with "Choose file"
button and click on "Image to Dots". If you're satisfied with what
you've got you can copy it from the form and share with others. If you
see missing symbols, dowload a font that supports Braille Pattern block,
like Symbola. To the left of the "Choose file" button you can select
the type of output that you can get. With Full or Half blocks options,
along with black and white colors you can also use gray color. If you
found a Unicode art somewhere and want to convert it into an image,
first choose the correct format from the drop down (Dots or Blocks),
open Dots editor, scroll down to the output form and paste the art,
above the form click Import to load it into the canvas, and click on
"Dots to Image" button at the top of the page. Some of the other things
you can find on this page is the Contrast slider, Width and Height
boxes, and form where you can convert a unicode art to another type. If
you have a picture that is too big you can set the width and/or height
and also set the appropriate Contrast. Here's an example of Braille art:<div id="exampleart">⠀⠀⠀⠀⠀⠀⠀⠀⢰⠱⡀<br>⠀⠀⠀⠀⠀⠀⠀⠀⡏⠂⢱<br>⠀⠀⢠⠒⡢⠔⠒⠉⠉⠑⠢⡧⠤⡀<br>⣀⡀⢘⠎⢄⠀⠀⠀⠀⢀⠀⠱⣠⠃<br>⠈⠪⢝⠤⡸⡍⣀⠀⠐⣽⠁⣀⠤⣓⠭⠂<br>⡠⢔⡪⢕⠊⠀⡭⠥⠔⡆⠪⣒⠽⢅⡀<br>⠈⠁⠀⠀⠉⠒⠬⣒⣊⠤⠔⠊⠉⠑⠊</div>If you hate this new version and want to use the retro version, <a href="retro.html">click here</a>.</div></div><script id="worker" type="epic/memes">//*/
'use strict'; function fromimage(options){var textarray=[];var pixels=options.pixels;if(options.arttype){if(options.arttype==1)var fullblock="\u2591\u2580\u2584\u2588";var fuzy=options.fuzzx;var fuzx=256-fuzy;fuzx*=fuzx*fuzx;fuzy*=fuzy*fuzy}else{var braille="";for(var i=0;i<256;i++)braille+=String.fromCharCode(10240+i);var fuzw=256-options.fuzzw;fuzw*=fuzw*fuzw}var width=options.width;var height=options.height;for(var y=0;y<height;y+=4){var text="";if(!options.silent)self.postMessage({job:"updatestatus",options:(y/ height*100|0)+"%"});for(var x=0;x<width;x+=2){var character=[];for(var i=0;i<4;i++){var absolute=((y+i)*width+x)*4;character.push(pixels.data[absolute]*pixels.data[absolute+1]*pixels.data[absolute+2]);character.push(pixels.data[absolute+4]*pixels.data[absolute+5]*pixels.data[absolute+6])}if(options.arttype==1)if(character[0]>=fuzy&&character[0]<=fuzx&&character[1]>=fuzy&&character[1]<=fuzx)text+="\u2592";else text+=fullblock[(character[2]<fuzx)*2+(character[0]<fuzx)*1]+fullblock[(character[3]<fuzx)* 2+(character[1]<fuzx)*1];else if(options.arttype==2){var gray=0;var black=0;var top=0;var left=0;var right=0;var bottom=0;for(var i in character){black=1;if(character[i]>=fuzy){if(character[i]<=fuzx)gray++;black=0}if(i<4)top+=black;else bottom+=black;if(i%2)right+=black;else left+=black}if(top>bottom+2||top&&!bottom)text+="\u2580";else if(bottom>top+2||bottom&&!top)text+="\u2584";else if(left>right+2||left&&!right)text+="\u258c";else if(right>left+2||right&&!left)text+="\u2590";else if(top&&bottom)text+= "\u2588";else if(gray>3)text+="\u2592";else text+="\u2591"}else text+=String.fromCharCode(10240+(fuzw>character[7])*128+(fuzw>character[6])*64+(fuzw>character[5])*32+(fuzw>character[3])*16+(fuzw>character[1])*8+(fuzw>character[4])*4+(fuzw>character[2])*2+(fuzw>character[0]))}textarray.push(text);if(options.arttype==1)y-=2}if(textarray.length){var max=[textarray[0].length,0];if(options.crop){textarray.forEach(function(a){if(a.length){var maxleft=a.replace(/[^\u2800\u2591].*$/,"").length;if(maxleft< max[0])max[0]=maxleft;if(!options.trim){var maxright=a.replace(/[\u2800\u2591]*$/,"").length;if(maxright>max[1])max[1]=maxright}}});if(options.trim)textarray=textarray.map(function(a){return a.slice(max[0]).replace(/[\u2800\u2591]*$/,"")});else textarray=textarray.map(function(a){return a.slice(max[0],max[1])})}}text=textarray.join("\n");if(options.crop)text=text.replace(/^([\u2800\u2591]*\n)*|(\n[\u2800\u2591]*)*$/g,"").replace(/\n*$|^\n*/g,"");if(!options.arttype&&options.silent==1)if(options.blankdot=== true)text=text.replace(/\u2800/g,function(){return"\u2801\u2802\u2804\u2808\u2810\u2820\u2840\u2880"[Math.random()*8|0]});else text=text.replace(/\u2800/g,options.blankdot);self.postMessage({job:"fromimage",options:{text:text,silent:options.silent}})} function drawfill(options){var oldfill=options.cache[options.y][options.x];var width=options.cache[0].length;var height=options.cache.length;var stack=[[options.x,options.y]];for(;stack.length;){var pop=stack.pop();var x=pop[0];var y=pop[1];for(;0<y--&&options.cache[y][x]==oldfill;);var skipleft=0;var skipright=0;for(;++y<height&&options.cache[y][x]==oldfill;){options.cache[y][x]=options.fillcolor;if(x>0)if(options.cache[y][x-1]==oldfill){if(!skipleft){stack.push([x-1,y]);skipleft=1}}else if(skipleft)skipleft= 0;if(x<width-1)if(options.cache[y][x+1]==oldfill){if(!skipright){stack.push([x+1,y]);skipright=1}}else if(skipright)skipright=0}}self.postMessage({job:"drawfill",options:options.cache})}onmessage=function(e){switch(e.data.job){case "fromimage":fromimage(e.data.options);break;case "drawfill":drawfill(e.data.options);break}};//</script><!--
/*--><script>'use strict';document.body.removeChild(document.body.firstChild);var firstrun=1;function id(a){return document.getElementById(a)}try{var workerblob=new Blob([id("worker").textContent],{type:"text/javascript"});var workerurl=URL.createObjectURL(workerblob);var worker=new Worker(workerurl)}catch(e){var worker=new Worker(location.href)}worker.onmessage=function(e){var options=e.data.options;switch(e.data.job){case "fromimage":if(options.silent==2)dots.toimage(3,options.text);else{id("txt").value=options.text;dots.bytes();if(!options.silent){dots.toimage(2);if(id("blankrandom").checked)id("txt").value=options.text.replace(/\u2800/g,function(){return"\u2801\u2802\u2804\u2808\u2810\u2820\u2840\u2880"[Math.random()*8|0]});else id("txt").value=options.text.replace(/\u2800/g,blank.getchar())}}break;case "updatestatus":id("txt").value=options;break;case "drawfill":draw.cache=options;draw.redraw(1);break}};var dots={file:function(){if(id("files").files.length||usednd){var file=id("files").files[0];try{var filetype=usednd?dndfile.type:file.type}catch(e){var filetype=""}if(!~filetype.indexOf("image")){alert("Couldn't open file!");usednd=0;dndfile=null;id("fileform").reset();dots.fileselected();return}var reader=new FileReader;reader.onload=function(event){dots.prefromimage(event.target.result)};if(usednd)reader.readAsDataURL(dndfile);else reader.readAsDataURL(file)}},prefromimage:function(url,silent){var img=document.createElement("img");img.onload=function(){var imagewidth=img.naturalWidth;var imageheight=img.naturalHeight;var maxwidth=id("maxwidth").value|0;var maxheight=id("maxheight").value|0;if(maxwidth>0){imagewidth=maxwidth;imageheight=imageheight/(img.naturalWidth/maxwidth)|0}if(maxheight>0)if(maxwidth)imageheight=maxheight;else{imageheight=maxheight;imagewidth=imagewidth/(img.naturalHeight/maxheight)|0}if(imagewidth<1)imagewidth=1;if(imageheight<1)imageheight=1;img.width=imagewidth;img.height=imageheight;var canvas=document.createElement("canvas");var width=Math.ceil(imagewidth/2)*2;var height=Math.ceil(imageheight/4)*4;canvas.width=width;canvas.height=height;var context=canvas.getContext("2d");context.fillStyle="#fff";context.fillRect(0,0,width,height);context.drawImage(img,0,0,imagewidth,imageheight);worker.postMessage({job:"fromimage",options:{pixels:context.getImageData(0,0,width,height),silent:silent,arttype:arttype,fuzzx:id("fuzzx").value,fuzzw:id("fuzzw").value,width:width,height:height,crop:id("crop").checked,trim:id("trim").checked,blankdot:silent?id("blankrandom").checked||blank.getchar():0}})};img.src=url},toimage:function(drawimport,text){if(!text){text=id("txt").value;if(!text){dots.cancel();return}}if(arttype==1){var fullblock="\u2591\u2584\u2580\u2588";text=text.replace(/\u2590\u2588/g,"\u2591\u2588").replace(/[\u2590\u2588]\u258C|\u258C\u2590/g,"\u2588\u2591").replace(/[\u258C\u2590]/g,"\u2588")}else if(arttype==2)var fromhalfblock="\u2591--\u2584-\u2590----\u258c-\u2580--\u2588";else{var braille="";for(var i=0;i<256;i++)braille+=String.fromCharCode(10240+i);if(drawimport<2)if(id("blankrandom").checked)text=text.replace(/[\u2801\u2802\u2804\u2808\u2810\u2820\u2840\u2880]/g,"\u2800");else text=text.replace(RegExp(blank.getchar(),"g"),"\u2800")}var textarray=[];var textt=text.split("\n");var width=textt.sort(function(a,b){return b.length-a.length})[0].length;var height=textt.length;var textt=text.split("\n");for(var y=0;y<height;y++){var padding="";for(var x=0;x<width-textt[y].length;x++)padding+=arttype?"\u2591":"\u2800";textt[y]=textt[y]+padding}text=textt.join("");var invalidcharacter=0;for(var y=0;y<height;y++){if(arttype==1){textarray[y*2]="";textarray[y*2+1]=""}else{textarray[y*4]="";textarray[y*4+1]="";textarray[y*4+2]="";textarray[y*4+3]=""}for(var x=0;x<width;x++)if(arttype==1)if(text[y*width+x]=="\u2592"){textarray[y*2]+="2";textarray[y*2+1]+="2"}else{var bin=fullblock.indexOf(text[y*width+x]);if(~bin){textarray[y*2]+=+!!(bin&2);textarray[y*2+1]+=+!!(bin&1)}else{invalidcharacter=1;break}}else if(arttype==2)if(text[y*width+x]=="\u2592"){textarray[y*4]+="22";textarray[y*4+1]+="22";textarray[y*4+2]+="22";textarray[y*4+3]+="22"}else{var bin=fromhalfblock.indexOf(text[y*width+x]);if(~bin){textarray[y*4]+=+!!(bin&8)+""+!!(bin&4)*1;textarray[y*4+1]+=+!!(bin&8)+""+!!(bin&4)*1;textarray[y*4+2]+=+!!(bin&2)+""+!!(bin&1)*1;textarray[y*4+3]+=+!!(bin&2)+""+!!(bin&1)*1}else{invalidcharacter=1;break}}else{var bin=braille.indexOf(text[y*width+x]);if(~bin){textarray[y*4]+=+!!(bin&1)+""+!!(bin&8)*1;textarray[y*4+1]+=+!!(bin&2)+""+!!(bin&16)*1;textarray[y*4+2]+=+!!(bin&4)+""+!!(bin&32)*1;textarray[y*4+3]+=+!!(bin&64)+""+!!(bin&128)*1}else{invalidcharacter=1;break}}if(invalidcharacter)break}if(invalidcharacter&&!firstrun){alert("Invalid character: "+text[y*width+x]+" (line "+(y+1)+", column "+(x+1)+")");var index=id("txt").value.indexOf(text[y*width+x]);id("txt").setSelectionRange(index,index+1);return}if(drawimport&&drawimport!=3){norealtime=1;draw.cache=textarray.map(function(a){return a.split("").map(Number)});draw.resize(draw.cache[0].length,draw.cache.length,1)}else{var canvas=document.createElement("canvas");if(arttype==1){canvas.width=width;canvas.height=height*2}else{canvas.width=width*2;canvas.height=height*4}var context=canvas.getContext("2d");context.fillStyle="#fff";context.fillRect(0,0,canvas.width,canvas.height);for(var y=0;y<canvas.height;y++)for(var x=0;x<canvas.width;x++)if(arttype){if(textarray[y][x]==1){context.fillStyle="#000";context.fillRect(x,y,1,1)}if(textarray[y][x]==2){context.fillStyle="#808080";context.fillRect(x,y,1,1)}}else if(textarray[y][x]==1){context.fillStyle="#000";context.fillRect(x,y,1,1)}var imglink=document.createElement("a");imglink.href=canvas.toDataURL("image/png");imglink.target="_blank";imglink.download="image.png";imglink.innerHTML="image.png";document.body.appendChild(imglink);imglink.click();document.body.removeChild(imglink)}},cancel:function(text){if(firstrun)return;if(text){text=(text+"\n").replace(/[\u2800\u2591]*\n/g,"\n").replace(RegExp("\\n*$|^\\n*","g"),"").split("\n");var v=0;var maxleft=text.map(function(a){if(a.length)return v=a.replace(/[^\u2800\u2591].*$/,"").length;else return v}).sort(function(a,b){return a>b?1:-1});if(maxleft)text=text.map(function(a){return a.slice(maxleft[0])}).join("\n");id("txt").value=text}dots.bytes()},bytes:function(){var text=id("txt").value;var txtbytes=encodeURIComponent(text).split(/%..|./).length-1;var txtchars=text.length;id("txtchars").innerHTML='<span class="bold">'+txtchars+"</span> character"+(txtchars==1?"":"s");id("txtbytes").innerHTML='<span class="bold">'+txtbytes+"</span> byte"+(txtbytes==1?"":"s");var rows=text.match(/\n/g);if(rows)rows=rows.length;else rows=0;id("txt").rows=rows<10?10:rows+1;var namearray=[text,id("select").value*1,0];if(id("drawroot").style.display=="block")namearray[2]=1;else if(id("blockroot").style.display=="block")namearray[2]=2;if(!firstrun)name=JSON.stringify(namearray)},format:function(){var dotstab=document.getElementsByClassName("dotstab");var blockstab=document.getElementsByClassName("blockstab");if(id("select").value=="0"){arttype=0;for(var i=0;i<dotstab.length;i++)dotstab[i].style.display="";for(var i=0;i<blockstab.length;i++)blockstab[i].style.display="none";if(draw.grid==9&&id("showblank").checked)dwac.classList.add("braillegrid");else dwac.classList.remove("braillegrid")}else{arttype=id("select").value*1;for(var i=0;i<dotstab.length;i++)dotstab[i].style.display="none";for(var i=0;i<blockstab.length;i++)blockstab[i].style.display="";dwac.classList.remove("braillegrid")}},fileselected:function(){if(id("files").files.length){id("filebutton").setAttribute("class","fileselected");usednd=0;dndfile=null}else if(usednd){id("fileform").reset();id("filebutton").setAttribute("class","fileselected")}else id("filebutton").removeAttribute("class")}};var draw={pencil:function(event){if(event.which==3&&!(draw.mousebutton+1)){draw.mousebutton=draw.strokecolor;if(draw.mousebutton==0)draw.strokecolor=1;else draw.strokecolor=0}var cursorx=(event.offsetX||event.layerX)/10*draw.zoom|0;var cursory=(event.offsetY||event.layerY)/10*draw.zoom|0;event.preventDefault();if(draw.currenttool==1)if(draw.dragging){draw.line(draw.pastx,draw.pasty,cursorx,cursory);draw.pastx=cursorx;draw.pasty=cursory}else{draw.setpix(cursorx,cursory,1);draw.pastx=cursorx;draw.pasty=cursory}if(draw.currenttool==2||draw.currenttool==3||draw.currenttool==5)if(draw.dragging){draw.currentx=cursorx;draw.currenty=cursory;if(event.shiftKey&&draw.currenttool!=2)if((draw.pastx>draw.currentx&&draw.pasty>draw.currenty)!=draw.pastx-draw.currentx<draw.pasty-draw.currenty)draw.currentx=draw.pastx+draw.currenty-draw.pasty;else draw.currenty=draw.pasty+draw.currentx-draw.pastx;if(draw.currenttool==2)draw.line(draw.pastx,draw.pasty,draw.currentx,draw.currenty,event.shiftKey);else if(draw.currenttool==3){draw.redraw();if(event.shiftKey)if((draw.pastx>draw.currentx&&draw.pasty>draw.currenty)!=draw.pastx-draw.currentx<draw.pasty-draw.currenty)draw.currentx=draw.pastx+draw.currenty-draw.pasty;else draw.currenty=draw.pasty+draw.currentx-draw.pastx;draw.line(draw.pastx,draw.pasty,draw.pastx,draw.currenty,0,2);draw.line(draw.pastx,draw.pasty,draw.currentx,draw.pasty,0,2);draw.line(draw.currentx,draw.pasty,draw.currentx,draw.currenty,0,2);draw.line(draw.pastx,draw.currenty,draw.currentx,draw.currenty,0,2)}else draw.circle(draw.currentx,draw.currenty,draw.currentx-draw.pastx,draw.currenty-draw.pasty)}else{draw.setpix(cursorx,cursory);draw.pastx=cursorx;draw.pasty=cursory;draw.currentx=cursorx;draw.currenty=cursory}if(draw.currenttool==4)if(!draw.dragging&&draw.cache[cursory][cursorx]!=draw.strokecolor)draw.fill(cursorx,cursory);if(draw.currenttool==6)if(draw.dragging){draw.currentx=cursorx;draw.currenty=cursory;draw.moveimg(draw.currentx-draw.pastx,draw.currenty-draw.pasty)}else{draw.pastx=cursorx;draw.pasty=cursory}draw.dragging=1},move:function(event){if(draw.dragging&&event.target.id=="drawcanvas")draw.pencil(event);if(draw.resizing||block.resizing){event.preventDefault();if(event.pageX>document.body.offsetWidth-50)scrollTo(scrollX+50,scrollY);getSelection().removeAllRanges()}if(draw.resizing){draw.resizewidth=((event.pageX-dwac.offsetLeft+8)/20*draw.zoom|0)*2;draw.resizeheight=((event.pageY-dwac.offsetTop-130)/40*draw.zoom|0)*4;if(draw.zoom==1){draw.resizewidth=draw.resizewidth>100?100:draw.resizewidth;draw.resizeheight=draw.resizeheight>100?100:draw.resizeheight}if(draw.resizewidth||draw.resizeheight)draw.resize(draw.resizewidth,draw.resizeheight);var width=parseInt(id("drawroot").style.width);var otherwidth=draw.resizewidth*10/draw.zoom+86;if(!(width*0+1)||otherwidth>width)width=otherwidth;id("drawroot").style.width=width+"px"}if(block.resizing){block.resizewidth=(event.pageX-blok.offsetLeft+8)/20|0;block.resizeheight=(event.pageY-blok.offsetTop-100)/40|0;if(block.resizewidth||block.resizeheight)block.resize(block.resizewidth,block.resizeheight)}},stop:function(event){if(draw.dragging){if((draw.currenttool==2||draw.currenttool==3||draw.currenttool==5)&&window.draw.currentx===null)draw.setpix(draw.pastx,draw.pasty,1);if((draw.currenttool==2||draw.currenttool==3)&&window.draw.currentx!==null){if(draw.currenttool==2)draw.line(draw.pastx,draw.pasty,draw.currentx,draw.currenty,event.shiftKey,1);else{draw.line(draw.pastx,draw.pasty,draw.pastx,draw.currenty,0,1);draw.line(draw.pastx,draw.pasty,draw.currentx,draw.pasty,0,1);draw.line(draw.currentx,draw.pasty,draw.currentx,draw.currenty,0,1);draw.line(draw.pastx,draw.currenty,draw.currentx,draw.currenty,0,1)}draw.redraw(1)}if(draw.currenttool==1)draw.redraw(1);if(draw.currenttool==5&&window.draw.currentx!==null)draw.circle(draw.currentx,draw.currenty,draw.currentx-draw.pastx,draw.currenty-draw.pasty,1);if(draw.currenttool==6&&window.draw.currentx!==null)draw.moveimg(draw.currentx-draw.pastx,draw.currenty-draw.pasty,1);if(draw.mousebutton+1){draw.strokecolor=draw.mousebutton;draw.mousebutton=-1}}if(draw.resizing){if(draw.resizewidth&&draw.resizeheight)draw.resize(draw.resizewidth,draw.resizeheight,1);id("drawroot").style.width="";draw.resizewidth=0;draw.resizeheight=0;draw.resizing=0}if(block.resizing){if(block.resizewidth&&block.resizeheight)block.resize(block.resizewidth,block.resizeheight,1);block.resizewidth=0;block.resizeheight=0;block.resizing=0}draw.dragging=0;block.dragging=0;bkmenu.style.display="none";blank.dragging=0;draw.currentx=null;draw.currenty=null;draw.pastx=null;draw.pasty=null},redraw:function(save){if(drwc){drwc.clearRect(0,0,dwac.width,dwac.height);drwc2.clearRect(0,0,dwac2.width,dwac2.height);drwc2.fillStyle="#fff";drwc2.fillRect(0,0,dwac2.width,dwac2.height);drwc.beginPath();for(var y in draw.cache)for(var x in draw.cache[y])if(draw.cache[y][x]){drwc.fillStyle=drwc2.fillStyle=draw.cache[y][x]==2?"#808080":"#000";drwc.fillRect(x*10,y*10,draw.grid,draw.grid);drwc2.fillRect(x,y,1,1)}if(save){draw.undocount++;draw.undocache[draw.undocount]=dwac2.toDataURL("image/png");if(draw.undocache.length>draw.undocount)draw.undocache.splice(draw.undocount+1,draw.undocache.length-draw.undocount-1);if(draw.autoexport&&!norealtime)draw.todots(1);norealtime=0}}},todots:function(silent){dots.prefromimage(dwac2.toDataURL("image/png"),silent)},rotate:function(){var width=draw.cache[0].length;var height=draw.cache.length;var maxsize=width>height?width:height;draw.resize(maxsize,maxsize,2);var dotc=[];for(var y in draw.cache){dotc[y]=[];for(var x in draw.cache[y])dotc[y][x]=draw.cache[x][y]}draw.cache=dotc;draw.resize(height,width,2)},fill:function(x,y){worker.postMessage({job:"drawfill",options:{cache:draw.cache,x:x,y:y,fillcolor:draw.strokecolor}})},selecttool:function(toolname,tool,total,secondary){for(var i=total+1;--i;)id(toolname+i).style.borderColor=tool==i?"red":"";if(secondary)id(toolname+secondary).style.borderColor="#fdd"},setpix:function(x,y,save){if(y>-1&&y<dwac2.height&&x>-1&&x<dwac2.width){drwc.fillStyle=drwc2.fillStyle=draw.strokecolor==2?"#808080":"#000";if(draw.strokesize==1){if(draw.strokecolor==0){drwc.clearRect(x*10,y*10,draw.grid,draw.grid);drwc2.clearRect(x,y,1,1)}else{drwc.fillRect(x*10,y*10,draw.grid,draw.grid);drwc2.fillRect(x,y,1,1)}if(save)draw.cache[y][x]=draw.strokecolor}else for(var i=0;i<draw.strokesize*draw.strokesize;i++){var clh=y-(draw.strokesize/2|0)+(i/draw.strokesize|0);var clw=x+(draw.strokesize/2|0)+(i/draw.strokesize|0)*draw.strokesize-i;if(clh>-1&&clh<dwac2.height&&clw>-1&&clw<dwac2.width){if(draw.strokecolor==0){drwc.clearRect(clw*10,clh*10,draw.grid,draw.grid);drwc2.clearRect(clw,clh,1,1)}else{drwc.fillRect(clw*10,clh*10,draw.grid,draw.grid);drwc2.fillRect(clw,clh,1,1)}if(save)draw.cache[clh][clw]=draw.strokecolor}}}},line:function(x0,y0,x1,y1,shift,last){if(!last&&draw.currenttool!=1)draw.redraw();var dx=Math.abs(x1-x0);var dy=Math.abs(y1-y0);var sx=x0<x1?1:-1;var sy=y0<y1?1:-1;var err=dx-dy;if(!dx||!dy)shift=0;if(shift)if(dy/dx<=.25){dy=0;err=dx}else if(dx/dy<=.25){dx=0;err=-dy}else{if(dx>dy)dy=dx;else dx=dy;err=0}for(;;){if(last==1||draw.currenttool==1)draw.setpix(x0,y0,1);if(last!=1)draw.setpix(x0,y0);if(x0==x1&&y0==y1||shift&&(x0==x1||y0==y1))break;var e2=err*2;if(-dy<e2){err-=dy;x0+=sx}if(dx>e2){err+=dx;y0+=sy}}},circle:function(xc,yc,a,b,save){xc=Math.abs(xc);yc=Math.abs(yc);a=Math.abs(a);b=Math.abs(b);if(!save)draw.redraw();var a2=a*a;var b2=b*b;var px=0;var py=2*a2*b;draw.circle2(xc,yc,0,b,save);var y=b;var p=Math.round(b2-a2*b+.25*a2);for(var x=1;px<py;x++){px+=2*b2;if(p<0)p+=b2+px;else{y--;py-=2*a2;p+=b2+px-py}draw.circle2(xc,yc,x,y,save)}var p=Math.round(b2*(x+.5)*(x+.5)+a2*(y-1)*(y-1)-a2*b2);for(;y--;){py-=2*a2;if(p>0)p+=a2-py;else{x++;px+=2*b2;p+=a2-py+px}draw.circle2(xc,yc,x,y,save)}if(save)draw.redraw(1)},circle2:function(xc,yc,x,y,save){draw.setpix(xc+x,yc+y,save);draw.setpix(xc-x,yc+y,save);draw.setpix(xc+x,yc-y,save);draw.setpix(xc-x,yc-y,save)},moveimg:function(x,y,save){if(save){var dotc2=[];for(var yd in draw.cache){dotc2[yd]=[];for(var xd in draw.cache[yd])if(xd-x>-1&&yd-y>-1&&xd-x<draw.cache[0].length&&yd-y<draw.cache.length)dotc2[yd][xd]=draw.cache[yd-y][xd-x];else dotc2[yd][xd]=0}draw.cache=dotc2;dotc2=null;if(save==1)draw.redraw(1)}else{drwc.clearRect(0,0,draw.cache[0].length*10,draw.cache.length*10);for(var yd in draw.cache)for(var xd in draw.cache[yd]){var xt=+xd+x;var yt=+yd+y;if(xt>-1&&yt>-1&&xt<draw.cache[0].length&&yt<draw.cache.length){drwc.fillStyle=draw.cache[yd][xd]==2?"#808080":"#000";if(draw.cache[yd][xd]==0)drwc.clearRect(xt*10,yt*10,draw.grid,draw.grid);else drwc.fillRect(xt*10,yt*10,draw.grid,draw.grid)}}}},undo:function(){var img=document.createElement("img");img.onload=function(){draw.resize(img.width,img.height,2);drwc2.clearRect(0,0,dwac2.width,dwac2.height);drwc2.drawImage(img,0,0,dwac2.width,dwac2.height);var gid=drwc2.getImageData(0,0,draw.cache[0].length,draw.cache.length);for(var y in draw.cache)for(var x in draw.cache[0]){var dig=gid.data[(y*draw.cache[0].length+x*1)*4];draw.cache[y][x]=dig==0?1:dig==128?2:0}draw.redraw();if(draw.autoexport)draw.todots(1)};img.src=draw.undocache[draw.undocount]},resize:function(width,height,save){if(save||width!=dwac.width*10&&height!=dwac.height*10){width=Math.ceil(width/2)*2;height=Math.ceil(height/4)*4;if(save)draw.zoom=width>100||height>100?2:1;dwac.width=width>20?width*10:200;dwac.height=height>20?height*10:200;if(draw.zoom!=1){id("drawcontainer").style.width=dwac.style.width=dwac.width/draw.zoom+"px";id("drawcontainer").style.height=dwac.style.height=dwac.height/draw.zoom+"px";dwac.style.backgroundSize=20/draw.zoom+"px "+40/draw.zoom+"px"}else{dwac.style.width=dwac.style.height="auto";dwac.style.backgroundSize="20px 40px";id("drawcontainer").style.width=dwac.width+"px";id("drawcontainer").style.height=dwac.height+"px"}if(save){dwac2.width=width>20?width:20;dwac2.height=height>20?height:20;for(var y=0;y<dwac2.height;y++){if(!draw.cache[y])draw.cache[y]=[];for(var x=0;x<dwac2.width;x++)if(!draw.cache[y][x])draw.cache[y][x]=0;draw.cache[y]=draw.cache[y].slice(0,dwac2.width)}draw.cache=draw.cache.slice(0,dwac2.height)}if(save!=2)draw.redraw(save);id("drawresize").dataset.size=dwac.width/10+"x"+dwac.height/10;id("drawresize").style.top=dwac.height/draw.zoom+"px";id("drawresize").style.left=dwac.width/draw.zoom+"px"}},toggle:function(close,blocks){if(blocks){id("drawroot").style.display="none";id("blockroot").style.display=id("blockroot").style.display=="block"||close?"none":"block"}else{id("blockroot").style.display="none";id("drawroot").style.display=id("drawroot").style.display=="block"||close?"none":"block"}},tool:{invert:function(){draw.cache=draw.cache.map(function(a){return a.map(function(b){return b==2?2:b==1?0:1})});draw.redraw(1)},flipv:function(){draw.cache.reverse();draw.redraw(1)},fliph:function(){draw.cache=draw.cache.map(function(a){return a.reverse()});draw.redraw(1)},rotatecw:function(){draw.rotate();draw.tool.fliph()},rotateccw:function(){draw.rotate();draw.tool.flipv()},clear:function(){draw.cache=[];for(var y=0;y<dwac2.height;y++){draw.cache[y]=[];for(var x=0;x<dwac2.width;x++)draw.cache[y][x]=0}draw.redraw(1)},black:function(){draw.strokecolor=1;draw.selecttool("color",1,3,2)},white:function(){draw.strokecolor=0;draw.selecttool("color",2,3,1)},gray:function(){draw.strokecolor=2;draw.selecttool("color",3,3,2)},pencil:function(){draw.currenttool=1;draw.selecttool("tool",1,6)},line:function(){draw.currenttool=2;draw.selecttool("tool",2,6)},square:function(){draw.currenttool=3;draw.selecttool("tool",3,6)},bucket:function(){draw.currenttool=4;draw.selecttool("tool",4,6)},circle:function(){draw.currenttool=5;draw.selecttool("tool",5,6)},move:function(){draw.currenttool=6;draw.selecttool("tool",6,6)},undo:function(){if(draw.undocache[draw.undocount-1]){draw.undocount--;draw.undo()}},redo:function(){if(draw.undocache[draw.undocount+1]){draw.undocount++;draw.undo()}},trim:function(){var dtjoin=draw.cache.map(function(a){return a.join("")});var maxleft=dtjoin.map(function(a){return a.replace(/[12].*$/,"").length}).sort(function(a,b){return a>b?1:-1});maxleft=(maxleft[0]/2|0)*2;var maxright=dtjoin.map(function(a){return a.replace(/^.*[12]/,"").length}).sort(function(a,b){return a>b?1:-1});maxright=(maxright[0]/2|0)*2;for(var maxtop in dtjoin)if(/1|2/.test(dtjoin[maxtop])){maxtop=(maxtop/4|0)*4;break}for(var maxbottom in dtjoin)if(/1|2/.test(dtjoin[dtjoin.length-maxbottom])){maxbottom--;break}maxbottom=(maxbottom/4|0)*4;draw.moveimg(-maxleft,-maxtop,2);draw.resize(draw.cache[0].length-maxleft-maxright,draw.cache.length-maxtop-maxbottom,1)},grid:function(){if(draw.grid==9){dwac.classList.remove("braillegrid");dwac.style.background="#fff";draw.grid=10;draw.selecttool("grid",0,1)}else{if(id("select").value=="0"&&id("showblank").checked)dwac.classList.add("braillegrid");else dwac.classList.remove("braillegrid");dwac.style.background="";draw.grid=9;draw.selecttool("grid",1,1)}draw.redraw()},autoexport:function(){if(draw.autoexport)draw.selecttool("export",0,1);else draw.selecttool("export",1,1);draw.autoexport=!draw.autoexport}},currenttool:1,strokecolor:1,strokesize:1,zoom:1,undocache:[],undocount:-1,mousebutton:-1,grid:10};id("pensize").onchange=function(){draw.strokesize=parseInt(id("pensize").value);if(draw.strokesize*0!=0||draw.strokesize<1||draw.strokesize>101)draw.strokesize=1;id("pensize").value=draw.strokesize};id("drawresize").onmousedown=function(event){event.preventDefault();id("drawroot").style.width=((event.pageX-dwac.offsetLeft-8)/20|0)*2*draw.zoom*10/draw.zoom+86+"px";draw.resizing=1};id("drawresize").ondblclick=function(event){event.preventDefault();var height=draw.cache.length;var width=draw.cache[0].length;if((height>50||width>50)&&draw.zoom==1){draw.resizing=0;draw.resize(width*2,height*2,1)}};var dwac=id("drawcanvas");dwac.style.display="block";dwac.onmousedown=draw.pencil;addEventListener("mousemove",draw.move);document.onmouseup=draw.stop;document.onblur=draw.stop;document.onkeydown=function(event){if(id("drawroot").style.display=="block"&&event.ctrlKey)if(event.keyCode==90)draw.tool.undo();else if(event.keyCode==89)draw.tool.redo()};var norealtime=0;draw.tool.black();draw.tool.pencil();draw.tool.grid();draw.tool.autoexport();var dwac2=document.createElement("canvas");dwac2.width=dwac.width/10;dwac2.height=dwac.height/10;var drwc=dwac.getContext("2d");var drwc2=dwac2.getContext("2d");draw.tool.clear();var block={down:function(event){event.preventDefault();var currentx=(event.offsetX||event.layerX)/20|0;var currenty=(event.offsetY||event.layerY)/40|0;if(currentx>=0&¤ty>=0&¤tx<block.width&¤ty<block.height){block.currentx=currentx*20;block.currenty=currenty*40;block.dragging=1;if(event.which==3)block.draw(block.lastblock,block.currenty/40,block.currentx/20);else{bkmenu.style.display="table";var left=block.currentx-36;if(left<0)left=0;bkmenu.style.left=left+"px";bkmenu.style.top=block.currenty-26+"px"}}getSelection().removeAllRanges()},move:function(event){event.preventDefault();var pastx=(event.offsetX||event.layerX)/20|0;var pasty=(event.offsetY||event.layerY)/40|0;if(!block.dragging&&pastx>=0&&pasty>=0&&pastx<block.width&&pasty<block.height){blokd.clearRect(block.pastx,block.pasty,20,1);blokd.clearRect(block.pastx,block.pasty,1,40);blokd.clearRect(block.pastx,block.pasty+40,20,1);blokd.clearRect(block.pastx+20,block.pasty,1,40);block.pastx=pastx*20-1;block.pasty=pasty*40-1;blokd.fillStyle="#f00";blokd.fillRect(block.pastx,block.pasty,20,1);blokd.fillRect(block.pastx,block.pasty,1,40);blokd.fillRect(block.pastx,block.pasty+40,20,1);blokd.fillRect(block.pastx+20,block.pasty,1,40)}getSelection().removeAllRanges()},inup:function(event){block.lastblock=event.target.innerHTML;block.draw(block.lastblock,block.currenty/40,block.currentx/20)},draw:function(b,y,x,save){var x2=x*20;var y2=y*40;if(!block.blockarray[y])block.blockarray[y]=[];block.blockarray[y][x]=b;blokd.clearRect(x2,y2,19,39);blokd.fillStyle="#000";switch(b){case "\u2580":blokd.fillRect(x2,y2,19,19);break;case "\u258c":blokd.fillRect(x2,y2,10,39);break;case "\u2590":blokd.fillRect(x2+10,y2,9,39);break;case "\u2588":blokd.fillRect(x2,y2,19,39);break;case "\u2584":blokd.fillRect(x2,y2+20,19,19);break;case "\u2592":blokd.fillStyle="#777";blokd.fillRect(x2,y2,19,39);break;case "\u2591":blokd.fillStyle="#ccc";blokd.fillRect(x2,y2,19,39);break}if(!save)block.toblocks()},clear:function(save){blokd.clearRect(0,0,blok.width,blok.height);block.blockarray=[];for(var y=blok.height/40|0;y--;){block.blockarray[y]=[];for(var x=blok.width/20|0;x--;)block.draw("\u2591",y,x,1)}if(!save)block.toblocks()},toblocks:function(){if(firstrun)return;block.blockarray=block.blockarray.map(function(a){return a.slice(0,block.width)}).slice(0,block.height);var txt=block.blockarray.map(function(a){return a.join("")}).join("\n");txt=(txt+"\n").replace(/\u2591*\n/g,"\n").replace(RegExp("\\n*$|^\\n*","g"),"").split("\n");var v=0;var cropleft=txt.map(function(a){if(a.length)return v=a.replace(/[^\u2591].*$/,"").length;else return v}).sort(function(a,b){return a>b?1:-1});if(cropleft)txt=txt.map(function(a){return a.slice(cropleft[0])}).join("\n");id("txt").value=txt;dots.bytes()},fromblocks:function(save){if(save)var text=block.resizetmp.split("\n");else var text=id("txt").value.split("\n");for(var i=0;i<text.length;i++){var matches=text[i].match(/[^\u2591\u2580\u258C\u2590\u2588\u2584\u2592\n]/);if(matches){alert("Invalid character: "+matches[0]+" (line "+(i+1)+", column "+(text[i].indexOf(matches[0])+1)+")");var index=id("txt").value.indexOf(matches[0]);id("txt").setSelectionRange(index,index+1);return}}var width=0;text=text.map(function(a){if(a.length>width)width=a.length;return a.split("")});if(!save){block.clear(1);block.resizetmp=block.blockarray.map(function(a){return a.join("")}).join("\n");block.resize(width,text.length)}for(var y=block.height;y--;){if(!text[y])text[y]=[];for(var x=block.width;x--;)block.draw(text[y][x]||"\u2591",y,x,1)}if(!save)block.toblocks()},resize:function(width,height,save){if(save||width!=block.width||height!=block.height){if(width<10)width=10;if(height<5)height=5;block.width=width;block.height=height;id("blockresize").style.left=width*20+"px";id("blockresize").style.top=height*40+"px";id("blockresize").dataset.size=width+"x"+height;blok.width=width*20;blok.height=height*40;block.fromblocks(1);if(save)block.toblocks()}},width:50,height:18,lastblock:"\u2591",blockarray:[]};var blok=id("blockcanvas");var blokd=blok.getContext("2d");blok.onmousedown=block.down;blok.onmousemove=block.move;var bkmenu=id("blockmenu");var menui=bkmenu.getElementsByTagName("td");for(var i=menui.length;i--;)if(!/^$|x/.test(menui[i].innerHTML))menui[i].onmouseup=block.inup;id("blockresize").onmousedown=function(event){event.preventDefault();block.resizetmp=block.blockarray.map(function(a){return a.join("")}).join("\n");block.resizing=1};block.clear();var blank={down:function(event){event.preventDefault();if(!blank.lock){var x=(event.offsetX||event.layerX)/10|0;var y=(event.offsetY||event.layerY)/10|0;if(x+y>=0&&x<2&&y<4){blank.color=event.which==3?0:!blank.character[y*2+x];blank.dragging=1;blank.move(event)}}},move:function(event){if(blank.dragging){event.preventDefault();var x=(event.offsetX||event.layerX)/10|0;var y=(event.offsetY||event.layerY)/10|0;if(x+y>=0&&x<2&&y<4)if(blank.character[y*2+x]!=blank.color){blank.character[y*2+x]=blank.color;blank.redraw()}}},redraw:function(){blank.clear(1);for(var i in blank.character)if(blank.character[i]){blankcontext.fillRect(i%2*10,(i/2|0)*10,9,9);if(!blank.lockstyle)stylecontext.fillRect(i%2*10+1,(i/2|0)*10+1,9,9)}blank.tostyle()},clear:function(save){blankcontext.clearRect(0,0,20,40);stylecontext.clearRect(0,0,20,40);stylecontext.drawImage(gridimg,0,0,20,40);if(!save)blank.tostyle()},getchar:function(){return String.fromCharCode(10240+blank.character[7]*128+blank.character[6]*64+blank.character[5]*32+blank.character[3]*16+blank.character[1]*8+blank.character[4]*4+blank.character[2]*2+blank.character[0])},tostyle:function(){blankstyle.innerHTML=".braillegrid{background-image:url("+stylecanvas.toDataURL()+")!important}"},character:[0,0,0,0,0,0,0,1]};var blankstyle=id("blankstyle");var blankcanvas=id("blankbraille");var stylecanvas=document.createElement("canvas");stylecanvas.width=20;stylecanvas.height=40;var blankcontext=blankcanvas.getContext("2d");var stylecontext=stylecanvas.getContext("2d");blankcontext.fillStyle="#000";stylecontext.fillStyle="#c0c0c0";var gridimg=document.createElement("img");gridimg.onload=function(){blank.redraw()};gridimg.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAAAAADbWoUHAAAANUlEQVR4AWNwcPgPRQgWg8N/GDgAZzH8xwKwqhxo7Qf+H4AiOGuI+6jnfw8UwVmDykejcQQA2XHsQ3DMeJoAAAAASUVORK5CYII=";blank.redraw();blankcanvas.onmousedown=blank.down;blankcanvas.onmousemove=blank.move;id("blankrandom").onchange=function(){if(this.checked){blank.clear();blank.lock=1}else{blank.redraw();blank.lock=0}};var arttype=0;var usednd=0;var dndfile=null;dots.format();dots.fileselected();id("helplink").onclick=function(){id("helpcontainer").style.display="flex";document.body.style.overflow="hidden"};id("helpcontainer").onclick=function(event){if(event.target.tagName!="A"){id("helpcontainer").style.display="";document.body.style.overflow=""}};id("select").addEventListener("change",dots.format);id("files").addEventListener("change",dots.fileselected);addEventListener("dragover",function(event){event.stopPropagation();event.preventDefault();event.dataTransfer.dropEffect="copy";document.body.style.backgroundColor="#ccb"},0);addEventListener("dragleave",function(event){document.body.style.backgroundColor="#ffe"},0);addEventListener("drop",function(event){document.body.style.backgroundColor="#ffe";event.stopPropagation();event.preventDefault();usednd=1;dndfile=event.dataTransfer.files[0];dots.fileselected()},0);var pasttrim=1;id("crop").onclick=function(event){if(this.checked){id("trim").checked=pasttrim;id("trim").disabled=0}else{pasttrim=id("trim").checked;id("trim").checked=0;id("trim").disabled=1}};id("fuzzw").onmousemove=id("fuzzw").onchange=function(){this.alt=(this.value/2.55|0)+"%";this.style.backgroundImage="linear-gradient(to right,"+"#000 "+(this.value/2.55|0)+"%,"+"#fff "+(this.value/2.55|0)+"%)"};id("fuzzx").onmousemove=id("fuzzx").onchange=function(){this.alt=(this.value/2.55|0)+"%";this.style.backgroundImage="linear-gradient(to right,"+"#000 "+(this.value/2.55|0)+"%,"+"#808080 "+(this.value/2.55|0)+"%,"+"#808080 "+(100-this.value/2.55|0)+"%,"+"#fff "+(100-this.value/2.55|0)+"%)"};id("toblockdraw").onclick=function(){id("blockdrawform").submit()};if(name){var namearray=JSON.parse(name);id("txt").value=namearray[0];id("select").value=namearray[1];if(namearray[2]==1)id("drawroot").style.display="block";else if(namearray[2]==2)id("blockroot").style.display="block";dots.format();dots.toimage(1);setTimeout(function(){id("txt").value=namearray[0];dots.bytes()},300)}firstrun=0;</script></body></html>
<!--*///-->