Manual of RES Editor in JavaScript

Introductory example

Groups are generally constructed from the bottom up, and from left to right (or right to left, depending on the text direction). For example, to construct cartouche(N5-N28:f), one first constructs the sign N5, which is then placed in a cartouche. Thereafter N28 is added in a new group after N5. Added to N28 are then the operator ':' and the sign f. In terms of mouse clicks and keyboard input, this is obtained by:

Click on named and type N5 into the name field;
Click on box;
Click on the lower square containing the sun;
Click on '-' and type N28 into the name field;
Click on ':' and type f into the name field.

Now the desired cartouche is visible in the preview panel, and with internal structure in the tree panel, and the RES fragment cartouche(N5-N28:f) will appear in the text panel at the bottom of the page.

If one has an existing RES fragment, this can also be entered in the text panel. To try this out, press Clear, enter cartouche(N5-N28:f), and press Parse, and observe that the preview and tree panels are populated with the corresponding graphical representations.

For more on RES, see the relevant documentation.

Structure of the page

The page is divided into:

the header,
the global properties panel,
the preview panel,
the tree panel,
the control panel, and
the text panel.

Header

There are two drop-down lists for changing the fontsizes in the preview and tree panels. There are also buttons to undo or redo edit operations, and to open this help page.

Global properties panel

The panel for changing the global properties of a RES fragment is located in the top-left or top-right corner of the page, immediately next to the preview panel. One may select the desired text direction by pressing one of the five relevant buttons. The direction can be unspecified (none) or horizontal left-to-right (hlr), etc. Next to this is the unit size, which is normally 1; only in rare cases would one want to deviate from that default value.

Preview panel

The preview panel presents a RES fragment in graphical form, as it would appear to the reader of a printed document or web page.

Tree panel

The tree panel presents the fragment in an hierarchical form. Nodes connected by edges represent expressions and their subexpressions.

In each RES fragment there is at most one group that is the current focus. The focus is the target of edit operations. In the tree panel, the focus is indicated by a thick blue boundary around a node, as opposed to a thin gray boundary. In the preview panel, the top-most group containing the current focus is indicated by a blue square. The current focus can also be an operator between two groups, or a switch. If no group, operator or switch holds the focus, there is a blue line at the beginning of the preview panel.

In the tree panel, the focus can be changed by clicking on a node. In the preview panel, the root node of a top-level group can be made the focus by clicking on that group; one may also click on the white space between two groups to transfer focus onto an operator. Other ways to navigate rely on keyboard shortcuts, as will be explained later.

Control panel

The control panel contains buttons for changing the structure of the fragment and for changing parameters of groups, operators and switches. Only those buttons and parameters are shown that are relevant to the current focus.

Text panel

The text panel contains the RES fragment. This fragment is updated every time an edit is made, for example through the buttons and fields in the control panel. Alternatively, one can edit the text panel and press Parse, which updates the preview and tree panels. By pressing Clear, one obtains an empty fragment.

Editing

Changing the structure

Depending on the current focus, the following buttons may be available to change the structure of a fragment:

named creates a new group consisting of a named glyph. If the current focus is an empty glyph, it is replaced by the named glyph. If the current focus is a box, the named glyph is inserted at the beginning of the content of the box.
empty creates a new group consisting of an empty glyph, and behaves similarly to named.
'.' creates a point glyph, i.e., a special kind of empty glyph, of which the width and height are zero.
'-' creates a new group following the current group, operator or switch, initially containing a named glyph. The newly created group will be either at the top level, or just below a box.
'*' generally appends a new subgroup of a horizontal group, initially consisting of a named glyph. If the current focus is an operator ':' or '-' however, then the two groups on either side are combined into a horizontal group.
':' behaves similarly, but for vertical groups.
'+' and ';' can be used to insert a new subgroup before the current focus, in a horizontal group and vertical group, respectively.
stack and insert generally create a new element in the structure, of which the current focus becomes the first argument; the second argument initially consists of a named glyph. If the current focus is an operator however, then the two groups on either side become the two arguments of a stack or insert, respectively.
box creates a new box, initially containing the current focus.
modify creates modification of the current focus.
'!' creates a switch. Observe that switches that have no parameters (other than the defaults) may disappear again after a structural change. In a box, there is a distinction between a switch at the beginning of the contents, and a switch after the box itself; similarly for insert, modify and stack. For this reason, we additionally have '!front' and '!back'.
'^' creates a note attached to the current focus, or a note following an existing note.
swap swaps the name of the current named glyph and that of the next one.
delete generally removes the node with the current focus. This may lead to further changes to preserve the integrity of the syntax of RES. For example, if B1 is removed from A1*B1, then the operator '*' also needs to be removed, and only A1 remains. If '*' is removed from A1*B1, then two isolated named glyphs remain, or in other words, we obtain the fragment A1-B1. If the current focus is a switch, delete sets the parameters to the default ones.

Changing the parameters

Relevant parameters are shown for the group that is the current focus. Many parameters first need to be selected before they can be changed to something other than the default.

Shading for subregions of a group or operator can be set to be coarse-grained, in a 2x2 grid, or more fine-grained, up to a 16x16 grid. Click a subregion to toggle it from unshaded to shaded or vice versa.

Keyboard shortcuts

Use of the mouse can to a great extent be avoided by keyboard shortcuts. The four arrow keys can be used to move the focus in the tree panel. The Home and End keys transfer the focus to the first and last top-level group, respectively.

Buttons that change the structure of groups can be activated by entering characters such as '*', ':', '-', '^', '!', the Delete key for delete, 'n' for named, 'e' for empty, 'b' for box, 't' for !front, etc. (See the letters on the buttons that are underlined.)

The above keyboard shortcuts will work if the browser's focus is on the preview or tree panels, which is indicated by a blue dotted border around the preview or tree panels. In addition, the keyboard shortcuts for '*', '+', ':', ';', '-', '!', '^' can be used directly after typing the name of a named glyph.

If the browser's focus is in a text field, it can be transferred to the tree panel by pressing the space bar. Conversely, if the browser's focus is in the preview or tree panel, and the editor's focus is on a named glyph, then the browser's focus can be transferred to the name field by pressing the space bar once more. This also works for a note. If the browser's focus is on a check box or radio button however, a mouse click on the tree panel is needed to transfer the browser's focus to the tree panel.

Sign chooser

The following is relevant when the editor's focus is on a named glyph.

The menu of signs is activated by clicking menu, or by entering 'u' when the browser's focus is on the preview or tree panels, or by entering 'u' into an otherwise empty name field.

By clicking the tabs at the top of the window, one may view categories of signs according to Gardiner's sign list. Three extra tabs show collections of signs according to shape. Alternatively, one may navigate through the tabs using the four arrow keys. A sign is selected by clicking on it.

One may also type the name of a sign, by keyboard presses of letters and digits (there is no need for the Shift key). The name will appear in the upper left corner. After entering the first letter (or the first two letters for 'NL', 'NU', 'Aa'), signs in the relevant category will appear. One may then type the remaining digits, and possibly more letters, and press Enter to select the sign. Typed characters can be erased by pressing Backspace; this is not needed for switching between categories however: by pressing 'a', then then 'b', one switches from category 'A' directly to category 'B'. By pressing Esc, or by clicking on the upper right corner of the menu, one exits the sign chooser without having selected a sign.

Information on signs can be obtained by clicking info on and moving the mouse over a sign. Alternatively, this functionality can be switched on/off by pressing the space bar. The information is presented in the right or left half of the screen if the mouse moves over a sign in the left or right half, respectively.