System monitor : themes

Create/edit a theme

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.

Create a new theme

When developing a new theme, do not start from existing themes as they do not contain all the sensors that can be displayed.
Instead, create a new sub-folder for your theme and copy theme_example.yaml into it as theme.yaml.
Then copy your PNG resources in your new sub-folder.
To edit your theme, use the Theme Editor (see below).

Import a theme from Turing / Xuanfang Windows app

If you have a theme you like from the original vendor app, you cannot import it directly to this program because the formats do not match. You can still extract the resources (PNGs) from the original theme using tools/turing-theme-extractor.py

python3 turing-theme-extractor.py "Dragon Ball.data"

The PNGs from the theme will be extracted to files.
The first PNG is generally the background image/color and the 2nd PNG is the layers above. You can use an online tool to "merge PNG" to get a single file that you will use as background.png for your theme. You can then re-create the theme for the SYstem Monitor program by replacing content at the right place on top of the extracted background: se below.

Note: the default Turing/XuanFang themes resources have already been extracted to res/themes/--Theme examples/.
Check also for existing themes in res/themes/: see sub-folders. Some Turing default theme have already been fully re-created.

Open Theme Editor

The theme-editor.py program allow to quickly develop/update a theme without the need to restart Turing Smart Screen to reload changes.

Usage :
        python3 theme-editor.py theme-name (= name of the folder in res/themes/)
Examples : 
        python3 theme-editor.py 3.5inchTheme2
        python3 theme-editor.py Landscape6Grid
        python3 theme-editor.py Cyberpunk

When started, the program will open the selected theme YAML file in your default editor for .yaml files (e.g. Notepad++, VS Code...)
It will also open an always-on-top window displaying a preview of the selected theme with stubbed data (not your real computer HW sensors).

Whenever you edit and save the theme.yaml file from your editor, the preview window will reload the theme with your new changes.
If the theme file does not open automatically, you can open it manually in the editor of your choice.

You can now edit your theme file following the next section:

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.

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.
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.
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 the computer HW sensors & metrics that are displayed on screen by the theme:

• 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)
• NETWORK:
  • for the two network interfaces (WLO and ETH):
    • upload/download speed (automatic unit : B/s, M/s...)
    • upload/download speed (automatic unit: B, M, G...)
• DATE/TIME

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