<!--The MIT License (MIT)
Copyright (c) 2017 by Xavier Grosjean
Based on work
Copyright (c) 2016 by Daniel Eichhorn
Copyright (c) 2016 by Fabrice Weinberg
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<!--
Standalone page to draw icons in matrix and generates the map definition with the format required by
library for OLED SD1306 screen: https://github.com/squix78/esp8266-oled-ssd1306
100% quick and dirty vanilla ECS6, no framework or library was injured for this project.
-->
<html>
<head>
<meta charset="utf-8" />
<style>
#form {
user-select: none;
}
#chars table {
margin-top: 5px;
user-select: none;
}
#chars table, tr, td, th {
border-collapse: collapse;
}
#chars td, th {
border: 1px solid #CCC;
width: 12px;
height: 15px;
}
#chars th[action] {
cursor:pointer;
}
#chars th[action="up"], #chars th[action="down"], #chars th[action="left"], #chars th[action="right"] {
font-size: 10px;
}
#chars td.on {
background-color: #CCC;
}
#addChar, #generate {
display: none;
user-select: none;
}
body.started #addChar, body.started #generate {
display: inline;
}
body.started #create {
display: none;
}
#page {
position:relative;
}
#page>div {
position: relative;
float: left;
}
#output {
margin-left: 20px;
margin-top: 12px;
font-size:12px;
user-select: all;
max-width:60%;
}
#header {
margin-top: 10px;
}
#inputText {
width: 100%;
height:120px;
}
</style>
</head>
<body>
<div id="form">
<table width="100%">
<tr>
<td>Font array name:</td><td><input placeholder="Font array name" type="text" id="name" value="My_Font"/></td>
<td width="75%" rowspan="5">
<textarea id="inputText" placeholder="Or paste a char array font definition here">
const char My_Font[] PROGMEM = {
0xa, // Width: 10
0xd, // Height: 13
0x1, // First char: 1
0x2, // Number of chars: 2
// Jump table:
0x0, 0x0, 0x14, 0xa,
0x0, 0x14, 0x14, 0xa,
// Font Data:
0x80,0x1f,0x80,0x10,0x80,0x1f,0x80,0x10,0x80,0x1f,0x80,0x10,0x80,0x1f,0x80,0x10,0x80,0x1f,0x0,0x6,
0x0,0x60,0x0,0x5c,0x80,0x43,0x60,0x40,0x98,0x57,0x98,0x57,0x60,0x40,0x80,0x43,0x0,0x5c,0x0,0x60,
};
</textarea></td>
</tr>
<tr>
<td>First char code:</td><td><input placeholder="First char code" type="number" id="code" value="1" min="1"/></td>
</tr>
<tr>
<td>Width:</td><td><input placeholder="Font width" type="number" id="width" value="10"/></td>
</tr>
<tr>
<td>Height:</td><td><input placeholder="Font height" type="number" id="height" value="13" max="64"/></td>
</tr>
<tr>
<td colspan="3"> </td> <!--slightly improves layout-->
</tr>
<tr>
<td colspan="2"><button id="create">Create</button> </td>
<td><button id="parse">Parse</button></td>
</tr>
</table>
<br/>
</div>
<div id="page">
<div id="charxContainer" ondragstart="return false;">
<div id="chars"></div><br/>
<button id="addChar">Add a character</button>
</div>
<div id="output">
<button id="generate">Generate</button>
<div class="output" id="header"> </div>
<div class="output" id="jump"> </div>
<div class="output" id="data"> </div>
</div>
</div>
<script>
(function() {
let font;
class Font {
constructor() {
this.height = parseInt(document.getElementById('height').value);
this.width = parseInt(document.getElementById('width').value);
let firstCharCode = parseInt(document.getElementById('code').value);
this.currentCharCode = firstCharCode;
this.fontContainer = document.getElementById('chars');
this.bytesForHeight = (1 + ((this.height - 1) >> 3)); // number of bytes needed for this font height
document.body.className = "started";
document.getElementById('height').disabled = true;
document.getElementById('width').disabled = true;
}
// Should we have a Char and a Pixel class ? not sure it's worth it.
// Let's use the DOM to store everything for now
// Add a pixel matrix to draw a new character
// jumpaData not used for now: some day, use the last byte for optimisation
addChar(jumpData, charData) {
let charContainer = this.fontContainer.appendChild(document.createElement("table"));
charContainer.setAttribute("code", this.currentCharCode);
let header = charContainer.appendChild(document.createElement("tr"));
header.innerHTML = `<th colspan="${this.width-7}"># ${this.currentCharCode}</th>`
+ '<th title="Delete this char" action="delete">-</th>'
+ '<th title="Add a char above" action="add">+</th>'
+ '<th title="Shift pixels to the left" action="left">🡨</th>'
+ '<th title="Shift pixels down" action="down">🡫</th>'
+ '<th title="Shift pixels to the right" action="up">🡩</th>'
+ '<th title="Shift pixels to the righ" action="right">🡪</th>'
+ '<th title="Reset all pixels" action="clean">C</th>';
// If data is provided, decode it to pixel initialization friendly structure
let pixelInit = [];
if (charData && charData.length) {
// charData byte count needs to be a multiple of bytesForHeight. End bytes with value 0 may have been stripped
let missingBytes = charData.length % this.bytesForHeight;
for(let b = 0; b < missingBytes ; b++) {
charData.push(0);
}
while(charData.length) {
let row = charData.splice(0, this.bytesForHeight).reverse();
let pixelRow = [];
for (let b = 0; b < row.length; b++) {
let mask = 0x80;
let byte = row[b];
for (let bit = 0; bit < 8; bit++) {
if (byte & mask) {
pixelRow.push(1);
} else {
pixelRow.push(0);
}
mask = mask >> 1;
}
}
pixelRow.splice(this.height +1);
// Font.output('data', pixelRow);
pixelInit.push(pixelRow.reverse());
}
}
for(let r = 0; r < this.height; r++) {
let rowContainer = charContainer.appendChild(document.createElement("tr"));
for(let c = 0; c < this.width; c++) {
let pixContainer = rowContainer.appendChild(document.createElement("td"));
pixContainer.setAttribute('action', 'toggle');
// If there is some init data, set the pixel accordingly
if (pixelInit.length && pixelInit[c]) {
if (pixelInit[c][r]) {
pixContainer.className = 'on';
}
}
}
}
this.currentCharCode++;
return charContainer;
}
static togglePixel(pixel) {
pixel.className = pixel.className === 'on' ? '': 'on';
}
// Return anInt as hex string
static toHexString(aByte) {
let zero = aByte < 16?'0':'';
return `0x${zero}${aByte.toString(16).toUpperCase()}`
}
// Return least significant byte as hex string
static getLsB(anInt) {
return Font.toHexString(anInt & 0xFF);
}
// Return most significant byte as hex string
static getMsB(anInt) {
return Font.toHexString(anInt>>>8);
}
static output(targetId, msg) {
let output = document.getElementById(targetId);
let line = output.appendChild(document.createElement('div'));
line.textContent = msg;
}
static emptyChars() {
document.getElementById('chars').textContent = '';
}
static emptyOutput() {
document.getElementById('header').textContent = '';
document.getElementById('jump').textContent = '';
document.getElementById('data').textContent = '';
}
// Read from the <td> css class the pixels that need to be on
// generates the jump table and font data
generate() {
Font.emptyOutput();
let chars = this.fontContainer.getElementsByTagName('table');
let firstCharCode = parseInt(document.getElementById('code').value);
let name = document.getElementById('name').value.replace(/[^a-zA-Z0-9_$]/g, '_');
let bits2add = this.bytesForHeight*8 - this.height; // number of missing bits to fill leftmost byte
let charCount = chars.length;
let charAddr = 0;
// Comments are used when parsing back a generated font
Font.output('jump', ' // Jump Table:');
Font.output('data', ' // Font Data:');
// Browse each character
for(let ch = 0; ch < charCount; ch++) {
chars[ch].getElementsByTagName('th')[0].textContent = `# ${ch + firstCharCode}`;
let charBytes = [];
let charCode = ch + firstCharCode;
let rows = chars[ch].getElementsByTagName('tr');
let notZero = false;
// Browse each column
for(let col = 0; col < this.width ; col++) {
let bits = ""; // using string because js uses 32b ints when performing bit operations
// Browse each row starting from the bottom one, going up, and accumulate pixels in
// a string: this rotates the glyph
// Beware, row 0 is table headers.
for(let r = rows.length-1; r >=1 ; r--) {
let pixelState = rows[r].children[col].className;
bits += (pixelState === 'on' ? '1': '0');
}
// Need to complete missing bits to have a sizeof byte multiple number of bits
for(let b = 0; b < bits2add; b++) {
bits += '0';
}
// Font.output('data', ` // ${bits}`); // Debugging help: rotated bitmap
// read bytes from the end
for(let b = bits.length - 1; b >= 7; b -= 8) {
//Font.output('data', ` // ${bits.substring(b-7, b)}`); // Debugging help: rotated bitmap
let byte = parseInt(bits.substring(b-8, b), 2);
if (byte != 0) {
notZero = true;
}
charBytes.push(Font.toHexString(byte));
}
}
// Remove bytes with value 0 at the end of the array.
while(parseInt(charBytes[charBytes.length-1]) === 0 && charBytes.length !== 1) {
charBytes.pop();
}
if (notZero) {
Font.output('data', ` ${charBytes.join(', ')}, // ${charCode}`);
// TODO: last param width is not the best value. Need to compute the actual occupied width
Font.output('jump', ` ${Font.getMsB(charAddr)}, ${Font.getLsB(charAddr)}, ${Font.toHexString(charBytes.length)}, ${Font.toHexString(this.width)}, // ${charCode} `);
charAddr += charBytes.length;
} else {
Font.output('jump', ` 0xFF, 0xFF, 0x00, ${Font.toHexString(this.width)}, // ${charCode} `);
}
}
Font.output('data', '};');
Font.output('header', "// Font generated or edited with the glyphEditor");
Font.output('header', `const char ${name}[] PROGMEM = {`);
// Comments are used when parsing back a generated font
Font.output('header', ` ${Font.toHexString(this.width)}, // Width: ${this.width}`);
Font.output('header', ` ${Font.toHexString(this.height)}, // Height: ${this.height}`);
Font.output('header', ` ${Font.toHexString(firstCharCode)}, // First char: ${firstCharCode}`);
Font.output('header', ` ${Font.toHexString(charCount)}, // Number of chars: ${charCount}`);
}
}
document.getElementById('generate').addEventListener('click', function() {
font.generate();
});
document.getElementById('addChar').addEventListener('click', function() {
font.addChar();
});
document.getElementById('inputText').addEventListener('click', function(e) {
let target = e.target;
target.select();
});
document.getElementById('chars').addEventListener('mousedown', function(e) {
if (e.button != 0) return;
let target = e.target;
let action = target.getAttribute('action') || '';
if (action === '') return;
let result, code, nextContainer, previousContainer, pixels ;
let currentContainer = target.parentNode.parentNode;
switch(action) {
case 'add':
code = currentContainer.getAttribute('code');
nextContainer = font.addChar();
currentContainer.parentNode.insertBefore(nextContainer, currentContainer);
do {
nextContainer.setAttribute('code', code);
nextContainer.getElementsByTagName('th')[0].textContent = `# ${code}`;
code ++;
} while (nextContainer = nextContainer.nextSibling);
break;
case 'delete':
result = confirm("Delete this character ?");
if (!result) return;
code = currentContainer.getAttribute('code');
nextContainer = currentContainer;
while (nextContainer = nextContainer.nextSibling) {
nextContainer.setAttribute('code', code);
nextContainer.getElementsByTagName('th')[0].textContent = `# ${code}`;
code ++;
}
currentContainer.parentNode.removeChild(currentContainer);
break;
// Shift pixels to the left
case 'left':
pixels = currentContainer.getElementsByTagName('td');
for(p = 0; p < pixels.length; p++) {
if((p + 1) % font.width) {
pixels[p].className = pixels[p + 1].className;
} else {
pixels[p].className = '';
}
}
break;
// Shift pixels to the right
case 'right':
pixels = currentContainer.getElementsByTagName('td');
for(p = pixels.length-1; p >=0 ; p--) {
if(p % font.width) {
pixels[p].className = pixels[p - 1].className;
} else {
pixels[p].className = '';
}
}
break;
// Shift pixels down
case 'down':
pixels = currentContainer.getElementsByTagName('td');
for(p = pixels.length-1; p >=0 ; p--) {
if(p >= font.width) {
pixels[p].className = pixels[p - font.width].className;
} else {
pixels[p].className = '';
}
} break;
// Shift pixels up
case 'up':
pixels = currentContainer.getElementsByTagName('td');
for(p = 0; p < pixels.length; p++) {
if(p < font.width*(font.height -1)) {
pixels[p].className = pixels[p + font.width].className;
} else {
pixels[p].className = '';
}
}
break;
case 'toggle':
Font.togglePixel(target);
break;
case 'clean':
result = confirm("Delete the pixels ?");
if (!result) return;
pixels = currentContainer.getElementsByTagName('td');
for (let p = 0; p < pixels.length; p++) {
pixels[p].className = '';
}
break;
}
});
document.getElementById('chars').addEventListener('mouseover', function(e) {
let target = e.target;
let action = target.getAttribute('action');
if (action !== 'toggle' || e.buttons !== 1) return;
Font.togglePixel(target);
});
document.getElementById('chars').addEventListener('dragstart', function() {
return false;
});
document.getElementById('create').addEventListener('click', function() {
font = new Font();
font.addChar();
});
// parse a char array declaration for an existing font.
// parsing heavily relies on comments.
document.getElementById('parse').addEventListener('click', function() {
if (document.getElementById('chars').childElementCount) {
let result = confirm("Confirm you want to overwrite the existing grids ?");
if (!result) return;
}
let lines = document.getElementById('inputText').value.split('\n');
let name = '';
let height = 0;
let width = 0;
let firstCharCode = 0;
let jumpTable = [];
let charData = [];
let readingJumpTable = false;
let readingData = false;
for(let l = 0 ; l < lines.length; l++) {
// TODO ? keep C compilation directives to copy them (not lowercased :)) to newly generated char array
let line = lines[l].trim();
//alert(line);
let fields;
// Declaration line: grab the name
if (line.indexOf('PROGMEM') > 0) {
fields = line.split(' ');
name = fields[2].replace(/[\[\]]/g, '');
continue;
}
line = line.toLowerCase();
// Todo: could rely on line order...
// width line: grab the width
if (line.indexOf('width') > 0) {
fields = line.split(',');
width = fields[0];
continue;
}
// height line: grab the height
if (line.indexOf('height') > 0) {
fields = line.split(',');
height = fields[0];
continue;
}
// first char code line: grab the first char code
if (line.indexOf('first char') > 0) {
fields = line.split(',');
firstCharCode = fields[0];
continue;
}
// End of array declaration
// TODO warn if more lines: next fonts are ignored
if (line.indexOf('};') === 0) {
break;
}
if (readingJumpTable || readingData) {
if (line.indexOf('#') !== 0 && line.length !== 0 && line.indexOf('//') !== 0) {
line = line.replace(/\/\/.*/, ''); // get rid of end of line comments
fields = line.split(',');
let newEntry = [];
for(let f=0; f < fields.length; f++) {
let value = parseInt(fields[f]);
if (isNaN(value)) continue;
if (readingData) {
charData.push(value);
}
if (readingJumpTable) {
newEntry.push(value);
}
}
if (readingJumpTable) {
jumpTable.push(newEntry);
}
}
}
// Begining of data
if (line.indexOf('font data') > 0) {
readingData = true;
readingJumpTable = false;
}
// Begining of jump table
if (line.indexOf('jump table') > 0) {
readingJumpTable = true;
}
}
if (!name || !height || !width || !firstCharCode) {
alert("Does not look like a parsable font. Try again.");
return;
}
Font.emptyChars();
Font.emptyOutput();
document.getElementById('name').value = name;
document.getElementById('height').value = parseInt(height);
document.getElementById('width').value = parseInt(width);
document.getElementById('code').value = parseInt(firstCharCode);
font = new Font();
for(let c = 0 ; c < jumpTable.length; c++) {
let jumpEntry = jumpTable[c];
let charEntry = [];
// displayable character
if (jumpEntry[0] !== 255 || jumpEntry[1] !== 255) {
charEntry = charData.splice(0, jumpEntry[2]);
}
font.addChar(jumpEntry, charEntry);
}
document.body.className = "started";
});
})();
</script>
</body>
</html>