Skip to content

Represent OSD font characters using text/SVG instead of canvas/PNG for better performance (OSD tab loads in roughly half the time on an older Chromebook). #4497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 9, 2025
Merged

Represent OSD font characters using text/SVG instead of canvas/PNG for better performance (OSD tab loads in roughly half the time on an older Chromebook). #4497

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions src/js/tabs/osd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,15 +112,6 @@ FONT.constants = {
CHAR_HEIGHT: 18,
CHAR_WIDTH: 12,
},
COLORS: {
// black
0: "rgba(0, 0, 0, 1)",
// also the value 3, could yield transparent according to
// https://www.sparkfun.com/datasheets/BreakoutBoards/MAX7456.pdf
1: "rgba(255, 255, 255, 0)",
// white
2: "rgba(255,255,255, 1)",
},
};

FONT.pushChar = function (fontCharacterBytes, fontCharacterBits) {
Expand Down Expand Up @@ -197,36 +188,45 @@ FONT.openFontFile = function () {
};

/**
* returns a canvas image with the character on it
* Gets a character bitmap as a data URI.
* (Uses only single quotes so it can be embedded within double quotes)
* @param {number} charAddress Character index into a FONT array.
* @returns {string} Data URI.
*/
const drawCanvas = function (charAddress) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

const pixelSize = 1;
const width = pixelSize * FONT.constants.SIZES.CHAR_WIDTH;
const height = pixelSize * FONT.constants.SIZES.CHAR_HEIGHT;
const characterBitmapDataUri = function (charAddress) {
// Validate input
if (!(charAddress in FONT.data.characters)) {
console.log("charAddress", charAddress, " is not in ", FONT.data.characters.length);
}

canvas.width = width;
canvas.height = height;
// Create data URI prefix and SVG wrapper
const width = FONT.constants.SIZES.CHAR_WIDTH;
const height = FONT.constants.SIZES.CHAR_HEIGHT;
const lines = [
"data:image/svg+xml;utf8,",
`<svg width='${width}' height='${height}' xmlns='http://www.w3.org/2000/svg'>`,
];

// Create a rect for each visible pixel
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (!(charAddress in FONT.data.characters)) {
console.log("charAddress", charAddress, " is not in ", FONT.data.characters.length);
const color = FONT.data.characters[charAddress][y * width + x];
const fill = color === 0 ? "black" : color === 2 ? "white" : null;
if (fill) {
lines.push(`<rect x='${x}' y='${y}' width='1' height='1' fill='${fill}'/>`);
}
const v = FONT.data.characters[charAddress][y * width + x];
ctx.fillStyle = FONT.constants.COLORS[v];
ctx.fillRect(x, y, pixelSize, pixelSize);
}
}
return canvas;

// Close SVG wrapper and return data URI
lines.push("</svg>");
return lines.join("");
};

FONT.draw = function (charAddress) {
let cached = FONT.data.character_image_urls[charAddress];
if (!cached) {
cached = FONT.data.character_image_urls[charAddress] = drawCanvas(charAddress).toDataURL("image/png");
cached = FONT.data.character_image_urls[charAddress] = characterBitmapDataUri(charAddress);
}
return cached;
};
Expand Down Expand Up @@ -3410,7 +3410,7 @@ osd.initialize = function (callback) {
x = OSD.data.preview[i][2];
y = OSD.data.preview[i][3];
}
const $img = $(`<div class="char" draggable><img src=${FONT.draw(charCode)}></img></div>`)
const $img = $(`<div class="char" draggable><img src="${FONT.draw(charCode)}"></img></div>`)
.on("mouseenter", OSD.GUI.preview.onMouseEnter)
.on("mouseleave", OSD.GUI.preview.onMouseLeave)
.on("dragover", OSD.GUI.preview.onDragOver)
Expand Down