Quick links:
This is a teletext editor implemented in JavaScript, so that people now
need no more than a JavaScript-enabled browser in order to create their
own teletext frames. You can try the editor out at
http://edit.tf/ ('edit
t
eletext f
rame')
or by opening the file index.html
in your browser. It may also be used for editing BBC Micro mode 7 screens,
or preparing viewdata frames.
Most of the functionality of the editor is accessed through key
sequences beginning with the escape key. They are summarised in a table
to the left of the the editor. Alternatively, the table can be viewed in
the editor by entering the key sequence Esc ?
.
Pressing the escape key takes you into command mode, in which the status
bar is coloured yellow, and then typing a (possibly shifted) letter will
insert a control character or perform some other function. The status
bar can also be used to view teletext metadata. The key sequence Esc 9
toggles this.
Everything you need to run the editor is in two files. teletext-editor.js
is the JavaScript program which allows the editor on index.html
to be
displayed. There are no other dependencies, so you can email both files to
friends, and, provided they put them both in the same directory, they can
just open index.html
to edit frames offline on their computer.
No communication happens with any backend or 'cloud server'. You don't need to be connected to the internet to use the editor. The editor doesn't save any data to the local disk either. Instead, the state of the frame is 'saved' into the URL. Therefore, to save your work, you can bookmark the URL in your browser. To share it, you can email the URL to others or post it on social networks. The server logs don't store this data, even when somebody clicks on a link containing it, so your frames are private.
In the URL, the nybble before the colon describes the character set the page is encoded in (the least significant three bytes) and whether the page is intended to be rendered with black foreground colours enabled (the most significant bit enabled if it is). The part of the URL after the colon contains a base-64-encoded sequence of bits, amounting to 1167 base 64 digits. The encoding is standard 'base64url' with URL and Filename Safe Alphabet (RFC 4648 §5 'Table 2: The "URL and Filename safe" Base 64 Alphabet'). After decoding, the seven-bit character code for column c and row r appears at bit positions 280r+7c to 280r+7c+6 inclusive, the most significant bit appearing first. There are therefore two bits at the end of the encoding which are not used.
The key combination Esc E
will pop up a box allowing you to export the
frame. It will appear as a data URI. There are three formats at present.
Two are raw and differ in how they deal with character codes in the
range 0x00 to 0x1f. One raw format leaves them untouched, the other sets
the high bit so they appear as characters in the range 0x80 to 0x9f when
exported. The other format is 8-bit TTI, designed for use with wxTED, by
@peterkvt80 - Peter Kwan. This includes metadata which can be viewed
with Esc 9
but which unfortunately cannot yet be edited.
Alternatively, a script, url2raw.pl
, in the tools/
directory, is
provided to assist with conversion on the command line. Supply an editor
URL on standard input and it will output the raw frame, with lines
delimited with newlines, on standard output.
We are happy to implement export to other formats if an unambiguous specification document can be found for them. Contributions of scripts to convert these URLs to formats required by other teletext systems would also be very welcome.
Before September 2015, the editor frame was 24 lines and not 25, so
authors of conversion scripts and routines may wish to consider also
supporting encodings of length 1120, describing the first 24 lines. (In
this case, there are no left-over bits!). url2raw.pl
supports both
frame lengths.
The editor has been packaged so that you can use it external web pages, where it can be used as a teletext frame viewer and/or as an editor for those frames.
Some HTML source to do this, as well as to set some other options, follows.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Read in the editor source -->
<script type="text/javascript" src="http://edit.tf/teletext-editor.js"></script>
<!-- Set up an editor -->
<script type="text/javascript">
function init_frames() {
// Create a new editor:
var editor = new Editor();
// Make it the active editor so it receives keypresses:
active_editor = editor;
// Also make it the editor which reads from and writes to the URL:
url_editor = editor;
// Set the relative size of the editor. We might like it to be rendered
// at half size (full size is 480x540). This can be omitted.
editor.set_size(0.5);
// Initialise the editor, placing it in the canvas with HTML ID 'frame'.
editor.init_frame("frame");
// Set the editor to display the frame with reveal enabled. Possible
// values are 0 (off) and 1 (on).
editor.set_reveal(1);
// You can also give the editor an encoded URL hash string to
// display/edit. Here's the teletext engineering testcard!
editor.load("0:QIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECAueH8yZosePmAg06Dizo8mdFi0pM6OgJHBh7mVHER5QeHYMi54fzJmix4-YCDToOLOjyZ0WLSkzo6AkcGHuZUcRHlB4dgy_f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f2DQoaPcyJkqAKgRqAKdBVMvPogoYc-VAgODDxLmWMEwBcwBYNSho9zImSoAqBGoAp0FUy8-iChhz5UCA4MPEuZYwTAFzAFg1AgAKAAgAnkB5AXWEyZYsSJEipUiRKFCiBAUAAQAEABAAWDf9__f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f_3_9_YOAIACAAgAIACAAgAIACAAgAIACAAgAIACAAgAIACAAgAIBg5_f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f2LACAAgAIACAAgAIACAAgAIACAAgAIACAAgAIACAAgAIACAYsf3_9__f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f_39iyAgAIACAAgAIACAAgAIACAAgAIACAAgAIACAAgAIACAAgGLP9__f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f_3_9_YtAIACAAgAIACAAgAIACAAgAIACAAgAIACAAgAIACAAgAIBi1_f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f_3_9__f2Lavo09MoOzl2bN_cND84dwKPyy5dwWbhz5d3TCBpZcgSFs65S5pCiRk0iVMnLKFKpWSWLVy8ywYsmZVo1bNyLhy6dlHj18_QIEKJGgSJUydAoUqlaBYtXL0DBiyZoGjVs3QOHLp2gePXz9BAgwoaCJFjR0EiTKloJk2dPQUKNKmgqVa1dBYs2raC5dvX0GDDixoMmXNnQaNOrWg2bd29Bw48uaDp17d0Hjz69oPn39_KYMOLGRyZc2cro06tZLZt3bzXDjy5lunXt3J-PPr2X-ff38GYh792PLh2CI2zDz0A1QsXC3-BNPplw5PJiPv3ZRQp-WvfwUXdn07suXlp3Z0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
}
</script>
<title>edit.tf</title>
</head>
<!-- The editor canvas is set up by a call to the function above. -->
<body onload="init_frames();">
<!-- A canvas is defined with the appropriate name. -->
<canvas id="frame"></canvas>
</body>
</html>
When this page is loaded, an editor frame should appear, populated with the encoded page. When you edit it, the URL will reflect the changing contents of the frame.
The source code is commented throughout and licenced under the GNU General Public Licence v3.0, with additional requirements concerning minimisation of the source code. See the notice for more details.
Associated scripts and other tools are licenced under the same terms.
Bug reports, enhancement requests and pull requests are welcome. If you would like to contribute but cannot program, documentation and tutorials would also be very welcome. If you're interested in contributing in this way, please comment on issue #3 so that everybody can suggest ways for you to help.
Another very useful way to help is to read the issues for which opinions are currently sought and contribute to the discussion. The more opinions we have on how we can develop the editor, the more likely we're going to make it into a useful tool for everyone.
Esc X
). Cells to avoid are not included
in the grid shown.Esc
, the arrow keys can be
used to define the rectangle. During this process, the editor stays in
escape mode. Lowercase x cuts the rectangle and lowercase c copies it.
It can then be pasted with Esc v
.Esc =
. The
editor prompts you for a URL. The image at this URL will appear beneath
the editor window, with the editor itself at half opacity.
Pressing Esc =
again will make the image disappear again. This is
demonstrated in
this video by Steve Horsley.
If you press =
while defining a rectangle, the image will appear
at the size and position of that rectangle.The editor has been used for various events and systems:
The editor has starred in the following videos:
Teletext artists contribute splash screens which are displayed when the editor is first loaded. Since a new splash screen replaces the one before, we keep them here.
Frames to test the correct functionality of the editor appear below. Feel free to edit this README with your own test frames, especially if they expose nasty bugs or demonstrate common mistakes in implementing teletext software.