Phoenix GUI

Monkey Archive Forums/Monkey Projects/Phoenix GUI

Richard Betson(Posted 2015) [#1]
Hi,

I have a working older port (like played around with it a year ago) of the window framework portion of my GUI system used in Phoenix USC ( Image Below ). This is a fully functional window framework that can manage images and text drawn to it, view ports, fonts, positioning, resizing, moving and more. A complete GUI system when coupled with the GUI component framework (sliders, buttons, list boxes, etc).

Here is a video of the window frame work running in HTML5 in Chrome at 800x600.
https://www.youtube.com/watch?feature=player_detailpage&v=tsRgtjYZiRQ

When I get some time I will port the current entire GUI system to Monkey-X. Cool to see that is runs and in HTMl5. :)

Phoenix USC GUI system in action:



MikeHart(Posted 2015) [#2]
Looks awesome!


Richard Betson(Posted 2015) [#3]
Thanks. Is there a GUI system available for Monkry-X? This one I am porting (from BlitzMax) will work on all targets.


MikeHart(Posted 2015) [#4]
I am trying to come up with my own but would love to integrate a 3rd party one into fantomEngine.


Why0Why(Posted 2015) [#5]
I think this would be very beneficial for Monkey, not to mention that it looks amazing! Thanks for making the effort.


Richard Betson(Posted 2015) [#6]
^Thanks.

I'll see what I can do. I am porting the latest version of the code to Monkey-X now. I'm sure my approach is different then the usual GUI system. There is no message system and no extensive library of GUI components. The basic idea is to keep it simple and speedy. So I provide list boxes, sliders and buttons. All can be used to construct other GUI components. For example the tab's in the above image use a user constructed tab function. I will probably flesh out the GUI component side (text box and maybe check box), but only as much as minimally needed. There is a high degree of flexibility in the system as you can construct a window and then fill it with images, text and GUI components, so because there is a separate window framework you can build what you like. All of it managed by the GUI systems window framework. The window framework is a good basis for lots of cool things and can be modified to support say mini3d.

Anyway. When I have the current version ported and running I will post a better Monkey-X example.


Richard Betson(Posted 2015) [#7]


Phoenix GUI window framework Flash demo:
http://www.phoenixusc.com/board/misc.php?page=PUSC_GUI

Hi,

I have a FLASH example posted on my website (see above image and link). It is an example of the window framework and uses tile-image and text in one window and bouncing coin images in the other. To select a window click on it. To move a window click on it and drag. Windows resize on the corners.

The demo is a basic example of what you can do with the window framework. After I finish porting the GUI components I will post a new demo featuring both frameworks.

So cool to see code written in BlitzMax port so well to Monkey-X.


Richard Betson(Posted 2015) [#8]


Hi,

Here is a video showing my window framework running part of the mini3d example "mojo bunnies" in a window. So it is possible to do although I would need to modify mini3d perhaps a bit to fully be able to support it. I'm Still trying to figure out mini3d as there does not seem to be much in the way of documentation for it.

Anyway, it works to a point. :)


Richard Betson(Posted 2015) [#9]


It might not look like much but the GUI component framework is just about ported. Here you can see functioning buttons in windows. I should have this all working in a couple of weeks or so (fingers crossed). :)


Richard Betson(Posted 2015) [#10]


Hi,

This is the GUI system running on an Android tablet. Neat. Coming along nicely. :)


Richard Betson(Posted 2015) [#11]


List boxes are almost finished. Once their done I will post an example more like what appears in my game.

I will be posting this as a mod once I figure out how to do that, clean up code and add a target specific option (HTML5 turn off SetColor() ). I also have to put together some examples and docs, so lots to do.

By the way this GUI system will be available for BlitzMax as well.


Why0Why(Posted 2015) [#12]
Looking good!


Richard Betson(Posted 2015) [#13]
What would you rather use as a command syntax in this GUI:
Open_Window()
Clear_Window_Image()

OR
OpenWindow()
ClearWindowImage()


I prefer using the white space (underscore) for readability and is how I have it now.


Why0Why(Posted 2015) [#14]
I have never cared for underscore characters.


Danilo(Posted 2015) [#15]
OR
w:Window = new Window()
w.Clear()



Richard Betson(Posted 2015) [#16]
Well actually I use:
my_window:P_Window=New P_Window
my_window.Open_Window()
my_window.Clear_Window_Image()

OR
my_window:P_Window=New P_Window()
my_window.Clear_Window_Image()


I was really asking about the use of underscores and I should have been more specific in the convention. But you bring up a good point about how the it should be laid out convention wise.

For example use of a generic object or any window object to update window framework.
'Typical window setup.
my_window:P_Window=New P_Window(window_background_image,x,y,width,height,Blend,Alpha,Red,Green,Blue)
my_window.Set_Window_Border(left_inage,right_image,top_image,bottom_image)
my_window.Set_Border_Style(AlphaBlend,Alpha,Red,Green,Blue)
my_window.Set_Window_Resize(True/False)
my_window.Show_Window_Border(True/False)		

my_window2:P_Window=New P_Window(window_background_image,window_image,x,y,width,height,Blend,Alpha,Red,Green,Blue)
my_window2.Set_Window_Border(left_inage,right_image,top_image,bottom_image)
my_window2.Set_Border_Style(AlphaBlend,Alpha,Red,Green,Blue)
my_window2.Set_Window_Resize(True/False)
my_window2.Show_Window_Border(True/False)		

'Main loop ex. 1
While 

my_window.Update_Window() 'Updates / Manages  All Windows

Wend

'Main loop ex. 2
generic_window:P_Window=New P_Window 'Generic window Object
While 

generic_window.Update_Window() 'Updates  / Manages All Windows

Wend


There are also a few other Methods that use this type of convention. It's actually flexible to do it this way and for porting reasons makes good sense, at least to me.


Danilo(Posted 2015) [#17]
In my opinion it does not make sense to include the class name in the method names.
Update_Window() looks like a procedural stand-alone function.
Within a Window class, it could be just Update(), because you already work with a Window object.
Procedural Update_Window() becomes window.Update() with Object-Oriented Programming.
my_window.Set_Window_Border(left_inage,right_image,top_image,bottom_image)
my_window.Set_Border_Style(AlphaBlend,Alpha,Red,Green,Blue)
my_window.Set_Window_Resize(True/False)
my_window.Show_Window_Border(True/False)
my_window.Update_Window()

Would become:
my_window.SetBorder(left:Image, right:Image, top:Image, bottom:Image)
my_window.SetBorderStyle(alphaBlend:Bool, alpha:Int, red:Int, green:Int, blue:Int)
my_window.ShowBorder(show:Bool)
my_window.Update()

my_window.SetResize(resize:Bool) ' Setter +
my_window.GetResize()            ' Getter
                                 '   or
my_window.Resizeable = True      ' Property
x = my_window.Resizeable



Richard Betson(Posted 2015) [#18]
I can easily drop the underscores and and shorten the method names. Mainly my concern at the time was collisions in names. Syntax and word concatenation is sort of a personal preference thing for sure. Still I think most would expect to see something similar to above.

So if no one else objects I'll lay it out similar to what Danilo suggest.


Danilo(Posted 2015) [#19]
Maybe something like this:
Pure functions:
---------------

.Open()
.Update()
.Clear()

Properties using Setter/Getter:
-------------------------------

window.SetTitle()      /    window.GetTitle()
window.SetTooltip()    /    window.GetTooltip()
window.SetFrontColor() /    window.GetFrontColor()
window.SetBackColor()  /    window.GetBackColor()

widget.SetTitle()      /    widget.GetTitle()
widget.SetTooltip()    /    widget.GetTooltip()
widget.SetFrontColor() /    widget.GetFrontColor()
widget.SetBackColor()  /    widget.GetBackColor()

or Properties (Set/Get/ReadOnly/WriteOnly): Set / Get / Is?
-----------------------------------------------------------

thread.IsPaused
window.IsHidden
widget.IsHidden
window.IsEnabled
widget.IsEnabled
menuItem.IsEnabled

window.Title
widget.Title

window.Tooltip
widget.Tooltip

window.Resizeable
window.Moveable

window.FrontColor
widget.FrontColor

window.BackColor
widget.BackColor

window.Background
widget.Background

window.BackgroundImage
widget.BackgroundImage

Not always an easy decision...


Richard Betson(Posted 2015) [#20]
^Right on.

I am also looking into some dynamic scaling of the GUI windows and components. I'm not sure if it's practice or possible but having the ability to code for one resolution and have the GUI scale automatically to accommodate say HD displays would be cool. Perhaps also factoring in the display size (through input) would be in order. The same scaling could be applied to images and text hanged by windows.

Anyway looking into it.


Why0Why(Posted 2015) [#21]
That would be a great feature, Richard. Most of the stuff I do is tile based and procedural, so I always code everything variable from the start. It is awesome to put in any resolution and everything "just works." Having the GUI be the same would be excellent. My suggestion would be to choose a target res that is the base. Then add an optional parameter for scaling and another optional parameter for how much scaling. By default, have it be based on your standard, but let it be over ridden.

Just some thoughts...


Richard Betson(Posted 2015) [#22]

GFLW3 1200x700

Hi,
I am making some code examples for the Phoenix GUI system (it had to have a name :D ) and the above is one example for drawing images to a window. Below is the actual code example.

Edit - ^The compiled GFLW3 example for above available at my site.
http://www.phoenixusc.com/board/misc.php?page=phoenix-gui-system


.
.
The GUI system breaks down to this block diagram of the framework.


Both the window system and the GUI components system are available to the program (application). By using the window system all GUI components are automatically updated. Direct access to the GUI component framework (no window) is also available to the program but requires additional updating.

The basic premiss is the GUI system provides windows which are very much like a container. The window system will manage whatever you decide to put into it be that an image or text or GUI components. Soon I will add support for drawing primitives and because this GUI is written in native code can support other types of drawing to windows such as 3D or whatever MX2 uses. To get a sense of what I am talking about look over the code above. If you look you can see that the 'tile image' windows close window [X] button is managed by the program. So the window is a basic container and the button to close the window is managed by the program this allows lots of flexibility and creativity in design.

Still lots to do but I should have something up for Monkey-X soon. Whatever I release it will be an early version and not final in architecture design, a preview I guess.

Off to code,


Richard Betson(Posted 2015) [#23]
^The compiled GFLW3 example for above available at my site.
http://www.phoenixusc.com/board/misc.php?page=phoenix-gui-system


Richard Betson(Posted 2015) [#24]
Hi,

I've been really working over this GUI to support my 2D gaming framework attempt for Phoenix USC (a full on gaming framework outside of the game). I have thinned out he code and I am running about 3500 lines at present which for what I can do with this is pretty awesome. I would suggest following this thread on Phoenix USC to follow the progress of the GUI for now. I will be using this GUI to support the gaming framework.

I have made so many fixes and improvements I just cant list them all but the GUI is very solid now and as I start to integrate it into my 2D gaming framework I make modifications and additions making its state fairly fluid. A good thing for sure as it allows me to expand the features and support other supporting frameworks such as a user interface.

So I will update this thread when needed but my focus is on a 2D gaming framework for Monkey.

Rock on,