Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

DarkBASIC Professional Discussion / Programming your own GUI library with DBPro?

Author
Message
Yodaman Jer
User Banned
Posted: 26th Oct 2010 21:58 Edited at: 26th Oct 2010 22:01
Link
Hello everybody!

This is something I have been wondering about for at least a year now. I've Googled "programming GUIs" and "creating user interfaces", but all of the tutorials I get either focus strictly on the graphics design side of the task, or teaches you how to program a GUI in C++.

My Hopeful Goal:
To create my own, custom designed user interface for all of my future game/level editor projects and whatever else might work with it. I would use BlueGUI (I love that plugin!), but I just want to try my hand at creating my own unique look.

Basically, I want to create my own library of functions to create GUI. There's just a few (perhaps very elementary) things that I do not understand about programming GUI and I was hoping you guys could help me clear that up.

1 - Scaling elements. You know how when you click the bottom corner of a window and drag it to re-size, the GUI automatically stretches to fit in the new window? How would I do that? This leads me into another question....

2 - Detecting just where an element (such as a button) is without pre-defining areas. Right now I can detect and invert buttons with the following code...



That works well...as long as I plan to keep the buttons I'm highlighting in those exact coordinates forever. Is there a way I can write the code to look for where the boxes are being drawn without having to write a ton of If...EndIf statements?

3 - Creating dialog boxes. I think I could do this by creating some boxes, pasting them close by to each other and then snapping an image of it to paste to the screen. I just don't know how I would create the buttons on the top-right corner (for closing the box), or how I would create the box to fit any size of text and to automatically create it with the width of the text (+10 for the border size) in mind.

That's really it. I don't have need for much other stuff in my GUI system, except for a menu bar on the top of the screen. But stuff up there already covers all of that.

Here's an image of some GUI elements I've created with just the box command in DBPro:


Custom GUI by CoffeeCoder, on Flickr

The top button is highlighted and the bottom two aren't. The grey gradient was inspired by Ubuntu's dark ambiance theme.

So, who here has done what I aim to do? Can anybody offer advice and tips and techniques to me please? All help (in any form) is greatly appreciated!

Thanks!
-CoffeeCoder

EDIT:

Here's my source code for the above example. It's really sloppy, but right now it's the only way I know how to create my own GUI elements.



Back to top
Profile
BatVink
Moderator
23
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 26th Oct 2010 22:34 Edited at: 26th Oct 2010 22:37
Link
I have my own portable GUI system, this is how I break it down:

1. HUD System - controls entities, images and placement. A Hud comprises of a Collection (Highest level), Groups and entities. entities within a group are placed in relation to one another, groups are placed on the screen relatively. That is, they are placed relative to the left, middle or right, top,centre or bottom. Thus it's independent of the screen size.
Textures are organised in groups.


2. Effects System. Tracks scale, placement, alpha and rotation effects over time. Effects are applied to entities or groups, with staggered or synchronised timing.

3. Font System. Uses the Texture system and automates loading of bitmap fonts into texture groups. Also creates phrases (HUD groups) and Permaphrases (single Textures made up of multiple characters).

4. Menu System. Combines the font, effects and hud system to make menus that follow simplified HUD rules.

5. Sound System. Allows collections of sounds that play synchronously or simultaneously, and allows for simplification of multiple same-sounds, such as bullets (not Hud related but a simple extension so it is included)

6. Additional data collections, such as display resolutions (can be fine-tuned by min/max and desired screen ratios) and DirectX effect availability.

It's quite comprehensive, but worth putting the time in if you plan to create several projects.

This is based on 3D Plains to allow better effects. And one last thing - create yourself a Wiki to keep track of your Hud capabilities!

Back to top
Profile PM Email
baxslash
Valued Member
Bronze Codemaster
19
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 26th Oct 2010 22:39
Link
Phew, a lot of questions. A lot of the answers (as far as I can tell) will depend on how you are planning to display the GUI.

Are you going to use boxes/rounded boxes (using d3d plugins or DBP native commands) or sprites?

1-Scaling elements: if you are using sprites this is slightly more complicated as you need an image for the middle of the window (the bit with buttons/labels etc. in it), an image for each corner and an image to be stretched for each side.

2-Detecting where an element is: this is actually easier using sprites as you can just check for sprite collision. Just have a 1x1 pixel transparent sprite positioned where the mouse is each loop and check to see which sprite it collides with. Using boxes you'll have to keep track of gadget sizes and positions using arrays.

3-Dialogue boxes: Again this will depend on the method you plan on using but I hope I've already given you a rough idea how to get this to work?

I like what you already did and the style of your GUI. If you are heading down the "box" route I would suggest using cloggy's "D3D" dll as it's faster and offers more design options (like rounded corners on boxes), and to use arrays to store your gadget positions/sizes. Then think about writing functions specific for checking which gadget your mouse is over...

I hope that helps!

Back to top
Profile PM Email
thenerd
17
Years of Service
User Offline
Joined: 9th Mar 2009
Location: Boston, USA
Posted: 26th Oct 2010 23:03
Link
OpenFPS has a whole system for the UI, basically, instead of having different types of elements such as buttons, windows, and checkboxes, there is only one base that the system starts off with. We call this a Panel. A Panel can be anything, it's basically just a sprite. The UI module has different functions, that can be called to add properties to the panel.
For example, to create a window that could be dragged, you would use these commands:
UI_MakePanel(Image,X,Y,Pointer)
UI_SetDraggable(Pointer,1)
UI_AddMouseOverImage(Pointer,MouseImage)
This is pseudo-code, I left out items such as the loading of images and globals for clarity. Other panel commands include UI_SetParent(), UI_SetAlpha(), and others. There was also a function called UI_SetFunction(), that could take a functions name in a string, and then call it when the element was selected. Using these commands, you can create practically any UI element, and the UI module takes care of the rest, just by calling UI_Handle() each loop.

Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 26th Oct 2010 23:25
Link
@baxslash:

I was aiming to create my GUI with the BOX command, as it's actually very capable. I'll look into using Cloggy's dll. Would I still be able to do gradient effects with it or would I have to write my own color blending function?

Quote: "Detecting where an element is: this is actually easier using sprites as you can just check for sprite collision. Just have a 1x1 pixel transparent sprite positioned where the mouse is each loop and check to see which sprite it collides with. Using boxes you'll have to keep track of gadget sizes and positions using arrays."


Hmm...using sprites definitely sounds easier in that case, but aren't sprites slower than boxes? I knew that if I stuck with just using boxes (or even outside images) I'd have to use arrays to keep track of everything. I'd almost prefer to do it that way, just to make it a little more versatile and perhaps faster. I'm still not sure how I'd detect where a box is though (unless I used pre-defined areas, but that leads back to screen resolution issues which is related to my "scaling" question....)

Quote: "3-Dialogue boxes: Again this will depend on the method you plan on using but I hope I've already given you a rough idea how to get this to work?"


I definitely plan to stick to using the native box command (or at least programmatically generated graphics...I really don't want to use outside media), but I'm still not entirely sure how I'd take the amount and size of text into account when calling a CreateDialog() function.

Quote: "I like what you already did and the style of your GUI."

Thanks! I just played with it until I found a color scheme I liked. Nothing fancy. I was definitely inspired by Ubuntu's dark ambiance theme.

@BatVink:

I like how you break it down into groups.

Quote: "HUD System - controls entities, images and placement. A Hud comprises of a Collection (Highest level), Groups and entities. entities within a group are placed in relation to one another, groups are placed on the screen relatively. That is, they are placed relative to the left, middle or right, top,centre or bottom. Thus it's independent of the screen size."


I knew that I'd have to position it all relatively. I'm just a little confused on how to do that. In CSS it's pretty easy, but in DBPro I'm not so sure. How do I position the elements in a relative way? How do I make it independent of the screen size? I know this is simple, but I'm just not very familiar with it yet.

@thenerd:

Thanks, your system sounds great, but I'm more interested in creating my own GUI system. Otherwise I'd be using BlueGUI for all of my projects. I just want to learn how to create my own GUI functions library so that I can give my programs a more custom look.

Thanks for everything so far, guys!

Back to top
Profile
thenerd
17
Years of Service
User Offline
Joined: 9th Mar 2009
Location: Boston, USA
Posted: 26th Oct 2010 23:54
Link
Quote: "I was aiming to create my GUI with the BOX command, as it's actually very capable. I'll look into using Cloggy's dll. Would I still be able to do gradient effects with it or would I have to write my own color blending function?
"

I'd agree, you should look into the D3D plugin, it's a bunch faster than the classic 2d commands, and does have gradients like the normal box command. the syntax is the same too:
D3D_BOX Left, Top, Right, Bottom
D3D_BOX Left, Top, Right, Bottom, Colour
D3D_BOX Left, Top, Right, Bottom, Top Left Colour, Top Right Colour, Bottom Left Colour, Bottom Right Colour

Sprites are a lot faster than any native 2d commands, because they actually use a 3d polygon positioned in the viewport instead of drawing pixels directly to the screen. However, D3d's 2d commands are faster than sprites and the native commands, so I'd say they are the probably the best option.

Quote: "Thanks, your system sounds great, but I'm more interested in creating my own GUI system. Otherwise I'd be using BlueGUI for all of my projects. I just want to learn how to create my own GUI functions library so that I can give my programs a more custom look. "

I was just saying basically how my system works, we have an array that is based off of a UDT, with different settings that can be turned on through functions. I think that using one array is really the best way to have a flexible system...The only problem is that deleting array elements can be tricky.

Back to top
Profile PM Email
baxslash
Valued Member
Bronze Codemaster
19
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 27th Oct 2010 00:25
Link
The d3d plugin is also great for text. I use it all the time as a replacement for the text/print commands. It even has an increadibly quick 3D text creation tool! I used it for my 3D highscore table in "Odd Blox"...

Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 27th Oct 2010 00:47
Link
I am definitely going to try out Cloggy's D3D then. It sounds awesome.

I am still unsure of how to highlight any button no matter where it is though. I was going to try sprites, but now I'm back to the D3D plugin and thus am back to question #2. Does anybody know of any examples that I could look at?

Back to top
Profile
Yodaman Jer
User Banned
Posted: 27th Oct 2010 02:05
Link
Hmm...I realized I have a few more questions.

I just tried to write a simple test for command similar to something like "DialogBox", and realized a couple of things...

First, unless I'm mistaken, you can't use variables from a separate .dba file full of functions unless you #include another .dba file full of global (or constant) variables. For example, I can't do something like the following...



...without having my program #include both the functions file and constants file. The constants file would have all the variables containing color information (as DWORDs) and I'd simply have to type the color name into the color fields of the function when I'm telling my program to create some GUI.

Am I on the right track at all here?

Back to top
Profile
baxslash
Valued Member
Bronze Codemaster
19
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 27th Oct 2010 10:29 Edited at: 27th Oct 2010 10:33
Link
Quote: "I am still unsure of how to highlight any button no matter where it is though. I was going to try sprites, but now I'm back to the D3D plugin and thus am back to question #2. Does anybody know of any examples that I could look at?"

I would use arrays to store your gadget position...



EDIT: Regarding your functions/constant files, you are right that you must include the constants file if you intend to use constants from it in your functions.

Back to top
Profile PM Email
Duke E
17
Years of Service
User Offline
Joined: 10th Mar 2009
Location:
Posted: 27th Oct 2010 12:44
Link
I'm on my second GUI =).

My first attempt was a button image design with a couple different images for normal, pressed, and mouseover states. And a second (blended) textures with the buttons text, quite many as i had to make one texture for every text change, creating the textures realtime was too slow with native DBP command bitmap operations.

My new attempt is 3D object based (as was my first) i.e planes locked on the screen using Cloggys's algorithm for placing 3D objects to corresponding exact pixel x,y positions (Hud Using Plains -
http://www.dbdepot.co.uk/snippets.html).

This might change to using sprites however as Z draw order can be a problem this time, have to check the speed difference compared to planes.

The benefit of using objects as Gui items is you do not have to update the gui constantly (draw the border rectangles, fill colour and print the text every frame) as the texture is updated once and applied to the gui item, you just need to check the mouse and keyboard input and this takes very little cpu time.

I now use Sven B's new Image Kit to make the gui object textures (it's really fast!), so i can make themes based on nine template images for windows/panels (something like this http://www.ironspeed.com/Designer/7.1.0/WebHelp/Part_I/Example_Customizing_Button_Styles.htm), buttons, sliders and so on. Pasting the corners, borders and backgrounds on the image when creating a Gui items texture. I also create bitmapfonts from normal windows fonts and paste single character images on the texture.

A gui parameter text file contains the groups and items/parameters for the Gui like this:


When creating intricate menu structures in my first attempt i got really frustrated filling a typed array in the code itself with all the parameters, now it is structured. I plan to make a wysiwyg Gui Editor and have it save the menu structures in a gui parameter file.


Regards
Duke
Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 27th Oct 2010 21:18
Link
@baxslash::

Thanks! I'll try something like that and see where I get with it. If it doesn't work and I can't come up with another idea similar to yours then I'll try sprites and sprite collision.

@Duke:

Your parameter text file is a GREAT idea! I think writing something similar would be a good thing to attempt for my project. Using plains sounds like a neat idea, too. I'll have to try that as well.

Aargh! Now I've got too many ideas to go off of. Thanks guys! This helps a lot.

Oh! One thing I forgot...

When writing a #CONSTANTS file, can I declare global variables as constants as well, or do I have to write all of my variables as local in the functions file?

Also, for colors, should I do something like this in my #CONSTANTS file?



And that way when I call the functions in my future programs, I can just type darkGrey in one of the color fields. But should I define the colors as constants?

Back to top
Profile
Duke E
17
Years of Service
User Offline
Joined: 10th Mar 2009
Location:
Posted: 28th Oct 2010 03:45 Edited at: 28th Oct 2010 03:48
Link
Constants can not be declared to a specific data type, it automatically assigns the correct type.
But you can set a constant with a functions return value like so:

You can not use reserved words as the constant name though.

One other thing (bug) i have come across when using constants, beware of declaring the constants twice (i had two constants with the same names in different sourcefiles by mistake). Because the (new 7.5) editors error return codes will not show whats wrong. I loaded my code in the old classic editor where i got a relevant error.

Regards
Duke
Back to top
Profile PM
Mugen Wizardry
User Banned
Posted: 28th Oct 2010 04:59
Link
in const blue u use rgb()

rgb is a "reserved function"

CHECK OUT SOME MUSIC FROM MY NEW TECHNO CD! TECHNOKINESIS
http://www.youtube.com/watch?v=4a8KedfgVv0
ALSO, CHECK OUT MY NEW TECHNO CD! http://www.imageposeidon.com/
Back to top
Profile
sneaky smith12
20
Years of Service
User Offline
Joined: 30th Apr 2006
Location: Like id tell you, oh wait i just did
Posted: 28th Oct 2010 18:00
Link
Quote: "in const blue u use rgb()

rgb is a "reserved function""


He said for the, "constant name". The Constant command works as follows: #Constant InsertConstantNameHere InsertConstantValueHere

If at first you dont succeed, LOWER YOUR STANDARDS.
Back to top
Profile PM Email
BatVink
Moderator
23
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 28th Oct 2010 19:42
Link
Quote: "My new attempt is 3D object based (as was my first) i.e planes locked on the screen using Cloggys's algorithm for placing 3D objects to corresponding exact pixel x,y positions (Hud Using Plains)"


Does anybody know if this algorithm works for widescreen? My old method fails on widescreen so I just tried this, which also seems to fail. It places things too high on the Y axis.

For 4:3, this method was foolproof, for any resolution...

position object id,(X#-400)+(object size x(id)/2.0),-1*((Y#-300)+(object size y(id)/2.0)),500

Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 28th Oct 2010 20:33
Link
Quote: "1-Scaling elements: if you are using sprites this is slightly more complicated as you need an image for the middle of the window (the bit with buttons/labels etc. in it), an image for each corner and an image to be stretched for each side"

Not that much really.

Quote: "Hmm...using sprites definitely sounds easier in that case, but aren't sprites slower than boxes"

That can depend on how many you're drawing.

When I did the iTunes interface in DB, I used my own functions to draw various pieces of the interface directly to images then created sprites from them. It definitely takes more work, but the end result is better for the user. It'll run faster and, if you're using anti-aliased lines for anything, images would be significantly faster than drawing them every frame.


"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
Back to top
Profile PM Email Website
paul5147
20
Years of Service
User Offline
Joined: 11th Jan 2006
Location: Hot & Sunny
Posted: 28th Oct 2010 21:24
Link
Small simple gui i wrote a while back , the rest of the samples are on the forum somewhere , if you would like me to post them up just let me know , hope this helps a bit.

not sure if any plugins were used in this but if it wont run let me know,i have a habit of using matrix1 without realising it,still think it should be part of dbpro.
Back to top
Profile PM
Duke E
17
Years of Service
User Offline
Joined: 10th Mar 2009
Location:
Posted: 28th Oct 2010 22:28 Edited at: 28th Oct 2010 22:29
Link
Quote: "Batvink: Does anybody know if this algorithm works for widescreen? "


Yeah works on any window aspect. Can set any window size and it aligns perfectly with 0,0 topleft. Maybe you alter your cameras FOV or grab the screen width/height and change the display mode after? I do not have the cameraFOV as a constant as in the original code as i change the FOV dynamically.
Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 28th Oct 2010 22:48
Link
Thanks everyone!

Quote: "Constants can not be declared to a specific data type, it automatically assigns the correct type."


Gotcha. I'll keep that in mind.

@paul5147:

That example runs great! It was fast and worked very well. I'm gonna study it a bit if'n you don't mind.

I don't think I'm going to write an entire GUI functions library for my current project; it's not quite big enough for that and I want to give it a different style than the image in my first post. But I'm going to start working on the GUI functions as a side-project. I'm looking forward to experimenting with it quite a bit.

Back to top
Profile
Neco
18
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 28th Oct 2010 23:56
Link
Interesting conversation on the D3D 2D/text speeds. I've played around with cloggy's DLL before, but maybe I should look at rewriting my engine to use the D3D stuff while its still fairly small and easy to change.

Old Skool Games - Bringing the gaming past to the present
Back to top
Profile PM Website
BatVink
Moderator
23
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 29th Oct 2010 00:08
Link
Quote: "Does anybody know if this algorithm works for widescreen?"


This was my fundamental error. I created a 3D object before switching autocam off

Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 18th Jan 2011 02:24
Link
Hey guys;


Sorry that I abandoned this thread a while back. Lots of stuff happened and I totally forgot about this project.

Anyway, I recently started coding up an options screen for my level editor, and this is what I've got for the DBPro-made GUI...

...be warned, it's sloppier than heck!




How would I make that more efficient? Any ideas will be appreciated!

Back to top
Profile
Yodaman Jer
User Banned
Posted: 18th Jan 2011 21:12
Link
This is sort of an unrelated question, as it involves getting input, but I thought I'd post it here rather than start a whole new topic.

For the last day or so, I've been trying to make it so that when the user clicks on a text entry field, it changes color from grey to white, and the user can enter the text they desire. To do this, I created an input function that IanM outlined a few months ago in a different thread (it also uses his Matrix Utilities dll).

The function:


The "get text" field:



All of my code:


The problem I'm having is that I can't make the text entry field stay white UNLESS the user holds down the mouse button. How do I stop this from happening?

Also, I've noticed that even though the get_input function is called only twice under certain conditions, somehow it's active ALL OF THE TIME. This means that I could type some random numbers, hit enter, and then the next time I go to the "change screen resolution" window and click the first entry field, the number I typed randomly is there! How do I stop that from happening?

Back to top
Profile
Sasuke
20
Years of Service
User Offline
Joined: 2nd Dec 2005
Location: Milton Keynes UK
Posted: 19th Jan 2011 00:23
Link
Before I checked anything I did a performance check, it's incredibly intensive. I've done a ton with GUI's and using DBP's stock commands for real time drawing isn't great. Cloggys D3D plugin is a must for stuff like this. Unless you use DBP's stock commands for create pre-rendered images and put them on sprites or pasting them to the screen. You'll get a massive performance boost if you do.

A dream is a fantasy, if you achieve that fantasy it was never a dream to begin with.
Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 19th Jan 2011 00:56
Link
I've spent the afternoon re-writing all of that code (taking into account moduralization and performance), and have begun using Cloggy's d3d dll for the box commands. The speed boost is beyond 200+ frames per second!

I'll post the newer code in a bit, as I'm still running into the problems I outlined in my last post.

Back to top
Profile
Yodaman Jer
User Banned
Posted: 19th Jan 2011 05:16 Edited at: 19th Jan 2011 05:25
Link
Sorry for the double-post guys.

So I re-coded a lot of this and took into account performance (by using Cloggy's dll) and making the code more modular, and solved a couple of the minor issues I was having. But now I have another irritating issue....

I managed to make it so that when a user clicks one of the inactive text entry fields, it turns white to become active, and it remains so until the user enters some numbers and hits "enter". This works on both text entry fields I created. However, only the second entry field displays both the input message and inputted text, and the first only shows the inputted text. It looks like this:

Inactive:

Inactive by CoffeeCoder, on Flickr

Active first field:

First Entry Field (Buggy) by CoffeeCoder, on Flickr

Active first field, can see inputted text from user:

First Entry Field (Buggy, can see text) by CoffeeCoder, on Flickr

Active second field, can see everything:

Second Entry Field by CoffeeCoder, on Flickr

I'm wracking my brains trying to figure out what's causing that.

Also, there's still the bug where the user can type anything, even if the input function isn't being called, and the next time they click one of the text entry fields whatever they typed will appear there.

Here's my new code. Can someone please help me out with this?
You will need IanM's plugins and Cloggy's as well.



Back to top
Profile
BiggAdd
Retired Moderator
21
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 19th Jan 2011 05:30 Edited at: 19th Jan 2011 05:37
Link
Could it be this?
ink rgb(white,white,white), rgb(white,white,white)

Should be:
ink white, white

That is there a couple of times in the code. Not sure if it will fix your problem, but it might be messing something up.

Why don't you use D3D_TEXT, rather than the DBPro text?

Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 19th Jan 2011 05:39 Edited at: 19th Jan 2011 05:41
Link
Hmm, that wasn't it, but that helped solved a bug I had a couple of days ago!

I thought about it, and it's quite possible that these two if-endif blocks are the problem (which is bad because it means I may have to figure out a different way to get the same result):



Essentially, even though I am using two separate variables to determine if one or the other field is clicked, the program thinks that the first one is always selected (or something like that) and so is rendering the input message "New Screen Width: " in white, but not the actual user inputted text. Adding "ink rgb(0,0,0), rgb(0,0,0) in the function even, just before the "text x,y,string$+in" command didn't solve it. I'm super confused.

EDIT:

I'm not familiar with d3d_text yet and that's one of the other things I'm going to sort out once I get the basic mechanics of this working. Faster is better!

Back to top
Profile
BiggAdd
Retired Moderator
21
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 19th Jan 2011 05:48
Link
I really think you should break down your GUI further into modules.

You are getting bogged down in massive blocks of code. You should really be creating text box, content panel, button and label modules really.

Make each of these work independently, and it will be easy to fit them all together.


This process will be a lot easier with UDTs.

Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 19th Jan 2011 18:21
Link
What exactly is a UDT? I'm still very new to the whole concept of creating my own GUI library.

I seem to have solved the problems I was having, here's the final code:



Everything now works and displays as it should. I tried making it even more modular, however I ran into a couple of problems when attempting to do so. I'll try again though because I am fairly sure I know what I did wrong in the first attempt.

My plan is that once I get this input box figured out, I'm going to figure out how to put it in one, universal function that can be called, and it can be used to get things like rotation values, positioning values, file paths, and object names from the user in my level editor program. Doing that will be one step closer to creating my GUI functions library, and it will also be an incredibly cool feature for the level editor.

Back to top
Profile
Indicium
18
Years of Service
User Offline
Joined: 26th May 2008
Location:
Posted: 19th Jan 2011 21:02
Link
Woah, CoffeeCoder, that GUI is looking sweet, you've inspired me to work on a gui system of my own :')

Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 19th Jan 2011 22:57
Link
Thanks, Mad Nightmare. Although it really isn't much a of a system yet. I hope to fix that soon.

Something that seems to be happening, interestingly enough, is that with every time I re-code this little program, it gets smaller, more efficient, and I learn how to better control the use of the function. It gives me hope for building up a GUI functions library.

Back to top
Profile
Sasuke
20
Years of Service
User Offline
Joined: 2nd Dec 2005
Location: Milton Keynes UK
Posted: 19th Jan 2011 23:59 Edited at: 20th Jan 2011 00:04
Link
One of my threads might be able to help abit: Creating a Menu

If you have any question about GUI's in general, ask away, I had a ton of experience with them. At this moment I'm work on a GUI designer, not for designing menus or stuff, but designing the actual visual component of each GUI gadget as a reference for a UI system. So it's sort of a template system that my GUI runs off. Example of the first version (before I mixed it with my engine, now there way to much added to it to pull out of my engine), just the Window (container there now called) gadget:



The in engine version can pretty much do anything.

A dream is a fantasy, if you achieve that fantasy it was never a dream to begin with.
Back to top
Profile PM Email
BiggAdd
Retired Moderator
21
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 20th Jan 2011 06:08 Edited at: 20th Jan 2011 06:17
Link
Well the best way to create a GUI is to use an Object Oriented design and while Dark Basic Pro doesn't support Objects, it supports UDTs which are like objects without the methods (functions) built into them.

A UDT (user defined type):


Back to top
Profile PM
Yodaman Jer
User Banned
Posted: 20th Jan 2011 06:19 Edited at: 20th Jan 2011 06:20
Link
Sasuke, that thread is FANTASTIC! Just reading a few posts for a few minutes has already given me a TON of valuable info, and has given me a few ideas on how to better approach making a GUI system.

I also see that when BiggAdd mentioned UDT's, it means User Defined Types. Which I can't believe I didn't pick up on. Oh well. We all learn eventually.

EDIT: Whoops, didn't see your post there BiggAdd. Thanks for explaining though! And that example's useful, too.

That thread especially helps me with repetitively coding if...endif conditions to check if the cursor is over a billion buttons, a billion times. That got old so fast!

I'm definitely going to read and study that code a lot! It already answers so many questions I had and now I don't need to post.

Back to top
Profile
BiggAdd
Retired Moderator
21
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 20th Jan 2011 07:20 Edited at: 20th Jan 2011 07:57
Link
I've written a little example with Buttons using UDTs:





You could take the code further and store all the values about a button's colour in the UDT itself.

Hope it helps.

Back to top
Profile PM
Sasuke
20
Years of Service
User Offline
Joined: 2nd Dec 2005
Location: Milton Keynes UK
Posted: 20th Jan 2011 14:05 Edited at: 20th Jan 2011 14:10
Link
Thanks CoffeeCoder, I will be adding to it soon, I've been away from my computer most of the new year. Cause I'm insane, eventually I'll make a demo this:



Except my version will be made for DBP as a project manager. But the functionality will be exactly the same.

Note: I have 4 steam accounts, just so I could get 4 free copies of Portal tied to the accounts.

A dream is a fantasy, if you achieve that fantasy it was never a dream to begin with.
Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 20th Jan 2011 20:49 Edited at: 21st Jan 2011 00:09
Link
Thank you for that example BiggAdd, it's a great help!

Quote: "You could take the code further and store all the values about a button's colour in the UDT itself."


I think I'll do just that.

I'm gonna pour myself a cup of coffee and start working on programming something similar to all of these examples.

EDIT:

Okay, so I got some really excellent and decent results!



I just have one problem...

In my previous attempts at this, I used the following formula for making sure that buttons were ALWAYS in the center of the screen, no matter what the resolution was:



That worked, but following BiggAdd's example and doing this

doesn't work. I'm not sure why. The button setup code looks like this:



anyone have any suggestions on a new formula?

EDIT: Solved the formula for drawing the boxes (they now stay centered in any and all resolutions), but getting the text to stay centered WITH it is proving challenging.

The only way I can do it is this:


And that kind of defeats the purpose of having the function to draw the text, because now if I decide to draw buttons in another part of the screen, the text won't align with them properly.

Anyone have any other suggestions?

Here's the whole of the new code:


Whoops, I see that the code block doesn't like "//" as a commenter like the DBPro IDE does.

Back to top
Profile
Back to top

Login to post a reply

Server time is: 2026-07-18 02:09:11
Your offset time is: 2026-07-18 02:09:11