Solved Unexpected Margin/Padding on AddCustomGui

Hi,

My custom gui button has a width and height of 100 (i.e. should be square). The images are also in 100x100 dimension. But as you can see there are unwanted margin making it a portrait.

You can see the problem here:
https://www.dropbox.com/s/zo198h5b34igh3o/c4d191_unexpected_margin_on_custom_gui_button.jpg?dl=0

This is the code with the AddCustomGui:

        sample_bmp   = c4d.bitmaps.BaseBitmap()
        sample_bmp.InitWith(sample_img)

        bcBitmapButton = c4d.BaseContainer()
        bcBitmapButton[c4d.BITMAPBUTTON_BUTTON] = True

        buttonId = 2000
        w = 100
        h = 100

        self.GroupBegin(id=9001, flags=c4d.BFH_SCALEFIT, groupflags = c4d.BFV_GRIDGROUP_EQUALCOLS | c4d.BFV_GRIDGROUP_EQUALROWS, cols=4, rows=4,initw=0, inith=0)

        for image in images: # iterates for every image in the image folder
            image_bmp = c4d.bitmaps.BaseBitmap()
            image_copy = os.path.join(image_path, image)
            image_bmp.InitWith(image_copy)
            # bitmapButton = self.AddCustomGui(buttonId, c4d.CUSTOMGUI_BITMAPBUTTON, "", c4d.BFH_CENTER|c4d.BFV_CENTER, w, h, bcBitmapButton)
            bitmapButton = self.AddCustomGui(buttonId, c4d.CUSTOMGUI_BITMAPBUTTON, "", c4d.BFH_FIT|c4d.BFV_TOP, w, h, bcBitmapButton)
            bitmapButton.SetImage(image_bmp, True)

        self.GroupEnd()

Thank you for looking at my problem

Hi @bentraje

CustomBitmapButton take by default the size of the icon and ignore the passed width/height. If you want to force the CustomBitmapButton you have to use BITMAPBUTTON_FORCE_SIZE with an Int32 value that represents the size of the icon.

Since it "ignore" the passed width/height you may also consider to use something else than BFH_FIT in a BFH_SCALEFIT group.

Cheers,
Maxime.

@m_adam

Thanks for the response.

I added a line with
bcBitmapButton[c4d.BITMAPBUTTON_FORCE_SIZE] = 100.00
and revised a line to
bitmapButton = self.AddCustomGui(buttonId, c4d.CUSTOMGUI_BITMAPBUTTON, "", c4d.BFV_CENTER | c4d.BFV_CENTER , w, h,

However, it still gives an unwanted margin/padding but this time at the bottom.
You can see the problem here:
https://www.dropbox.com/s/i6eb8ccszzc35ov/c4d191_unexpected_margin_on_custom_gui_button_02.jpg?dl=0

Hi @bentraje

Could you try to use

        w = c4d.gui.SizePix(100)
        h = c4d.gui.SizePix(100)

For more information see GUI Layout Issues.

If not could you try to zip bmp + a complete working script?

Thanks in advance,
Cheers,
Maxime.

Thanks for the response.
Almost close now. is there a way to totally remove the border space within the custom gui buttons?

You can check it here:
https://www.dropbox.com/s/vs31t2flu51gnej/c4d191_unexpected_margin_on_custom_gui_button_03.jpg?dl=0

I tried the self.GroupSpace(0, 0) but it has no effect.
I also tried self.GroupBorderSpace(0, 0, 0, 0) but the whole button disappeared.

Are there any other settings for spaces?

Here is working correctly, please share your code.

    def CreateLayout(self):
        self.GroupBegin(10002, c4d.BFH_SCALE| c4d.BFV_SCALE,  initw=50, inith=50)
        
        bcBitmapButton = c4d.BaseContainer()
        bcBitmapButton[c4d.BITMAPBUTTON_BUTTON] = True
        bcBitmapButton[c4d.BITMAPBUTTON_ICONID1] = c4d.Ocube
        bcBitmapButton[c4d.BITMAPBUTTON_BORDER] = c4d.BORDER_IN

        buttonId = 2000
        w = c4d.gui.SizePix(100)
        h = c4d.gui.SizePix(100)

        self.GroupBegin(id=9001, flags=c4d.BFH_SCALEFIT, groupflags = c4d.BFV_GRIDGROUP_EQUALCOLS | c4d.BFV_GRIDGROUP_EQUALROWS, cols=4, rows=4,initw=0, inith=0)
        self.GroupSpace(0, 0)
        for imageId in xrange(10):
            bitmapButton = self.AddCustomGui(imageId, c4d.CUSTOMGUI_BITMAPBUTTON, "", c4d.BFH_FIT|c4d.BFV_TOP, w, h, bcBitmapButton)

        self.GroupEnd()
        
        
        self.GroupEnd()
        return True

Cheers,
Maxime.

@m_adam

There's actually still space between buttons on your code.
Anyhow here is my working code for your reference. It's in archive file since it includes the images
https://www.dropbox.com/s/leb10klpvm4o8ps/c4d191_unexpected_margin_on_custom_gui_button.rar?dl=0

Hi @bentraje
thanks for the archive.

Here my code in R21.115

In your code you call self.GroupSpace(0, 0) before the GroupBegin it has to be called just after the creation.

        self.GroupBegin(id=9001, flags=c4d.BFH_SCALEFIT, groupflags = c4d.BFV_GRIDGROUP_EQUALCOLS | c4d.BFV_GRIDGROUP_EQUALROWS, cols=4, rows=4,initw=0, inith=0)
        self.GroupSpace(0, 0)

Which give me the next result

Cheers,
Maxime.

Oh I see. Thanks for pointing that out.

Thanks!

@m_adam

Sorry for reviving the thread but I just hit a snag on using the same code but for colored buttons. It doesn't respect the settings and gives an unnecessary margin even though I used the c4d.gui.SizePix() code.

You can see the problem here:
https://www.dropbox.com/s/17yqc1i0puoau77/c4d191_unexpected_margin_on_custom_gui_button_04.jpg?dl=0

You can see the working code here:

import c4d
from c4d import bitmaps, documents, gui, plugins, threading, utils

class ColorButton(object):

    def __init__(self):
        self.width = None
        self.height = None
        self.color = None
        self.btn_id = 3000


    def create(self, dlg, w, h, color, btn_id):

        self.width = c4d.gui.SizePix(w)
        self.height = c4d.gui.SizePix(h)
        self.color = color

        bmp_color = c4d.bitmaps.BaseBitmap()
        bmp_color.Init(w, h)

        for y in xrange(w):
            for x in xrange(h):
                bmp_color.SetPixel(x, y, color[0], color[1], color[2])

        bcBitmapButton = c4d.BaseContainer()
        bcBitmapButton[c4d.BITMAPBUTTON_BUTTON] = True
        bcBitmapButton[c4d.BITMAPBUTTON_BORDER] = c4d.BORDER_IN
        


        bmp_btn = dlg.AddCustomGui(btn_id, c4d.CUSTOMGUI_BITMAPBUTTON, "",c4d.BFH_FIT|c4d.BFV_TOP, w, h, bcBitmapButton)

        bmp_btn.SetImage(bmp_color, True)
        
class MyDialog(c4d.gui.GeDialog):

    def CreateLayout(self):
        self.GroupBegin(10002, c4d.BFH_SCALE| c4d.BFV_SCALE,  initw=50, inith=50)
        
        bcBitmapButton = c4d.BaseContainer()
        bcBitmapButton[c4d.BITMAPBUTTON_BUTTON] = True
        bcBitmapButton[c4d.BITMAPBUTTON_ICONID1] = c4d.Ocube
        bcBitmapButton[c4d.BITMAPBUTTON_BORDER] = c4d.BORDER_IN

        buttonId = 2000
        w = c4d.gui.SizePix(100)
        h = c4d.gui.SizePix(100)

        self.GroupBegin(id=9001, flags=c4d.BFH_SCALEFIT, groupflags = c4d.BFV_GRIDGROUP_EQUALCOLS | c4d.BFV_GRIDGROUP_EQUALROWS, cols=4, rows=4,initw=0, inith=0)

        self.GroupSpace(0, 0)
        for imageId in xrange(10):
            bitmapButton = self.AddCustomGui(imageId, c4d.CUSTOMGUI_BITMAPBUTTON, "", c4d.BFH_FIT|c4d.BFV_TOP, w, h, bcBitmapButton)
        # Red Button Through Class
        red_button = ColorButton()
        red_button.create(self, w=100,h=100,color=(255,0,0), btn_id=6000)

        self.GroupEnd()
        
        
        self.GroupEnd()
        return True
    
if __name__ == "__main__":
    dlg = MyDialog()
    dlg.Open(dlgtype=c4d.DLG_TYPE_ASYNC)

@bentraje said in Unexpected Margin/Padding on AddCustomGui:

Sorry for reviving the thread but I just hit a snag on using the same code but for colored buttons. It doesn't respect the settings and gives an unnecessary margin even though I used the c4d.gui.SizePix() code.

    def create(self, dlg, w, h, color, btn_id):
        bmp_btn = dlg.AddCustomGui(btn_id, c4d.CUSTOMGUI_BITMAPBUTTON, "",c4d.BFH_FIT|c4d.BFV_TOP, w, h, bcBitmapButton)

        
class MyDialog(c4d.gui.GeDialog):

    def CreateLayout(self):
        red_button = ColorButton()
        red_button.create(self, w=100,h=100,color=(255,0,0), btn_id=6000)
        return True

You don't use c4d.gui.SizePix() in your code and that's why it fails.

Cheers,
Maxime.

You are right.

self.width = c4d.gui.SizePix(w)
self.height = c4d.gui.SizePix(h)
self.color = color

wasn't actually used.

Will close this thread now and crawl to my little cave of shame. lol