Simple UI Project (sup)

Code Sharing
1

Good for managing onscreen buttons and apps with multiple panels. Will potentially add menus and merge with a font library.

http://ruilov.posterous.com/sup-01

Here’s spritely merged into this framework

http://ruilov.posterous.com/spritely-in-sup-01

Suggestions welcome. I’ll add more stuff as I need it and will merge any contributions.

Quick explanation:

The main classes are Panel and Button. Everything except Panels need to be inside a Panel and Panels are automatically drawn on the screen (you don’t draw them in the top level draw function). Panels inside Panels is ok.

Each object has these fields: pos, width, height, background, borderWidth, borderColor

pos is relative to the pos of the parent object. For example if a Panel is at (10,10) and it contains a button at (20,20) then the button is actually drawn on the screen at (30,30)

Users can define draw and touched methods of objects either inline with obj.draw = function() blah end or by extending the Panel/Button classes and overwriting the draw/touched methods.

Draw is clipped so that if you attempt to draw outside theobject, it won’t. Draw is relative to the position of the object itself, ie by the time it’s called sup has already done a translate(pos.x,pos.y)

Touched is only called when a touch happens inside the bounding box of the object

Also included is an OKCancelPopup class which inactivates the rest of the objects until the user clicks ok/cancel

And a ButtonGroup class which manages multiple buttons of which only one can be selected.

2

Looks nifty. As long as we’re all playing with 8-bit era games, it seems only logical we should also build our own UIs.

There’s something about Codea that feels very like PCs in the days after they’d just invented the VGA card but no one yet had an OS to exploit it.

Nice work.

3

@Mark yeah, and it’s part of the fun, building all this stuff that you otherwise take for granted