←︎ asciimaker :: 26f7b8a


1
commit 26f7b8ac93ce56f7b56d67504e7bd5707b7ffd08 (HEAD -> master)
2
Author: acidvegas <acid.vegas@acid.vegas>
3
Date:   Mon Jun 24 22:43:40 2019 -0400
4
5
    Initial commit
6
---
7
 data/checkered.png | Bin 0 -> 119 bytes
8
 data/clipboard.swf | Bin 0 -> 109 bytes
9
 index.html         | 555 +++++++++++++++++++++++++++++++++++++++++++++++++++++
10
 3 files changed, 555 insertions(+)
11
12
diff --git a/data/checkered.png b/data/checkered.png
13
new file mode 100644
14
index 0000000..c6e3ac6
15
Binary files /dev/null and b/data/checkered.png differ
16
diff --git a/data/clipboard.swf b/data/clipboard.swf
17
new file mode 100644
18
index 0000000..2cfe371
19
Binary files /dev/null and b/data/clipboard.swf differ
20
diff --git a/index.html b/index.html
21
new file mode 100644
22
index 0000000..b026b61
23
--- /dev/null
24
+++ b/index.html
25
@@ -0,0 +1,555 @@
26
+<html>
27
+	<head>
28
+		<title>ASCII Maker</title>
29
+		<style>
30
+			.cell{width:8px;height:16px;cursor:default;font-size:10pt;font-weight:700;font-family:Courier New}
31
+			.noDrag{-moz-user-select:none}
32
+			#canvas,#picker{margin:auto}
33
+			#drafts{position:absolute;top:5px;left:5px;font-family:Verdana;font-size:8pt}
34
+			#textBuffer{position:absolute;width:1px;height:1px}
35
+		</style>
36
+		<script type="text/javascript">
37
+			var halt = unescape('%0F');
38
+			var code = unescape('%03');
39
+			var brushColour = 4;
40
+			var mode = 0, isDragging = 0, canvasWidth = 0, canvasHeight = 0, selected = 0, curKey = 0, tool = 0;
41
+			var palette = new Array('FFFFFF', '000000', '00007F', '009300', 'FF0000', '7F0000', '9C009C', 'FC7F00', 'FFFF00', '00FC00', '009393', '00FFFF', '0000FC', 'FF00FF', '7F7F7F', 'D2D2D2');
42
+			var drafts = new Array();
43
+			var undo = new Array();
44
+
45
+			function generateCanvas(width, height) {
46
+				canvasWidth = width;
47
+				canvasHeight = height;
48
+				document.getElementById('canvas').innerHTML = '';
49
+				var tableGrid = document.createElement("table");
50
+				tableGrid.setAttribute('cellpadding', '0');
51
+				tableGrid.setAttribute('cellspacing', '0');
52
+				tableGrid.setAttribute('onmousedown', 'toggleDragging(1);');
53
+				tableGrid.setAttribute('onmouseup', 'toggleDragging(0);');
54
+				tableGrid.setAttribute('background', 'data/checkered.png');
55
+				for (var y = 0; y < height; y++) {
56
+					var currentLine = document.createElement("tr");
57
+					for (var x = 0; x < width; x++) {
58
+						var currentCell = document.createElement("td");
59
+						currentCell.setAttribute('class', 'cell');
60
+						currentCell.innerHTML = ' ';
61
+						currentCell.setAttribute('onmousemove', 'fillCell(' + (width * y + x) + ');');
62
+						currentCell.setAttribute('onmousedown', 'isDragging=1;fillCell(' + (width * y + x) + ');');
63
+						currentLine.appendChild(currentCell);
64
+					}
65
+					tableGrid.appendChild(currentLine);
66
+				}
67
+				document.getElementById('canvas').style.width = x * 8 + 'px';
68
+				document.getElementById('canvas').appendChild(tableGrid);
69
+			}
70
+
71
+			function generatePalette() {
72
+				var paletteGrid = document.createElement("table");
73
+				paletteGrid.setAttribute('cellspacing', '2');
74
+				var paletteLine = document.createElement("tr");
75
+				for (i = 0; i < 16; i++) {
76
+					var currentPalette = document.createElement('td');
77
+					currentPalette.setAttribute('style', 'width: 20px; height: 20px; background-color: #' + palette[i] + ';');
78
+					currentPalette.setAttribute('onclick', 'setColour(' + i + ');');
79
+					paletteLine.appendChild(currentPalette);
80
+				}
81
+				paletteGrid.appendChild(paletteLine);
82
+				document.getElementById('picker').style.width = '360px';
83
+				document.getElementById('picker').appendChild(paletteGrid);
84
+			}
85
+
86
+			function setColour(i) {
87
+				brushColour = i;
88
+			}
89
+
90
+			function fillCell(index) {
91
+				if (tool == 0) {
92
+					if (isDragging == 1 && mode == 0) {
93
+						if (curKey != 17 && curKey != 18) setBackgroundColour(index);
94
+						else remBackgroundColour(index);
95
+					} else if (isDragging == 1 && mode == 1) {
96
+						if (curKey == 17 || curKey == 18) {
97
+							setLetter(index, '');
98
+							remColour(index);
99
+						}
100
+						document.getElementById('textBuffer').focus();
101
+						remCursor(selected);
102
+						selected = index;
103
+						setCursor(selected);
104
+						if (document.getElementsByTagName('td')[selected].innerHTML != ' ' && document.getElementsByTagName('td')[selected].innerHTML != '') document.getElementsByTagName('td')[selected].style.color = palette[brushColour];
105
+					}
106
+				} else {
107
+					fillArea(index);
108
+				}
109
+			}
110
+
111
+			function fillArea(index) {
112
+				var newSeeds = new Array();
113
+				var x = index % canvasWidth;
114
+				var y = (index - x) / canvasWidth;
115
+				var c = getCellColour(x, y);
116
+				var x1 = getLineColourLimits(x, y, 'left');
117
+				var x2 = getLineColourLimits(x, y, 'right');
118
+				if (isDragging == 1) {
119
+					for (var m = 0; m < 2; m++) {
120
+						y = (index - x) / canvasWidth + m;
121
+						while (y >= 0 && y <= canvasHeight) {
122
+							if (getCellColour(x, y) != c) break;
123
+							var x1 = getLineColourLimits(x, y, 'left');
124
+							var x2 = getLineColourLimits(x, y, 'right');
125
+							for (var i = x1; i <= x2; i++)
126
+								if (curKey != 17 && curKey != 18) setBackgroundColour((canvasWidth * y) + i);
127
+								else remBackgroundColour((canvasWidth * y) + i);
128
+							if (m == 0) y--;
129
+							else y++;
130
+						}
131
+					}
132
+				}
133
+			}
134
+
135
+			function getLineColourLimits(x, y, end) {
136
+				var boundary = x;
137
+				var currentColour;
138
+				var targetColour = getCellColour(x, y);
139
+				var i = x;
140
+				while (i >= 0 && i < canvasWidth) {
141
+					currentColour = getCellColour(i, y);
142
+					if (currentColour == targetColour) boundary = i;
143
+					else break;
144
+					if (end == 'left') i--;
145
+					else i++;
146
+				}
147
+				return boundary;
148
+			}
149
+
150
+			function toggleMode(newMode) {
151
+				if (newMode != undefined) mode = newMode;
152
+				if (mode == 1) {
153
+					remCursor(selected);
154
+					document.getElementById('typeButton').innerHTML = 'Type';
155
+				} else {
156
+					toggleTool(1);
157
+					setCursor(selected);
158
+					document.getElementById('textBuffer').focus();
159
+					document.getElementById('typeButton').innerHTML = 'Draw';
160
+				}
161
+				mode = (mode - 1) * -1
162
+			}
163
+
164
+			function toggleTool(newTool) {
165
+				toggleMode(1);
166
+				if (newTool != undefined) tool = newTool;
167
+				if (tool == 1) document.getElementById('toolButton').innerHTML = 'Fill';
168
+				else document.getElementById('toolButton').innerHTML = 'Brush';
169
+				tool = (tool - 1) * -1
170
+			}
171
+
172
+			function toggleDragging(bool) {
173
+				isDragging = bool;
174
+			}
175
+
176
+			function padColour(colourCode, letter) {
177
+				if (colourCode < 10 && isNaN(parseFloat(letter)) == false) {
178
+					return '0' + colourCode;
179
+				}
180
+				return colourCode;
181
+			}
182
+
183
+			function renderArt() {
184
+				var line, output = ''
185
+				var lastColour, lastFontColour, currentColour, currentFontColour, breakout;
186
+				for (var y = 0; y < canvasHeight; y++) {
187
+					line = '';
188
+					for (var x = 0; x < canvasWidth; x++) {
189
+						lastColour = getCellColour(x, y);
190
+						lastFontColour = getFontColour(x, y);
191
+						if (lastFontColour >= 0 && lastColour >= 0) {
192
+							line += code + lastFontColour + ',' + padColour(lastColour, getCellLetter(x, y));
193
+						} else if (lastFontColour >= 0 && lastColour < 0) {
194
+							if (x != 0) line += halt;
195
+							line += code + padColour(lastFontColour, getCellLetter(x, y));
196
+						} else if (lastFontColour < 0 && lastColour >= 0) {
197
+							line += code + lastColour + ',' + padColour(lastColour, getCellLetter(x, y));
198
+						} else {
199
+							line += getCellLetter(x, y);
200
+						}
201
+						if (lastFontColour >= 0 || lastColour >= 0) {
202
+							breakout = 0;
203
+							for (var z = x; z < canvasWidth; z++) {
204
+								currentColour = getCellColour(z, y);
205
+								currentFontColour = getFontColour(z, y);
206
+								if (currentFontColour == lastFontColour && currentColour == lastColour) {
207
+									line += getCellLetter(z, y);
208
+								} else {
209
+									x = z - 1;
210
+									breakout = 1;
211
+									break;
212
+								}
213
+							}
214
+							line += code;
215
+							if (breakout == 0) x = canvasWidth;
216
+						}
217
+					}
218
+					output += endtrim(line, ' ') + " \n";
219
+				}
220
+				var remove = new RegExp(code + code, 'gi');
221
+				output = output.replace(remove, code);
222
+				output = output.replace(/&lt;/g, '<');
223
+				output = output.replace(/&gt;/g, '>');
224
+				document.getElementById('load').value = endtrim(output);
225
+			}
226
+
227
+			function previewArt() {
228
+				renderArt();
229
+				document.getElementById('preview').innerHTML = '';
230
+				var tempForm = document.createElement('form');
231
+				tempForm.setAttribute('method', 'POST');
232
+				tempForm.setAttribute('action', '/preview/preview.php');
233
+				tempForm.setAttribute('target', '_blank');
234
+				var tempField = document.createElement('input');
235
+				tempField.setAttribute('name', 'ascii');
236
+				tempField.setAttribute('type', 'hidden');
237
+				tempField.value = escape(document.getElementById('load').value);
238
+				var rawField = document.createElement('input');
239
+				rawField.setAttribute('name', 'raw');
240
+				rawField.setAttribute('type', 'hidden');
241
+				rawField.value = 1;
242
+				tempForm.appendChild(tempField);
243
+				tempForm.appendChild(rawField);
244
+				document.getElementById('preview').appendChild(tempForm);
245
+				document.forms[0].submit();
246
+			}
247
+
248
+			function resizeArt() {
249
+				var x = parseFloat(prompt('wqat width? (in characters)', canvasWidth));
250
+				var y = parseFloat(prompt('wqat height? (in characters)', canvasHeight));
251
+				renderArt();
252
+				generateCanvas(x, y);
253
+				drawImage();
254
+			}
255
+
256
+			function loadArt() {
257
+				var dimensions = getAsciiWidth();
258
+				generateCanvas(dimensions[0], dimensions[1]);
259
+				drawImage();
260
+			}
261
+
262
+			function drawImage() {
263
+				var g_width = 0;
264
+				var lines = endtrim(document.getElementById('load').value, "\n");
265
+				lines = lines.split("\n");
266
+				for (var y in lines) {
267
+					var index = y * canvasWidth;
268
+					var last_foreground = 16;
269
+					var last_background = 16;
270
+					var blocks = lines[y].split(code);
271
+					for (var b in blocks) {
272
+						if (blocks[b].length > 0) {
273
+							var colours = getColoursFromLine(blocks[b], blocks.length, last_foreground, last_background);
274
+							last_background = colours[1];
275
+							for (var i = 0; i < colours[3].length; i++) {
276
+								if (colours[3].charCodeAt(i) == 15) {
277
+									last_background = 16;
278
+								} else if (colours[3].charCodeAt(i) > 31 && colours[3].charCodeAt(i) < 127) {
279
+									document.getElementsByTagName('td')[index].style.color = palette[parseFloat(colours[0])];
280
+									if (colours[1] < 16) document.getElementsByTagName('td')[index].style.backgroundColor = palette[parseFloat(colours[1])];
281
+									document.getElementsByTagName('td')[index].innerHTML = colours[3].charAt(i);
282
+									index++;
283
+								}
284
+							}
285
+						}
286
+					}
287
+				}
288
+			}
289
+
290
+			function endtrim(str, chars) {
291
+				chars = chars || "\\s";
292
+				return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
293
+			}
294
+
295
+			function getColoursFromLine(line, block_count, last_foreground, last_background) {
296
+				var colours = new Array();
297
+				if (block_count > 1) {
298
+					var chunks = line.split(',', 2);
299
+					for (var c in chunks) {
300
+						var current = '';
301
+						for (var i = 0; i < 2; i++) {
302
+							if (isNaN(parseFloat(chunks[c].charAt(i))) == false) current += chunks[c].charAt(i);
303
+						}
304
+						if (isNaN(parseFloat(current)) == false) colours[colours.length] = current;
305
+					}
306
+				}
307
+				colours[3] = line.substr(colours.join(',').length);
308
+				if (typeof(colours[0]) != 'undefined' && typeof(colours[1]) == 'undefined') colours[1] = last_background;
309
+				if (typeof(colours[0]) == 'undefined') colours[0] = last_foreground;
310
+				return colours;
311
+			}
312
+
313
+			function getAsciiWidth() {
314
+				var g_width = 0;
315
+				var lines = endtrim(document.getElementById('load').value, "\n");
316
+				lines = lines.split("\n");
317
+				for (var y in lines) {
318
+					var l_width = 0;
319
+					var blocks = lines[y].split(code);
320
+					for (var b in blocks) {
321
+						if (blocks[b].length > 0) {
322
+							var colours = getColoursFromLine(blocks[b], blocks.length);
323
+							for (var i = 0; i < colours[3].length; i++) {
324
+								if (colours[3].charCodeAt(i) > 31 && colours[3].charCodeAt(i) < 127) l_width++;
325
+							}
326
+						}
327
+					}
328
+					if (l_width > g_width) g_width = l_width;
329
+				}
330
+				return new Array(g_width, lines.length);
331
+			}
332
+
333
+			function getCellColour(x, y) {
334
+				var colour = document.getElementsByTagName('td')[(canvasWidth * y + x)].style.backgroundColor;
335
+				return ircFromHex(rgbConvert(colour));
336
+			}
337
+
338
+			function getFontColour(x, y) {
339
+				var colour = document.getElementsByTagName('td')[(canvasWidth * y + x)].style.color;
340
+				return ircFromHex(rgbConvert(colour));
341
+			}
342
+
343
+			function getCellLetter(x, y) {
344
+				var letter = document.getElementsByTagName('td')[(canvasWidth * y + x)].innerHTML;
345
+				if (letter == '') letter = ' ';
346
+				return letter;
347
+			}
348
+
349
+			function rgbConvert(str) {
350
+				if (navigator.userAgent.match('Opera') == null) {
351
+					str = str.replace(/rgb\(|\)/g, "").split(",");
352
+					str[0] = parseInt(str[0], 10).toString(16).toUpperCase();
353
+					str[1] = parseInt(str[1], 10).toString(16).toUpperCase();
354
+					str[2] = parseInt(str[2], 10).toString(16).toUpperCase();
355
+					str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
356
+					str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
357
+					str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
358
+					return str.join("");
359
+				} else {
360
+					return str.replace(/#/g, '').toUpperCase();
361
+				}
362
+			}
363
+
364
+			function ircFromHex(hex) {
365
+				for (var i = 0; i < 16; i++) {
366
+					if (palette[i] == hex) return i;
367
+				}
368
+				return -1;
369
+			}
370
+			document.onmousemove = function moveBuffer(e) {
371
+				var y = e.clientY + document.body.scrollTop + 5;
372
+				if (y < (window.innerHeight + window.scrollMaxY - 30)) {
373
+					document.getElementById('textBuffer').style.left = '0px';
374
+					document.getElementById('textBuffer').style.top = y + 'px';
375
+				}
376
+			}
377
+			document.onkeydown = function setKey(e) {
378
+				var code;
379
+				if (window.event) code = window.event.keyCode;
380
+				else if (e) code = e.which;
381
+				curKey = code;
382
+				if (mode == 0) {
383
+					if (code == 38) // up
384
+						shiftArt('up');
385
+					else if (code == 40) // down
386
+						shiftArt('down');
387
+					else if (code == 37) // left
388
+						shiftArt('left');
389
+					else if (code == 39) // right
390
+						shiftArt('right');
391
+				}
392
+				if (curKey == 27) loadLastUndo();
393
+			}
394
+			document.onkeyup = function handleKey(e) {
395
+				var code;
396
+				if (window.event) code = window.event.keyCode;
397
+				else if (e) code = e.which;
398
+				curKey = 0;
399
+				if (mode == 1) {
400
+					if (code == 8) {
401
+						remCursor(selected);
402
+						selected--;
403
+						setCursor(selected);
404
+						setLetter(selected, '');
405
+						remColour(selected);
406
+					} else if (code == 38 && (selected - canvasWidth) >= 0) // up
407
+						moveCursor(selected - canvasWidth);
408
+					else if (code == 40 && (selected + canvasWidth) < canvasWidth * canvasHeight) // down
409
+						moveCursor(selected + canvasWidth);
410
+					else if (code == 37 && (selected - 1) >= 0) // left
411
+						moveCursor(selected - 1);
412
+					else if (code == 39 && (selected + 1) < canvasWidth * canvasHeight) // right
413
+						moveCursor(selected + 1);
414
+					else {
415
+						var data = document.getElementById('textBuffer').value;
416
+						for (var i = 0; i < data.length; i++) {
417
+							remCursor(selected);
418
+							setCursor(selected + 1);
419
+							setLetter(selected, data.charAt(i));
420
+							selected++;
421
+						}
422
+						document.getElementById('textBuffer').value = '';
423
+					}
424
+				}
425
+			}
426
+
427
+			function setCursor(index) {
428
+				document.getElementsByTagName('td')[index].style.backgroundImage = 'url(cursor.png)';
429
+			}
430
+
431
+			function remCursor(index) {
432
+				document.getElementsByTagName('td')[index].style.backgroundImage = '';
433
+			}
434
+
435
+			function moveCursor(index) {
436
+				remCursor(selected);
437
+				selected = index;
438
+				setCursor(selected);
439
+			}
440
+
441
+			function setLetter(index, data) {
442
+				document.getElementsByTagName('td')[index].style.color = palette[brushColour];
443
+				document.getElementsByTagName('td')[index].innerHTML = data;
444
+			}
445
+
446
+			function remColour(index) {
447
+				document.getElementsByTagName('td')[index].style.color = '';
448
+			}
449
+
450
+			function setBackgroundColour(index) {
451
+				if (rgbConvert(document.getElementsByTagName('td')[index].style.backgroundColor) != palette[brushColour]) {
452
+					saveStateUndo(index);
453
+					document.getElementsByTagName('td')[index].style.backgroundColor = palette[brushColour];
454
+				}
455
+			}
456
+
457
+			function remBackgroundColour(index) {
458
+				if (document.getElementsByTagName('td')[index].style.backgroundColor != '') {
459
+					saveStateUndo(index);
460
+					document.getElementsByTagName('td')[index].style.backgroundColor = '';
461
+				}
462
+			}
463
+
464
+			function saveStateUndo(index) {
465
+				if (undo.length > 50000) undo.splice(0, 1);
466
+				var i = undo.length;
467
+				undo[i] = new Array();
468
+				undo[i][0] = index;
469
+				undo[i][1] = document.getElementsByTagName('td')[index].style.color;
470
+				undo[i][2] = document.getElementsByTagName('td')[index].style.backgroundColor;
471
+				undo[i][3] = document.getElementsByTagName('td')[index].innerHTML;
472
+				document.getElementById('undoButton').disabled = 0;
473
+			}
474
+
475
+			function loadLastUndo() {
476
+				if (undo.length > 0) {
477
+					var currentUndo = undo[undo.length - 1];
478
+					document.getElementsByTagName('td')[currentUndo[0]].style.color = currentUndo[1];
479
+					document.getElementsByTagName('td')[currentUndo[0]].style.backgroundColor = currentUndo[2];
480
+					document.getElementsByTagName('td')[currentUndo[0]].innerHTML = currentUndo[3];
481
+					undo.splice(undo.length - 1, 1);
482
+					if (undo.length <= 0) document.getElementById('undoButton').disabled = 1;
483
+				} else {
484
+					document.getElementById('undoButton').disabled = 1;
485
+				}
486
+			}
487
+
488
+			function addDraft() {
489
+				var d = new Date();
490
+				var i = drafts.length;
491
+				renderArt();
492
+				drafts[i] = new Array();
493
+				drafts[i][0] = document.getElementById('load').value;
494
+				drafts[i][1] = d.toUTCString();
495
+				drawDrafts();
496
+			}
497
+
498
+			function drawDrafts() {
499
+				document.getElementById('drafts').innerHTML = '';
500
+				for (var i in drafts) document.getElementById('drafts').innerHTML += '#' + i + ' <a style=\'cursor: pointer;\' onclick=\'loadDraft(' + i + ');\'>' + drafts[i][1] + "</a><br />\n";
501
+			}
502
+
503
+			function loadDraft(index) {
504
+				document.getElementById('load').value = drafts[index][0];
505
+				loadArt();
506
+			}
507
+
508
+			function copyArt() {
509
+				copy(document.getElementById('load'));
510
+			}
511
+
512
+			function shiftArt(direction) {
513
+				var newLoc;
514
+				if (direction == 'down' || direction == 'right') var i = (canvasWidth * canvasHeight) - 1;
515
+				else var i = 0;
516
+				while (i >= 0 && i < (canvasWidth * canvasHeight)) {
517
+					if (direction == 'up' || direction == 'down') newLoc = i - canvasWidth;
518
+					else if (direction == 'left' || (direction == 'right')) newLoc = i - 1;
519
+					var newCell = document.getElementsByTagName('td')[newLoc];
520
+					var oldCell = document.getElementsByTagName('td')[i];
521
+					if (newLoc >= 0 && newLoc < (canvasWidth * canvasHeight)) {
522
+						if (direction == 'up' || direction == 'left') {
523
+							newCell.style.color = oldCell.style.color;
524
+							newCell.style.backgroundColor = oldCell.style.backgroundColor;
525
+							newCell.innerHTML = oldCell.innerHTML;
526
+						} else if (direction == 'down' || direction == 'right') {
527
+							oldCell.style.color = newCell.style.color;
528
+							oldCell.style.backgroundColor = newCell.style.backgroundColor;
529
+							oldCell.innerHTML = newCell.innerHTML;
530
+						}
531
+					}
532
+					if (direction == 'up' || direction == 'left') i++;
533
+					else if (direction == 'down' || direction == 'right') i--;
534
+				}
535
+			}
536
+
537
+			function copy(inElement) {
538
+				if (inElement.createTextRange) {
539
+					var range = inElement.createTextRange();
540
+					if (range && BodyLoaded == 1) range.execCommand('Copy');
541
+				} else {
542
+					var flashcopier = 'flashcopier';
543
+					if (!document.getElementById(flashcopier)) {
544
+						var divholder = document.createElement('div');
545
+						divholder.id = flashcopier;
546
+						document.body.appendChild(divholder);
547
+					}
548
+					document.getElementById(flashcopier).innerHTML = '';
549
+					var divinfo = '<embed src="data/clipboard.swf" FlashVars="clipboard=' + escape(inElement.value) + '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
550
+					document.getElementById(flashcopier).innerHTML = divinfo;
551
+				}
552
+			}
553
+		</script>
554
+	</head>
555
+	<body onload='generateCanvas(80,24); generatePalette();' onkeydown='if(mode == 1) document.getElementById("textBuffer").focus();'>
556
+		<center>
557
+			<b>ASCII Maker</b>
558
+			<br><small><i>(<a href="https://acid.vegas/asciimaker">source</a>)</i></small>
559
+			<br><br>
560
+		</center>
561
+		<div class='noDrag' id='canvas'></div>
562
+		<div class='noDrag' id='picker'></div>
563
+		<div id='preview'></div>
564
+		<div class='drafts' id='drafts'></div>
565
+		<p align='center'>
566
+			<button onclick='addDraft();'>Save</button>
567
+			<button onclick='loadArt();'>Load</button>
568
+			<button onclick='generateCanvas(canvasWidth, canvasHeight);'>Clear</button>
569
+			<button onclick='renderArt();'>Render</button>
570
+			<button onclick='copyArt();'>Copy</button>
571
+			<button onclick='toggleMode();' id='typeButton'>Type</button>	
572
+			<button onclick='toggleTool();' id='toolButton'>Fill</button>
573
+			<button onclick='resizeArt();'>Resize</button>
574
+			<button onclick='loadLastUndo();' id='undoButton' DISABLED>Undo</button>
575
+			<br>
576
+			<textarea id='load' cols='30' rows='3' readonly></textarea><br />
577
+			<input type='text' id='textBuffer' onkeydown='if(mode != 1) return false;' style='opacity: 0;'><br />
578
+		</p>
579
+	</body>
580
+</html>