Immediate Mode GUI

Previous topic - Next topic

MrTAToad

This is the first stage of the IMGui.

I've replaced the original graphics with those that look like the Guichan system :)

Known problems :

Core
* Eclipsing routine needs to be generalised
* Optimisations (especially faster searching of item ID's) - Currently it's not possible as ID's may not be provided in sequential order
* User functions need to be added

Window
* Can only activate a window by clicking on the title bar.  This needs to be changed to any rectangular area
* Remove 2 colour functions as they are not used
* No minimise, maximise or close buttons Minimise, restore and close have been added.  Code needs to be optimised

Buttons

Static Text

Check boxes

Radio Buttons

Sliders
* Graphic anomalies need to be fixed

Graphics
* Border needs to be placed around graphic
* Add code for mouse press

Progress Bar
* User API needs to be added

Border
* Text needs to be eclipsed to fit into require size (if needed)
* Borders text needs to be updated to use the ellipse function in THelpers

The following need to be added (they are the tricky ones) :

Listboxes (uses sliders) (started)
Drop-down boxes (uses Listboxes) (started)
Tabs
File menu (started)
Single line edit boxes
Multi-line edit boxes
Progress Bar
Imagelist




[attachment deleted by admin]

spicypixel

Looks very nice will download later when I'm back on the PC. Might even make some nice gfx unless they're generated  =D
http://www.spicypixel.net | http://www.facebook.com/SpicyPixel.NET

Comps Owned - ZX.81, ZX.48K, ZX.128K+2, Vic20, C64, Atari-ST, A500.600.1200, PC, Apple Mini-Mac.

matchy

Great continuing work.  8)

Any chance of a an imagelist control, such as for list thumbnails and icons?

MrTAToad

Might be an idea - I'll add it to the difficult to do list :)

matchy

Cool. For now, another suggestion, I think screenshots demos of different themes and styles would be inspirational, such as fonts as background styles, or iPhone interface clone. ;)

bigsofty

Looks very nice, will have a proper look tomorrow.  :good:
Cheers,

Ian.

"It is practically impossible to teach good programming style to students that have had prior exposure to BASIC.  As potential programmers, they are mentally mutilated beyond hope of regeneration."
(E. W. Dijkstra)

MrTAToad

#6
In some ways this is an important update as it shows that an extended type can use the items from another extended type (list boxes uses scrollbars), combo/drop down boxes uses list boxes...  These two routines draw the other used type in their own Draw function, and process them in Process - this keeps them out the main processing system for the window (which isn't accessible anyway), which would have caused problems if a listbox or combo box is destroyed.

I've also added minimise, restore and close icons (actually 3 buttons) and a system information area, the height of which is that used by the current font.

I've also got the start of listboxes, combo/drop down boxes and the file menu (the latter needs to be in another type to allow the background to be set for the complete window length).

It is at this point I find that all information regarding how to do scrolling and what is almost non-existant - there is very little information IM stuff  anyway, but thats another story :)

Fortunately, I have found some code that may with scrolling...


[attachment deleted by admin]

MrTAToad

Quote from: matchy on 2012-Jan-01
Cool. For now, another suggestion, I think screenshots demos of different themes and styles would be inspirational, such as fonts as background styles, or iPhone interface clone. ;)
Whilst it would be possible to skin everything, its not something I'll be implementing until its finished...

Slydog

I achieved scrolling using VIEWPORTs.
I don't have an immediate mode GUI however, if that matters.

I'm not exactly sure what type of scrolling you are referring to.
My scrolling is like on the iPhone, where you 'flick' the screen and it scrolls down the 'page'.
It closely mimics iPhone's 'kinetic scrolling' where it slows down over time.
I draw the entire 'page' off screen, and position the viewport to show the required portion.

I'm sure this could be applied to list boxes too, as that pretty much is the same.
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

erico

but if it is a mouse related move, wouldn´t it be better to be a ´straight´ move?
although I really enjoy photoshop´s smooth easy in-out scroll nowadays...

matchy

Slydog, using viewports sounds like it will work well for word lists and it's something I need to trial on other devices also. I have used tiles (screen.width x screen.width) because it breaks down the whole screen bmp, if that is a concern (to be tested).

Although my main problem in the past is trying to create a photo/carrousel list, where 100 images just cannot be drawn quickly initially. So I simulated the scroll and then prepare off-screen draw the second next image (one after the previous), which needs to come from somewhere, although there can be a slight delay (for loading and drawing) which stutters the scroll flow.

In other words for example and in regards to saving memory, what is the best method to scroll through 100 images quickly, without having to pre-draw 100 images on to a buffer?

Slydog

#11
The code may get more complicated, but if you use POLYVECTORs, and don't use VIEWPORTs, you could draw directly to the screen.  If only a half of the top image is 'visible' then only draw the visible portion using polyvectors.
That way only the visible images are drawn, and only the visible portions of those images.

Keep your image list sprite ids in an array, and use code very similar to this:
Endless Horizontal Scrolling Code
http://www.glbasic.com/forum/index.php?topic=7474.msg62417#msg62417

This is for horizontal background scenery scrolling, but it only plots the visible portion of the background each frame.
This could be adapted to scroll vertically, and with a larger list, but it is hard coded now to only expect two images to be visible at one time.
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

MrTAToad

VIEWPORT's are needed to restrict (usually) text to a defined area.

This update mainly updates the window display and processing side whilst I go through the working items to tidy them up a bit.

There are several important changes made to the window display.  The drawing section for all the items is now in the drawing section of the window and the item processing part is done in the window processing part.

This was needed for several reasons : If a window is minimised there is not point in trying to draw and process anything.  However, if a window is disabled, then the display is need but processing isn't.

Each window takes up 11 id's so that different parts of the window can be resized.  The minimise/restore and close icons are always allocated even if they are not used as it would save time having to create or remove them.

[attachment deleted by admin]

bigsofty

Not sure if they were meant to be there but the window icons are missing in the demo. But otherwise it looks very good, this is evolving into something very interesting.
Cheers,

Ian.

"It is practically impossible to teach good programming style to students that have had prior exposure to BASIC.  As potential programmers, they are mentally mutilated beyond hope of regeneration."
(E. W. Dijkstra)

MrTAToad

Haven't designed them yes so they are just squares