Caution

This is the documentation for the current development branch of the CometVisu. It is possible that some of the described features are not yet available in the current release.

Also there might be lots of errors in this documentation as some parts of the content have been translated by an online translation service.

Styling

Hint

The functionality of the stylings in the Tile structure does not differ from the stylings in the Pure structure. Only the name of the element in the configuration file is different: <cv-styling>.

With the styling tag, colors can be assigned to elements at respective values.

For example, OFF can be displayed in red and ON in green (or vice versa).

Here is a list of possible colors that are included by default in the CometVisu:

grey
cyan
green
lime
red
blue
fuchsia
black
maroon
olive
purple
silver
white
yellow

Caution

The colors can vary depending on the design.

With this styling, 0 (often OFF) is displayed in green and 1 (often ON) in red.

<cv-styling name="GreenRed">
   <entry value="0">green</entry>
   <entry value="1">red</entry>
</cv-styling>

To show an element with the opposite colors, the following style tag must be created. Now the element is red when the value is 0.

<cv-styling name="Red_Green">
   <entry value="0">red</entry>
   <entry value="1">green</entry>
</cv-styling>

The styling tag can also be used for sliders. Here the value for the range in which the color is displayed is defined. In the following example as follows:

  • from -100 to 0: blue

  • the value 0: purple

  • values > 0: red

<cv-styling name="BluePurpleRed">
   <entry range-min="-100" range-max="0">blue</entry>
   <entry value="0">purple</entry>
   <entry range-min="0" range-max="100">red</entry>
</cv-styling>

Important

How the colors are actually displayed in the design depends on the definition in the CSS for the respective design.

The colors can also be specified in the HTML code. For example: #F33333