MidsReborn icon indicating copy to clipboard operation
MidsReborn copied to clipboard

Adjust the Scale and Layout of Power Bars and Slot Icons to improve the UI

Open Jacke4913 opened this issue 3 years ago • 0 comments

Here is a build made new in the current Mids Reborn v3. https://www.dropbox.com/s/kj8txx3sjz9fr5o/Jacke%20Dark%20-%201%20-%20Blaster%20AR-Dev-Mun%20Rune%20Recall.20210106.mxd?dl=0

The font settings in Configuration are the install defaults.

Here is how that build displays in Mids Reborn v3 in 4-column mode with the main window resized to remove text cutoff. https://www.dropbox.com/s/187rei0i9qcoe9w/20210106j.Mids_Reborn.3.0.1.9.Jacke_Dark.1.20210106.v3.24.png?dl=0

As a contrast, here's the same file loaded into Mids Reborn v2 with the 2020 Dec 24 Unpolished database, in its 4-column form. https://www.dropbox.com/s/ktu3m6g131xv51k/20210106j.Mids_Reborn.3.0.1.9.Jacke_Dark.1.20210106.v2.22.png?dl=0

And here is the Mids Reborn v3 with its window the same size as the Mids Reborn v2 window, with text cutoff. https://www.dropbox.com/s/l0w81rv5dgj8fdb/20210106j.Mids_Reborn.3.0.1.9.Jacke_Dark.1.20210106.v3.23.png?dl=0

With a major version change and corresponding changes in the libraries used, it can be challenging to match the previous UI with the new libraries. Changes in colours and layout are often unavoidable.

In the v3 UI compared to v2 UI:

  1. The Powers display on the right appears with slightly different colours that appear more gloss and harsher.
  2. The Enhancement Icons are smaller and appear less sharp.

Point 2 and maybe even Point 1 partly may be an artifact of displaying the Icons slightly smaller in v3. Note the Enhancement picker in v3 in this screenshot has slightly larger Icons that are much clearer. This may be also due to there being just one set of Icons that looks better at certain scaling than others. https://www.dropbox.com/s/oo529nif1wdzvd7/20210106j.Mids_Reborn.3.0.1.9.Jacke_Dark.1.20210106.v3.25.png?dl=0

  1. The Enhancement Slots are packed together on the left end of the Power bar.
  2. The Slot Levels displayed have been lowered to clear the Enhancement Icons.
  3. The Enhancement Levels display now includes Enhancement Boosters ("50+5").
  4. To avoid text being cut off requires the program window to be expanded a small amount vertically and quite a bit horizontally.

The expansion in Point 6 vertically is small and appears to be due to changing the typeface of the Power Names to be ever so slightly taller and perhaps with a slight amount of greater space between the lines of text. With 9 rows of text in the primary and secondary powers, the total increase doesn't really amount to much. But in the 4 Power Pools and 1 Epic Pool column, it's 25 rows of text and 4 Pool headers added together.

However, the change in the typeface and the colours of the text in v3 also make the Power Names easier to read and the increase vertically isn't that much.

The expansion in Point 6 horizontally appears to be mostly from Point 3, as well as Point 4 and Point 5 needing greater space to show the text without cutoff, likely with some added spacing due to typeface and layout changes added in.

Describe the solution you'd like

Any changes to the UI to address these issues have to be worked together as they are linked. I think there are likely a combination of small changes that will improve things immensely.

Changes to colour should only be considered after changing the layout as layout changes may be sufficient. The colour difference between v2 and v3 also strongly identifies which is which, which is itself important. Even if the v3 colours are changed, they shouldn't just match v2's even if that was possible.

A suggested combination of changes that might work.

  1. Expand the scale of the Enhancement Icons on the Power bars to the same size as in the Enhancement picker. This can be done with the current version by expanding the width of the main window even more. https://www.dropbox.com/s/x4hjknse2420yho/20210106j.Mids_Reborn.3.0.1.9.Jacke_Dark.1.20210106.v3.26.png?dl=0

Now the Enhancement Icons are the same size as those in the Enhancement picker and are much clearer. There's also a lot of excess padding and use of vertical space on the right size which should be changed. Unfortunately, the total matching vertical expansion of the Power Bars layout on the right has gotten to the point where there's a vertical thumb to scroll.

  1. After applying Point 1, shrink the size of the Power bars the slots are on until the toggle radio button on the right end is just to the right of the 6th Slot.
  2. Take the 4-columns by 2-rows grid of smaller buttons on the upper right ("Hero/Villain", "Mode:PvE". etc.) and change it into a 8-columns by 1-row grid of smaller buttons, allowing the Powers Bars to be raised up slightly.
  3. Raise the Slots Level numbers slightly onto the Enhancement Icons, about halfway between where they are now in v3 and where they overlap strongly in v2.
  4. Reduce the padding horizontally and vertically between the Powers bars in both the Primary and Secondary area upper right and especially the Inherent power area at the lower right.

I think some tweaking of the UI along these lines can reduce the expansion needed in properly displaying v3 versus v2. v3's window will still likely be larger than v2's, but less than it is now to avoid text cutoff and Icon blurring.

Jacke4913 avatar Jan 07 '21 11:01 Jacke4913