On-Screen User Interface [ScreenShots/Source](Made For Flash Client)

Sep 29 2012, 9:36 pm

Yeah, I am definitely keeping an eye on this. My biggest concern when dealing with games that don't use an interface is actually things like selecting options from a list that varies in length.

An example would be choosing a player from a list of all players online. This is incredibly simple and quick with the default alert/input procs and such, but with on-screen objects this is probably one of the toughest things to deal with.

So, if this were to handle things like that, alerts, tables, and what not; I personally feel it would be an almost must have library for most projects. The best part is you've already got it well on the way to being that.

Sep 29 2012, 10:58 pm In response to PopLava
Mikeytdan	I've merged most of it together. I need to get some sleep or I'd do more. Take a look and let me know what you think. There is a new download link in the first post.

Sep 29 2012, 11:01 pm

In response to PopLava

Mikeytdan

Thanks for adding the adjustable border widths. :) I found one problem with it but it was an easy fix.

        DrawBox(_rgb, Width(), 1, Width()- rightBorderWidth, Height()) // RIGHT BORDER
        DrawBox(_rgb, 1, Height(), Width(), Height() - topBorderWidth) // TOP BORDER

should be:

        DrawBox(_rgb, Width(), 1, Width() - rightBorderWidth + 1, Height()) // RIGHT BORDER
        DrawBox(_rgb, 1, Height(), Width(), Height() - topBorderWidth + 1) // TOP BORDER

If you don't add the + 1 it makes two sides 1 pixel too big.

Sep 30 2012, 5:24 pm
PopLava	I've been working on adding an MDButton type and playing around with the design off and on all day. I think I'm close to having something.

Sep 30 2012, 5:52 pm
PopLava	Ah, just made a good break through. Was trying to wrap my head around MDView and while I don't fully understand it yet, I think I may be able to remove it entirely which would leave us with a a solid object model. MDObject MDRect MDButton MDWindow etc.

Sep 30 2012, 9:44 pm (Edited on Oct 1 2012, 2:23 pm)

PopLava

Alright, I made a mess of this but made some progress. I'll remove this download link after you get it downloaded and after I get home tomorrow.

In short, I disabled the table stuff while working on the object model so tables are broken in this build. I went after simplifying the object model and hacked up everything along the way.

The primary examples to play with are these.

mob/proc/CreateButton()
    var/MDButton/button = new(src)
    button.setWidth(100)
    button.setHeight(25)
    button.setPosition(_x = 5, _y = 5)
    button.setStyle(MDSTYLESOLID)
    button.setBorderColor(rgb(255, 0, 0))
    button.setBackgroundColor(rgb(0, 123, 223))
    button.setCallBack(/proc/okButton)
    button.addLabel("Submit", yOffset=-3)
    button.draw()


mob/proc/addSolidWindow()
    var/MDRect/mdDialog = new(src)
    mdDialog.setWidth(200)
    mdDialog.setHeight(100)
    mdDialog.setLayer(100)
    mdDialog.setPosition(9,9)
    mdDialog.setStyle(MDSTYLESOLID)
    mdDialog.setBorderWidth(1,1,1,1)
    mdDialog.setBorderColor(rgb(255, 0, 0))
    mdDialog.setBackgroundColor(rgb(0, 123, 150))
    mdDialog.addLabel("Test Window!", 0,-20)
    mdDialog.addButton("OK", /proc/okButton, xOffset=80, yOffset=30)
    mdDialog.draw()

Added support for setting 1 or more individual properties or you can still do it through the initial constructor where you can specify 1 or more properties there too.

Started playing around with the concept of adding buttons and text to a various objects. You could use MDDialog as a friendly name space for MDRect while also wrapping the custom windows into it.

I was thinking that it might be a good idea to try and mimic what BYOND has in the interface in terms of elements, naming conventions, and events. It would provide a road-map for features.

Anyway, I was hoping I could get this done in much shorter time and now I have to hand it over half-baked because I don't want to block you. I plan to keep at and I hope you like the direction. This is really just a proof of concept.

[edit] - removed

[edit] - By the way, while messing around, I ended up stripping down the OKDialog to its bare essentials and then realized I didn't need to inherit from MDMessageWindow or MDWindow at all. Now that it's done, the code could be moved back into CustomDialog.

Oct 1 2012, 6:25 am
Mikeytdan	Downloaded :)

Oct 1 2012, 7:44 am
Mikeytdan	I updated the source and fixed all the things that broke. I removed MDView completely. I changed the setText() for /Rect to addText() since you were creating a new text object with it instead of modifying an existing one. Next I'm going to work on stripping down cell objects so it doesn't have to have a seperate set of functions for modifying how they look.

Oct 1 2012, 8:30 am
Mikeytdan	I updated the source again. Cells now use all the MDRect functions. An example of how to set a cell property: inventoryTable.cell.setStyle(MDSTYLETEXTURE)

Oct 1 2012, 9:27 am
Mikeytdan	Update: Added highlights for when the user clicks on a cell showing them that they are clicking.

Oct 1 2012, 9:56 am
Mikeytdan	Fixed a bug when deleting windows it didn't delete its children. Changed the demo to close a window and open a new window if different cells are clicked on for Table1.

Oct 1 2012, 2:39 pm
PopLava	Very nice! I was worried all day about the mess I left and how you would react to it but your a champ. Nice work. I like the button effect. :) I'll repair MDOKMessageWindow and update the demo to launch an OK dialog and re-add an example which launches a custom dialog. What's next?

Oct 1 2012, 3:50 pm
Mikeytdan	We should work on adding more GUI elements: Add Image(similar to addText) Checkboxes Radio buttons Textfields(Eventually) Scrollbars Popup Menus Etc...

Oct 1 2012, 3:55 pm
Mikeytdan	That and/or specific demos that people can easily add into their projects such as a login, inventory, menu, stats, etc... systems similar to those from the systems in a Super Nintendo game.

Oct 1 2012, 9:00 pm
Mikeytdan	Updated source. Fixed MDOkMessageWindow Fixed text alignment issues for cells. The text is now centered. Added getSize(i) - i can be an atom or an icon - returns the size for the atom/icon "i" as Array[2] Added distanceToCenter(i) - returns the values of getSize(i) halved Made the "Hide Windows Test" in the demo work.

Oct 1 2012, 9:18 pm (Edited on Oct 2 2012, 4:39 am)

PopLava

- Added dialog "class" named MDDialog. The goal was to simplify dialog handling while also supporting baked in dialogs. The changes we've made left the old window design in a weird place in terms of a user creating a custom dialog.

- Added a number of dialog examples for OK, YesNo, and a custom dialog with custom button. I didn't finish migrating everything from MDCustomWindow.

- Added new concept of titles for dialogs. This was a last minute add. It's a V1 implementation at this point.

- Played around with "overloading" draw() with Draw so it provides an opportunity to measure and (re)paint. This allows users to create an object without immediately drawing it. The design isn't perfect but a proof of concept.

- Added a rudimentary layer system by adding a global var that increments every time an object gets added. Only safe if nobody overrides layer.

- May have tweaked some other stuff while playing around.

Oct 1 2012, 10:07 pm
Mikeytdan	Updated Source. Updated setCallback to include setObjectToPass: setCallBack(_func, _objectToPass = null) Merged your changes with mine and modified some stuff to reduce code size and to add efficiency. Made it so you can only open one of each Dialog example at a time.

Oct 2 2012, 7:44 am

Mikeytdan

Updated the source. I've been working on making it so everything is the same layer so we don't have to do layer = layer + 1 for text and buttons. It doesn't quite work yet for buttons. I had to remove how your Draw() function works. The problem with that function is that it works differently than the rest of the project. It was causing invalid screen_locs in certain situations.

We need to make it so when changing the location of a window it changes the location of it's children relative to the parent same with changing layers of the parent along with it's children. Once that's done it'll allow us to be more flexible with the order code is added. I'll work on those when I get the chance. It probably won't happen for a few days.

Oct 2 2012, 10:12 am
TheLionsRoar	This is quite awesome! Thank you very much. :)

Oct 7 2012, 9:50 am

PopLava

I just jumped into integrating this library into my HexGame project and ran into a problem. I've defined px at the atom level which conflicts with the libraries px/py variables.

Suggestion: Consider adding MD_ to simple or generically named variables to reduce chances of conflicts.

In this case, I think it's on me to rename using hex_ because the chances of me conflicting with other libraries is high.