We have been working hard on this feature for quite a while now. Our patreons have helped us test and optimize it even further for the past 2 weeks. We want to use this opportunity to thank our patreons again for their feedback, which has helped us greatly! Now let's get into more details what this customization is all about and what has changed:

Themes

The old themes that you know will pretty much work the same way as before. So every theme that has been created so far by you guys will still work through our legacy bridge. But we have extended our API and introduced a new theme SDK that developers can use to create awesome themes that you can customize on your own. Every part that is customizable can be managed by so called widgets.

Widgets

Every theme defines its own set of widget and developers can create new widgets however they like. Our SDK already provides a simple set of common widgets like text, image, hardware value, tables and so on. Depending on what the theme developer specifies in the theme, widgets can then be styled, moved around and adjusted to your liking.

Customization

So how can you customize your theme now? We are shipping beta6 with two new versions of the default and the well liked dubbadhar theme. In beta6 you will have a default and a default old theme, same goes for the dubbadhar theme. Old represents the old version of the theme which was static and not customizable. When you select a theme which uses our new theme SDK you will see a configure button next to the theme select in your devices tab of MoBro. From there you can hop into the customization screen.

The customization screen is quite straight forward. You have a list of your widgets in the sidebar on the right and a preview on the left. In the sidebar you can add widgets that the theme defines. Based on the theme you can arrange the widgets how you like. The default theme for example uses a responsive grid layout, while the dubbadhar theme supports absolute positioning by X and Y axis. 

You can customize a widget by clicking the edit button of the widget in the sidebar or by double clicking the widget directly on the left. Depending on the theme you can customize various colors, alignment and so on.

Layouts

Once you have configured everything to your liking you can store the configuration as a layout on the top right. You can create new layouts by name, create a copy from the current one or delete them. This enables you to switch quickly between various setups that you like.

Screen Size

Depending on the screen size of your device, you can set the screen size on the top left. This way you will always see what the setup would look like on your device 1:1. Don't worry, every change you make in the customization window is directly transferred to your device as well, so you will see every single change directly on your device as well.

Already interested? Don't hesitate and download MoBro from here and hop into your new custom monitoring dashboard, which looks exaclty like you want!