mirror of
https://github.com/Ralim/IronOS.git
synced 2025-02-26 07:53:55 +00:00
Enhanced to have PNG download and scaling
Original updates started by @ Pikapoo on the Pinecil community chat Further improvements and png work by Robert Lipe <robertlipe@gmail.com>
This commit is contained in:
Ben V. Brown
@@ -1,282 +1,491 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<script src="translations_commons.js"></script>
|
||||
<title>TS100 Bitmap Editor</title>
|
||||
<style>
|
||||
.matrix {
|
||||
display: inline-block;
|
||||
padding: 0px 0px 1px 1px ;
|
||||
background-color: #666;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.matrix * {
|
||||
font-size:0;
|
||||
}
|
||||
.c {
|
||||
margin:1px 1px 0px 0px;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
height:10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.x {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.header {
|
||||
}
|
||||
|
||||
.data input, .data textarea {
|
||||
margin-top: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
var ink, pressed, ev;
|
||||
function mousedown(e) {
|
||||
c = window.event.target;
|
||||
classes = c.className.split(" ");
|
||||
if (classes.indexOf("c")<0) {
|
||||
return;
|
||||
}
|
||||
ink = classes.indexOf("x")<0;
|
||||
pressed = true;
|
||||
ev = e;
|
||||
enter(e);
|
||||
}
|
||||
|
||||
function mouseup(e) {
|
||||
ev = e;
|
||||
pressed = false;
|
||||
}
|
||||
|
||||
function enter(e) {
|
||||
if (!pressed) {
|
||||
return;
|
||||
}
|
||||
ev = e;
|
||||
c = window.event.target;
|
||||
paint(c, ink);
|
||||
stringFromMatrix();
|
||||
}
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<script src="translations_commons.js"></script>
|
||||
<title>TS100 Bitmap Editor</title>
|
||||
<style id="styles">
|
||||
.matrix {
|
||||
display: inline-block;
|
||||
padding: 0px 0px 1px 1px;
|
||||
background-color: #666;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
function paint(c, ink) {
|
||||
var cellInk = isInk(c);
|
||||
if (ink) {
|
||||
if (!cellInk) {
|
||||
c.className += " x";
|
||||
}
|
||||
} else {
|
||||
if (cellInk) {
|
||||
c.className = "c";
|
||||
}
|
||||
}
|
||||
}
|
||||
.matrix * {
|
||||
font-size: 0;
|
||||
}
|
||||
.r {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.c {
|
||||
margin: 1px 1px 0px 0px;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
function isInk(c) {
|
||||
try {
|
||||
var classes = c.className.split(" ");
|
||||
return classes.indexOf("x") >= 0;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function getMatrix() {
|
||||
return document.getElementById("matrix");
|
||||
}
|
||||
|
||||
function getCoordinatesFromId(str) {
|
||||
i = str.indexOf('_');
|
||||
return {
|
||||
row: parseInt(str.substring(1, i)),
|
||||
col: parseInt(str.substring(i+1))
|
||||
}
|
||||
}
|
||||
.x {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
function clearMatrix() {
|
||||
for (var r = 0; r < app.matrix.rows; r++) {
|
||||
for (var c = 0; c < app.matrix.cols; c++) {
|
||||
paint(getCell(r, c), false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCell(row, col) {
|
||||
return document.getElementById("C"+row+"_"+col);
|
||||
}
|
||||
|
||||
function toMatrix(str) {
|
||||
app.encodedData = str;
|
||||
clearMatrix();
|
||||
var strs = str.split(/[ ,]/);
|
||||
var pair = false;
|
||||
var c = 0;
|
||||
var rs = 7;
|
||||
for (var i = 0; i<strs.length; i++) {
|
||||
var d = strs[i];
|
||||
if (d.length > 0) {
|
||||
if (startsWith(d, "0x")) {
|
||||
v = parseInt(d.substring(2), 16);
|
||||
} else {
|
||||
v = parseInt(d);
|
||||
}
|
||||
sv = padLeft(v.toString(2), "0", 8);
|
||||
for (r = 0; r < 8; r++) {
|
||||
paint(getCell(rs - r, c), sv.charAt(r) == '1');
|
||||
}
|
||||
c++;
|
||||
if (c >= app.matrix.cols) {
|
||||
c = 0;
|
||||
rs += 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
stringFromMatrix(true, false);
|
||||
}
|
||||
|
||||
function escapedToMatrix(str) {
|
||||
app.encodedEscapeSequence = str;
|
||||
clearMatrix();
|
||||
var strs = str.split("\\x");
|
||||
var c = 0;
|
||||
var rs = 7;
|
||||
for (var i = 0; i<strs.length; i++) {
|
||||
var d = strs[i];
|
||||
if (d.length > 0) {
|
||||
v = parseInt(d, 16);
|
||||
sv = padLeft(v.toString(2), "0", 8);
|
||||
for (r = 0; r < 8; r++) {
|
||||
paint(getCell(rs - r, c), sv.charAt(r) == '1');
|
||||
}
|
||||
c++;
|
||||
if (c >= app.matrix.cols) {
|
||||
c = 0;
|
||||
rs += 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
stringFromMatrix(false, true);
|
||||
}
|
||||
.header {
|
||||
}
|
||||
|
||||
function stringFromMatrix(skipEncodedData, skipEncodedEscapeSequence) {
|
||||
var str = "";
|
||||
var strEscaped = "";
|
||||
var delim = "";
|
||||
var blocks = app.matrix.rows / 8;
|
||||
var rs = 7;
|
||||
for (var block = 0; block < blocks; block++) {
|
||||
for (var c = 0; c < app.matrix.cols; c++) {
|
||||
var b = 0;
|
||||
for (var r = 0; r < 8; r++) {
|
||||
var cell = document.getElementById("C"+(rs-r)+"_"+c);
|
||||
if (isInk(cell)) {
|
||||
b |= (1 << (7-r));
|
||||
}
|
||||
}
|
||||
str += delim + "0x" + padLeft(b.toString(16).toUpperCase(), "0", 2);
|
||||
strEscaped += "\\x" + padLeft(b.toString(16).toUpperCase(), "0", 2);
|
||||
delim = ",";
|
||||
}
|
||||
rs += 8;
|
||||
}
|
||||
if (!skipEncodedData) {
|
||||
app.encodedData = str;
|
||||
}
|
||||
if (!skipEncodedEscapeSequence) {
|
||||
app.encodedEscapeSequence = strEscaped;
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
function start() {
|
||||
app = new Vue({
|
||||
el : '#app',
|
||||
data : {
|
||||
matrix: {
|
||||
cols: 12,
|
||||
rows: 16
|
||||
},
|
||||
type: "big",
|
||||
encodedData: "",
|
||||
encodedEscapeSequence: "",
|
||||
},
|
||||
methods : {
|
||||
VtoMatrix : function(val) {
|
||||
toMatrix(val);
|
||||
},
|
||||
escapedToMatrix : function(val) {
|
||||
escapedToMatrix(val);
|
||||
},
|
||||
|
||||
VchangeSize : function() {
|
||||
if (app.type == "big") {
|
||||
app.matrix.cols = 12;
|
||||
app.matrix.rows = 16;
|
||||
} else if (app.type == "small") {
|
||||
app.matrix.cols = 6;
|
||||
app.matrix.rows = 8;
|
||||
} else if (app.type == "icon") {
|
||||
app.matrix.cols = 16;
|
||||
app.matrix.rows = 16;
|
||||
} else if (app.type == "icon24") {
|
||||
app.matrix.cols = 24;
|
||||
app.matrix.rows = 16;
|
||||
} else if (app.type == "screen") {
|
||||
app.matrix.cols = 84;
|
||||
app.matrix.rows = 16;
|
||||
} else if (app.type == "fullscreen") {
|
||||
app.matrix.cols = 96;
|
||||
app.matrix.rows = 16;
|
||||
}
|
||||
stringFromMatrix();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
toMatrix("0x00,0xF0,0x08,0x0E,0x02,0x02,0x02,0x02,0x0E,0x08,0xF0,0x00,0x00,0x3F,0x40,0x5C,0x5C,0x5C,0x5C,0x5C,0x5C,0x40,0x3F,0x00");
|
||||
}
|
||||
.data input,
|
||||
.data textarea {
|
||||
margin-top: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
window.onload=start;
|
||||
</script>
|
||||
.actions {
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var ink, pressed, ev;
|
||||
function mousedown(e) {
|
||||
c = window.event.target;
|
||||
classes = c.className.split(" ");
|
||||
if (classes.indexOf("c") < 0) {
|
||||
return;
|
||||
}
|
||||
ink = classes.indexOf("x") < 0;
|
||||
pressed = true;
|
||||
ev = e;
|
||||
enter(e);
|
||||
}
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="header">
|
||||
<select v-model="type" v-on:change="VchangeSize()">
|
||||
<option value="small">Small Font (6x8)</option>
|
||||
<option value="big">Big Font (12x16)</option>
|
||||
<option value="icon">Icon (16x16)</option>
|
||||
<option value="icon24">Icon (24x16)</option>
|
||||
<option value="screen">Screen (84x16)</option>
|
||||
<option value="fullscreen">Full Screen (96x16)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="matrix" class="matrix" onmousedown="mousedown(this)" onmouseup="mouseup(this)" ondragstart="return false">
|
||||
<div :id="'R'+(r-1)" class="r" v-for="r in matrix.rows">
|
||||
<div :id="'C'+(r-1)+'_'+(c-1)" class="c" onmouseenter="enter(this)" v-for="c in matrix.cols"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<input type="button" value="Clear" onclick="clearMatrix();stringFromMatrix()">
|
||||
</div>
|
||||
<div class="data">
|
||||
<textarea v-model="encodedData" style="width:100%" v-on:change="VtoMatrix(encodedData)" rows=5></textarea>
|
||||
<textarea v-model="encodedEscapeSequence" style="width:100%" v-on:change="escapedToMatrix(encodedEscapeSequence)" rows=5></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
function mouseup(e) {
|
||||
ev = e;
|
||||
pressed = false;
|
||||
}
|
||||
|
||||
function enter(e) {
|
||||
if (!pressed) {
|
||||
return;
|
||||
}
|
||||
ev = e;
|
||||
c = window.event.target;
|
||||
paint(c, ink);
|
||||
stringFromMatrix();
|
||||
}
|
||||
|
||||
function paint(c, ink) {
|
||||
var cellInk = isInk(c);
|
||||
if (ink) {
|
||||
if (!cellInk) {
|
||||
c.className += " x";
|
||||
}
|
||||
} else {
|
||||
if (cellInk) {
|
||||
c.className = "c";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isInk(c) {
|
||||
try {
|
||||
var classes = c.className.split(" ");
|
||||
return classes.indexOf("x") >= 0;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function getMatrix() {
|
||||
return document.getElementById("matrix");
|
||||
}
|
||||
|
||||
function getCoordinatesFromId(str) {
|
||||
i = str.indexOf("_");
|
||||
return {
|
||||
row: parseInt(str.substring(1, i)),
|
||||
col: parseInt(str.substring(i + 1)),
|
||||
};
|
||||
}
|
||||
|
||||
function clearMatrix() {
|
||||
for (var r = 0; r < app.matrix.rows; r++) {
|
||||
for (var c = 0; c < app.matrix.cols; c++) {
|
||||
paint(getCell(r, c), false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function invertMatrix() {
|
||||
for (var r = 0; r < app.matrix.rows; r++) {
|
||||
for (var c = 0; c < app.matrix.cols; c++) {
|
||||
cell = getCell(r, c);
|
||||
if (isInk(cell) == true) paint(cell, false);
|
||||
else paint(cell, true);
|
||||
}
|
||||
}
|
||||
stringFromMatrix();
|
||||
}
|
||||
|
||||
function getCell(row, col) {
|
||||
return document.getElementById("C" + row + "_" + col);
|
||||
}
|
||||
|
||||
function toMatrix(str) {
|
||||
app.encodedData = str;
|
||||
clearMatrix();
|
||||
var strs = str.split(/[ ,]/);
|
||||
var pair = false;
|
||||
var c = 0;
|
||||
var rs = 7;
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
var d = strs[i];
|
||||
if (d.length > 0) {
|
||||
if (startsWith(d, "0x")) {
|
||||
v = parseInt(d.substring(2), 16);
|
||||
} else {
|
||||
v = parseInt(d);
|
||||
}
|
||||
sv = padLeft(v.toString(2), "0", 8);
|
||||
for (r = 0; r < 8; r++) {
|
||||
paint(getCell(rs - r, c), sv.charAt(r) == "1");
|
||||
}
|
||||
c++;
|
||||
if (c >= app.matrix.cols) {
|
||||
c = 0;
|
||||
rs += 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
stringFromMatrix(true, false);
|
||||
}
|
||||
|
||||
function escapedToMatrix(str) {
|
||||
app.encodedEscapeSequence = str;
|
||||
clearMatrix();
|
||||
var strs = str.split("\\x");
|
||||
var c = 0;
|
||||
var rs = 7;
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
var d = strs[i];
|
||||
if (d.length > 0) {
|
||||
v = parseInt(d, 16);
|
||||
sv = padLeft(v.toString(2), "0", 8);
|
||||
for (r = 0; r < 8; r++) {
|
||||
paint(getCell(rs - r, c), sv.charAt(r) == "1");
|
||||
}
|
||||
c++;
|
||||
if (c >= app.matrix.cols) {
|
||||
c = 0;
|
||||
rs += 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
stringFromMatrix(false, true);
|
||||
}
|
||||
|
||||
// Rather than trying to figure these crazy cells/matrix, we just
|
||||
// slurp up the encoded string at the end. It's updated on every
|
||||
// pixl change, redraw, and load so just slipping into
|
||||
// stringFromMatrix is tacky, but seemss to catch all our refreshes.
|
||||
//
|
||||
// The string is CSV hex, with the first byte being the first column,
|
||||
// and bit zero being the UL corner. Second byte is second column, etc.
|
||||
// app.matrix.{cols,rows} is set by the drawing code to size the
|
||||
// image for a character, an icon, or the full screen image. This
|
||||
// code adapts resizing from that.
|
||||
// INVERT is handled by the code above us, our fill/clearRect handles
|
||||
// that.
|
||||
function updateCanvas(buf) {
|
||||
// Number of squared canvas pixels to image pixels;
|
||||
var scale = 1;
|
||||
|
||||
var c = document.getElementById("myCanvas");
|
||||
var context = c.getContext("2d");
|
||||
context.fillRect(0, 0, c.width, c.height);
|
||||
|
||||
if (c.width != app.matrix.cols || c.height != app.matrix.rows) {
|
||||
c.width = app.matrix.cols * scale;
|
||||
c.height = app.matrix.rows * scale;
|
||||
}
|
||||
context.clearRect(0, 0, c.width, c.height);
|
||||
|
||||
var a = buf.split(",");
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
|
||||
for (var e = 0; e < a.length; e++) {
|
||||
byte = parseInt(a[e], 16);
|
||||
for (var bit = 0; bit < 8; bit++) {
|
||||
// debug.innerHTML+= e + ": " + x + "/" + y + " " + a.length + "</br>";
|
||||
// debug.innerHTML+= app.matrix.cols + "</br>";
|
||||
if (x > c.cols) {
|
||||
throw "write past right of canvas";
|
||||
}
|
||||
if (x > c.rows) {
|
||||
throw "write past bottom of canvas";
|
||||
}
|
||||
if (byte & (1 << bit)) {
|
||||
// FillRect give better B&W image
|
||||
if (scale > 1) {
|
||||
context.moveTo(x, y);
|
||||
context.lineWidth = scale;
|
||||
context.lineTo(x + scale, y);
|
||||
} else {
|
||||
context.beginPath();
|
||||
context.fillRect(x, y, 1, 1);
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
y += scale;
|
||||
}
|
||||
y -= 8 * scale;
|
||||
x += scale;
|
||||
if (x == app.matrix.cols * scale) {
|
||||
x = 0;
|
||||
y = 8 * scale;
|
||||
}
|
||||
// debug.innerHTML+= x + " " + x/app.matrix.cols + " " + y + "</br>";
|
||||
// debug.innerHTML+=byte + "</br>";
|
||||
}
|
||||
|
||||
context.strokeStyle = "black";
|
||||
context.stroke();
|
||||
return c;
|
||||
}
|
||||
|
||||
function makePNG() {
|
||||
var canvas = document.getElementById("myCanvas");
|
||||
//var context = c.getContext("2d");
|
||||
//window.location = canvas.toDataURL("image/png");
|
||||
///var image = canvas.toDataURL("image/png");
|
||||
// document.write('<img src="'+image+'"/>');
|
||||
var image = canvas
|
||||
.toDataURL("image/png")
|
||||
.replace("image/png", "image/octet-stream");
|
||||
window.location.href = image;
|
||||
}
|
||||
|
||||
function stringFromMatrix(skipEncodedData, skipEncodedEscapeSequence) {
|
||||
var str = "";
|
||||
var strEscaped = "";
|
||||
var delim = "";
|
||||
var blocks = app.matrix.rows / 8;
|
||||
var rs = 7;
|
||||
for (var block = 0; block < blocks; block++) {
|
||||
for (var c = 0; c < app.matrix.cols; c++) {
|
||||
var b = 0;
|
||||
for (var r = 0; r < 8; r++) {
|
||||
var cell = document.getElementById("C" + (rs - r) + "_" + c);
|
||||
if (isInk(cell)) {
|
||||
b |= 1 << (7 - r);
|
||||
}
|
||||
}
|
||||
str += delim + "0x" + padLeft(b.toString(16).toUpperCase(), "0", 2);
|
||||
strEscaped += "\\x" + padLeft(b.toString(16).toUpperCase(), "0", 2);
|
||||
delim = ",";
|
||||
}
|
||||
rs += 8;
|
||||
}
|
||||
if (!skipEncodedData) {
|
||||
app.encodedData = str;
|
||||
}
|
||||
if (!skipEncodedEscapeSequence) {
|
||||
app.encodedEscapeSequence = strEscaped;
|
||||
}
|
||||
updateCanvas(str);
|
||||
return str;
|
||||
}
|
||||
|
||||
function start() {
|
||||
app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
matrix: {
|
||||
cols: 12,
|
||||
rows: 16,
|
||||
},
|
||||
type: "big",
|
||||
encodedData: "",
|
||||
encodedEscapeSequence: "",
|
||||
},
|
||||
methods: {
|
||||
VtoMatrix: function (val) {
|
||||
toMatrix(val);
|
||||
},
|
||||
escapedToMatrix: function (val) {
|
||||
escapedToMatrix(val);
|
||||
},
|
||||
|
||||
VchangeSize: function () {
|
||||
if (app.type == "big") {
|
||||
app.matrix.cols = 12;
|
||||
app.matrix.rows = 16;
|
||||
} else if (app.type == "small") {
|
||||
app.matrix.cols = 6;
|
||||
app.matrix.rows = 8;
|
||||
} else if (app.type == "icon") {
|
||||
app.matrix.cols = 16;
|
||||
app.matrix.rows = 16;
|
||||
} else if (app.type == "icon24") {
|
||||
app.matrix.cols = 24;
|
||||
app.matrix.rows = 16;
|
||||
} else if (app.type == "screen") {
|
||||
app.matrix.cols = 84;
|
||||
app.matrix.rows = 16;
|
||||
} else if (app.type == "fullscreen") {
|
||||
app.matrix.cols = 96;
|
||||
app.matrix.rows = 16;
|
||||
}
|
||||
stringFromMatrix();
|
||||
},
|
||||
},
|
||||
});
|
||||
toMatrix(
|
||||
"0x00,0xF0,0x08,0x0E,0x02,0x02,0x02,0x02,0x0E,0x08,0xF0,0x00,0x00,0x3F,0x40,0x5C,0x5C,0x5C,0x5C,0x5C,0x5C,0x40,0x3F,0x00"
|
||||
);
|
||||
}
|
||||
|
||||
var margins = 1;
|
||||
|
||||
function changesize(x) {
|
||||
var cursize = x;
|
||||
var mg;
|
||||
if (x < 6) mg = 0;
|
||||
else mg = 1;
|
||||
// var elements = document.getElementsByClassName('c');
|
||||
// for (var i=0; i<elements.length;i++){
|
||||
// elements.item(i).style="height: "+x+"px; width: "+x+"px;"+mg;
|
||||
// }
|
||||
styles.sheet.rules[3].style.height = x + "px";
|
||||
styles.sheet.rules[3].style.width = x + "px";
|
||||
styles.sheet.rules[3].style.marginRight = mg + "px";
|
||||
styles.sheet.rules[3].style.marginTop = mg + "px";
|
||||
styles.sheet.rules[0].style.paddingLeft = mg + "px";
|
||||
styles.sheet.rules[0].style.paddingBottom = mg + "px";
|
||||
}
|
||||
|
||||
function importFile() {
|
||||
var input, file, fr;
|
||||
input = document.getElementById("fileinput");
|
||||
if (input.files[0]) {
|
||||
file = input.files[0];
|
||||
fr = new FileReader();
|
||||
fr.onload = processData;
|
||||
fr.readAsBinaryString(file);
|
||||
}
|
||||
function processData() {
|
||||
var pushy, data, aB, bS;
|
||||
pushy = [];
|
||||
// bodyAppend("p","processing data");
|
||||
data = fr.result;
|
||||
for (i = 297; i < 297 + 192; i += 2) {
|
||||
aB = data.charCodeAt(i + 1);
|
||||
bS = aB.toString(16);
|
||||
if (bS.length < 2) bS = "0" + bS;
|
||||
pushy.push(bS);
|
||||
aB = data.charCodeAt(i);
|
||||
bS = aB.toString(16);
|
||||
if (bS.length < 2) bS = "0" + bS;
|
||||
pushy.push(bS);
|
||||
}
|
||||
escapedToMatrix("\\x" + pushy.join("\\x"));
|
||||
// bodyAppend("p","\\x"+pushy.join("\\x"));
|
||||
}
|
||||
}
|
||||
function bodyAppend(tagName, innerHTML) {
|
||||
var elm;
|
||||
|
||||
elm = document.createElement(tagName);
|
||||
elm.innerHTML = innerHTML;
|
||||
document.body.appendChild(elm);
|
||||
}
|
||||
|
||||
window.onload = start;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="header">
|
||||
<select v-model="type" v-on:change="VchangeSize()">
|
||||
<option value="small">Small Font (6x8)</option>
|
||||
<option value="big">Big Font (12x16)</option>
|
||||
<option value="icon">Icon (16x16)</option>
|
||||
<option value="icon24">Icon (24x16)</option>
|
||||
<option value="screen">Screen (84x16)</option>
|
||||
<option value="fullscreen">Full Screen (96x16)</option>
|
||||
</select>
|
||||
<a href="#" onclick="changesize(1);">1x</a>
|
||||
<a href="#" onclick="changesize(2);">2x</a>
|
||||
<a href="#" onclick="changesize(4);">4x</a>
|
||||
<a href="#" onclick="changesize(8);">8x</a>
|
||||
<a href="#" onclick="changesize(10);">10x</a>
|
||||
<a href="#" onclick="changesize(12);">12x</a>
|
||||
<a href="#" onclick="changesize(16);">16x</a>
|
||||
<a href="#" onclick="changesize(32);">32x</a>
|
||||
<a href="#" onclick="invertMatrix();">INVERT!</a>
|
||||
</div>
|
||||
<div
|
||||
id="matrix"
|
||||
class="matrix"
|
||||
onmousedown="mousedown(this)"
|
||||
onmouseup="mouseup(this)"
|
||||
ondragstart="return false"
|
||||
>
|
||||
<div :id="'R'+(r-1)" class="r" v-for="r in matrix.rows">
|
||||
<div
|
||||
:id="'C'+(r-1)+'_'+(c-1)"
|
||||
class="c"
|
||||
onmouseenter="enter(this)"
|
||||
v-for="c in matrix.cols"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<input
|
||||
type="button"
|
||||
value="Clear"
|
||||
onclick="clearMatrix();stringFromMatrix()"
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<textarea
|
||||
v-model="encodedData"
|
||||
style="width: 100%"
|
||||
v-on:change="VtoMatrix(encodedData)"
|
||||
rows="5"
|
||||
></textarea>
|
||||
<textarea
|
||||
v-model="encodedEscapeSequence"
|
||||
style="width: 100%"
|
||||
v-on:change="escapedToMatrix(encodedEscapeSequence)"
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<form action="#" onsubmit="return false;">
|
||||
<input type="file" id="fileinput" />
|
||||
<input
|
||||
type="button"
|
||||
id="btnLoad"
|
||||
value="Import"
|
||||
onclick="importFile();"
|
||||
/>
|
||||
(Remember to set correct canvas size before importing)
|
||||
</form>
|
||||
<br />
|
||||
|
||||
<canvas
|
||||
id="myCanvas"
|
||||
width="96"
|
||||
height="16"
|
||||
style="border: 1px dotted #000000; padding: 10px"
|
||||
>
|
||||
</canvas>
|
||||
|
||||
<form>
|
||||
<input type="button" value="Make PNG" onclick="makePNG();" />
|
||||
</form>
|
||||
|
||||
<div id="debug"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user