Simple GUI

Monkey Archive Forums/Monkey Projects/Simple GUI

chrisc2977(Posted 2012) [#1]
20/3/2012
Just my first attempt at a monkey project, thought id build a simple GUI

Flash Example:
http://megaswf.com/serve/2278591


Download it here:
http://megaswf.com/serve/2279633


[Latest Changes]
Small graphics tweaks

[Still to do]
Sort textbox overrun when backspace before a long line
Custom keyboard
Visual placement tool for windows


chrisc2977(Posted 2012) [#2]
How can I display either a flash or html on the forum to show you?


Supertino(Posted 2012) [#3]
http://www.monkeycoder.co.nz/Apps/submit_app.php


chrisc2977(Posted 2012) [#4]
Let me know what you think


chrisc2977(Posted 2012) [#5]
Still to come:
Text boxes (multi line)
Image buttons
Right click menu
Drop down box


c.k.(Posted 2012) [#6]
Wow! That looks really good.

When I use "Shift+Home" to select all text in a text box, it prints '$' instead.


chrisc2977(Posted 2012) [#7]
Thanks C.K.

Yeah I still need to edit some of the keys Like left, right etc.


Paul - Taiphoz(Posted 2012) [#8]
yeah that is neat...


chrisc2977(Posted 2012) [#9]
I added a GUI_Mode which changes the settings, fonts menu height etc that is more suited to android phone screen sizes. I also added a tolerance to the area of click/touchdown.


chrisc2977(Posted 2012) [#10]
I think it is nearly finished now, please can you have a look and make any suggestions?

I cant get the screensize to display right with flash, so it cuts off the bottom (but this does not happen in HTML and Android)


chrisc2977(Posted 2012) [#11]
Example Code to use my GUI

Global Button1:GUI = GUI_CreateButton(X,Y,W,H,"Text")
GUI_Start()


GUI_Update()
If Button1.Clicked then Error""

GUI_Draw()






NoOdle(Posted 2012) [#12]
I would definitely use this if you released it!


chrisc2977(Posted 2012) [#13]
Cool next is to do do a visual layout program (for windows) so you can lay out the gui items and set their values etc. This will generate the startup declarations for you to paste into your program (Blitzmax and Monkey compatable)?


Why0Why(Posted 2012) [#14]
Looks really nice!


chrisc2977(Posted 2012) [#15]
Just reolised the way I have coded it it really slow with more than a few items :( Going to have to start again methinks :( Ill be back!


chrisc2977(Posted 2012) [#16]
1/2 way done writing the new version now :)
I have included Windows also this time round and performance is infinatly better Also.

Main Changes:
Windows (and parenting to those windows)
Masssive performance increase
Sliderbar changes

To be done
Textboxes / fields
Drop Down Box
Menus
Right Click Menu (unique for each window)
MessgaeBox


frank(Posted 2012) [#17]
Nice work, but it's rather buggy for me: if I go to the multi-line textbox (textarea), and then back up, clicks go to the wrong control:

http://o7.no/yR8M5S

=> I clicked on File here => choice box opened

When I click on choice box , more often that not, it 'clicks' on the http://o7.no/Anf1Wx

here I clicked on File again http://o7.no/AcunAx

Here I clicked in the large textarea http://o7.no/wZTkdz (where the awafaaf is in the bottom)

Here I tried to disable tickbox1 http://o7.no/yl4OMe

Here I clicked imagebutton and it removed the tick from tickbox http://o7.no/zoKqCT

Also; sometimes the interface gets unresponsive; Flash is doing 100% then.

Oh and possibly adding standard actions? Like selecting text in text boxes and using the mouse (scrollwheel on win, 2 finger vertical swipe on mac) to move the scrollbars? :) Feels more natural then.


chrisc2977(Posted 2012) [#18]
Thats weird, Sounds like something to do with the Expanded 'Touch Area' I used for mobiles to counter the inaccuracy when using a small touchscreen.
Hmm Seems to work on mine though.

It is currently being re-written anyway (Should be done by the end of today) with many improvements.

Thanks for the feedback, was really good ,and screenshots, really helpful :)


frank(Posted 2012) [#19]
Well the big screen version has the same issues here... Exactly the same.


chrisc2977(Posted 2012) [#20]
I wonder if anyone can offer some insight, the new version is going great with virtually no lag on both Android and flash but seems a bit sluggish on html.
Are there any specific commands that slow down html more than the others?
E.g. setalpha or anything? Or using fontmachine module?
All the other stuff is just looping through a class and drawing shapes and checking mouse input. And I don't know why html is slightly sluggish than the other platforms.


chrisc2977(Posted 2012) [#21]
Starting to think its the drawimagerect command, may have to draw the tick for the tickbox using lines instead.


Beaker(Posted 2012) [#22]
SetAlpha is slow on html (possibly image alpha as well). But everything is going to be much slower on html anyways. I found trying to do gui stuff on html almost impossible to get fast enough, mostly down to too much drawing.


chrisc2977(Posted 2012) [#23]
I got rid off all the images and alpha (Apart from the text). Doesn't look quite as pretty, but runs a hell of a lot faster :)

Still to do:
Menubar / Items
Documentation
GUI Visual Builder
Non Active element Colours

What do you think so far?
(The textbox in window1 is set to non active - it isnt broken lol)


frank(Posted 2012) [#24]
Excellent :) Seems your latest version doesn't have the bugs anymore I saw in the previous versions! Are you going to release the sourcecode ? :) I would really like to play around with it.


chrisc2977(Posted 2012) [#25]
Glad you like it :)
Yep I just need to finish the menu system (Nearly done) And a right click menu (This will also pop up from the bottom if using android menu button), And just make a flag for mobile devices.
Oh and the documentation :s

The plan is to release it as a module for free of course :) and then make a visual gui builder to go with it that exports to bmx and monkey so you can lay it out with ease (I will make this using my simlegui as I have coded it in blitzmax also). Maybe I will ask for a small donation for the builder Like 99p or something. But the module will def be free.
I will try get this finished by Thursday night I think.


ziggy(Posted 2012) [#26]
This looks fantastic!


frank(Posted 2012) [#27]
Great. I'll be donating for sure!


chrisc2977(Posted 2012) [#28]
Thanks :) Cant wait to get it released :)


frank(Posted 2012) [#29]
Maybe you can do a WIP release? I have a project *now* in need of this and because you have textboxes it seems a better choice than the rest.


traderhman(Posted 2012) [#30]
Wow, this looks really great. Any chance of expanding the click zone for radio buttons and check boxes so clicking the text will also generate a click?

Thanks.


chrisc2977(Posted 2012) [#31]
Thanks traderhman, Yeah thats a good Idea I will do this, cheers


chrisc2977(Posted 2012) [#32]
Ok traderhman, that change has beem done :) How quick was that! 10 mins!


chrisc2977(Posted 2012) [#33]
Here's a quick update

Everything in Window1 is not active to show you what the elements look like when set to that state.
e.g.
Slider2.Active=0


Oh and worth mentioning you can set the window BG to clear so you can have it as an overlay to your Application/Games.


[Still to do]
Mobile mode - for small touchscreen devices
GUI_MsgBox() Command
Documentation


slenkar(Posted 2012) [#34]
do you have skins to make the gui look more 'game like'

also do you have the ability to put gadgets inside a scroller? (so you can have as many gadgets as you want on a screen)


chrisc2977(Posted 2012) [#35]
@ slenkar
I dont think I am good enough to go down the skins route :s
Although when coding for a game I planned to use ImageButtons and a clear Window BG.

With regard to scrolling,
There is a global GUI_OffsetY and GUI_OffsetX that can be adjusted to scroll the entire GUI.


chrisc2977(Posted 2012) [#36]
@ Frank

Do you have an email I can send it to you?

I only have the mobile mode to do and the documentation. this should be done within 24 hrs.


frank(Posted 2012) [#37]
I'm very happy you made the controls easy to position x,y,w,h => I like the option of having containers which automatically position, but when I see frameworks which ONLY have that, I get very nervous as I'm very sure that will not suffice in at least 50% of the stuff I make :)

My email is frank (at) ab.tl => but I can wait one more day hahaha :) I'll code up the rest first.


chrisc2977(Posted 2012) [#38]
I've tried to make it as simple as possible but also with as many as possible uses. If you wanted a container you could always make a window with clear BG and no title-bar then when you position the 'invisible' window it will move the elements within that window :)


chrisc2977(Posted 2012) [#39]
Nearly done coding now just going to add the option to scroll the gui on mobiles by dragging.


chrisc2977(Posted 2012) [#40]
Note the ability to 'Drag' the GUI and also the way the textboxes move out of the way allowing for the onscreen keyboard
(Both these features are optional)

If you would like to see the MsgBox please click File - Open

Cheers


frank(Posted 2012) [#41]
Very nice; it's improving fast! Getting more performant as well. Can you put the html5 version to test that as well?


chrisc2977(Posted 2012) [#42]
Ok Everyone Please find the Beta release of the module

Sorry about the documentation being a bit poor, this will be updated along with many more examples.

Any ideas / improvements / problems jus post em up.

Cheers Everybody!


chrisc2977(Posted 2012) [#43]
http://megaswf.com/serve/2238485

Please Update module

[Changes Made]
Better documentation
IntilliPrompt for Jungle

[Still to do]
More Examples
Right Click


frank(Posted 2012) [#44]
Cool! Going to play now; feedback coming along as well :)


chrisc2977(Posted 2012) [#45]
Coming Soon... In this order

Window parameter becoming optional in all creation functions (so you can place GUI elements on screen without the need to create a window)
Android 'menu' makes the right click menu rise up
GUI Colour options

Transcode to bmax module

Then eventually a visual creator to layout the elements and export for Monkey / bmax

Any other feature requests?


frank(Posted 2012) [#46]
Window parameter becoming optional in all creation functions (so you can place GUI elements on screen without the need to create a window)
=> this is something i am looking for indeed


chrisc2977(Posted 2012) [#47]
Update :)

Changes Made:
Window Parameter now optional

You can now set the colour of the GUI to any color

Right Click works on Html - this also sets up a menu for when the 'menu' button is pressed on Android.


Completed Documentation

Few Moe Examples Added


matty47(Posted 2012) [#48]
Just a small error in docs

Button1 = GUI_CreateButton(10,10,120,25,"Button 1",MainWindow,Null)

the last two parameters are reversed - The image (Null) is second last and the window is last and optional (will draw on canvas if no window)

Button2 = GUI_CreateButton(10,50,120,25,"",LoadImage("button.png",2))

This is OK


matty47(Posted 2012) [#49]
I cannot get the following to work when compiled as glfw.
Import mojo
Import gui

Global MyWindow:GUI
Global MyButton:GUI

Function Main()
	New Test
End

Class Test extends App
	Method OnCreate()
		SetUpdateRate(60)
		SetBlend AlphaBlend
		GUI_Start()
		MyWindow=GUI_CreateWindow(0,0,DeviceWidth(),DeviceHeight())
		MyButton = GUI_CreateButton(10,10,120,25,"Button 1",Null,MyWindow)
	End Method
	
	Method OnUpdate()
		GUI_Update()
		If MyButton.Clicked Then GUI_MsgBox("Button Clicked")
	End Method
	
	Method OnRender()
		Cls(0,0,0)
		GUI_Draw()
	End Method
End 

Works fine as html5 or flash and compiles ok for glfw however it just starts and immediately closes - Window pops up with no button then closes, dos box with "Monkey Game" title but nothing else pops up and closes.
Using Jungle IDE and VC 2010 Express.
Thanks


chrisc2977(Posted 2012) [#50]
Nice one Mat, will change that.
I will have to look into the glfw issue, I must admit I have never used it before. Should work on all thou, hell its mainly basic drawing commands.
Wonder lf there are any commands that don't work on glfw? Weird.

I've just tweaked it a bit including making sure the color values don't go past 255, maybe smit like that causes it.

I've just made a wicked showcase example including sliders to change the GUI color in realtime. Will have to try upload it tomorrow :)


chrisc2977(Posted 2012) [#51]
Showcase Example
http://megaswf.com/serve/2278591



Next to fix glfw


chrisc2977(Posted 2012) [#52]
Ok, turns out it wasnt my module stopping it from working it was the command
'SetBlend' does not seem to work in GLFW.

Take the 'SetBlend AlphaBlend' out of your code and my module will run fine (just does not look as smooth)


slenkar(Posted 2012) [#53]
nice showcase


chrisc2977(Posted 2012) [#54]
Small update mainly a few colour and documentation adjustments


Download it here:
http://megaswf.com/serve/2279633


[Latest Changes]
Small graphics tweaks
Documentation change

[Still to do]
Sort textbox overrun when backspace before a long line
Custom keyboard
Visual placement tool for windows


matty47(Posted 2012) [#55]
Thanks for finding the "SetBlend .........." hiccup. Just to let you know original code worked fine using glfw on OS X. Must just be Windows not accepting the blend.
Thanks also for all the work you have put in to this
Matthew


chrisc2977(Posted 2012) [#56]
Cheers Mat, its the first project I've stuck to since bbasic lol putting it up on the forums and getting feedback really helped motivation lol,, so thanks everyone


chrisc2977(Posted 2012) [#57]
Ok, little admission regarding the glfw 'error', it was actually my misuse of the command SetBlend, this should have been used in the OnRender method NOT the OnCreate. I have updated the module to include this as part of its drawing commands (It also reverts itself back to previous Blend mode after drawing the GUI).
The docs and examples have been changed to reflect this.

Also I have decided to omit the Textbox feature, this was slowing down the whole thing and I couldnt get it working right anyway. I think ultimately it would have had the least use of all the elements anyway.
Obviously the textfield is being kept.

Next job is the custom keyboard, to match the GUI Color, this will be an optional so you can still use the device default if you wish.


chrisc2977(Posted 2012) [#58]
Been running some tests and managed to get the speed faster then orig, even when using images instead of shapes for the gui.

So I am going to move on to code 'Simple gui 2.0' the main features will be
* custom themes / skins
* Simple to use code i.e.
 Global MyWindow:GUI
Global MyButton:GUI
MyWindow = CreateWindow(X,Y,W,H, Flags...)
MyButton = CreateButton(X,Y,W,H, Text$)

GUI_Update()
If MyButton.Clicked then MsgBox("Button Clicked")

GUI_Draw()


I have just put together a test skin and made the following window as an example (only blurry due to screenshot and then resize):



I dont like the look of the Slider arrows or the dropdownbox button, but Im really happy with it as a first trial!

P.s. I will probably get it to Beta stage then start a new thread for this as it is so different from the last.


Goodlookinguy(Posted 2012) [#59]
This is awesome. I'm currently starting up an open source electricity learning tool, for my class and I, and was looking for something exactly like this. I don't use most of Diddy and their GUI system was a tad-bit overwhelming and sorely lacking in documentation and realistic usage. I saw this and how easy it was and was hands down the best choice.

Some quick questions though; what is the license for this and are you planning multi-tier menus?

Also, three bugs. I noticed when dragging the window on your showcase, that if you bring it over the menus, that they light up (because the mouse is over them). The second bug was that on mouse over of the menus; if you don't explicitly use GUI_Color beforehand, they are completely black. The last bug I found is that if you click in the 1px area between menu items (or drop down items) it will click on the object beneath the menu drop down. Anyways, keep up the good work. I'm relying on this now.


chrisc2977(Posted 2012) [#60]
Lol cheers good looking lol.
Yeah that's exactly what its intended for, I found diddys GUI amazing, but not that intuitive. So I am now on my latest build trying to get mine as good looking AMD flexable whilst being really simple and easy to implement. I will need to re-write a lot of the code to encorporate the new images etc so I will be ironing out the old bugs at the same time.
I will keep u all updated :)

Thanks for the feedback and bug reports, so easy to miss stuff when u test it yourself!


chrisc2977(Posted 2012) [#61]
Oh and as for licences and multi tier menu...
I'll be releasing the module for everybody to do whatever they want, would love to be mentioned in some1s credits lol but its not required :)

Multi tier menus eh, shouldn't be too hard to implement, what the hell, ill give it a go :)


chrisc2977(Posted 2012) [#62]
Just a progress update,
Example style image improved, plans for 2 more
Basic framework done
Windows nearly done
Window order done (+auto bring ontop) with the option of setting windows always behind or ontop
Improved speed
Optional window close and minimise buttons (working)

Tested and running great on all targets

To be done: all the other GUI elements


chrisc2977(Posted 2012) [#63]


Moved to New topic here + with flash example
http://www.monkeycoder.co.nz/Community/posts.php?topic=2591