Format Codes
topaccolades.com
   
Format Codes

The key to understanding how the Numipulator graphical interfaces produce their graphical output from their inputs is understanding Numipulator's format codes. Both the Animation Zone and the Graphics Formatter have an input called Cell formats, which, when evaluated, should produce a list of format codes. The simplest interface is the Animation Zone, which has only the Cell formats as its main input, so we begin here with a description of how the format codes are used in this.

Animation Zone

The Animation Zone comprises a square grid of cells, each of which can display a colour, with or without a cell border. The size of the grid ranges from 1x1 to 150x150 cells (i.e. from 1 cell to 22500 cells in total). The codes determine the colours to be displayed in the cells, and also whether they have borders.

Simple colour codes

The simplest codes are the the integers 1-20, each of which specifies a different colour, as follows:

1 White
2 Black
3 Red
4 Green
5 Blue
6 Magenta
7 Cyan
8 Yellow
9 Grey/Gray
10 Orange
11 Silver
12 Slate Blue
13 Forest Green
14 Brown
15 Gold
16 Dark Orchid
17 Pink
18 Violet
19 Plum
20 Beige

Note: Colours here do not all correspond to the same names used in HTML. Green here is called Lime in HTML, for example, and Grey and Silver are lighter shades than the HTML equivalents. Green here corresponds to 100% Green light with no Red or Blue (see RGB colours below), whereas HTML Green does not.

These codes, all greater than zero, specify not only the colour but also the fact that the cell should have a border. The codes and their associated colours are fairly arbitrary.

Short RGB Codes

On a computer, the colour to be displayed is determined by the intensity of three basic colours that are mixed together: Red, Green and Blue (RGB). If there is full intensity Red, and no Green or Blue, then the colour displayed is Red. If there is full intensity Red and full intensity Green, but no Blue, then the colour displayed is Yellow. If all three colours are at full intensity, then the display colour is White, while if there is no intensity of any of the three colours, then Black is displayed.

Numipulator has an unusual, possibly unique, set of format codes that can be used to specify 1000 different colours, rather than the 20 of the simple colour codes. The codes are the integers 1000-1999. The general form of the code is 1RGB, where the numerals at positions R, G and B specify the intensity of the three colours, from 0 (no intensity) to 9 (full intensity), in increments of approximately 1/9 of full intensity. So, these codes can be used to specify the following colours:

1000 Black
1009 Blue
1090 Green
1099 Cyan
1900 Red
1909 Magenta
1990 Yellow
1999 White

More importantly, since these colours are also available in the simple colour codes, other codes in the range 1000-1999 represent other colours that can't be specified using the simple 1-20 colour codes (see Short RGB code colour finder). This range of colours will probably be adequate for most purposes.

Again, these positive integers also specify that the cell should have a border.

Long RGB Codes

10-digit integers (i.e. >= 1 billion), beginning with 1, can also used to represent colours based on the RGB colour model. A valid code takes the form 1RRRGGGBBB. The last 9 digits represent three groups of 3 digits, each ranging from 000 to 255, which represent the intensity of each of the colours (in increments of 1/255 of full intensity). The first three represent the Red component, the next three the Green component and the last three the Blue component. So, the code 1255000000 represents Red, having maximum Red but zero Green and Blue, while 1255255000 represents Yellow (full Red and Green but no Blue), and 1192192192 represents Silver (all shades of grey have equal intensities of Red, Green and Blue). These codes allow millions of colours to be specified.

Again, these positive codes specify that the cell should have a border.

Negative codes and 0

If negative codes are specified, the colour is the same as the positive equivalent, but the cell is defined to be borderless. So, -3, -1900 and -1255000000 all result in red, borderless cells.

0 is also a valid code, and specifies that the cell should be black and borderless.

Borders and graphics speed

Positive codes, which produce borders, take more time to display than 0 or negative codes. This can be noticeable with larger Animation Zone grids, so bordered cells should be avoided with these (e.g. 60x60 or more) if speed is of the essence.

Graphics Formatter

Unlike the Animation Zone, the Graphics Formatter has two lists of numbers as its main inputs: the Cell formats and a list of values (list la) that are associated with the Cell formats (or vice versa). The underlying idea is that every value should have a corresponding cell format code, which determines how the value is presented in the cell. The two lists should therefore be of the same length. In practice, the two numbers together define what is presented in the cell, but in some cases the corresponding value is ignored completely.

All the format codes used with the Animation Zone can also be used with the Graphics Formatter. However, with one exception, format code 0, these codes can also result in the display of text in a small white field in the middle of the cell. This is derived from the value associated with the format code. So, if the value is 12 and the format code is 3, the cell (with a border) will have a red background (format code 3) and will, by default, display the number 12 in the small white field. The values can be, however, subject to output mapping, as defined in the Cell text field associated with the Graphics Formatter. So, if this determines that the number 12 should be mapped to the word Hello, then the word Hello will appear in the small white field on a red background. If the output mapping determines that the value 12 should be mapped to NOTEXT, then the small white field is not shown at all, and the cell simply displays red.

Format code 0 is always just black and borderless, with nothing else displayed, and is intended as background. This can be contrasted with the format code -2, also black and borderless, but this will also have a text field displayed, unless output mapping yields NOTEXT.

The Graphics Formatter can also make use of additional format codes that are not recognized by the Animation Zone (which would display them as white).

First group: NFGBG

The first group of format codes are integers of the form NFGBG, where N is an integer from 1-99 and specifies that a shape, large text, character/emoji or image should be displayed. The parts FG and BG are two-digit numbers that represent the foreground and background colours, respectively, to be displayed in the cell. Both of these represent simple colour codes (1 - 20, with a preceding 0 for codes 1-9, so 03 for 3), as defined above for the Animation Zone, or 00 to represent black. Note: A BG or FG of 21-99 results in the colour white for the foreground or background.

The first 17 values of N specify a particular shape, as follows:

1 small circle
2 medium circle
3 large circle
4 small square
5 medium square
6 up-arrow
7 right-arrow
8 down-arrow
9 left-arrow
10 horizontal oval
11 vertical oval
12 horizontal rectangle
13 vertical rectangle
14 heart symbol
15 club symbol
16 diamond symbol
17 spade symbol

The code 40308 therefore specifies that the cell should display a red (03) small square (4) on a yellow (08) background with a border (positive format code).

If N=18, a symbol is to be displayed in the middle of the cell, again with the colour and background colour as defined by FGBG: the last 4 digits. The symbol to be displayed is specified by the value associated with the cell, which should be a decimal entity code for HTML characters and symbols (specifying a Unicode/ASCII character). So, if the format code is 180305 and the associated value for the cell is 9733 (the HTML entity code for a star), a red star on a blue background is displayed. These symbols and codes may be found on the web. The symbols may also be seen, and their codes found, in Symbol Finder. Important Note: You can also choose to display the symbols at a larger size, but these will not always fit the cell so some of it may be lost. For many characters and symbols, however, these larger sizes will look better in a cell. This is done by employing a negative value for the associated code instead of the positive value (think of a minus value as a warning that it may be displayed minus some part of it!). So, an associated value of -9733 will again display a star, but it will be larger than for 9733. Avoid using negative values for emojis, as they will almost certainly be partially obscured. Both sizes can be seen in the Symbol Finder app. Note also that emojis may be multicoloured and will not change their foreground colour.

If N=19, the value (mapped as appropriate) is displayed centrally in the cell. The text colour is as specified in FG and the background colour is as defined in BG. As the text is larger than in the normal text fields, these are really intended for values with one, or maybe two, characters only. So, if the value of the cell is 4, then the code 190814 results in a bordered cell, with a yellow 4 on a brown background.

If N=20, you may specify an external image (gif, jpg or png) to be displayed in the cell. The image to be displayed is indirectly specified by the value associated with the cell. The foreground colour (FG) is ignored, while the background colour is as defined in BG. The value associated with the cell should be a positive integer referring to the position of the URL in the URLs field; if the value is 1 then the image URL on line 1 of the URLs field is displayed; if the value is 2, the URL on the 2nd line is displayed, and so on.

The values of N from 21-99 specify further characters and symbols that may be useful in games and puzzles, including for showing responses, as shown below. Note: 21-28 are eight small arrows from N-NW, moving clockwise; 30-40 are the numbers 0-10; 41-66 are the capital letters A-Z; and 99 is blank. All except 99 should take on the foreground colour correctly, but browsers may render these differently. The sizes of these should be identical to those output using N=19.

21 ↑
22 ↗
23 →
24 ↘
25 ↓
26 ↙
27 ←
28 ↖
29 .
30 0
31 1
32 2
33 3
34 4
35 5
36 6
37 7
38 8
39 9
40 10
41 A
42 B
43 C
44 D
45 E
46 F
47 G
48 H
49 I
50 J
51 K
52 L
53 M
54 N
55 O
56 P
57 Q
58 R
59 S
60 T
61 U
62 V
63 W
64 X
65 Y
66 Z
67 !
68 ?
69 -
70 +
71 |
72 —
73 ✙
74 ✹
75 ✓
76 ✗
77 ✶
78 ✻
79 ○
80 ●
81 ◎
82 ◉
83 ⬡
84 ⬢
85 ☆
86 ★
87 ◯
88 ✿
89 ⍾
90 i
91 o
92 x
93 y
94 n
95 ok
96 no
97 go
98 hi
99

For all these N... codes apart from N=18, 19 and 20 the value associated with the cell is ignored.

Second group: NFGCBGC

The second group of format codes for the Graphics Formatter take the form NFGCBGC. These are similar to the first group of codes just described (for N=1-99), except that the foreground and background colours are specified by two short RGB codes, as described for the Animation Zone (without the initial 1), so that there are 1000 foreground and background colours, rather than just 20. The format code 4900990 again specifies a red (900) small square (4) on a yellow (990) background with a border (positive format code).

Third Group: STFB

These codes are in the range 2000-4999 and are concerned with producing text in a field of some shape on a background. They have the general form STFB, where S defines the shape of the field, T defines the colour of text in the field, F defines the colour of the field or shape and B defines the colour of the background. T, F and B can be 0-9, where the colours defined are the simple colour codes 1-9 (or 0 for black).

A code in the range 2000-2999 (S=2) results in a large circle with large text (the same size as for N=19 with NFGBG). So, code 2345 yields large red (3) text in a green (4) circle on a blue (5) background. Codes 3000-3999 (S=3) are similar, but result in a large square shape rather than a circle. A code in the range 4000-4999 (S=4) results in formatting very similar to the simple codes 1-20, but with text fields that can be coloured and text that can be coloured, not just black text on a white background as with the simple colour codes. The text size for S=4 is smaller than that for S=2 or 3, and is the same as that for simple codes 1-20. So, code 4369 yields red (3) text on a magenta (6) text field on a grey (9) background. These text fields have no border. Output mapping can be applied to the associated values displayed.

Fourth Group:3x3 colour blocks

9-digit codes, i.e. 100000000 - 999999999 all result in 3x3 coloured blocks, where the colours of the small blocks are determined by the digits of the number (starting at the top left and moving row by row). Again, these digit codes specify colour using the simple colour codes 0-9 (but note that the first digit cannot be 0). So, the code 444434444 produces, overall, a green block with a small red block in the middle.

Negative codes

Negative format codes produce the same displays as positive format codes, except that they are borderless. So, format code -40308 displays a small, red square on a yellow background without a border. Note that the displays of URL images and the 3x3 colour blocks are designed to occupy the full cell with no border. With borders, they are slightly reduced in size.

Summary of format codes from 0 upwards, in order

Positive codes have borders, while negative equivalents are borderless.
(GF means that this code only applies to the Graphics Formatter)
(AV indicates that the associated value impacts the display in the Graphics Formatter)
(OM indicates that the display can be affected by output mapping in the Graphics Formatter)

0 Black borderless

1-20 Simple colours AV OM

1000-1999 Short RGB codes (each numeral following the 1 represents intensity of R, G and B in one-ninths of full intensity) AV OM

2000-4999 STFB - Coloured text fields/shapes S=shape number, T=text colour, F=field/shape colour, B=background colour (each 1-9 as in simple colours, or 0 for black) GF AV OM

10000-992020 NFGBG - shapes with 00-20 (based on simple colours and 00 for black) foreground (FG) and background (BG) colours GF inc.

  • N=18 - associated value defines Unicode symbol (use negative code for larger symbol, possibly partially obscured) AV
  • N=19 - large text (1 or 2 characters) AV OM
  • N=20 - URL graphic display AV

1000000-99999999 NFGCBGC- shapes with short RGB codes for foreground (FGC) and background (BGC) colours, as above AV OM

100000000-999999999 - 3x3 colour blocks, each numeral specifying a colour using codes 1-9 from simple colours, or 0 for black) GF

1000000000-1255255255 Long RGB codes (each group of 3 numerals following the 1 must be 000-255 representing intensity of R, G and B) AV OM

Copyright TopAccolades Limited, 2024