DOCSEARCHbyAlgolia
Submit Docs

Teletext for Javascript

website·Indexed 31 days ago

https://teletext-for-javascript-docs.robdev.org.uk

A collection of NPM modules, including @techandsoftware/teletext, for rendering teletext pages using SVG vector graphics. Features a Screen API for managing teletext instances, character set management (G0, G1, G2), and a TeletextService for representing teletext services. Includes tools for writing rows and bytes to the base page, managing display attributes like text color and flashing, and a dedicated Event API.

Tokens
10.7K
Snippets
49
Records
79
Agent score
51%

What's inside Teletext for Javascript

  1. Overview of @techandsoftware/teletext

    The @techandsoftware/teletext package renders teletext pages using SVG vector graphics. It acts as a 'dumb terminal' or screen; it does not handle VBI packets, page numbering, or navigation. Developers using this package must supply the page content and implement the application logic for navigation. The library provides an API to set page content and configure display characteristics such as screen height and aspect ratio.

  2. Understand Teletext character set levels and availability

    Teletext uses four primary character sets (G0-G3), each 7-bit with codes from 0x20 to 0x7f. Availability depends on the Teletext level:

    • Level 1: Supports G0 (Alphanumeric) and G1 (Block Mosaic) on the base page.
    • Level 1.5: Adds G2 (Supplementary) via enhancements.
    • Level 2.5: Adds G3 (Smooth Mosaic and Line Drawing) via enhancements and expands G1/G2 capabilities.

    Base page refers to the standard 40x25 grid. Enhancements allow writing characters on top of the base page at specific rows and columns.

  3. Manage teletext display attributes using the Attributes object

    Control code characters determine display attributes such as text color, double height, flashing, and boxing. By default, rows start with white text on a black background, single height, not flashing, not boxed, not concealed, and no held mosaic. Attributes typically remain active until the end of the row.

    The Attributes and Colour objects provide a helper interface for composing strings used with setPageRows(), setRow(), writeBytes(), and writeByte(). While optional, these objects simplify the process of inserting the correct control codes into the teletext stream.

    import { Attributes, Colour } from '@techandsoftware/teletext';

  4. Extend Teletext Rendering with Plugins

    The library includes a plugin architecture that allows developers to supplement or overwrite the default rendering behavior. For example, the @techandsoftware/teletext-plugin-smooth-mosaic plugin replaces standard block mosaics with a pixel-art scaling algorithm (hqx by Maxim Stepin) to create higher-resolution, smoother graphics.
    npm install @techandsoftware/teletext-plugin-smooth-mosaic

  5. Implement a Teletext web application using teletext-service

    The Geefax demo application demonstrates how to build a web-based teletext viewer. It integrates the following components:

    • @techandsoftware/teletext-service: Used to handle the teletext service logic, including page numbers and fastext (color button) navigation.
    • @techandsoftware/teletext: Used to render byte-compatible teletext pages to SVG for scalable, high-resolution display.
    • @techandsoftware/teletext-caster: Enables casting pages to Chromecast devices and compatible TVs from Chrome browsers.

    In this specific implementation, content is fetched via the Guardian's public API as JSON structures over HTTPS.

  7. Render a Teletext screen to the DOM

    To make a teletext screen visible, use the addTo(selector) method. This creates an inline SVG document within the element matched by the provided DOM selector. To remove the display from the DOM, use the remove() method. For single-page applications, call destroy() when unmounting to perform clean-up.
    // Add screen to <div id="teletextscreen"></div>
teletext.addTo('#teletextscreen');

// Remove screen from DOM
teletext.remove();

  8. Install and use @techandsoftware/teletext via npm for browsers

    Install the package using npm and import it as an ES6 module. If using a build tool like Vite, you can import the package name directly; otherwise, reference the distribution file in node_modules.
    npm install @techandsoftware/teletext
    <div id="teletextscreen"></div>

<script type="module">
  // If using Vite or similar tooling:
  import { Teletext } from '@techandsoftware/teletext';
  
  // Otherwise, use the direct path:
  // import { Teletext } from './node_modules/@techandsoftware/teletext/dist/teletext.min.js';

  const teletext = Teletext();
  teletext.addTo('#teletextscreen');
  teletext.setRow(0, 'Hello world!');
</script>

  9. Related Teletext Ecosystem Packages

    Depending on the project requirements, the following companion packages may be used alongside @techandsoftware/teletext:

    • @techandsoftware/teletext-service: A higher-level package that adds page numbering, subpages, and color button navigation.
    • @techandsoftware/teletext-caster: Provides Chromecast integration for displaying teletext on compatible TVs.
    • @techandsoftware/teletext-fonts: Provides fonts equipped with block mosaic characters (sextants). This is optional if using SVG graphical rendering via setView().
    • @techandsoftware/image-to-sextants: A utility to convert standard images into Unicode sextant or teletext block mosaic characters.

  10. Use G2 Supplementary character sets

    G2 sets are only available as enhancements at Level 1.5 and 2.5; they cannot be used on the base page.

    • Writing: Use enhance().putG2() to place G2 characters.
    • Configuration:
      • setDefaultG0Charset() sets the G2 set corresponding to the selected G0 set.
      • setG2Charset() allows setting the G2 set independently of G0.

  11. Install and integrate @techandsoftware/teletext-caster

    The @techandsoftware/teletext-caster module requires the Google Cast API framework to function. It is supported in Chrome on Windows, Mac, Linux, ChromeOS, and Android (not supported on iOS).

    <!-- 1. Import Google Cast API Framework --> <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

    <!-- 2. Add the Cast Launcher Button --> <google-cast-launcher id="castbutton"></google-cast-launcher>

    <!-- 3. Import and use the module (ESM via CDN) --> <script type="module"> import { ttxcaster } from 'https://cdn.jsdelivr.net/npm/@techandsoftware/teletext-caster@latest/dist/teletextcaster.min.js';

    // Example: Display a page ttxcaster.display(PACKED_PAGE); </script>

  12. Implement a custom page fetcher for TeletextService

    To override the default JSON fetching behavior, provide a fetcher object to the TeletextService constructor. This object must implement an asynchronous fetchPage method that takes a 3-character page number (100 to 8FF) and returns a promise resolving to a page object or null.
    const customFetcher = {
    async fetchPage(pageNumber) {
        // pageNumber is a string from '100' to '8FF'
        const response = await fetch(`/api/teletext/${pageNumber}`);
        if (!response.ok) return null;
        return await response.json();
    }
};

const service = new TeletextService({
    DOMSelector: '#teletextscreen',
    fetcher: customFetcher
});