Panda3D Forums

by **treeform** » Fri Oct 12, 2007 8:18 pm

home page:
https://code.launchpad.net/~starplant/treegui/

Always get the latest reversion:
https://code.launchpad.net/~starplant/treegui/treegui3

by **Josh Yelon** » Fri Oct 12, 2007 11:08 pm

Interesting! To what extent will it be stylistically customizeable?

by **treeform** » Fri Oct 12, 2007 11:32 pm

well you can change quite a lot: Image and uv layout on the image. But still there is some limits. But the code is there any kind system can be hacked up if need be.

by **rdb** » Sat Oct 13, 2007 2:26 am

Wow, this is really kewl, Treeform! This would be a great higher-level alternative for the DirectGUI system.

by **Liquid7800** » Mon Oct 29, 2007 3:43 am

Great work thanks for the efforts

by **ColShag** » Thu Dec 13, 2007 5:33 pm

Looks interesting, thanks for taking this on. A more usable GUI system would be very useful for games heavier in gui.

Thanks for the work, any update on progress, or have you moved on to something else?

by **treeform** » Sun May 18, 2008 12:52 am

I was trying to code a gui layout and theme design program for panda3d. But there is just so many features the program must have in order to be used comfortably. I looked into all ready made gui tools - most of them are for existing gui's and cant help me much. Then i though about inkscape, what i use a bitmap and then over lay it with rectangles? Ink scape has a full featured 2d gui adding abilities as well as naming the rectangles. I don't know what do you guys think?

Use inkscape to draw out gui themes?

by **ThomasEgi** » Sun May 18, 2008 7:19 am

it's free, crossplatform, there is aleightweight version for old pc's , it's quite easy to use.
no objections from my end

(if you include a how-to that is)

i hope this works out well, would be awsome.

by **ColShag** » Mon May 19, 2008 3:13 pm

Sounds great, I'm all for inkscape.

by **Manakel** » Tue May 20, 2008 7:15 am

If i understand the idea behind your proposal :
a) you layout a GUI in Inkscape
b) you define zone in the GUI by naming them in Inkscape
c) you use this names to bind from Inkscape images to ingame gui controls
(like buttons, etc...)

If this is the idea /workflow, that's pretty nice.

Do you plan to add a dedicated python plugin to inkscape?

by **chombee** » Tue May 20, 2008 8:44 am

If Manakel is right, that does seem like quite a nice workflow.

by **treeform** » Tue May 20, 2008 11:40 am

Manakel

No pugin, i started to write a tool then go oh, its just like inkscape. So maybe use inkscape instead.
basically i foresee 3 uses

theme (in the works):
take an image and layout it with named boxes so that the my gui engine (which is pretty good imo) can cut the texture up into proper components

layout:
use the inkscape boxes to positions control on different gui elements.

direct drawing (not high on the list):
I already have limited .svg to .egg (just rectangles + their quite complex matrix transforms.) Maybe drawing the gui directly in inkscape and having a svg (2d vector graphic renderer in panda3d) would be cool.

by **ColShag** » Tue May 20, 2008 1:19 pm

Would it be possible to include mouseover, mouseclick, button disabled images to the buttons in your gui system?

by **treeform** » Tue May 20, 2008 6:16 pm

ok i'll put that on the list.

by **treeform** » Sun Jun 08, 2008 4:32 am

I am still trying to nail down theme creation. Because each game should have different theme creating new themas easily with treegui should be top priority (even more sow then the layout of controls because game normally dont have *that* many buttons.)

There is what i cam up with. Draw the gui texture in photoshop gimp what ever then use your favorite 3d program (no matter what but i used blender)
To lay out the boxes around the texture controls:

start blender pick your image texture as background:

use blenders project from view to map right on to the texture

uv map squares over every control you want ...

this is blender so the thing is in 3d even though we will not use the 3d view but compute from the 2d texture layout view.

the final this is that every thing should be named according to function consult the documintation on what that will and might be.

texture used:

Then just export as egg and use that as theme! That is much better idea then going through inscape or my own custom tool because
#1 you dont have to learn some thing new!
#2 any 3d tool that can export egg (or format that panda3d can load .x,3ds....) can now be used as a theme designer by sticking to naming conventions!
#3 the 3d editor was not exaclty build for this function but i am sure it has way more sort cuts and tools for this then any thing i could build!

I think using theme designer in this way is the best idea? What do you think?

by **lefty** » Thu Jun 19, 2008 10:26 am

well .. i think blender is much more complicated than inkscape (and takes longer to learn) and creating 2d theme in 3d editor is .. crazy. why you dont simply use inkscape ?

by **treeform** » Thu Jun 19, 2008 1:03 pm

no you see you dont have to use blender just the egg pipeline.

In order to use panda3d you have to have some one who knows how to use a 3d modeling app to produce eggs. In my case its blender, in your case it might be Maya, Max, C3d, Bruse ... you name it. If you can export egg from it then you can make a theming system in it. Thats my idea behind this not create a new pipe line (tied to inkscape) but use the exiting egg pipeline.

by **Master Tanker** » Sun Jan 04, 2009 11:17 pm

Hi, i think what the method exposed by treeform its perfect and clever. Dude, could you tell me wich funtion should i seek in the reference of Panda3D to know abour naming?.

THX

by **treeform** » Mon Jan 05, 2009 12:51 pm

This stuff is not in the reference. Its not in panda3d. It just my own subsystem.

by **chodaz** » Thu Mar 12, 2009 6:26 pm

I'd like to check in and see what the status is on treegui. I've recently reached a point with my game where I need a GUI system and treegui looks functional and simple. I've downloaded the alpha1 release from launchpad and started implementing it. It's working great but there's a lack of some more advanced widgets. I've started writing my own, for example I made a drop-down selection. However, I thought I'd check to see if there's any newer versions available before I do too much coding.

Also what's the status on the theme editing process? A simple way to modify the theme would save me a lot of time.

Thanks, treegui is awesome!

Chad

Edit: I'll post any modifications/additions I make as soon as they're finished for others to use if they want.

by **treeform** » Fri Mar 13, 2009 12:15 pm

hmm i probably rewrite treegui couple of times now. Ill try to make a new branch.

by **treeform** » Thu Sep 17, 2009 4:39 pm

New branch of treegui is out. This is again a rewrite

TreeGui is a new sinkable GUI for panda3d.

The existing panda3d build in GUI i though was to complex to use and too simple feature wise - not a good combination. I also wanted a sinkable and more python api.

Major features include:

Theme Files
Dynamically resizable layouts
Pixel perfect (1pixel on texture = 1pixel on screen)
Hierarchical event system
All major UI components
Pythonic

Get it here:

https://code.launchpad.net/~starplant/treegui/treegui3

by **sneftel** » Mon Sep 21, 2009 7:38 pm

I'm a little confused by the example theme. /rtheme/twotone contains hundreds of little icons, but as far as I can tell, most aren't referred to in /rtheme/__init__.py. Is there some other place that they're used in the examples, or are they there because they're from some larger app?

Additionally, here you mention the use of egg files to describe texture atlases, but I can't find any egg file in the examples. Is there an example of how to do that out there? Is it required or not?

EDIT: Actually, I guess I figured out the latter question -- it's automatically built when the theme is loaded.

by **sneftel** » Fri Sep 25, 2009 2:47 pm

I noticed that font characters had a large amount of padding in the texture atlas, leading to a lot of wasted space. This patch fixes that:

Code: Select all: === modified file treegui/eggatlas.py --- treegui/eggatlas.py 2009-09-08 17:31:46 +0000 +++ treegui/eggatlas.py 2009-09-25 19:34:44 +0000 @@ -225,7 +225,7 @@ charName = name+str(i) #print i,charName,"'%s'"%char glyph = font.getGlyph(i) - w,h = glyph.getWidth(),glyph.getBottom() + w,h = glyph.getWidth(),glyph.getBottom()-glyph.getTop() image = PNMImage(w+PADDING*2,h+PADDING*2) image.addAlpha() image.alphaFill() @@ -239,7 +239,7 @@ #image.write(tmp+"/%i.png"%i) self.extents[charName] = ( glyph.getAdvance(), - glyph.getBottom()-glyph.getTop()) + glyph.getBottom()-2*glyph.getTop()) self.it.add(charName,image)

Note that there are some truly strange things going on in PNFTextGlyph's placement of the baseline, so this is, at best, "bug-compatible" with what's going on there.

by **sneftel** » Fri Sep 25, 2009 3:19 pm

Oh, and here's another patch to get proper key-repeat from keyboard entry.

Code: Select all: === modified file treegui/keys.py --- treegui/keys.py 2009-09-05 00:34:29 +0000 +++ treegui/keys.py 2009-09-25 20:16:57 +0000 @@ -31,11 +31,15 @@ base.accept(mouseEvent,self.onKey,[mouseEvent]) for letter in symbols+letters: base.accept(letter,self.onKey,[letter]) + base.accept(letter+'-repeat',self.onKey,[letter]) base.accept('shift-'+letter,self.onKey,[letter.upper()]) + base.accept('shift-'+letter+'-repeat',self.onKey,[letter.upper()]) for event in work: base.accept(event,self.onKey,[event]) + base.accept(event+'-repeat',self.onKey,[event]) for index,key in enumerate(symbols): base.accept('shift-'+key,self.onKey, [shifted[index]] ) + base.accept('shift-'+key+'-repeat',self.onKey, [shifted[index]] ) self.inputKeys = dict.fromkeys(list(letters+letters.upper()+symbols+shifted)+work) self.lastMouseTime = 0

by **sneftel** » Fri Sep 25, 2009 4:48 pm

I'm on a bit of a roll. Here's better text editing, including caret drawing and left/right/home/end. (This patch subsumes the previous one.)

Code: Select all: === modified file treegui/drawer.py --- treegui/drawer.py 2009-09-06 19:37:05 +0000 +++ treegui/drawer.py 2009-09-25 21:43:22 +0000 @@ -118,15 +118,18 @@ u,v,us,vs = rect self.rectStreatch((realX,realY,us,vs),(u,v,us,vs)) - if thing.text: + if thing.text is not None: # draw text stuff self.color = Vec4(0,0,0,1) self.drawText( gui.theme.defineFont(thing.font), thing.text, realX, - realY) + realY, + selection = thing.text_selection, + caret_pos = thing.caret_pos) self.color = Vec4(1,1,1,1) + if thing.children: for child in thing.children: @@ -138,7 +141,7 @@ - def drawText(self, font, text, x, y): + def drawText(self, font, text, x, y, selection=(0,0), caret_pos=-1): """ draws the text needs more work! @@ -148,12 +151,17 @@ ox = x baseLetter = self.atlas.getChar(name + str(ord("T"))) omaxh = baseLetter[3] - baseLetter[4][1] - + char_count = 0 + for line in text.split("\n"): build = [] maxh = omaxh - + for c in line: + if char_count == caret_pos: + u,v,w,h,e = self.atlas.getChar(name + str(ord('|'))) + build.append((x-w/2,y+e[1],u,v,w,h)) + char_count += 1 code = ord(c) if code <= 32: u,v,w,h,e = self.atlas.getChar(name + str(77)) @@ -163,6 +171,13 @@ build.append((x,y+e[1],u,v,w,h)) x += e[0] maxh = max(maxh,h-e[1]) + + else: + if char_count == caret_pos: + u,v,w,h,e = self.atlas.getChar(name + str(ord('|'))) + build.append((x-w/2,y+e[1],u,v,w,h)) + + char_count += 1 for x,y,u,v,w,h in build: self.rectStreatch((x,y+maxh-h,w,h),(u,v,w,h)) @@ -170,7 +185,6 @@ x = ox y += maxh - def rect(self,(x,y,xs,ys),(u,v)): """ draw a rectangle """ us = xs === modified file treegui/keys.py --- treegui/keys.py 2009-09-05 00:34:29 +0000 +++ treegui/keys.py 2009-09-25 21:30:46 +0000 @@ -25,17 +25,21 @@ letters = "abcdefghijklmnopqrstuvwxyz" symbols = "1234567890-=,./[]\\;'`" shifted = "!@#$%^&*()_+<>?{}|:\"~" - work = ['enter','backspace','space','tab'] + work = ['enter','backspace','space','tab','delete','home','end','arrow_left','arrow_up','arrow_down','arrow_right'] self.mouseEvents = dict.fromkeys(["mouse1", "mouse2", "mouse3"]) for mouseEvent in ["mouse1", "mouse2", "mouse3","mouse1-up","mouse2-up","mouse3-up","shift-mouse1"]: base.accept(mouseEvent,self.onKey,[mouseEvent]) for letter in symbols+letters: base.accept(letter,self.onKey,[letter]) + base.accept(letter+'-repeat',self.onKey,[letter]) base.accept('shift-'+letter,self.onKey,[letter.upper()]) + base.accept('shift-'+letter+'-repeat',self.onKey,[letter.upper()]) for event in work: base.accept(event,self.onKey,[event]) + base.accept(event+'-repeat',self.onKey,[event]) for index,key in enumerate(symbols): base.accept('shift-'+key,self.onKey, [shifted[index]] ) + base.accept('shift-'+key+'-repeat',self.onKey, [shifted[index]] ) self.inputKeys = dict.fromkeys(list(letters+letters.upper()+symbols+shifted)+work) self.lastMouseTime = 0 === modified file treegui/widgets.py --- treegui/widgets.py 2009-09-08 17:31:46 +0000 +++ treegui/widgets.py 2009-09-25 21:35:52 +0000 @@ -26,7 +26,10 @@ text = None - font = "default_font" + font = "default_font" + text_selection = (0,0) + caret_pos = -1 + icon = None visable = True # can we see @@ -159,7 +162,7 @@ style = "entry" text = "" control = True - + caret_pos = -1 textLimit = None def onClick(self): @@ -167,17 +170,44 @@ return True def onKey(self,char): + print "char:",char if len(char) == 1: - self.text += char + self.text = self.text[:self.caret_pos]+char+self.text[self.caret_pos:] + self.caret_pos += 1 elif char == "backspace": - self.text = self.text[:-1] + if self.caret_pos > 0: + self.text = self.text[:self.caret_pos-1]+self.text[self.caret_pos:] + self.caret_pos -= 1 + elif char == "delete": + if self.caret_pos < len(self.text): + self.text = self.text[:self.caret_pos]+self.text[self.caret_pos+1:] elif char == "space": - self.text += " " + self.text = self.text[:self.caret_pos]+" "+self.text[self.caret_pos:] + self.caret_pos += 1 + elif char == "arrow_left": + if self.caret_pos > 0: + self.caret_pos -= 1 + elif char == "arrow_right": + if self.caret_pos < len(self.text): + self.caret_pos += 1 + elif char == "home": + if self.caret_pos > 0: + self.caret_pos = 0 + elif char == "end": + if self.caret_pos > 0: + self.caret_pos = len(self.text) + else: print char,"undefined for tree text entry yet" if self.textLimit: self.text = self.text[:self.textLimit] + + def onFocus(self): + self.caret_pos = len(self.text) + + def onUnfocus(self): + self.caret_pos = -1 class PasswordEntry(Entry): """ single line entry that types as stars "*" """

by **sneftel** » Tue Sep 29, 2009 11:06 am

I've added support for themed mouse cursors to treegui. Let me know if you'd be interested in the patch for that or not.. I'm not sure if it fits with your vision for treegui.

by **treeform** » Wed Sep 30, 2009 6:17 pm

sneftel, wow you are doing alot!
Yes your patches are most welcome! I am really excited here.

I will plan out some time to review them soon.

Yes the font rendering is still a bit foobar.
Actually i been working on fixing the fonts privately. I will try to merge your and my glyph code changes. I feel there is a bug on how True Type interfaces with panda3d for True Type fonts are never pixel perfect.

two tone icons are just icons for the theme to use. There isn't a huge app the uses them right now. I just wanted to extend the sample to use the icons.

by **sneftel** » Fri Oct 02, 2009 11:34 am

Here's the patch for mouse cursors. Ensuring that the cursor is offset properly is left to the theme.

Code: Select all: === modified file treegui/core.py --- treegui/core.py 2009-09-07 16:30:30 +0000 +++ treegui/core.py 2009-10-02 16:31:54 +0000 @@ -127,6 +127,7 @@ self.parent = False self.children = [] self.idToFrame = {} + self.cursor = None self.pos = Vec2(0,0) self.windowsize = 800,600 @@ -170,8 +171,11 @@ def _draw(self): """ prods drawer to do its thing """ - self.drawer.draw(self.children) - + if self.cursor is not None: + self.drawer.draw(self.children + [self.cursor]) + else: + self.drawer.draw(self.children) + def _reSize(self): """ resize the window via panda3d internal events""" self.windowsize = base.win.getXSize(),base.win.getYSize() @@ -201,7 +205,10 @@ if gui.hoveringOver and gui.hoveringOver.onOut: gui.hoveringOver.onOut() gui.hoveringOver = None - + if self.cursor is not None: + self.cursor._x = self.mouseX + self.cursor._y = self.mouseY + self.cursor.visable = self.mouseInWindow def drag(self,widget,dragSnap=False): """ drags a widget """ @@ -269,3 +276,11 @@ self.node.show() else: self.node.hide() + + def setCursorStyle(self, style): + if style is not None: + if self.cursor is None: + self.cursor = Cursor() + self.cursor.style = style + else: + self.cursor = None \ No newline at end of file === modified file treegui/widgets.py --- treegui/widgets.py 2009-09-08 17:31:46 +0000 +++ treegui/widgets.py 2009-10-02 16:31:34 +0000 @@ -120,7 +120,12 @@ def __init__(self, icon, **placement): self.doPlacement(placement) self.icon = icon - + +class Cursor(Widget): + """ a theme-driven image used for the mouse pointer """ + clips = False + style = None + class Label(Widget): """ display a string of text in the ui """ clips = False

by **sneftel** » Thu Oct 22, 2009 9:56 pm

Any more motion on this? I've done some more work, but I don't want my copy to get too out of sync with the main distribution.. it's getting difficult to keep track of the diffs.

Panda3D Forums

[Alpha] TreeGUI

[Alpha] TreeGUI

designer

nice method

Who is online