[Alpha] TreeGUI

Return to Panda Features in Development

[Alpha] TreeGUI

Postby treeform » Fri Oct 12, 2007 8:18 pm

Last edited by treeform on Sat Nov 14, 2009 9:45 pm, edited 3 times in total.
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

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

Interesting! To what extent will it be stylistically customizeable?
Josh Yelon, Teacher, Carnegie Mellon Entertainment Technology Center
Josh Yelon
 
Posts: 1360
Joined: Wed Mar 30, 2005 8:30 pm

Postby 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.
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

Postby 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.
rdb
 
Posts: 9580
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Postby Liquid7800 » Mon Oct 29, 2007 3:43 am

Great work thanks for the efforts
User avatar
Liquid7800
 
Posts: 140
Joined: Mon Feb 19, 2007 1:22 am

Postby 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?
User avatar
ColShag
 
Posts: 59
Joined: Mon Nov 26, 2007 7:50 pm

Postby 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?
Image

Use inkscape to draw out gui themes?
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

Postby 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.
User avatar
ThomasEgi
 
Posts: 2149
Joined: Fri Jul 28, 2006 10:43 am
Location: Germany,Koblenz

Postby ColShag » Mon May 19, 2008 3:13 pm

Sounds great, I'm all for inkscape.
User avatar
ColShag
 
Posts: 59
Joined: Mon Nov 26, 2007 7:50 pm

Postby 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?
Bold words are keyword to help you decide quickly if this post interest you or not....
(you should be able to understand the post by reading only bold words :-))
User avatar
Manakel
 
Posts: 318
Joined: Fri Jan 21, 2005 2:25 pm
Location: France

Postby chombee » Tue May 20, 2008 8:44 am

If Manakel is right, that does seem like quite a nice workflow.
chombee
 
Posts: 244
Joined: Fri Jan 13, 2006 10:09 am

Postby 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.
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

Postby 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?
User avatar
ColShag
 
Posts: 59
Joined: Mon Nov 26, 2007 7:50 pm

Postby treeform » Tue May 20, 2008 6:16 pm

ok i'll put that on the list.
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

Postby 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: Image
use blenders project from view to map right on to the texture
Image
uv map squares over every control you want ...
Image
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.
Image
the final this is that every thing should be named according to function consult the documintation on what that will and might be.
Image
texture used:
Image
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?
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

designer

Postby 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 ?
lefty
 
Posts: 4
Joined: Wed Jun 18, 2008 12:24 pm

Postby 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.
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

nice method

Postby 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
Master Tanker
 
Posts: 3
Joined: Sat Jan 03, 2009 10:47 pm

Postby treeform » Mon Jan 05, 2009 12:51 pm

This stuff is not in the reference. Its not in panda3d. It just my own subsystem.
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

Postby 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.
chodaz
 
Posts: 9
Joined: Fri Jan 09, 2009 9:12 am

Postby treeform » Fri Mar 13, 2009 12:15 pm

hmm i probably rewrite treegui couple of times now. Ill try to make a new branch.
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

Postby 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
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

Postby 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.
sneftel
 
Posts: 28
Joined: Wed Aug 12, 2009 8:12 am

Postby 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.
sneftel
 
Posts: 28
Joined: Wed Aug 12, 2009 8:12 am

Postby 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
sneftel
 
Posts: 28
Joined: Wed Aug 12, 2009 8:12 am

Postby 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 "*" """

sneftel
 
Posts: 28
Joined: Wed Aug 12, 2009 8:12 am

Postby 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.
sneftel
 
Posts: 28
Joined: Wed Aug 12, 2009 8:12 am

Postby 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.
User avatar
treeform
 
Posts: 2106
Joined: Sat May 05, 2007 5:15 pm
Location: SF, CA

Postby 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
sneftel
 
Posts: 28
Joined: Wed Aug 12, 2009 8:12 am

Postby 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.
sneftel
 
Posts: 28
Joined: Wed Aug 12, 2009 8:12 am

Next

Return to Panda Features in Development

Who is online

Users browsing this forum: No registered users and 1 guest