Usage of colours

For devices with colour display, the following possibilities are supported by the Terminal Programming Tool:

For details on which terminals are avaliable with colour display, and which colour model is supported by a certain device, look at the 'Feature Matrix'.

This document describes some (but not all) possibilities of colour usage in the programmable terminals by MKT Systemtechnik.


  1. UPT Standard Colour Values
  2. Special codes in colour input fields of the programming tool
  3. Colour Picker Dialog (for devices with at least 256 colours)
  4. RGB colour mixtures in the UPT interpreter language
  5. Day / Night switching using colour schemes
  6. Graphic elements with colour gradient fills
  7. Harmonized colours for all pages in an application

< to be completed... >

See also

UPT Standard Colour Values

Since November 2007, in devices with certain colour displays, colour values can be specified in the parameter list of some graphic commands. If possible, only the following standard colour values should be used :

Old Colour value Token (for display interpreter commands) Script language Colour
0 black clBlack black
1 blue clBlue blue
2 green clGreen green
3 cyan clCyan cyan
4 red clRed red
5 magenta clMagenta violet
6 yellow clYellow yellow
7 white clWhite white
8 RGB(64,64,64) darkgray
9 RGB(127,127,255) lightblue
10 RGB(127,255,127) lightgreen
11 RGB(192,192,255) lightcyan
12 ?
13 ?
14 ?
15 RGB(192,192,192) lightgray

Special codes in colour input fields of the programming tool

Negative colour values have a special meaning in the programming tool:

Colour value Meaning
-1 use the default value defined for the current page, which may depend on the day/night-flag.
-2 transparency

Terminals with TFT colour display support at least 256 different colours (see feature matrix). In those cases, colour can be expressed as RGB mixtures as explained here.

Additionally, in the programming tool and certain terminals with TFT display, colours can be defined as an RGB mixture - see next chapter.

Colour picker dialog (for devices with 256 colours)

To open the following colour selection dialog, double-click into one of the colour edit fields in the programming tool (for example, the input fields for the foreground- and background colour on the display page definition tab) .

Colour selector

After selecting a colour with this dialog, the R-G-B-mixture will be converted into a text string, and displayed in the edit field as follows:

#<Red component><Green component><Blue component>

Each colour component is encoded as a single digit between zero and seven (the result is actually an 8-bit octal number).

#000 = Black
#777 = White
#700 = Red (max. saturation)
#070 = Green (max. saturation)
#007 = Blue (max. saturation)

RGB Colour mixtures in interpreter commands

To change the foreground- or background colour of characters on a colour TFT screen during runtime (for example, MKT-View II), the following interpreter function can be used:

rgb( <red_component>,   <green_component>,   <blue_component> )

All three colour components are scaled from 0 (zero, minimum) to 255 (maximum), regardless of the colour model internally used in the LCD controller.

To modify the foreground- or background colour of a certain display element during runtime (not at design time), use the interpreter's "disp" command, which allows accessing any element on the current display page.

disp.Title.bc=rgb(127,255,255) : REM set background colour of element "Title" to light cyan

But remember, since this function is not available on all targets (especially not on "older" devices), use the standard colours wherever possible.

Day / Night - switching using colour schemes

With different default colours, you can realize a simple 'Day/Night' switching option in your application.

To do that, define suitable fore- and background colours in the Display Page Header, for example:

day/night colours of a display page

A display page with this colour scheme would look like this during the day...

... and it would look like this during the night:

the same page "at night"

To switch between day and nicht, switch the day/nicht flag ("night") at runtime via interpreter command or script - more on that later. To flip between 'day' and 'night' when designing a display page in the programming tool (simulator), select (in the tool's main menu)

Options ... Toggle Day/Night

or (alternatively) on the 'Display Page Header' / 'Page Properties' panel shown above, click on the table header 'Day' (Tag) / 'Nacht' (Night). This will internally set the night-flag to 1 (TRUE, night) or 0 (FALSE, not night but day), actually the same flag that can be controlled via interpreter or script, too. The current state of the 'night' flag can also be checked in the watch-window.

As long as the application 'runs' in the simulator, it may happen that the day/night flag is immediately switched back by the application (display interpreter or script). To prevent that, simply stop the simulator (status line should show 'Stopped' near 'Simulator'). Then you can successfully control the day/night flag via mouseclick, as explained above.

When creating display pages suitable for day/night switching, you should not use fixed back- and foreground colours for most display lines, but keep those individual colours at '-1' (which means "use the colour from the 'display page header', i.e. the default colours for this page).
In the screenshot shown above, the text "MKT-View II" always has the same colour (regardless of the 'night'-flag), because this display line has a fixed colour (here: green):

display line with "fixed" text colour

Most other display elements on this page either use the 'default' background colour (-1), or a transparent background (pseudo colour number "-2"):

display line using "default" colours

Use as few 'individually coloured' display elements as possible.
Use 'strong' colours only to indicate special situations (e.g. bright red to indicate errors, independent of the 'day/night' flag).
The examples shown here are deliberately 'too colourful' to demonstrate the principle !

When using transparent backgrounds, you may have to set the option 'always redraw this page completely'. Otherwise, if the transparent text changes, the old text may remain in the background (between the new characters).

There are many ways to switch between 'day' and 'night' colours automatically. You can access the 'night'-flag via display interpreter (old method, without scripts), or (preferred) control it vis script ( display.night ). In any case, setting the 'night' flag means (you guessed it) "use the 'NIGHT' colours", and clearing it means "use the 'DAY' colours".
Here are a few examples how the 'night' flag could be controlled in your application:

Graphic Elements with Colour Gradient Fills

For certain elements like Buttons, two different background colours can be defined. The background of the button will be filled with a colour gradient from the first to the second background colour.

configuration of a button with colour gradient fill         coloured button with gradient fill

To produce a gradient fill anywhere else (without a graphic button), use the graphic command "gf" (gradient fill) .

Harmonized colours for all pages in an application

Users of colour displays sometimes face the problem that many pages in their applications will (sooner or later) use a dreadful mix of different colours, especially when display pages have been 'recycled' from other projects, or the old 'gallery pages'.

In those cases the colours used on the display pages can quickly be modified, by replacing the colours defined in individual page's "page headers" with the so-called 'harmonized' colours. Use the following procedure to achieve this:

  1. Whereever possible, remove (or don't use) colour definitions from individual display elements, by setting all individual colours (in all display lines of a page) to -1 (minus one means "use the default colour specified in the header of this display page").
  2. In the programming tool's main menu, select Edit .. Select Harmonized Colours to open a dialog like this:
    Screenshot 'Harmonized Colour Dialog'
  3. Adjust the default colours in the dialog shown above. From now on, they will be used for each new page you create, and for those which you will 'harmonize' in the next step.
  4. In the programming tool's main menu, select Edit .. Harmonize colours on this (i.e. the current) page

  5. In the programming tool's main menu, select Edit .. Harmonize colours on all pages

Back to top

Last modified: 2016-10-14, W.B.