Customizing the UI appearance

Nov 07, 2014

An overview

The general design approach for the app is try and avoid hardcoding settings in the code. Instead, lots and lots of settings are initialized to reasonable defaults and then exposed to customization via the UI or the configuration files.

The user interface part of the app includes over 90 such settings. However only a handful of them can be configured through the UI itself, the rest are customized by editing a configuration "ini" file.

Changing settings

When the instructions below refer to setting "xyz" to "123", it means that you should add the following line -

xyz 123

to %LocalAppData%\Bvckup2\ui\bvckup2-ui-override.ini file and then restart the app to put the change into effect.

The main list of configured backup jobs is rendered as a set of "tiles", a tile per backup. It is possible to adjust both the color palette and the layout of the tiles, all at once. It is also possible to adjust just the colors of a specific backup tile as described in the "Customizing a backup tile" section below.

When adding a setting to the .ini file, you need to prefix it with "style.list.". For example, for "text_col" it will be -

style.list.text_col #00FF00

The color format is #RRGGBB, which is the standard used by HTML/CSS and in other places. If you are unfamiliar with it, just google the details.

bar_thin_fore - the color of a thin progress bar that is displayed when
the backup is going through scanning, planning and execution phases

bar_thin_back_0 - the background of this bar on an unselected tile

bar_thin_back_1 - the background of the bar on a selected tile

The thick progress bar that is shown during longer file copies (and the one that shows delta copying information) is not currently styleable.

Customizing a backup tile

To adjust the colors for a specific backup tile, first find the name of the backup's configuration folder. To this, right click on the backup and select Open Location / Configuration and Logging. This will open a location that ends with backup-000x. That's the name you need.

Now, go into the UI config folder (%LocalAppData%\Bvckup2\ui), create a matching directory "backup-000x" and then place your color customizations in a file called styling.ini.

item_padding is a set of 4 numbers - left, top, right and bottom padding

That is, adding this to the .ini file -

style.list.item_padding 10 20 30 40

will pad each tile with 10px on the left, 20px on the top, 30px on the right and 40px at the bottom. This is not a CSS, so shortcut notations are not supported, i.e. no "style.list.item_padding 12 34".

Each of four tile parts has a native width - a width at which all of its content is rendered and visible. In the above image these are shown as darker rectangles hugging the text.

Sometimes these widths can get large. For example, when displaying a current scan location. In this case the app shrinks the parts to make them fit into the tile.

The shrinking is done is three steps. First the empty space between the parts is shrunk until it reaches "part_spacing" size. Then the left part is shrunk until it reaches "min_left_width" size. Finally, the right part is shrunk until the whole thing fits into the tile.