AdaFruitGFXFont DeterminationMono
by Admiral Potato
HTML
<script src="https://cdn.statically.io/gh/DC801/BM-Badge/49c0b33baefbe62cf5a868a30f9bbefe32b66b2b/SD_Card/MAGE/editor/dependencies/get-pixels.js"></script>
<img
...
CSS
body {
background-color: #222;
color: #ccc;
}
JavaScript
// Because the jsfiddle console is bad
// Reference: https://stackoverflow.com/a/7089553
var i = document.createElement('iframe');
i.style.display = 'none';
document.body.appendChild(i);
window.console = i.contentWindow.console;
var FONT_W = 8;
var FONT_H = 16;
var FONT_SHEET_WIDTH = 32;
var FONT_CHARS = 96;
var image = document.getElementById('font_image');
var fontRects = [];
var rect;
var pixelRedOffset;
window.getPixels(
image.src,
'png',
function (error, result) {
console.log({
error,
result,
});
var image = {
width: result.shape[0],
height: result.shape[1],
pixelStride: result.shape[2]
}
var byteSizeOfOneChar = Math.ceil((FONT_W * FONT_H) / 8);
var numBytes = byteSizeOfOneChar * FONT_CHARS;
console.log({
byteSizeOfOneChar,
numBytes,
});
var bitmapArray = [];
for (var charIndex = 0; charIndex < FONT_CHARS; charIndex++) {
rect = {};
rect.x = (charIndex % FONT_SHEET_WIDTH) * FONT_W;
rect.y = Math.floor(charIndex / FONT_SHEET_WIDTH) * FONT_H;
rect.w = FONT_W;
rect.h = FONT_H;
fontRects[charIndex] = rect;
var currentByteValue = 0;
var currentByteIndex = 0;
var currentPixelIndex = 0;
var currentByteAddress = 0;
for (var y = rect.y; y < (rect.y + rect.h); y++) {
for (var x = rect.x; x < (rect.x + rect.w); x++) {
currentByteAddress = currentByteIndex + (charIndex * byteSizeOfOneChar);
currentByteValue = bitmapArray[currentByteAddress] || 0;
pixelRedOffset = ((y * image.width) + x) * image.pixelStride;
if (result.data[pixelRedOffset]) {
currentByteValue += 1 << (7 - (currentPixelIndex % 8));
}
bitmapArray[currentByteAddress] = currentByteValue;
currentPixelIndex++;
currentByteIndex = Math.floor(currentPixelIndex / 8);
}
}
}
console.log('bitmapArray', bitmapArray);
console.log('fontRects',...