FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

New GUI system in development.
Goto page Previous  1, 2, 3  Next
 
Post new topic   Reply to topic     Forum Index -> ArcLib
View previous topic :: View next topic  
Author Message
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Thu Jul 20, 2006 11:04 am    Post subject: Reply with quote

I can now load a labels and buttons and images with this code...

Code:

<layout name="imagetest" skin="skin.xml"> 
    <image x="0" y="0" width="100" height="125" name="myimg" color="255;255;255;255">
        <frame animation="default" image="penguin.png" speed="1000" soundfx="null"/>
        <frame animation="default" image="king.jpg" speed="1000" soundfx="null"/>
    </image>
    <label x="100" y="125" fontheight="32" name="lbl1" color="0;255;0;255" fontcolor="255;0;0;255" padding="30">
        Hello Label World
    </label>     
   
    <button x="100" y="250" fontheight="32" name="btn1" color="255;255;255;255" fontcolor="255;0;0;255" padding="30"/>
   
</layout>



Buttons can have text, too.

Although I'm starting to wonder about the skin idea, as the pictures will start to look 'stretched' at different sizes. :-/ Maybe this is just the artists + layout designers problem? Or is there something I can do, hrm...
Back to top
View user's profile Send private message AIM Address
Lutger



Joined: 25 May 2006
Posts: 91

PostPosted: Sat Jul 22, 2006 9:45 am    Post subject: Reply with quote

clayasaurus wrote:
I can now load a labels and buttons and images with this code...

(code snippet)

Buttons can have text, too.

Although I'm starting to wonder about the skin idea, as the pictures will start to look 'stretched' at different sizes. :-/ Maybe this is just the artists + layout designers problem? Or is there something I can do, hrm...


Looking good.

About the skin messing up with textures, perhaps it's not such a problem.
When you use something as static as raster graphics for a gui, you will need to hand-tweak it anyway.

I can think of two things you can do to make it easier:
- Let it be possible that in the skin xml you can specify a fixed ratio width / height, which must be true for the widget that uses a texture.
- Allow for widgets with a fixed size.

But besides textures, skinning is good for coloring and perhaps gradients too. A very simple gui maybe doesn't even need textures.
Back to top
View user's profile Send private message
JoeCoder



Joined: 29 Oct 2005
Posts: 294

PostPosted: Sat Jul 22, 2006 6:01 pm    Post subject: Reply with quote

Here's my two cents:

Quote:
one thing that helped me with positioning was the ability for each widget to contain children widgets, and letting children specify their position and size relative to their parents. I think my code was following the composition pattern.

I think doing this will make things very much more flexible in the long run, since it makes putting basic widgets together into more complex ones much easier. If you aren't already, you should also consider having a base widget class with basic properties such as positioning, size, opacity, texture, etc. and then inheriting all other types of widgets from that.

Also, separating structure (layout.xml) from style (skin.xml) is a good approach and I hadn't even thought of doing such myself (even though I spend about 15 hours a week working with html and css).

With today's monitors of all types of aspect ratios (4:3, 5:4, 16:9, and 16:10), how do you plan on making interfaces that scale and strech to look properly on all of them? Perhaps add support for fluid and semi-fluid layouts as with html? Maybe also for widget's that are left, centered, or right aligned?

Finally, this is just a suggestion, but in my engine I'm hoping to support animation at the texture level (including maybe even loading up ogg theora, gif, avi?) and then those textures can be assigned to the background of any widget. And the widget could perhaps have options for tiling, stretching, repeating, etc. And if you ever make a move to support render-to-texture, this increases the possibilities even more. For this to work properly, I'll probably split things up into a Texture class that is an actual texture in memory and then some type of instance class that combines textures for animations and other effects. Dunno yet.

P.S. I'd love to be able to share some code back and forth, but I wonder if our ideas of what a gui system should be are similar enough to make it happen.
Back to top
View user's profile Send private message
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Mon Jul 24, 2006 10:09 am    Post subject: Reply with quote

These are all good ideas, it will take me a while to digest them. I am fond of the tiling idea which would eliminate strech in certain areas.

All my widgets do share a common Widget class.

For rendering of my widgets I am using my own sprite class which supports multiple animations and sound effects, so I am not sure how sharable my code is but it is all in the SVN as I develop it, though I wouldn't recommend using it until I finish it Razz

As for the 'widget within widget' idea, this is what my what layout scheme is for as I will allow for layouts inside of layouts, and each layout is made up of the four building block widgets (Image, Label, Button, Textfield).

I am working on the textfield widget now and it should be done soon, the hardest part is just getting and allowing access of the text inside of the textfield in a nice way. I already have a blinking cursor, arrow keys for moving back and forth inside of the text field, backspace for deleting from the back and delete for deleting from the front.

What I need for it now is...

* Up and Down arrow cursor movement
* Mouse select cursor position
* Keyboard highlight text
* Mouse highlight text
Back to top
View user's profile Send private message AIM Address
JoeCoder



Joined: 29 Oct 2005
Posts: 294

PostPosted: Mon Jul 24, 2006 10:24 am    Post subject: Reply with quote

Cool.

I'm not to the point yet in my own engine where I'm ready to start developing the GUI, but when I do I'll certainly lookup your code. The textbox especially should be useful.
Back to top
View user's profile Send private message
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Tue Jul 25, 2006 5:10 pm    Post subject: Reply with quote

This mouse index selection is really bugging me, I might opt out for just keyboard index selection.

[edit] got it to work, although it is a bit handicapped now but I might be able to work around that.

[edit2] it appears to work for multiple lines now, although I'm not terribly proud of the solution but functionality is there

[edit3]
my input box works good enough, although the only featuers I've added were

* Left-right arrow key index movement
* mouse selection
* multi line support text boxes

I don't feel like working forever on this one, or maybe I'll come back to it in the future and add highlighting and up/down selection for multiline, but I don't deem those 'critical' features I guess.
Back to top
View user's profile Send private message AIM Address
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Thu Jul 27, 2006 9:26 pm    Post subject: Reply with quote

Inputbox is now finished for now ... here is the XML code to load it...

Code:

    <textfield x="200" y="350" maxwidth="500" fontheight="32" name="txt1" color="255;255;255;255" fontcolor="0;255;0;255" padding="30" maxlines="1">
        type text here...
    </textfield>


beginning next monday I will start on the GUI class to hook up callbacks and hold multiple layouts, and probably the week after that I will create the layout editor.
Back to top
View user's profile Send private message AIM Address
pragma



Joined: 28 May 2004
Posts: 607
Location: Washington, DC

PostPosted: Fri Jul 28, 2006 7:57 am    Post subject: Reply with quote

Hi.

I've been lurking on this thread for a while now, and just wanted to say that I'm quite impressed with all this and cannot wait to see what comes of all this.

There was much talk a while back about what the right tact for D is, with respect to GUI development and support. There were several folks, myself included, that felt that backing GL as the lowest-common-denominator for GUI rendering was the most portable approach available - even if it is quite labor intensive to build a lib from scratch. As Arc backs SDL (I think?), that's just about as good, seeing how portable SDL is.

Anyway, I just wanted to say thank you for your efforts on this front. Who knows, I may be using this portion of your lib in the future as a windowing lib on other projects. Wink
_________________
-- !Eric.t.Anderton at gmail
Back to top
View user's profile Send private message Yahoo Messenger
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Fri Jul 28, 2006 8:34 pm    Post subject: Reply with quote

Maybe after a few rewrites Shocked Yes my lib uses SDL + OpenGL, and SDL 1.3 is supposed to get multi window support and not destroy OpenGL's context on window resizes in Windows which will make SDL a very good choice to develop such a GUI on.

I wouldn't touch it until I work out all the bugs and get some feedback on features to add/subtract, also right now it is pretty well integrated into my library as I havn't designed it to be used seperately, but of course it could be possible.

The inputbox code is not optimized at all right now either, I'd see it as 'hackish' but I'm happy with its functionality in hindsight.

Thanks for the interest!
~ Clay
Back to top
View user's profile Send private message AIM Address
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Thu Aug 03, 2006 4:24 pm    Post subject: Reply with quote

Alright, I've been too busy this week with family things, but I did get a tiny bit done, if the widgets are not inside the defined layout bounds then it will trigger an assert error.

This fri-sun is my last work week, and then I'll be visiting my parents and preparing for school, however I hope to get the whole GUI system and Physics system done before school starts.

The next thing on the GUI todo list is to support layouts inside of layouts, which will work like...

<layout ...>

<childlayout or layout = "layout.xml" x="30" y="10" />

</layout>

~ Clay
Back to top
View user's profile Send private message AIM Address
JoeCoder



Joined: 29 Oct 2005
Posts: 294

PostPosted: Fri Aug 04, 2006 8:40 am    Post subject: Reply with quote

Yeah, I know all about being busy too. Worked on my engine probably 3 hours in the last month and with my last semester at the university rapidly approaching I'm not sure where I'll find any time. And then there's all the clients who want their websites finished...

If only I didn't have to sleep.
Back to top
View user's profile Send private message
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Wed Nov 01, 2006 10:42 pm    Post subject: Reply with quote

/me gets back to work to finish the GUI system

Here is a picture of a recap of how the system will work Smile

http://www.dsource.org/projects/arcgames/browser/web/gui.png?format=raw

Features to back port from current arc version (in freeuniverse until next arc release)

1) Game Sprite load based on XML file

2) My current sprite in arc will become GUISprite because I want my GUI bounds to be able to be defined by polygons with holes in them

3) Finish GUI off, use the sig-slot now in DMD

4) create replacement layouts for freeuniverse GUI stuff

5) WSIG GUI Editor?
Back to top
View user's profile Send private message AIM Address
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Fri Nov 17, 2006 3:04 pm    Post subject: Reply with quote

Alright... a little change of plans.

I realized that an image skin based GUI system is clunky and probably not the best solution, and that 'hard-coded' GUI's tend to look better.

I am going to redesign the GUI to
1) Have box collision style for all widgets, not sprite based
2) Use hard-coded 'skins', easily be able to program new skin or change skins at run time
3) Use DMD's sig/slot

The only thing I am really changing is the skin system, layouts will be the same, and I will still have the main GUI class.

Hooking signals up to the GUI class will look like

gui.getLayout("lay1").getWidget("btn1").connect(myobserver);

I do not have time right now to really develop it now, I just thought of a slightly different design.

~ Clay
Back to top
View user's profile Send private message AIM Address
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Mon Nov 27, 2006 9:29 am    Post subject: Reply with quote

Alright, the new design changes really helped alot.

Instead of skins, hard coded 'themes' will be used (and they can be changed at run time). Right now I only have 1 'freeuniverse' style theme.

Hooking up signals to the gui looks like
gui.getLayout("layout1").getWidget("myimg").clicked.connect(&handle.image);

layout xml files look like

Code:

<layout name="imagetest" x="30" y="30" width="600" height="500"> 
    <image x="0" y="0" width="100" height="125" name="myimg" color="255;255;255;100" image="guibin/penguin.png"/>
   
    <label x="100" y="25" fontheight="32" fontname="guibin/font.ttf" name="lbl1" color="0;255;0;255" fontcolor="255;0;0;255" padding="30">
        Hello Label World
    </label>
   
   
    <button x="100" y="150" fontname="guibin/font.ttf" fontheight="32" name="btn1" color="255;255;255;255" fontcolor="255;0;0;255" padding="30">
        Click on me!
    </button>
   
    <textfield x="100" y="220" maxwidth="400" fontname="guibin/font.ttf" fontheight="16" name="txt1" color="255;255;255;255" fontcolor="0;255;0;255" padding="30" maxlines="5">
one,
two,
three,
four,
five
    </textfield>

 
    <textfield x="100" y="350" maxwidth="400" fontname="guibin/font.ttf" fontheight="16" name="txt2" color="255;255;255;255" fontcolor="255;0;0;255" padding="30" maxlines="1">
        text
    </textfield>
 
   
</layout>



gui xml files look like

Code:

<gui>
    <layout name="layout1" file="layout.xml" hide="false"/>
</gui>


GUI's hold a list of layouts, and whether or not to display them and their name.

A sample application for the GUI looks like

Code:

import arc.gui.layout;

import    arc.input,
      arc.window,
      arc.log,
      arc.texture,
      arc.font,
      arc.gui.gui,
      arc.physics.time;

import std.stdio, std.string;

class HandleGUI
{
   void label()
   {
      writefln("click on label");
   }

   void image()
   {
      writefln("click on image");
   }
}

int main()
{
   arc.window.open("GUI Development", 800, 600, false);
   arc.input.open();
   arc.log.open();

   HandleGUI handle = new HandleGUI;

   GUI gui = new GUI("gui.xml");

   gui.getLayout("layout1").getWidget("myimg").clicked.connect(&handle.image);
   gui.getLayout("layout1").getWidget("lbl1").clicked.connect(&handle.label);
   
   while (!arc.input.keyDown(ARC_QUIT))
   {
      arc.input.process();
      arc.window.clear();

      gui.process();
      gui.draw();

      arc.window.swap();
   }

   scope(exit) { arc.window.close(); arc.log.close(); }

   return 0;
}


It is basically done, just needs testing, tweaking, and support for more themes.
Back to top
View user's profile Send private message AIM Address
clayasaurus



Joined: 21 May 2004
Posts: 857

PostPosted: Sat Mar 24, 2007 8:25 am    Post subject: Reply with quote

This saturday I updated the GUI code for the new font API and input API. However, lastChars is broken :-/

Ninput unittest is updated as well.

edit: never mind, lastchars is working well, err on my part. Textfield now works with the new font, looks nice.

edit: Got my GUI system in the state I last left it now, except it renders with the new font code. Cgui unit test works. unittestbin had to be updated as well as some gui code.

By the way, this GUI system is pretty much complete, except that I've never actually used it (the design is solid, however). I should probably break it in for the asteroids example.

~ Clay
Back to top
View user's profile Send private message AIM Address
Display posts from previous:   
Post new topic   Reply to topic     Forum Index -> ArcLib All times are GMT - 6 Hours
Goto page Previous  1, 2, 3  Next
Page 2 of 3

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group