mirror of
https://github.com/Ralim/IronOS.git
synced 2025-02-26 07:53:55 +00:00
283 lines
6.0 KiB
HTML
283 lines
6.0 KiB
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();
|
|
}
|
|
|
|
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 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);
|
|
}
|
|
|
|
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");
|
|
}
|
|
|
|
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>
|
|
</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>
|
|
</html>
|