🢀︎ asciimaker :: 26f7b8a
commit 26f7b8ac93ce56f7b56d67504e7bd5707b7ffd08
Author: acidvegas <acid.vegas@acid.vegas>
Date: Mon Jun 24 22:43:40 2019 -0400
Initial commit
diff --git a/data/checkered.png b/data/checkered.png
new file mode 100644
index 0000000..c6e3ac6
Binary files /dev/null and b/data/checkered.png differ
diff --git a/data/clipboard.swf b/data/clipboard.swf
new file mode 100644
index 0000000..2cfe371
Binary files /dev/null and b/data/clipboard.swf differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b026b61
--- /dev/null
+++ b/index.html
@@ -0,0 +1,555 @@
+<html>
+ <head>
+ <title>ASCII Maker</title>
+ <style>
+ .cell{width:8px;height:16px;cursor:default;font-size:10pt;font-weight:700;font-family:Courier New}
+ .noDrag{-moz-user-select:none}
+ #canvas,#picker{margin:auto}
+ #drafts{position:absolute;top:5px;left:5px;font-family:Verdana;font-size:8pt}
+ #textBuffer{position:absolute;width:1px;height:1px}
+ </style>
+ <script type="text/javascript">
+ var halt = unescape('%0F');
+ var code = unescape('%03');
+ var brushColour = 4;
+ var mode = 0, isDragging = 0, canvasWidth = 0, canvasHeight = 0, selected = 0, curKey = 0, tool = 0;
+ var palette = new Array('FFFFFF', '000000', '00007F', '009300', 'FF0000', '7F0000', '9C009C', 'FC7F00', 'FFFF00', '00FC00', '009393', '00FFFF', '0000FC', 'FF00FF', '7F7F7F', 'D2D2D2');
+ var drafts = new Array();
+ var undo = new Array();
+
+ function generateCanvas(width, height) {
+ canvasWidth = width;
+ canvasHeight = height;
+ document.getElementById('canvas').innerHTML = '';
+ var tableGrid = document.createElement("table");
+ tableGrid.setAttribute('cellpadding', '0');
+ tableGrid.setAttribute('cellspacing', '0');
+ tableGrid.setAttribute('onmousedown', 'toggleDragging(1);');
+ tableGrid.setAttribute('onmouseup', 'toggleDragging(0);');
+ tableGrid.setAttribute('background', 'data/checkered.png');
+ for (var y = 0; y < height; y++) {
+ var currentLine = document.createElement("tr");
+ for (var x = 0; x < width; x++) {
+ var currentCell = document.createElement("td");
+ currentCell.setAttribute('class', 'cell');
+ currentCell.innerHTML = ' ';
+ currentCell.setAttribute('onmousemove', 'fillCell(' + (width * y + x) + ');');
+ currentCell.setAttribute('onmousedown', 'isDragging=1;fillCell(' + (width * y + x) + ');');
+ currentLine.appendChild(currentCell);
+ }
+ tableGrid.appendChild(currentLine);
+ }
+ document.getElementById('canvas').style.width = x * 8 + 'px';
+ document.getElementById('canvas').appendChild(tableGrid);
+ }
+
+ function generatePalette() {
+ var paletteGrid = document.createElement("table");
+ paletteGrid.setAttribute('cellspacing', '2');
+ var paletteLine = document.createElement("tr");
+ for (i = 0; i < 16; i++) {
+ var currentPalette = document.createElement('td');
+ currentPalette.setAttribute('style', 'width: 20px; height: 20px; background-color: #' + palette[i] + ';');
+ currentPalette.setAttribute('onclick', 'setColour(' + i + ');');
+ paletteLine.appendChild(currentPalette);
+ }
+ paletteGrid.appendChild(paletteLine);
+ document.getElementById('picker').style.width = '360px';
+ document.getElementById('picker').appendChild(paletteGrid);
+ }
+
+ function setColour(i) {
+ brushColour = i;
+ }
+
+ function fillCell(index) {
+ if (tool == 0) {
+ if (isDragging == 1 && mode == 0) {
+ if (curKey != 17 && curKey != 18) setBackgroundColour(index);
+ else remBackgroundColour(index);
+ } else if (isDragging == 1 && mode == 1) {
+ if (curKey == 17 || curKey == 18) {
+ setLetter(index, '');
+ remColour(index);
+ }
+ document.getElementById('textBuffer').focus();
+ remCursor(selected);
+ selected = index;
+ setCursor(selected);
+ if (document.getElementsByTagName('td')[selected].innerHTML != ' ' && document.getElementsByTagName('td')[selected].innerHTML != '') document.getElementsByTagName('td')[selected].style.color = palette[brushColour];
+ }
+ } else {
+ fillArea(index);
+ }
+ }
+
+ function fillArea(index) {
+ var newSeeds = new Array();
+ var x = index % canvasWidth;
+ var y = (index - x) / canvasWidth;
+ var c = getCellColour(x, y);
+ var x1 = getLineColourLimits(x, y, 'left');
+ var x2 = getLineColourLimits(x, y, 'right');
+ if (isDragging == 1) {
+ for (var m = 0; m < 2; m++) {
+ y = (index - x) / canvasWidth + m;
+ while (y >= 0 && y <= canvasHeight) {
+ if (getCellColour(x, y) != c) break;
+ var x1 = getLineColourLimits(x, y, 'left');
+ var x2 = getLineColourLimits(x, y, 'right');
+ for (var i = x1; i <= x2; i++)
+ if (curKey != 17 && curKey != 18) setBackgroundColour((canvasWidth * y) + i);
+ else remBackgroundColour((canvasWidth * y) + i);
+ if (m == 0) y--;
+ else y++;
+ }
+ }
+ }
+ }
+
+ function getLineColourLimits(x, y, end) {
+ var boundary = x;
+ var currentColour;
+ var targetColour = getCellColour(x, y);
+ var i = x;
+ while (i >= 0 && i < canvasWidth) {
+ currentColour = getCellColour(i, y);
+ if (currentColour == targetColour) boundary = i;
+ else break;
+ if (end == 'left') i--;
+ else i++;
+ }
+ return boundary;
+ }
+
+ function toggleMode(newMode) {
+ if (newMode != undefined) mode = newMode;
+ if (mode == 1) {
+ remCursor(selected);
+ document.getElementById('typeButton').innerHTML = 'Type';
+ } else {
+ toggleTool(1);
+ setCursor(selected);
+ document.getElementById('textBuffer').focus();
+ document.getElementById('typeButton').innerHTML = 'Draw';
+ }
+ mode = (mode - 1) * -1
+ }
+
+ function toggleTool(newTool) {
+ toggleMode(1);
+ if (newTool != undefined) tool = newTool;
+ if (tool == 1) document.getElementById('toolButton').innerHTML = 'Fill';
+ else document.getElementById('toolButton').innerHTML = 'Brush';
+ tool = (tool - 1) * -1
+ }
+
+ function toggleDragging(bool) {
+ isDragging = bool;
+ }
+
+ function padColour(colourCode, letter) {
+ if (colourCode < 10 && isNaN(parseFloat(letter)) == false) {
+ return '0' + colourCode;
+ }
+ return colourCode;
+ }
+
+ function renderArt() {
+ var line, output = ''
+ var lastColour, lastFontColour, currentColour, currentFontColour, breakout;
+ for (var y = 0; y < canvasHeight; y++) {
+ line = '';
+ for (var x = 0; x < canvasWidth; x++) {
+ lastColour = getCellColour(x, y);
+ lastFontColour = getFontColour(x, y);
+ if (lastFontColour >= 0 && lastColour >= 0) {
+ line += code + lastFontColour + ',' + padColour(lastColour, getCellLetter(x, y));
+ } else if (lastFontColour >= 0 && lastColour < 0) {
+ if (x != 0) line += halt;
+ line += code + padColour(lastFontColour, getCellLetter(x, y));
+ } else if (lastFontColour < 0 && lastColour >= 0) {
+ line += code + lastColour + ',' + padColour(lastColour, getCellLetter(x, y));
+ } else {
+ line += getCellLetter(x, y);
+ }
+ if (lastFontColour >= 0 || lastColour >= 0) {
+ breakout = 0;
+ for (var z = x; z < canvasWidth; z++) {
+ currentColour = getCellColour(z, y);
+ currentFontColour = getFontColour(z, y);
+ if (currentFontColour == lastFontColour && currentColour == lastColour) {
+ line += getCellLetter(z, y);
+ } else {
+ x = z - 1;
+ breakout = 1;
+ break;
+ }
+ }
+ line += code;
+ if (breakout == 0) x = canvasWidth;
+ }
+ }
+ output += endtrim(line, ' ') + " \n";
+ }
+ var remove = new RegExp(code + code, 'gi');
+ output = output.replace(remove, code);
+ output = output.replace(/</g, '<');
+ output = output.replace(/>/g, '>');
+ document.getElementById('load').value = endtrim(output);
+ }
+
+ function previewArt() {
+ renderArt();
+ document.getElementById('preview').innerHTML = '';
+ var tempForm = document.createElement('form');
+ tempForm.setAttribute('method', 'POST');
+ tempForm.setAttribute('action', '/preview/preview.php');
+ tempForm.setAttribute('target', '_blank');
+ var tempField = document.createElement('input');
+ tempField.setAttribute('name', 'ascii');
+ tempField.setAttribute('type', 'hidden');
+ tempField.value = escape(document.getElementById('load').value);
+ var rawField = document.createElement('input');
+ rawField.setAttribute('name', 'raw');
+ rawField.setAttribute('type', 'hidden');
+ rawField.value = 1;
+ tempForm.appendChild(tempField);
+ tempForm.appendChild(rawField);
+ document.getElementById('preview').appendChild(tempForm);
+ document.forms[0].submit();
+ }
+
+ function resizeArt() {
+ var x = parseFloat(prompt('wqat width? (in characters)', canvasWidth));
+ var y = parseFloat(prompt('wqat height? (in characters)', canvasHeight));
+ renderArt();
+ generateCanvas(x, y);
+ drawImage();
+ }
+
+ function loadArt() {
+ var dimensions = getAsciiWidth();
+ generateCanvas(dimensions[0], dimensions[1]);
+ drawImage();
+ }
+
+ function drawImage() {
+ var g_width = 0;
+ var lines = endtrim(document.getElementById('load').value, "\n");
+ lines = lines.split("\n");
+ for (var y in lines) {
+ var index = y * canvasWidth;
+ var last_foreground = 16;
+ var last_background = 16;
+ var blocks = lines[y].split(code);
+ for (var b in blocks) {
+ if (blocks[b].length > 0) {
+ var colours = getColoursFromLine(blocks[b], blocks.length, last_foreground, last_background);
+ last_background = colours[1];
+ for (var i = 0; i < colours[3].length; i++) {
+ if (colours[3].charCodeAt(i) == 15) {
+ last_background = 16;
+ } else if (colours[3].charCodeAt(i) > 31 && colours[3].charCodeAt(i) < 127) {
+ document.getElementsByTagName('td')[index].style.color = palette[parseFloat(colours[0])];
+ if (colours[1] < 16) document.getElementsByTagName('td')[index].style.backgroundColor = palette[parseFloat(colours[1])];
+ document.getElementsByTagName('td')[index].innerHTML = colours[3].charAt(i);
+ index++;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ function endtrim(str, chars) {
+ chars = chars || "\\s";
+ return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
+ }
+
+ function getColoursFromLine(line, block_count, last_foreground, last_background) {
+ var colours = new Array();
+ if (block_count > 1) {
+ var chunks = line.split(',', 2);
+ for (var c in chunks) {
+ var current = '';
+ for (var i = 0; i < 2; i++) {
+ if (isNaN(parseFloat(chunks[c].charAt(i))) == false) current += chunks[c].charAt(i);
+ }
+ if (isNaN(parseFloat(current)) == false) colours[colours.length] = current;
+ }
+ }
+ colours[3] = line.substr(colours.join(',').length);
+ if (typeof(colours[0]) != 'undefined' && typeof(colours[1]) == 'undefined') colours[1] = last_background;
+ if (typeof(colours[0]) == 'undefined') colours[0] = last_foreground;
+ return colours;
+ }
+
+ function getAsciiWidth() {
+ var g_width = 0;
+ var lines = endtrim(document.getElementById('load').value, "\n");
+ lines = lines.split("\n");
+ for (var y in lines) {
+ var l_width = 0;
+ var blocks = lines[y].split(code);
+ for (var b in blocks) {
+ if (blocks[b].length > 0) {
+ var colours = getColoursFromLine(blocks[b], blocks.length);
+ for (var i = 0; i < colours[3].length; i++) {
+ if (colours[3].charCodeAt(i) > 31 && colours[3].charCodeAt(i) < 127) l_width++;
+ }
+ }
+ }
+ if (l_width > g_width) g_width = l_width;
+ }
+ return new Array(g_width, lines.length);
+ }
+
+ function getCellColour(x, y) {
+ var colour = document.getElementsByTagName('td')[(canvasWidth * y + x)].style.backgroundColor;
+ return ircFromHex(rgbConvert(colour));
+ }
+
+ function getFontColour(x, y) {
+ var colour = document.getElementsByTagName('td')[(canvasWidth * y + x)].style.color;
+ return ircFromHex(rgbConvert(colour));
+ }
+
+ function getCellLetter(x, y) {
+ var letter = document.getElementsByTagName('td')[(canvasWidth * y + x)].innerHTML;
+ if (letter == '') letter = ' ';
+ return letter;
+ }
+
+ function rgbConvert(str) {
+ if (navigator.userAgent.match('Opera') == null) {
+ str = str.replace(/rgb\(|\)/g, "").split(",");
+ str[0] = parseInt(str[0], 10).toString(16).toUpperCase();
+ str[1] = parseInt(str[1], 10).toString(16).toUpperCase();
+ str[2] = parseInt(str[2], 10).toString(16).toUpperCase();
+ str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
+ str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
+ str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
+ return str.join("");
+ } else {
+ return str.replace(/#/g, '').toUpperCase();
+ }
+ }
+
+ function ircFromHex(hex) {
+ for (var i = 0; i < 16; i++) {
+ if (palette[i] == hex) return i;
+ }
+ return -1;
+ }
+ document.onmousemove = function moveBuffer(e) {
+ var y = e.clientY + document.body.scrollTop + 5;
+ if (y < (window.innerHeight + window.scrollMaxY - 30)) {
+ document.getElementById('textBuffer').style.left = '0px';
+ document.getElementById('textBuffer').style.top = y + 'px';
+ }
+ }
+ document.onkeydown = function setKey(e) {
+ var code;
+ if (window.event) code = window.event.keyCode;
+ else if (e) code = e.which;
+ curKey = code;
+ if (mode == 0) {
+ if (code == 38) // up
+ shiftArt('up');
+ else if (code == 40) // down
+ shiftArt('down');
+ else if (code == 37) // left
+ shiftArt('left');
+ else if (code == 39) // right
+ shiftArt('right');
+ }
+ if (curKey == 27) loadLastUndo();
+ }
+ document.onkeyup = function handleKey(e) {
+ var code;
+ if (window.event) code = window.event.keyCode;
+ else if (e) code = e.which;
+ curKey = 0;
+ if (mode == 1) {
+ if (code == 8) {
+ remCursor(selected);
+ selected--;
+ setCursor(selected);
+ setLetter(selected, '');
+ remColour(selected);
+ } else if (code == 38 && (selected - canvasWidth) >= 0) // up
+ moveCursor(selected - canvasWidth);
+ else if (code == 40 && (selected + canvasWidth) < canvasWidth * canvasHeight) // down
+ moveCursor(selected + canvasWidth);
+ else if (code == 37 && (selected - 1) >= 0) // left
+ moveCursor(selected - 1);
+ else if (code == 39 && (selected + 1) < canvasWidth * canvasHeight) // right
+ moveCursor(selected + 1);
+ else {
+ var data = document.getElementById('textBuffer').value;
+ for (var i = 0; i < data.length; i++) {
+ remCursor(selected);
+ setCursor(selected + 1);
+ setLetter(selected, data.charAt(i));
+ selected++;
+ }
+ document.getElementById('textBuffer').value = '';
+ }
+ }
+ }
+
+ function setCursor(index) {
+ document.getElementsByTagName('td')[index].style.backgroundImage = 'url(cursor.png)';
+ }
+
+ function remCursor(index) {
+ document.getElementsByTagName('td')[index].style.backgroundImage = '';
+ }
+
+ function moveCursor(index) {
+ remCursor(selected);
+ selected = index;
+ setCursor(selected);
+ }
+
+ function setLetter(index, data) {
+ document.getElementsByTagName('td')[index].style.color = palette[brushColour];
+ document.getElementsByTagName('td')[index].innerHTML = data;
+ }
+
+ function remColour(index) {
+ document.getElementsByTagName('td')[index].style.color = '';
+ }
+
+ function setBackgroundColour(index) {
+ if (rgbConvert(document.getElementsByTagName('td')[index].style.backgroundColor) != palette[brushColour]) {
+ saveStateUndo(index);
+ document.getElementsByTagName('td')[index].style.backgroundColor = palette[brushColour];
+ }
+ }
+
+ function remBackgroundColour(index) {
+ if (document.getElementsByTagName('td')[index].style.backgroundColor != '') {
+ saveStateUndo(index);
+ document.getElementsByTagName('td')[index].style.backgroundColor = '';
+ }
+ }
+
+ function saveStateUndo(index) {
+ if (undo.length > 50000) undo.splice(0, 1);
+ var i = undo.length;
+ undo[i] = new Array();
+ undo[i][0] = index;
+ undo[i][1] = document.getElementsByTagName('td')[index].style.color;
+ undo[i][2] = document.getElementsByTagName('td')[index].style.backgroundColor;
+ undo[i][3] = document.getElementsByTagName('td')[index].innerHTML;
+ document.getElementById('undoButton').disabled = 0;
+ }
+
+ function loadLastUndo() {
+ if (undo.length > 0) {
+ var currentUndo = undo[undo.length - 1];
+ document.getElementsByTagName('td')[currentUndo[0]].style.color = currentUndo[1];
+ document.getElementsByTagName('td')[currentUndo[0]].style.backgroundColor = currentUndo[2];
+ document.getElementsByTagName('td')[currentUndo[0]].innerHTML = currentUndo[3];
+ undo.splice(undo.length - 1, 1);
+ if (undo.length <= 0) document.getElementById('undoButton').disabled = 1;
+ } else {
+ document.getElementById('undoButton').disabled = 1;
+ }
+ }
+
+ function addDraft() {
+ var d = new Date();
+ var i = drafts.length;
+ renderArt();
+ drafts[i] = new Array();
+ drafts[i][0] = document.getElementById('load').value;
+ drafts[i][1] = d.toUTCString();
+ drawDrafts();
+ }
+
+ function drawDrafts() {
+ document.getElementById('drafts').innerHTML = '';
+ for (var i in drafts) document.getElementById('drafts').innerHTML += '#' + i + ' <a style=\'cursor: pointer;\' onclick=\'loadDraft(' + i + ');\'>' + drafts[i][1] + "</a><br />\n";
+ }
+
+ function loadDraft(index) {
+ document.getElementById('load').value = drafts[index][0];
+ loadArt();
+ }
+
+ function copyArt() {
+ copy(document.getElementById('load'));
+ }
+
+ function shiftArt(direction) {
+ var newLoc;
+ if (direction == 'down' || direction == 'right') var i = (canvasWidth * canvasHeight) - 1;
+ else var i = 0;
+ while (i >= 0 && i < (canvasWidth * canvasHeight)) {
+ if (direction == 'up' || direction == 'down') newLoc = i - canvasWidth;
+ else if (direction == 'left' || (direction == 'right')) newLoc = i - 1;
+ var newCell = document.getElementsByTagName('td')[newLoc];
+ var oldCell = document.getElementsByTagName('td')[i];
+ if (newLoc >= 0 && newLoc < (canvasWidth * canvasHeight)) {
+ if (direction == 'up' || direction == 'left') {
+ newCell.style.color = oldCell.style.color;
+ newCell.style.backgroundColor = oldCell.style.backgroundColor;
+ newCell.innerHTML = oldCell.innerHTML;
+ } else if (direction == 'down' || direction == 'right') {
+ oldCell.style.color = newCell.style.color;
+ oldCell.style.backgroundColor = newCell.style.backgroundColor;
+ oldCell.innerHTML = newCell.innerHTML;
+ }
+ }
+ if (direction == 'up' || direction == 'left') i++;
+ else if (direction == 'down' || direction == 'right') i--;
+ }
+ }
+
+ function copy(inElement) {
+ if (inElement.createTextRange) {
+ var range = inElement.createTextRange();
+ if (range && BodyLoaded == 1) range.execCommand('Copy');
+ } else {
+ var flashcopier = 'flashcopier';
+ if (!document.getElementById(flashcopier)) {
+ var divholder = document.createElement('div');
+ divholder.id = flashcopier;
+ document.body.appendChild(divholder);
+ }
+ document.getElementById(flashcopier).innerHTML = '';
+ var divinfo = '<embed src="data/clipboard.swf" FlashVars="clipboard=' + escape(inElement.value) + '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
+ document.getElementById(flashcopier).innerHTML = divinfo;
+ }
+ }
+ </script>
+ </head>
+ <body onload='generateCanvas(80,24); generatePalette();' onkeydown='if(mode == 1) document.getElementById("textBuffer").focus();'>
+ <center>
+ <b>ASCII Maker</b>
+ <br><small><i>(<a href="https://acid.vegas/asciimaker">source</a>)</i></small>
+ <br><br>
+ </center>
+ <div class='noDrag' id='canvas'></div>
+ <div class='noDrag' id='picker'></div>
+ <div id='preview'></div>
+ <div class='drafts' id='drafts'></div>
+ <p align='center'>
+ <button onclick='addDraft();'>Save</button>
+ <button onclick='loadArt();'>Load</button>
+ <button onclick='generateCanvas(canvasWidth, canvasHeight);'>Clear</button>
+ <button onclick='renderArt();'>Render</button>
+ <button onclick='copyArt();'>Copy</button>
+ <button onclick='toggleMode();' id='typeButton'>Type</button>
+ <button onclick='toggleTool();' id='toolButton'>Fill</button>
+ <button onclick='resizeArt();'>Resize</button>
+ <button onclick='loadLastUndo();' id='undoButton' DISABLED>Undo</button>
+ <br>
+ <textarea id='load' cols='30' rows='3' readonly></textarea><br />
+ <input type='text' id='textBuffer' onkeydown='if(mode != 1) return false;' style='opacity: 0;'><br />
+ </p>
+ </body>
+</html>