The support forum

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.

For general discussion of where and how the app stores its config see this topic - https://bvckup2.com/support/forum/topic/480

Nov 07, 2014

Customizing the backup list


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.

Colors


Each tile is rendered differently depending on whether it is in a selected or de-selected state. The settings that control tile appearance are as follows -
https://bvckup2.com/support/data/ui-customization-list-colors.png

    tile_back_0 and tile_back_1 define a gradient.
    The default is #FFFFFF / #FFFFFF, so it renders as a flat white.

    sel_back_0 and sel_back_1 are the gradient as well.

    back is the color of the area at the bottom of the list, below all tiles.

    top_shadow is a 0/1 value. When set to 0 it removes the 2px drop
    shadow at the top of the list.

    sel_edge is the color of horizontal *outer* edges of a contiguous set
    of selected tiles.

    sel_edge_sel is the color of *inner* edges of the same set.

    text_col / text_col_sel is a darker (primary) text,
    label_col / label_col_sel is a lighter (secondary) text,
    error_col / error_col_sel is the red (error) text

Additionally, not shown in the image, there are -

    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.

Restart the app to put changes into effect.

Nov 07, 2014

Tile padding and line spacing


Each tile is comprised of two lines and each lines is split into the left and right parts. Left parts are aligned to the left, right parts - to the right.

It is possible to adjust the padding around the lines and it also possible to adjust the spacing behavior for left/right parts when the tile is being sized horizontally.

The line padding and spacing is controlled as follows -
https://bvckup2.com/support/data/ui-customization-list-tile-lines.png

    line_spacing is just a number, the default is 4 (pixels)

    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".

Nov 07, 2014

Part spacing and sizing behavior


This is where it gets a bit complicated, so the illustration first -
https://bvckup2.com/support/data/ui-customization-list-tile-parts.png

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.

The defaults are 40 and 120 pixels respectively.

Alex Pankratov :

Nov 07, 2014

... Next up is the log panel styling. Stay tuned ...
Topic is locked.

New topic

Create
Made by Pipemetrics in Switzerland
Support


Follow
Twitter
Dev blog
Miscellanea Press resources
Testimonials
On robocopy
Company
Imprint

Legal Terms
Privacy