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.
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 10x10 cells to 100x100 cells (i.e. from 100 cells to 10000 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:
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:
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.
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
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: Some symbols are larger than the cell size so will be clipped. You can also choose to display the symbols at a smaller size, which should fit the cell, by employing a negative value for the associated code instead of the positive value. So, an associated value of -9733 will again display a star, but it will be smaller than for 9733. This is particularly useful for displaying emojis, which may be cut off unless the smaller size is used. 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.
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: TFB
The third group provides 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. These codes are in the range 100-999, where the three digits represent T (text colour), F (field colour) and B (background colour). T can be only 1-9, but F and B can be 0-9, where the colours are the simple colour codes (plus 0 for black). So, 126 produces white (1) text in a black (2) field on a magenta (6) background, while 530 yields blue text in a red field on a black (0) background. The fields are borderless (unlike with the simple 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.
Copyright TopAccolades Limited, 2023