GUI Layout Issues



  • 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)
    


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



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



  • @m_adam You are a legend!

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



  • This post is deleted!

Log in to reply