1. Home
  2. Cinema 4D SDK
  3. GUI Layout Issues

Solved GUI Layout Issues

0
?
A Former User

Hello,
I'm trying to lay out my GUI and I'm having some difficulty. Here's what I have so far:

GUI_Questions.png

Here's what I'd like to make:
Desired.png

ISSUES:

  1. I'd like to center text #1 "TITLE" in its parent group. Thought I am using the flags c4d.BFH_CENTER | c4d.BFV_CENTER, it's still appearing at the top left of its parent group.
  2. I'd like "Thumbnail 1"'s parent to be a square. My initial width and height are set using initw=160, inith=160 but it's still rectangular.
  3. I'd like the text "Thumbnail 1" to be at the horizontal center and vertical bottom of its parent. I am using the flags: c4d.BFH_CENTER | c4d.BFV_BOTTOM

Can anyone help me with these issues, please? My code is below. Thank you.

import c4d
from c4d import utils
from c4d.gui import GeUserArea, GeDialog

UIID01 = 10001
UIID02 = 10002
UIID03 = 10003
UIID04 = 10004
UIID05 = 10005
UIID06 = 10006

class Dialog(GeDialog):
    def __init__(self):
        super(Dialog, self).__init__()

    def CreateLayout(self):
        self.SetTitle("My GUI")

        #column 1
        self.GroupBegin(id=UIID01,flags=c4d.BFH_SCALEFIT, cols=1, rows=2, title="") #2
        self.GroupBorderNoTitle(c4d.BORDER_SCHEME_EDIT)

        #column 1 row 1, Title
        self.GroupBegin(id=UIID02,flags=c4d.BFH_SCALEFIT, cols=1, rows=1, title="", inith=50) #4
        self.GroupBorderNoTitle(c4d.BORDER_BLACK)
        self.AddStaticText(UIID03, c4d.BFH_CENTER | c4d.BFV_CENTER , name="TITLE", borderstyle=1)
        self.GroupEnd() #4

        #column 1 row 2, Scroll List
        self.ScrollGroupBegin(id=UIID04, flags=c4d.BFH_SCALEFIT, scrollflags=c4d.SCROLLGROUP_VERT, inith=260) #4
        self.GroupBorderNoTitle(c4d.BORDER_BLACK)

        #thumbnail
        self.GroupBegin(id=UIID05, flags=c4d.BFH_LEFT | c4d.BFV_TOP, cols=1, rows=1, title="", initw=160, inith=160) #5
        self.GroupBorderNoTitle(c4d.BORDER_BLACK)
        self.AddStaticText(UIID06, c4d.BFH_CENTER | c4d.BFV_BOTTOM , name="Thumbnail 1")
        self.GroupEnd() #5

        self.GroupEnd() #4, end Scroll List

        self.GroupEnd() #2, end column 1
        return True


def main(doc):
    dlg = Dialog()
    dlg.Open(c4d.DLG_TYPE_MODAL_RESIZEABLE, defaultw=640, defaulth=640)

if __name__=='__main__':
    main(doc)
2
M
m_adam

It was indeed a bit tricky

  1. If you only input BFH_CENTER | c4d.BFV_CENTER you don't tell the gadget to actually take the whole space, so you need to also specify BFH_SCALE | c4d.BFV_SCALE.
  2. All sizes passed in GeDialog Gadget creation should be coming from c4d.gui.SizePix to get correct data. (I will add information about it in the python documentation)
  3. Same as the first point.

Here you are with a working solution.

import c4d
from c4d import utils
from c4d.gui import GeUserArea, GeDialog

MAIN_GROUP = 10001

MAIN_TOP_GROUP = 10002
TOP_GROUP_TITLE = 10003

MAIN_BOTSCROLL_GROUP = 10004
MAIN_THUMBNAIL_GROUP = 10005
THUMBNAIL_TEXT = 10006

class Dialog(GeDialog):
    def __init__(self):
        super(Dialog, self).__init__()

    def CreateLayout(self):
        self.SetTitle("My GUI")
        
        # column 1
        if self.GroupBegin(id=MAIN_GROUP,flags=c4d.BFV_SCALEFIT | c4d.BFH_SCALEFIT, cols=1, rows=1, title=""):
            self.GroupBorderNoTitle(c4d.BORDER_SCHEME_EDIT)
            self.GroupBorderSpace(2, 2, 2, 2)
    
            # column 1 row 1, Title
            if self.GroupBegin(id=MAIN_TOP_GROUP,flags=c4d.BFV_CENTER | c4d.BFH_SCALEFIT , cols=1, rows=1, title="", inith=c4d.gui.SizePix(50)):
                self.GroupBorderNoTitle(c4d.BORDER_BLACK)
                self.AddStaticText(TOP_GROUP_TITLE, c4d.BFV_CENTER | c4d.BFV_SCALE | c4d.BFH_CENTER | c4d.BFH_SCALE, name="TITLE", borderstyle=1)
                
            self.GroupEnd()
    
            #column 1 row 2, Scroll List
            if self.ScrollGroupBegin(id=MAIN_BOTSCROLL_GROUP, flags=c4d.BFH_SCALEFIT, scrollflags=c4d.SCROLLGROUP_VERT | c4d.SCROLLGROUP_NOVGAP, inith=c4d.gui.SizePix(200)):
                self.GroupBorderNoTitle(c4d.BORDER_BLACK)
                self.GroupBorderSpace(10, 10, 2, 2)
    
                #thumbnail
                thumbSize = c4d.gui.SizePix(160)
                if self.GroupBegin(id=MAIN_THUMBNAIL_GROUP, flags=c4d.BFH_LEFT | c4d.BFV_TOP, cols=1, rows=1, title="", initw=thumbSize, inith=thumbSize):
                    self.GroupBorderNoTitle(c4d.BORDER_BLACK)
                    self.GroupBorderSpace(2, 2, 2, 7)
                    self.AddStaticText(THUMBNAIL_TEXT, c4d.BFV_BOTTOM | c4d.BFV_SCALE | c4d.BFH_CENTER | c4d.BFH_SCALE, name="Thumbnail 1")
                self.GroupEnd()
    
            self.GroupEnd()

        self.GroupEnd()
        return True


def main(doc):
    dlg = Dialog()
    dlg.Open(c4d.DLG_TYPE_MODAL_RESIZEABLE, defaultw=640, defaulth=640)

if __name__=='__main__':
    main(doc)

Cheers,
Maxime.

MAXON SDK Specialist

Development Blog, MAXON Registered Developer

2
M
m_adam

It was indeed a bit tricky

  1. If you only input BFH_CENTER | c4d.BFV_CENTER you don't tell the gadget to actually take the whole space, so you need to also specify BFH_SCALE | c4d.BFV_SCALE.
  2. All sizes passed in GeDialog Gadget creation should be coming from c4d.gui.SizePix to get correct data. (I will add information about it in the python documentation)
  3. Same as the first point.

Here you are with a working solution.

import c4d
from c4d import utils
from c4d.gui import GeUserArea, GeDialog

MAIN_GROUP = 10001

MAIN_TOP_GROUP = 10002
TOP_GROUP_TITLE = 10003

MAIN_BOTSCROLL_GROUP = 10004
MAIN_THUMBNAIL_GROUP = 10005
THUMBNAIL_TEXT = 10006

class Dialog(GeDialog):
    def __init__(self):
        super(Dialog, self).__init__()

    def CreateLayout(self):
        self.SetTitle("My GUI")
        
        # column 1
        if self.GroupBegin(id=MAIN_GROUP,flags=c4d.BFV_SCALEFIT | c4d.BFH_SCALEFIT, cols=1, rows=1, title=""):
            self.GroupBorderNoTitle(c4d.BORDER_SCHEME_EDIT)
            self.GroupBorderSpace(2, 2, 2, 2)
    
            # column 1 row 1, Title
            if self.GroupBegin(id=MAIN_TOP_GROUP,flags=c4d.BFV_CENTER | c4d.BFH_SCALEFIT , cols=1, rows=1, title="", inith=c4d.gui.SizePix(50)):
                self.GroupBorderNoTitle(c4d.BORDER_BLACK)
                self.AddStaticText(TOP_GROUP_TITLE, c4d.BFV_CENTER | c4d.BFV_SCALE | c4d.BFH_CENTER | c4d.BFH_SCALE, name="TITLE", borderstyle=1)
                
            self.GroupEnd()
    
            #column 1 row 2, Scroll List
            if self.ScrollGroupBegin(id=MAIN_BOTSCROLL_GROUP, flags=c4d.BFH_SCALEFIT, scrollflags=c4d.SCROLLGROUP_VERT | c4d.SCROLLGROUP_NOVGAP, inith=c4d.gui.SizePix(200)):
                self.GroupBorderNoTitle(c4d.BORDER_BLACK)
                self.GroupBorderSpace(10, 10, 2, 2)
    
                #thumbnail
                thumbSize = c4d.gui.SizePix(160)
                if self.GroupBegin(id=MAIN_THUMBNAIL_GROUP, flags=c4d.BFH_LEFT | c4d.BFV_TOP, cols=1, rows=1, title="", initw=thumbSize, inith=thumbSize):
                    self.GroupBorderNoTitle(c4d.BORDER_BLACK)
                    self.GroupBorderSpace(2, 2, 2, 7)
                    self.AddStaticText(THUMBNAIL_TEXT, c4d.BFV_BOTTOM | c4d.BFV_SCALE | c4d.BFH_CENTER | c4d.BFH_SCALE, name="Thumbnail 1")
                self.GroupEnd()
    
            self.GroupEnd()

        self.GroupEnd()
        return True


def main(doc):
    dlg = Dialog()
    dlg.Open(c4d.DLG_TYPE_MODAL_RESIZEABLE, defaultw=640, defaulth=640)

if __name__=='__main__':
    main(doc)

Cheers,
Maxime.

MAXON SDK Specialist

Development Blog, MAXON Registered Developer

0
?
A Former User

@m_adam You are a legend!

I've learned a lot about UI in Cinema 4D from this post, thank you very much.

0
?
A Former User
This post is deleted!
2
4
264
Log in to reply