Immediate GUI
Monkey Forums/Monkey Code/Immediate GUI
| ||
Hey guys, I want to share a technique for a simple gui system that is; minimal to implement, easy to understand, and can be easily extended. The logic behind this system is that defining, drawing, and updating is done with a single method call. At the very minimal this system does not contain any internal state, but this can be extended for the use of keyboard controls or tabbing between controls for example (out of scope for this sample). This is a really quick way of getting a gui on the screen, and if properly developed can be used as a full blown system. There are some things to watch though; stateless means the system has no idea about anything that's happening with other controls or even itself, for example even the positions are passed on the fly. This sample isn't pretty to look at; just simple rects and built in fonts, and it's only a button, but it demonstrates the methodology behind this system. Any other component can be implemented, some will require adding minimal state. The mouse logic code is inside rendering routine as well to keep it synchronized with the gui. Internet has more details on Immediate Mode GUIs, but here are some links anyway: http://sol.gfxile.net/imgui/ http://mollyrocket.com/861 ' Immediate Mode GUI Sample ' the sliding button is unnecessary addition but shows how state is tracked outside the controls. Import mojo Class ImGuiTest Extends App ' for tracking mouse state inside OnRender() ' mUp only triggers once per mouse release Field mUp?, mDown? ' for the scrolling button Field bx% Field bw% = 100 Method OnCreate() SetUpdateRate(60) End Method OnUpdate() ' scroll the button sideways bx += 5 If bx > DeviceWidth() bx = -bw End Method OnRender() Cls If MouseDown() mDown = True Else If mDown mUp = True mDown = False Else mUp = False End End If DoButton("Button 1", 100, 100, bw, 25) Print("Button 1 clicked") End If DoButton("Button 2", 100, 150, bw, 25) Print("Button 2 clicked") End If DoButton("Do Not Click", bx, 300, bw, 25) Print("NO DON'T CLICK IT!") End End Method DoButton?(cap$, x#, y#, w#, h#) ' if mouse is hovering over If MouseX() > x And MouseX() < x+w And MouseY() > y And MouseY() < y+h SetColor(0,65,0) If mUp ' mouse up means button click Return True Elseif MouseDown() ' mouse is clicked but not released yet SetColor(33,65,73) End Else ' mouse is not over the button SetColor(0,35,0) End ' display button DrawRect(x, y, w, h) SetColor(255,255,255) DrawText(cap, x+5, y+5) Return False End End Function Main() New ImGuiTest End |
| ||
Thanks alot for this - it's helpful. |