Many of you have asked us how to change the background of a theme or maybe even fix a missing value that is not displayed.
We will use this post to give you guys some insights, what a theme is and how we handle our data.
 

What is a theme?

For starters a theme is basically just an HTML page which connects to your MoBro application via a websocket to retrieve the data in realtime. We decided on this for various reasons:

  • Themes can be easily developed by a wide range of people (web developers are pretty much everywhere these days)
  • Themes can be installed rather easy later on, zip it, download it, unpack it and you are good to go
  • Compatibility for various devices, a browser is available everywhere from a pi to your phone or another pc, everything is possible
  • Future extensibility
  • We are web developers ourselfs ;)

 

How are themes served?

Basically all themes that MoBro ships with per default are located in your filesystem at "C:\Users\<username>\AppData\Local\MoBro\app-<version-number>\resources\resources\public\theme". Each theme is just a folder with the necessary files for example a index.html which is the starting source of the theme. All of these files are served via a web server running inside the MoBro application. Currently in version 1.0.0-beta2 we ship with three themes: "default", "dubbadhar" and "fallout".

Also since version 1.0.0-beta2 we provide another folder residing in "C:\Users\<username>\AppData\Local\MoBro_Local\public\theme". This folder is pretty much the new bread and butter to customize your themes or maybe even create your own. The web server inside of MoBro actually serves files in this order, when a browser tries to access /index.html with "default" as the active theme:

  1. Check if file "C:\Users\<username>\AppData\Local\MoBro_Local\public\theme\default\index.html" exists
  2. If not, check if file "C:\Users\<username>\AppData\Local\MoBro_Local\public\index.html" exists
  3. If not, check if file "C:\Users\<username>\AppData\Local\MoBro\app-<version-number>\resources\resources\public\theme\default\index.html" exists
  4. If not, check if file "C:\Users\<username>\AppData\Local\MoBro\app-<version-number>\resources\resources\public\index.html" exists

 

Change the background!

This behaviour can be used to override the background of the default theme rather easy for example. The background for the default theme is located under "C:\Users\<username>\AppData\Local\MoBro\app-<version-number>\resources\resources\public\theme\default\img\forest.png". Which means if you provide a forest.png under "C:\Users\<username>\AppData\Local\MoBro_Local\public\theme\default\img\forest.png" you have already successfuly swapped out the background.

Please not that you should always change files in "C:\Users\<username>\AppData\Local\MoBro_Local" rather than the actual app resources, otherwise all your changes are lost after an update. Also keep in mind, we do not take responsibility if you copy themes and files in there from other users that might try to do harmful things. We still try to keep everything as safe and restrictive to themes as possible.

 

Adapt sensor values!

Another thing some of you have problems with are the sensor values that are displayed in a theme. You can think of one value in the theme or a widget in the MoBro application as a so called "channel". A channel is pretty much a tunnel that is feeded with the complete data extracted from our service (from HWinfo, Libre Hardware Monitor or Open Hardware Monitor) and picks the actual necessary value from it to send it through the tunnel. On the other end of the tunnel is either the theme listening to these values or a sensor in a widget in the MoBro application.

Since every PC is quite different we try to best guess the values based on string matching. You can check out the channel configurations at "C:\Users\<username>\AppData\Local\MoBro_Local\channels.json". For example the channel "general_processor_usage" tries to find a value matching the regex ".*(CPU|Tot).*(CPU|Tot).*", so basically anything like "CPU Total" or "Total CPU Usage" and so on. You can always check out the complete sensor values we can extract under http://localhost:42001/api/sensors/data on the PC running MoBro. 

Per default we always have the following channels which themes can access by their name:

  • general_processor_usage (Usage in %)
  • general_processor_temperature (Temp in °C)
  • general_graphics_usage (Usage in %)
  • general_graphics_temperature (Temp in °C)
  • general_memory_usage (Usage in %)
  • general_memory_used (Used in GB / MB)
  • general_memory_available (Available in GB / MB)

If we happend to fetch a wrong value for any theme, you can adapt the channel config any way you want. Please note though that changes to these .json configs can lead to breaking your MoBro app.

 

Custom theme channels!

With adding the new dubbadhar theme in version 1.0.0-beta1 we also had to give themes the possibility to create their own channels that they need to display more data than the general channels from above. The dubbadhar theme is also featuring VRAM and FAN data if available. This was realized via configs a theme can provide to add new channels at runtime to listen to them later on.

You can check out the config for the dubbadhar theme at "C:\Users\<username>\AppData\Local\MoBro\app-<version-number>\resources\resources\public\theme\dubbadhar\theme-config.json". We won't go into complete detail on how these configs work, before we finalize the theme SDK and provide a concise documentation. But basically a channel can define again to find a value by its label. For example the cpu fan speed is a sensor that the motherboard provides which if of the sensor type "Fan". Se we search for such values which include something like "cpu" and "chassis" in the label provided by the external data source like HWinfo, since they usually are the cpu fan speed. 

As you can see its a rather a trial and error process at the moment, since a lot of manufactures and external sources use different labels. In a later release, presumably 1.0.0-beta3) we will add a mapping option for you guys in the settings menu of MoBro to remap actual values to these channels if our best guess approach delivers the wrong values.

Stay tuned for the update and checkout our forum to always stay up to date.