Skip to content

Commit 51d911c

Browse files
committed
style: embed Noto Sans Mono for axis label rendering
1 parent 0bd0471 commit 51d911c

5 files changed

Lines changed: 11 additions & 2 deletions

File tree

example/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const main = async () => {
7171
requestAnimationFrame(draw);
7272
};
7373

74+
await spectrogram.init();
7475
draw();
7576

7677
const ring = new RingBuffer<[number, number]>(spectrogramDuration * sampleRate);

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "spectrogram-js",
3-
"version": "1.0.2",
3+
"version": "1.1.0",
44
"description": "🎶 A simple and intuitive TypeScript library for generating spectrogram waterfall plots.",
55
"main": "dist/spectrogram-js.cjs.js",
66
"module": "dist/spectrogram-js.es.js",

src/fonts.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const NotoSansMonoRegular = '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';

src/render/AxisRenderer.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export class AxisRenderer {
2121
// Style settings
2222
ctx.strokeStyle = '#464646';
2323
ctx.fillStyle = '#252525';
24-
ctx.font = '11px monospace';
24+
ctx.font = '11px AxisFont';
2525
ctx.textBaseline = 'top';
2626
ctx.lineWidth = 1;
2727

src/spectrogram.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
SpectrogramModel,
55
TimestampedData
66
} from './core/SpectrogramModel';
7+
import { NotoSansMonoRegular } from './fonts';
78
import { CanvasRenderer, RenderOptions } from './render/CanvasRenderer';
89
import { ColorMapName } from './render/ColorMap';
910

@@ -19,6 +20,12 @@ export class Spectrogram {
1920
this.renderer = new CanvasRenderer(this.model);
2021
}
2122

23+
async init() {
24+
const font = new FontFace('AxisFont', `url(data:font/woff2;base64,${NotoSansMonoRegular})`);
25+
await font.load();
26+
(document.fonts as unknown as { add: (font: FontFace) => void }).add(font);
27+
}
28+
2229
setData(data: SpectrogramData | TimestampedData) {
2330
this.model.setData(data);
2431
this.renderer.clearCache();

0 commit comments

Comments
 (0)