Usage of colours

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

• Definition of the default foreground- and background colours in the display page header
  (this setting applies to all display elements which don't have "individual colours' defined, i.e. colour value -1 which means "use default colours" ).
• Definition of the foreground- and background colour as property of a certain display element (Text, Button, Bargraph, etc)
• Import of colour bitmaps (16 or 256 colours, which means 4 or 8 bits per pixel)
• Switching the colour of individual characters during output, using backslash sequences

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.

Contents

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

• Index
• Using colours in tables
• Modifying a display element's colours (etc) at runtime, e.g. depending on a signal

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 :

Special codes in colour input fields of the programming tool

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

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) .

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).
Examples:

#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:

Syntax:

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.

Example:

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:

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

... and it would look like this during the 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.

Note:

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):

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

Hints:

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:

• The CAN bus in your vehicle may provide a signal, which informs multiple displays about the current 'day' / 'night' (e.g. car radio, navigation systen, dashboard backlights, etc). In that case, you could also control the MKT-view by that signal (let's call it "ExternalDayNightFlag") received from the CAN bus:
  

  Event	Reaction
  always	night=ExternalDayNightFlag : REM day/night signal received from CAN

  The signal "ExternalDayNightFlag" must have been imported from a CAN database (DBC), and connected to a display variable. If necessary, the external signal can be inverted (if the CAN signal is set during daylight, and cleared at night).

• You can use the internal 'ambient light' sensor (in devices like MKT-View II, III, IV), which is otherwise used to control the LCD backlight. You can read the current sensor value via interpreter as sys.alight. This function returns a value between 0 (zero, complete darkness) and 255 (bright sunlight) liefert. To avoid permanently "toggling" between day and nicht, the following example uses a bit of hysteresis. Try to find out yourself how it works (it's just a bit of maths) :
  

  Event	Reaction
  always	night = (sys.alight-6*night)<50 : REM day/night with hysteresis

• You use the device's internal real-time clock (present in most devices), to switch from day to night (and back) at certain times-of-day. But this method would only work close to the Equator, and in countries without tunnels ... thus no sample code here ;-)

• You leave it to the operator to toggle between Day- and Night-design, for example:
  Method A: Use the same function key to switch from day to night, and back:
  

  Event	Reaction
  kb0	night = ! night : REM toggle day/night on function key

  Method B: Use F1 to switch to 'night', and F2 to switch to 'day' design:
  

  Event	Reaction
  kb0	night = 1 : REM select NIGHT-design
  kb1	night = 0 : REM select DAY-design

  Method C (for devices with a touchscreen) : Program a graphic button, which toggles the "night"-flag whenever you press it (same reaction as in method 'A').

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.

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.

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:
   
   
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
   
      or
   
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.