Button spacing different on PC and Mac [SOLVED]

On 12/06/2015 at 13:46, xxxxxxxx wrote:

I had my plugin working fine, and I thought I would test it on a mac.
All the spacing for my layout was changed.  Argh...

I tracked the problem down to the fact that the mac had a different 'GUI Font'.
Since the user can have the font set to whatever they want, how am I supposed to insure that my plugin's layout is spaced correctly on any system?

Moreover, changing the font is changing the spacing on a:

c4d.CUSTOMGUI_BITMAPBUTTON

that doesn't have any text on it!

Thanks,

Chris

On 15/06/2015 at 07:40, xxxxxxxx wrote:

Hi Chris,

actually the C4D GUI was never designed to be pixel perfect equivalent on every OS. Quite the opposite, it's supposed to adapt to the user changing his layout dynamically and to provide a identical user experience on different operating systems. When designing a plugin's GUI you should keep this in mind.

This does not mean, we want to ignore your problem. Perhaps you can show us some screenshots? To be honest without it's a bit hard to understand, where the actual problem lies and if we may be able to provide a workaround.

On 20/06/2015 at 13:32, xxxxxxxx wrote:

Andreas,

I understand.  I'm used to perfectly aligning everything in my programs, so accepting this approach towards a UI has been frustrating.  The biggest hurdle is to work around the fact that you let users set the UI font to anything in C4D.  That is a pain.

For users that are having issues with this, I worked out a system that lets you adjust your 'GeUserArea' to whatever the user sets their font to.

It works like this:

1. Layout your UI the way to want without changing the font in C4D, I used 'Segoe UI'.
2. Calculate a baseline width for a known amount of text at the design-time font.
3. Then, when the UserArea is first drawn, when the plugin opens, measure the current width for the same known text.
4. Calculate an adjustment factor for the width difference and resize the UserArea to that factor.

#----Adjust the size of the 'UserArea' to accomodate different fonts.
current_width =  user_area_info_box.DrawGetTextWidth('abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ')
print current_width  # 331
baseline_width = 331    # Calculated with the font 'Segoe UI' which was used with initial design.
user_area_info_box.font_width_factor = current_width / float(baseline_width)
                
user_area_info_box.txt_height = user_area_info_box.DrawGetFontHeight()
  
# Limit the range of the adjustment with 'min' and 'max' for crazy fonts.
width = min(max(int(round(user_area_info_box.font_width_factor * 435  )) , 350), 700) # 435 was the design-time width.
ScaleInfoBox(width)

Then, resize the box like this:

def ScaleInfoBox(width) :
    global user_area_info_box
  
    # Calculate a height adjustment, if needed, a similar way using 'user_area_info_box.txt_height'
    height = 200
  
    InfoBox.width = width
    InfoBox.height = height
    
    gl_dialog.LayoutFlushGroup(DISPLAY_SCREEN_GROUP)
    user_area_info_box = InfoBox(None)	'InfoBox' is the class name for the 'GeUserArea'.
    LayoutInfoBox(gl_dialog)	
    gl_dialog.LayoutChanged(DISPLAY_SCREEN_GROUP)
  
  
# This function was used initially to add the 'UserArea' to the dialog.
def LayoutInfoBox(self) :	# 'self' is the dialog.
     self.AddUserArea(INFO_BOX, c4d.BFH_LEFT)
     self.AttachUserArea(user_area_info_box, INFO_BOX)

The works well to adjust the width of a 'GeUserArea' to different user fonts.

Hope it helps save someone some time.

Chris