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,26 +1,29 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||||
<script src="translations_commons.js"></script>
|
<script src="translations_commons.js"></script>
|
||||||
<title>TS100 Bitmap Editor</title>
|
<title>TS100 Bitmap Editor</title>
|
||||||
<style>
|
<style id="styles">
|
||||||
.matrix {
|
.matrix {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0px 0px 1px 1px ;
|
padding: 0px 0px 1px 1px;
|
||||||
background-color: #666;
|
background-color: #666;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.matrix * {
|
.matrix * {
|
||||||
font-size:0;
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.r {
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.c {
|
.c {
|
||||||
margin:1px 1px 0px 0px;
|
margin: 1px 1px 0px 0px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
height:10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -31,7 +34,8 @@
|
|||||||
.header {
|
.header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.data input, .data textarea {
|
.data input,
|
||||||
|
.data textarea {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -40,15 +44,14 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var ink, pressed, ev;
|
var ink, pressed, ev;
|
||||||
function mousedown(e) {
|
function mousedown(e) {
|
||||||
c = window.event.target;
|
c = window.event.target;
|
||||||
classes = c.className.split(" ");
|
classes = c.className.split(" ");
|
||||||
if (classes.indexOf("c")<0) {
|
if (classes.indexOf("c") < 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
ink = classes.indexOf("x")<0;
|
ink = classes.indexOf("x") < 0;
|
||||||
pressed = true;
|
pressed = true;
|
||||||
ev = e;
|
ev = e;
|
||||||
enter(e);
|
enter(e);
|
||||||
@@ -86,7 +89,7 @@
|
|||||||
try {
|
try {
|
||||||
var classes = c.className.split(" ");
|
var classes = c.className.split(" ");
|
||||||
return classes.indexOf("x") >= 0;
|
return classes.indexOf("x") >= 0;
|
||||||
} catch(e) {
|
} catch (e) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -96,11 +99,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getCoordinatesFromId(str) {
|
function getCoordinatesFromId(str) {
|
||||||
i = str.indexOf('_');
|
i = str.indexOf("_");
|
||||||
return {
|
return {
|
||||||
row: parseInt(str.substring(1, i)),
|
row: parseInt(str.substring(1, i)),
|
||||||
col: parseInt(str.substring(i+1))
|
col: parseInt(str.substring(i + 1)),
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearMatrix() {
|
function clearMatrix() {
|
||||||
@@ -111,8 +114,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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) {
|
function getCell(row, col) {
|
||||||
return document.getElementById("C"+row+"_"+col);
|
return document.getElementById("C" + row + "_" + col);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toMatrix(str) {
|
function toMatrix(str) {
|
||||||
@@ -122,7 +136,7 @@
|
|||||||
var pair = false;
|
var pair = false;
|
||||||
var c = 0;
|
var c = 0;
|
||||||
var rs = 7;
|
var rs = 7;
|
||||||
for (var i = 0; i<strs.length; i++) {
|
for (var i = 0; i < strs.length; i++) {
|
||||||
var d = strs[i];
|
var d = strs[i];
|
||||||
if (d.length > 0) {
|
if (d.length > 0) {
|
||||||
if (startsWith(d, "0x")) {
|
if (startsWith(d, "0x")) {
|
||||||
@@ -132,7 +146,7 @@
|
|||||||
}
|
}
|
||||||
sv = padLeft(v.toString(2), "0", 8);
|
sv = padLeft(v.toString(2), "0", 8);
|
||||||
for (r = 0; r < 8; r++) {
|
for (r = 0; r < 8; r++) {
|
||||||
paint(getCell(rs - r, c), sv.charAt(r) == '1');
|
paint(getCell(rs - r, c), sv.charAt(r) == "1");
|
||||||
}
|
}
|
||||||
c++;
|
c++;
|
||||||
if (c >= app.matrix.cols) {
|
if (c >= app.matrix.cols) {
|
||||||
@@ -150,13 +164,13 @@
|
|||||||
var strs = str.split("\\x");
|
var strs = str.split("\\x");
|
||||||
var c = 0;
|
var c = 0;
|
||||||
var rs = 7;
|
var rs = 7;
|
||||||
for (var i = 0; i<strs.length; i++) {
|
for (var i = 0; i < strs.length; i++) {
|
||||||
var d = strs[i];
|
var d = strs[i];
|
||||||
if (d.length > 0) {
|
if (d.length > 0) {
|
||||||
v = parseInt(d, 16);
|
v = parseInt(d, 16);
|
||||||
sv = padLeft(v.toString(2), "0", 8);
|
sv = padLeft(v.toString(2), "0", 8);
|
||||||
for (r = 0; r < 8; r++) {
|
for (r = 0; r < 8; r++) {
|
||||||
paint(getCell(rs - r, c), sv.charAt(r) == '1');
|
paint(getCell(rs - r, c), sv.charAt(r) == "1");
|
||||||
}
|
}
|
||||||
c++;
|
c++;
|
||||||
if (c >= app.matrix.cols) {
|
if (c >= app.matrix.cols) {
|
||||||
@@ -168,6 +182,88 @@
|
|||||||
stringFromMatrix(false, true);
|
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) {
|
function stringFromMatrix(skipEncodedData, skipEncodedEscapeSequence) {
|
||||||
var str = "";
|
var str = "";
|
||||||
var strEscaped = "";
|
var strEscaped = "";
|
||||||
@@ -178,9 +274,9 @@
|
|||||||
for (var c = 0; c < app.matrix.cols; c++) {
|
for (var c = 0; c < app.matrix.cols; c++) {
|
||||||
var b = 0;
|
var b = 0;
|
||||||
for (var r = 0; r < 8; r++) {
|
for (var r = 0; r < 8; r++) {
|
||||||
var cell = document.getElementById("C"+(rs-r)+"_"+c);
|
var cell = document.getElementById("C" + (rs - r) + "_" + c);
|
||||||
if (isInk(cell)) {
|
if (isInk(cell)) {
|
||||||
b |= (1 << (7-r));
|
b |= 1 << (7 - r);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
str += delim + "0x" + padLeft(b.toString(16).toUpperCase(), "0", 2);
|
str += delim + "0x" + padLeft(b.toString(16).toUpperCase(), "0", 2);
|
||||||
@@ -195,30 +291,31 @@
|
|||||||
if (!skipEncodedEscapeSequence) {
|
if (!skipEncodedEscapeSequence) {
|
||||||
app.encodedEscapeSequence = strEscaped;
|
app.encodedEscapeSequence = strEscaped;
|
||||||
}
|
}
|
||||||
|
updateCanvas(str);
|
||||||
return str;
|
return str;
|
||||||
}
|
}
|
||||||
|
|
||||||
function start() {
|
function start() {
|
||||||
app = new Vue({
|
app = new Vue({
|
||||||
el : '#app',
|
el: "#app",
|
||||||
data : {
|
data: {
|
||||||
matrix: {
|
matrix: {
|
||||||
cols: 12,
|
cols: 12,
|
||||||
rows: 16
|
rows: 16,
|
||||||
},
|
},
|
||||||
type: "big",
|
type: "big",
|
||||||
encodedData: "",
|
encodedData: "",
|
||||||
encodedEscapeSequence: "",
|
encodedEscapeSequence: "",
|
||||||
},
|
},
|
||||||
methods : {
|
methods: {
|
||||||
VtoMatrix : function(val) {
|
VtoMatrix: function (val) {
|
||||||
toMatrix(val);
|
toMatrix(val);
|
||||||
},
|
},
|
||||||
escapedToMatrix : function(val) {
|
escapedToMatrix: function (val) {
|
||||||
escapedToMatrix(val);
|
escapedToMatrix(val);
|
||||||
},
|
},
|
||||||
|
|
||||||
VchangeSize : function() {
|
VchangeSize: function () {
|
||||||
if (app.type == "big") {
|
if (app.type == "big") {
|
||||||
app.matrix.cols = 12;
|
app.matrix.cols = 12;
|
||||||
app.matrix.rows = 16;
|
app.matrix.rows = 16;
|
||||||
@@ -239,19 +336,73 @@
|
|||||||
app.matrix.rows = 16;
|
app.matrix.rows = 16;
|
||||||
}
|
}
|
||||||
stringFromMatrix();
|
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");
|
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"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload=start;
|
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>
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<select v-model="type" v-on:change="VchangeSize()">
|
<select v-model="type" v-on:change="VchangeSize()">
|
||||||
@@ -262,21 +413,79 @@
|
|||||||
<option value="screen">Screen (84x16)</option>
|
<option value="screen">Screen (84x16)</option>
|
||||||
<option value="fullscreen">Full Screen (96x16)</option>
|
<option value="fullscreen">Full Screen (96x16)</option>
|
||||||
</select>
|
</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>
|
||||||
<div id="matrix" class="matrix" onmousedown="mousedown(this)" onmouseup="mouseup(this)" ondragstart="return false">
|
<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="'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
|
||||||
|
:id="'C'+(r-1)+'_'+(c-1)"
|
||||||
|
class="c"
|
||||||
|
onmouseenter="enter(this)"
|
||||||
|
v-for="c in matrix.cols"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<input type="button" value="Clear" onclick="clearMatrix();stringFromMatrix()">
|
<input
|
||||||
|
type="button"
|
||||||
|
value="Clear"
|
||||||
|
onclick="clearMatrix();stringFromMatrix()"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<textarea v-model="encodedData" style="width:100%" v-on:change="VtoMatrix(encodedData)" rows=5></textarea>
|
<textarea
|
||||||
<textarea v-model="encodedEscapeSequence" style="width:100%" v-on:change="escapedToMatrix(encodedEscapeSequence)" rows=5></textarea>
|
v-model="encodedData"
|
||||||
</div>
|
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>
|
||||||
|
|
||||||
|
<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 />
|
||||||
|
|
||||||
</body>
|
<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>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user