more compleate gui system

Code Snippets
1

TreeGUI .03 is out!

v.03: affdata.s3.amazonaws.com/treegui/TreeGUIv03.zip

screen shot of what the gui can do:
affuniverse.com/artdepot/Treefor … 20chat.png

---- older ------
v.02: istrolid.com/p/panda3d/ColShag.zip
v.01: treeform.p3dp.com/gui/ColShag.zip

This is incomplete gui system. Please look for bugs and request features i will try to fix and add them.

1 Like
2

Thanks Treeform,

I know your busy with your own stuff, I really appreciate it.

C

3

Wow, this sure looks great! Thanks a lot for sharing!

4

Hey Treeform,

Just letting you know I have been playing around with what you setup and its very impressive. I have a few questions if you don’t mind:

  • I noticed there was no “listbox” if you will, similar to what ynjh_jo posted. So I tried to take the listview control that ynjh built here:

https://discourse.panda3d.org/viewtopic.php?t=3502

into your example. I came into some scaling issues, and as I was trying to figure it out I noticed a few things:

  • It seems the problem arises from the panda3d.py file which you access via:
from panda3d import *

What does that code do for your program?

In your example if you put in:

from direct.gui.OnscreenText import OnscreenText

self.title = OnscreenText(text="Panda3D Test",
                              style=1, fg=(1,1,0,1),
                              pos=(0.8,-0.95), scale = .07)

You would get a scaling error.

I think what you have put together is great, I like the way its modularized, and the theme system looks very cool. Before I can use it for my game however I would require a listbox control, and I think ynjh has a great control, putting his control into your gui system is unfortunately a bit difficult.

Any insights?

Thanks,

C

5

ColShag, its down right impossible to use existing direct gui in my system because
#1 it would clash with the input methods and forms ie the direct widgets will be click through
#2 i don’t like direct gui and would slap you for using it and put every possible road block :slight_smile:
#3 you will run into scaling issues because my gui use pixel perfect scaling that is its 0,0 at the top and runs down to 800,600 or if you resize your window its that size.
[ So i guess making ynjh_jo box size 300,-300 and be some place at 100,100 would show it]

So since you have looked at it i will wip you up a list box when i get some time. ( I was implementing a tabbable frame when i got bored)

This is what i want from a list box ~ i will take SWIG scroll frame approach here: I will create a frame that would have scroll bars on it then you can scroll the contents which would be a big list of buttons.

That would require that i implement scroll bars which is 3 buttons. One button is draggable along an axis.

EDIT: i think i should leave the aspect2d alone and create my own node like “treegui” for me to use so that all direct aspect code still works … or even a better idea is to just hide the apsect2d code so it does not work :slight_smile:

6

Hey Treeform,

Thanks for the quick reply. I see, I didn’t realise that your gui was completely independent of the Directgui system. Which is fine with me, as long as I can get my hands on a listbox. What you have proposed sounds great! A multiselect feature would be great as well, meaning you could use shift or control on the list to select more then one item in the list.

I will certainly be a full time user of your gui, as I am itching to start converting my game to panda. Its hard for me to really get going without that listbox, but I might just start anyways with what you have and then hopefully implement the listbox when it comes out.

I’ll start work and I hope you don’t mind if I bug you some more down the line.

Thanks,

C

7

No thanks, please bug me - only way i get work done. I guess i will have to implement a listbox as a short cut to my scroll pane idea.

8

Hey Treeform,

Been working with the gui, I thought I would add widgets to the freefloating.py you made to see how widgets work. I’ll attach my modifications here:

from gui.widgets import *
from pandac.PandaModules import Vec2

class FreeFloating(Form):   
    
    def __init__(self,game):
        Form.__init__(self,"Build window",size=Vec2(200,400))
        self.game = game
        gui.add(self)
        
        # add test button
        self.add(Button('Button', pos=Vec2(10,30), size=Vec2(50,16), onClick=self.onTestButton))
        
        # add slide button (looks like a button, how does it slide?)
        self.add(SlideButton('SlideButton', pos=Vec2(10,60), size=Vec2(50,16), onClick=self.onTestButton))
        
        # add input button (does not work, it refers to DirectInput)
        ##self.add(Input('Input', pos=Vec2(10,90), size=Vec2(100,20), point=14))
        
        # add Lable
        self.add(Lable('Lable', pos=Vec2(10,120)))
        
        # add Textbox
        self.add(Text('Text', pos=Vec2(10,150)))
        
        # add Radiobuttons
        self.add(Radio('Radio1', pos=Vec2(10,180)))
        self.add(Radio('Radio2', pos=Vec2(110,180)))
        
        # add CheckBox
        self.add(Check('Check', pos=Vec2(10,210)))
        
        # add Icon
        self.add(Icon(pos=Vec2(10,240)))
                
    def onTestButton(self,button,key,pos):
        print 'Button pressed'

Its nice and clean, and easy to use, but a few questions:

  • Lable works, but Text (Textbox?) does not show up
  • Input seems to try and use DirectEntry, which causes a scaling problem
  • SlideButton seems to look like Button
  • How does Icon work?

Thanks,

C

9

thanks treeform,
that was just what i was looking for.

i will check it out tommorow in more detail, but it looks good at first glance.

jeff

10

thanks here is the screen shot of the new version

11

Wow, that looks really cool! Thanks for sharing!

By any chance, is it easy to customize the skin and/or do you have other skins lying around perhaps?

12

skins should be easy to change. If you want to just redraw the skin that is easy. This is the skin file just draw your own on top of it.

If you want to remake the “UV” layout on the skin that is a bit harder. I had another skin but i broke it. If you draw any GUI skins like the ones above i will transcribe them for you for use in my theme.

13

This is great Treeform! I can’t wait to try it out.

14

ColShag, but still one component you need is a list box. You want it to be multi select as i remember. I will create single and multi select list boxes soon. Getting the scroll bars to work was a major nightmare rewrite half the code type thing.

15

I see, I didn’t realise, I can’t wait for the listboxes! Thanks again Treeform. I will work at adding another theme as well.

C

16

themes elements are composed of squares. The squares can either tile or stretch. Optionally squares can have borders. Either full border of some pixel value or just left and right little borders. The top frame is a square with a border. The buttons are tiles with left and right border only while most every thing else is either borderless or “iconic” where the square does not stretch nor tile.

So making a theme is basically drawing squares with optional borders on them. The squares can be any size and the border can be any size.

17

ColShag, I have put your theme without modification (just replaced the image) this is what i get:

First your second box looks just like the first (the second box is ment for borders around text boxes and other widgets … you made the borders too big. Second my theme used tiling while yours uses stretching. I will change the theme file to reflect your changes and i think i need to add a way to stretch with borders. Almost any theme can be made to work in my system it should just take a little more time to implement.

hmm after playing with it for couple of minutes I came up with

draw some more of your theme and i will come up with a list box

18

You bet Treeform, just to clairify for the goup here is a slightly modified gui theme that I’m using more to understand where everything goes:

Here is a screenshot of my test scene using the gui,

I see what you mean with the tiling. I also don’t like my first attempt, I’ll have to play with this, It would be helpful if you could maybe color code a gui and then show a screenshot using all the gui elements in the example.

C

19

ColShag, color coding will not help you. My ideal work flow is draw your gui (not based on any thing) then tell the Theme file where the blocks are and what they represent. Example of the theme definitions:

    TEXTURE = "data/guipa2.png"
    CHECKON = Stretch(360,40,20,20)
    CHECKOFF = Stretch(400,40,20,20)
    RADIOON = Stretch(280,40,20,20)
    RADIOOFF = Stretch(320,40,20,20)
    PANDA = Tiled(280,80,20,20)
    INPUT = TileBorder(20,300,180,180,20)
    FRAME = StretchBorder(20,300,180,180,20)
    FORM = StretchBorder(20,20,202-20,182-20,20)
    FRAMEBAR = TileBarX(280,480,140,20,20)
    BUTTON = Tiled(320,420,20,20)
    BUTTON = TileBarX(280,480,140,20,20)
    BUTTON = TileBorder(288,170,490-288,190-170,5)
    #BUTTON = Tiled(280,80,20,20)
    #BUTTON = TileBorder(20,20,202-20,182-20,20)
    DOWN = Tiled(300,160,200,40)
    TEXTCOLOR = (1,1,1,1)
    LABLECOLOR = TEXTCOLOR
    INPUTCOLOR = TEXTCOLOR

So they are not really not that hard to do for scratch for every theme type. And that is they way they probably should be done. And i did fix your tiling problems so we are moving right along.

20

Hey Treeform,

After some work I reworked my gui template and followed your advice (I just made some controls). I have a form, scrollbar, button, close and expand buttons for the form, and radio and checkbox buttons.

What do you think?