feat: add SD card font support with on-device download and web management
Add a complete SD card font subsystem that enables users to install and use custom fonts beyond the three built-in families. This combines the back-end firmware support (#1327) with the font configuration, build pipeline, CI distribution, and user-facing management UI (#1392). Core font system: - Custom .cpfont binary format (v4) with multi-style support (regular, bold, italic, bold-italic) packed into a single file per size - On-demand glyph loading from SD card with two-pass prewarm rendering to bulk-read glyphs per page, achieving near-flash performance for Latin text (~697ms vs ~681ms) and viable CJK rendering (~32% slower) - Persistent advance cache for layout measurement without SD I/O - Overflow ring buffer for glyph cache misses during rendering - Memory-conscious design: only advance tables kept in RAM; glyph bitmaps, kern tables, and ligatures loaded on demand from SD Font management: - On-device WiFi download from GitHub Releases with manifest-based discovery, install/update detection, and progress UI - Web interface font upload, listing, and deletion via /fonts page - Manual SD card copy to /fonts/ or /.fonts/ directories - Font selection integrated into Settings > Reader > Font Family Build pipeline: - Declarative YAML config (sd-fonts.yaml) as single source of truth for the 17-family font library (serif, sans, mono, accessibility) - Python converter (fontconvert_sdcard.py) for TTF/OTF to .cpfont with FreeType rasterization, class-based kerning, and ligature extraction - Parallel build orchestrator with variable font instance extraction - CI workflow publishing versioned + stable releases to a dedicated crosspoint-fonts repository with auto-incrementing revision tags - Centralized version constants (cpfont_version.py) shared across build tooling and CI, with firmware headers as manual sync points Additional fixes: - CJK characters no longer get hyphens inserted at line breaks - Advance table eliminates 30+ second stalls during CJK section indexing for paragraphs with >512 unique codepoints Closes #930 Co-authored-by: Zach Nelson <zach@zdnelson.com> Co-authored-by: Justin <itsthisjustin@users.noreply.github.com> Co-authored-by: jpirnay <jens@pirnay.com> Co-authored-by: mcrosson <kemonine@kemonine.info>
This commit is contained in:
Adrian Wilkins-Caruana
committed by
Zach Nelson
Zach Nelson
co-authored by
Zach Nelson
Justin
jpirnay
mcrosson
Zach Nelson
Justin
jpirnay
mcrosson
parent
29fd29f537
commit
7993b2bb97
@@ -1465,6 +1465,7 @@
|
||||
<a href="/">Home</a>
|
||||
<a href="/files" class="active">File Manager</a>
|
||||
<a href="/settings">Settings</a>
|
||||
<a href="/fonts">Fonts</a>
|
||||
</div>
|
||||
|
||||
<div class="page-header">
|
||||
|
||||
@@ -0,0 +1,323 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CrossPoint Reader - Fonts</title>
|
||||
<style>
|
||||
:root {
|
||||
--font-color: #333;
|
||||
--bg: #f5f5f5;
|
||||
--title-color: #2c3e50;
|
||||
--card-bg: #FFF;
|
||||
--label-color: #7f8c8d;
|
||||
--border-color: #eee;
|
||||
--accent-color: rgb(110, 154, 130);
|
||||
--accent-hover-color: #5a8c73;
|
||||
--danger-color: #e74c3c;
|
||||
--danger-hover: #c0392b;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--font-color: #f5f5f5;
|
||||
--bg: #333;
|
||||
--title-color: #ecf0f1;
|
||||
--card-bg: #444;
|
||||
--label-color: #bdc3c7;
|
||||
--border-color: #555;
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: var(--bg);
|
||||
color: var(--font-color);
|
||||
}
|
||||
h1 {
|
||||
color: var(--title-color);
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
h2 { color: var(--title-color); margin-top: 0; }
|
||||
h3 { margin: 0 0 8px 0; }
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.nav-links {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.nav-links a {
|
||||
padding: 10px 20px;
|
||||
color: var(--font-color);
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-links a.active {
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
.nav-links a:not(.active):hover {
|
||||
background-color: var(--accent-hover-color);
|
||||
color: white;
|
||||
}
|
||||
.family {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.family:last-child { border-bottom: none; }
|
||||
.family-info { flex: 1; }
|
||||
.family-meta { color: var(--label-color); font-size: 0.9em; }
|
||||
.btn {
|
||||
padding: 6px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.btn-danger {
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
.btn-danger:hover { background: var(--danger-hover); }
|
||||
.btn-primary {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover-color); }
|
||||
.upload-form {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.upload-form input[type="text"] {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
color: var(--font-color);
|
||||
}
|
||||
.upload-form input[type="file"] { flex: 1; min-width: 200px; }
|
||||
#status {
|
||||
margin-top: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
.status-ok { background: #d4edda; color: #155724; display: block !important; }
|
||||
.status-err { background: #f8d7da; color: #721c24; display: block !important; }
|
||||
.empty { color: var(--label-color); text-align: center; padding: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>📚 CrossPoint Reader</h1>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/files">File Manager</a>
|
||||
<a href="/settings">Settings</a>
|
||||
<a href="/fonts" class="active">Fonts</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Installed Fonts</h2>
|
||||
<div id="families"><p class="empty">Loading...</p></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Upload Font</h2>
|
||||
<form class="upload-form" id="uploadForm">
|
||||
<input type="file" id="fontFiles" webkitdirectory directory multiple required />
|
||||
<button type="submit" class="btn btn-primary">Upload</button>
|
||||
</form>
|
||||
<p id="pickedInfo" class="family-meta" style="margin: 8px 0 0;"></p>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function formatSize(bytes) {
|
||||
if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
|
||||
if (bytes >= 1024) return (bytes / 1024).toFixed(0) + ' KB';
|
||||
return bytes + ' B';
|
||||
}
|
||||
|
||||
async function loadFonts() {
|
||||
const el = document.getElementById('families');
|
||||
try {
|
||||
const res = await fetch('/api/fonts');
|
||||
const data = await res.json();
|
||||
// Build rows with DOM APIs and textContent so on-device family names
|
||||
// (which can contain arbitrary characters) cannot break markup or
|
||||
// execute script via innerHTML / inline onclick interpolation.
|
||||
el.replaceChildren();
|
||||
if (!data.families || data.families.length === 0) {
|
||||
const p = document.createElement('p');
|
||||
p.className = 'empty';
|
||||
p.textContent = 'No fonts installed';
|
||||
el.appendChild(p);
|
||||
return;
|
||||
}
|
||||
for (const f of data.families) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'family';
|
||||
|
||||
const info = document.createElement('div');
|
||||
info.className = 'family-info';
|
||||
const h3 = document.createElement('h3');
|
||||
h3.textContent = f.name;
|
||||
info.appendChild(h3);
|
||||
const meta = document.createElement('span');
|
||||
meta.className = 'family-meta';
|
||||
const sizes = (f.sizes || []).join(', ');
|
||||
const filesSizes = (f.files || []).map(fi => formatSize(fi.size)).join(' + ');
|
||||
meta.textContent = sizes + 'pt · ' + filesSizes;
|
||||
info.appendChild(meta);
|
||||
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn btn-danger';
|
||||
btn.textContent = 'Delete';
|
||||
// Capture name in the closure rather than interpolating into onclick.
|
||||
const familyName = f.name;
|
||||
btn.addEventListener('click', () => deleteFamily(familyName));
|
||||
|
||||
row.appendChild(info);
|
||||
row.appendChild(btn);
|
||||
el.appendChild(row);
|
||||
}
|
||||
} catch (e) {
|
||||
el.replaceChildren();
|
||||
const p = document.createElement('p');
|
||||
p.className = 'empty';
|
||||
p.textContent = 'Failed to load font list';
|
||||
el.appendChild(p);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFamily(name) {
|
||||
if (!confirm('Delete font family "' + name + '"?')) return;
|
||||
const status = document.getElementById('status');
|
||||
status.className = '';
|
||||
status.style.display = 'block';
|
||||
status.textContent = 'Deleting ' + name + '...';
|
||||
try {
|
||||
const res = await fetch('/api/fonts/delete', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({family: name})
|
||||
});
|
||||
if (res.ok) {
|
||||
status.className = 'status-ok';
|
||||
status.textContent = 'Deleted "' + name + '".';
|
||||
} else {
|
||||
status.className = 'status-err';
|
||||
status.textContent = 'Failed to delete "' + name + '".';
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'status-err';
|
||||
status.textContent = 'Delete error: ' + err.message;
|
||||
}
|
||||
await loadFonts();
|
||||
}
|
||||
|
||||
// Derive family name from a .cpfont filename: take everything before the
|
||||
// last '-' or '_' (that separator precedes the size suffix, e.g. Bookerly_12.cpfont).
|
||||
function familyFromFilename(name) {
|
||||
const stem = name.replace(/\.cpfont$/i, '');
|
||||
const cut = Math.max(stem.lastIndexOf('-'), stem.lastIndexOf('_'));
|
||||
return cut > 0 ? stem.slice(0, cut) : stem;
|
||||
}
|
||||
|
||||
// Sanitize to match firmware's [A-Za-z0-9_-]+ pattern.
|
||||
function sanitizeFamily(raw) {
|
||||
return raw.replace(/[^A-Za-z0-9_-]/g, '_');
|
||||
}
|
||||
|
||||
function cpfontFilesOnly(fileList) {
|
||||
return Array.from(fileList).filter(f => /\.cpfont$/i.test(f.name));
|
||||
}
|
||||
|
||||
document.getElementById('fontFiles').addEventListener('change', function() {
|
||||
const info = document.getElementById('pickedInfo');
|
||||
const files = cpfontFilesOnly(this.files);
|
||||
if (files.length === 0) {
|
||||
info.textContent = 'No .cpfont files found in the selected folder.';
|
||||
return;
|
||||
}
|
||||
const family = sanitizeFamily(familyFromFilename(files[0].name));
|
||||
info.textContent = files.length + ' file' + (files.length === 1 ? '' : 's') +
|
||||
' → family "' + family + '"';
|
||||
});
|
||||
|
||||
document.getElementById('uploadForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
const status = document.getElementById('status');
|
||||
const files = cpfontFilesOnly(document.getElementById('fontFiles').files);
|
||||
if (files.length === 0) {
|
||||
status.className = 'status-err';
|
||||
status.style.display = 'block';
|
||||
status.textContent = 'No .cpfont files selected.';
|
||||
return;
|
||||
}
|
||||
|
||||
// A directory picker may include files from multiple family subfolders.
|
||||
// Reject that up front — otherwise files[0]'s family is silently reused
|
||||
// for every upload, corrupting the install layout.
|
||||
const families = [...new Set(files.map(f => sanitizeFamily(familyFromFilename(f.name))))];
|
||||
if (families.length !== 1) {
|
||||
status.className = 'status-err';
|
||||
status.style.display = 'block';
|
||||
status.textContent = 'Please select files from a single font family.';
|
||||
return;
|
||||
}
|
||||
const family = families[0];
|
||||
|
||||
status.className = '';
|
||||
status.style.display = 'block';
|
||||
|
||||
let uploaded = 0;
|
||||
for (const file of files) {
|
||||
status.textContent = 'Uploading ' + (uploaded + 1) + '/' + files.length + ': ' + file.name;
|
||||
const formData = new FormData();
|
||||
formData.append('family', family);
|
||||
formData.append('file', file, file.name);
|
||||
try {
|
||||
const res = await fetch('/api/fonts/upload', { method: 'POST', body: formData });
|
||||
const data = await res.json();
|
||||
if (!data.ok) {
|
||||
status.className = 'status-err';
|
||||
status.textContent = 'Failed on ' + file.name + ': ' + (data.error || 'unknown error');
|
||||
await loadFonts();
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'status-err';
|
||||
status.textContent = 'Upload error on ' + file.name + ': ' + err.message;
|
||||
await loadFonts();
|
||||
return;
|
||||
}
|
||||
uploaded++;
|
||||
}
|
||||
|
||||
status.className = 'status-ok';
|
||||
status.textContent = 'Uploaded ' + uploaded + ' file' + (uploaded === 1 ? '' : 's') +
|
||||
' to family "' + family + '".';
|
||||
await loadFonts();
|
||||
});
|
||||
|
||||
loadFonts();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -104,6 +104,7 @@
|
||||
<a href="/" class="active">Home</a>
|
||||
<a href="/files">File Manager</a>
|
||||
<a href="/settings">Settings</a>
|
||||
<a href="/fonts">Fonts</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
||||
@@ -285,6 +285,7 @@
|
||||
<a href="/">Home</a>
|
||||
<a href="/files">File Manager</a>
|
||||
<a href="/settings" class="active">Settings</a>
|
||||
<a href="/fonts">Fonts</a>
|
||||
</div>
|
||||
|
||||
<div id="message" class="message"></div>
|
||||
|
||||
Reference in New Issue
Block a user