This is a demo of the @techandsoftware/teletext package on npm, which renders a teletext display using SVG graphics in the browser. The package provides an API to draw on the screen. The demo source code is available from the git repo.
Tap or click the buttons below, or use your keyboard keys, to try out different API functions.
| Key controls | Used for |
|---|---|
| Toggle reveal (no effect if the page doesn't contain concealed characters) | |
| Displays a test page out of the several built-in pages. Pages courtesy of Teletext Archaeologist | |
| Toggle mixed mode display | |
(for load) |
Draws a page using the loadPageFromEncodedString() API. Page courtesy of Teletext Archaeologist |
| Draw mosaic graphics using a pixel art scaling algorithm. This uses @techandsoftware/teletext-plugin-smooth-mosaic |
|
| Draws a page using the setPageRows() API and attribute generation | |
| Toggle boxed mode display (display is blank if the page doesn't contain boxed characters) | |
| Change the font (see the console logs for the font in use) | |
(for cells) |
Toggle grid |
(eNhancement) |
Add enhancements. Requires level 1.5 or 2.5 |
| Generate a randomised page | |
| Change the aspect ratio | |
(for wipe) |
Clears the screen |
| Set the teletext screen height to 80% of the browser window height. (For this demo the screen width needs to be > 767 pixels for this to work due to the responsive sizing at smaller widths). | |
(for encoding) |
Go to the next g0 character set |
(for view) |
Switch between using a font or graphics to render the teletext mosaics |
(siZe) |
Show a test page with double width and double size characters. You'll also need to select level 2.5 |