Skip to content

System monitor : themes

Matthieu Houdebine edited this page Sep 8, 2022 · 44 revisions

The System Monitor (main.py) uses themes to display your computer HW sensors & metrics.
Themes are located in res/themes, each in a sub-folder.
A theme folder contains a theme.yaml and optionally some pictures like a background picture, logos etc. It can be easily shared with the community: just share the theme sub-foler.
The theme used at startup is specified in config.yaml at repository root.

NOTE: when developing a new theme, you can use the "simulated LCD" mode instead of your screen to start/restart the System Monitor program quicker.

theme.yaml

The mandatory theme.yaml file defines what to show on the screen and where to show it. The file is structured in several entries.

⚠ Do not remove entries from this file! You can hide content with the SHOW: False setting instead

display entry

The display entry defines the display specific configuration for this theme:

  • orientation
  • backplate RGB LEDs colors for supported HW

This entry and its properties are mandatory.

display:
  # Specify the display orientation for this theme: portrait, landscape, reverse_portrait, reverse_landscape
  DISPLAY_ORIENTATION: portrait

  # Backplate RGB LED color (for HW revision 'flagship' devices only)
  DISPLAY_RGB_LED: [0, 0, 255]

static_images entry

The static_images entry defines some pictures to be displayed once at boot, like a background picture.
This entry is mandatory, but can be empty.
Entries in static_images must have unique names.

Classic images formats are supported: jpg, png, etc. Run python3 -m PIL to get all supported formats.
Images are fetch from the theme sub-folder.
They are drawn in the order they are listed, the top image will be drawn first.

static_images:
  MY_THEME_BACKGROUND:
    PATH: background.png
    X: 0
    Y: 0
    WIDTH: 320
    HEIGHT: 480
  MY_CUSTOM_LOGO:
    PATH: logo1.jpg
    X: 150
    Y: 100
    WIDTH: 50
    HEIGHT: 50

static_text entry

The static_text entry defines some text to be displayed once at boot, like labels.
This entry is mandatory, but can be empty.
Entries in static_text must have unique names.

Texts are drawn in the order they are listed, the top text will be drawn first.
You can specify a font .ttf filename (fetched from res/fonts/ folder) as well as a font size and font color. For text to have a transparent background, you must provide the path to the image you used as background picture in BACKGROUND_IMAGE instead.

static_images:
  DISK_USED_LABEL:
    TEXT: "Used:"
    X: 124
    Y: 405
    FONT: jetbrains-mono/JetBrainsMono-Bold.ttf
    FONT_SIZE: 23
    FONT_COLOR: 255, 255, 255
    BACKGROUND_COLOR: 132, 154, 165
    # BACKGROUND_IMAGE: background.png
  TRANSPARENT_TEXT:
    TEXT: "MyText"
    X: 200
    Y: 200
    FONT: geforce/GeForce-Bold.ttf
    FONT_SIZE: 23
    FONT_COLOR: 255, 255, 255
    # BACKGROUND_COLOR: 132, 154, 165
    BACKGROUND_IMAGE: background.png

STATS entry

The STATS entry defines all the computer HW sensors & metrics that can be displayed on screen:

  • CPU:
    • usage as text (%) and graph
    • frequency as text (GHz)
    • average loads in the latest 1/5/15 minutes as text (%)
    • temperature as text (°C)
  • GPU:
    • usage as text (%) and graph
    • GPU memory usage as text (%) and graph
    • temperature as text (°C)
  • MEMORY:
    • Swap usage as graph
    • (virtual) usage as text (% and Mb) and graph
  • DISK:
    • usage as text (Gb) and graph
    • total size as text (Gb)
    • free space as text (Gb)

Do not remove any entry in the STATS section! Hide metrics using the SHOW: False setting instead

Every metric has an INTERVAL parameter in seconds between two redraw of the value.
Longer intervals lower CPU usage, but cause data to be refreshed more slowly on screen.
Small values will display near real time data on screen, but may cause significant CPU usage or fill the asynchronous request queue if requests are added faster than they are processed by display.

2 types of metrics exist:

  • GRAPH metrics
  • TEXT metrics

GRAPH metrics

GRAPH metrics are displayed as horizontal progress bars.
Customization options:

  • BAR_COLOR RGB color for the filled part of the bar.
  • BACKGROUND_COLOR RGB color for the empty part of the bar. For progress bars to have a transparent background, you must provide the path to the image you used as background picture in BACKGROUND_IMAGE instead.
  • BAR_OUTLINE Whether to show outline or not. The outline will have the same color as the bar.
  • MIN_VALUE and MAX_VALUE must generally not be edited, they are set to [0,100] because they display usages values (%).
  DISK:
    USED:
      GRAPH:
        SHOW: True
        X: 155
        Y: 345
        WIDTH: 150
        HEIGHT: 15
        MIN_VALUE: 0
        MAX_VALUE: 100
        BAR_COLOR: 0, 0, 255
        BAR_OUTLINE: False
        BACKGROUND_COLOR: 0, 0, 0
        # BACKGROUND_IMAGE: background.png

TEXT metrics

TEXT metrics are displayed as horizontal texts.
Customization options:

  • FONT font .ttf filename (fetched from res/fonts/ folder).
  • BACKGROUND_COLOR RGB color for the empty part of the bar. For progress bars to have a transparent background, you must provide the path to the image you used as background picture in BACKGROUND_IMAGE instead.
⚠ Use a monospace font, otherwise text size may vary and cause old values to not be erased properly by new values
  CPU:
    PERCENTAGE:
      TEXT:
        SHOW: True
        X: 250
        Y: 13
        FONT: jetbrains-mono/JetBrainsMono-Bold.ttf
        FONT_SIZE: 23
        FONT_COLOR: 255, 255, 255
        BACKGROUND_COLOR: 132, 154, 165
        # BACKGROUND_IMAGE: background.png
Clone this wiki locally