GUI class

[Rich]

While working on my Font Editor, I realised I need a tidy GUI. So Ive started working on this.

demo here

https://richpantson.itch.io/cerberusx-gui-class

 

[Rich]

Completed
Multiple tabs (attach any icon to the tab header. Cant attach text yet)
Simple buttons

Todo
Scroll areas

scrolling image windows

 

[Rich]

latest update

now with

1. Skins
2. Coloured buttons
3. Checkboxes

 

[Rich]

Part 4
3d effect buttons (can switch back to popping mode)
Better scroll bars
Check buttons
Multi icon buttons

Things to work on next...
Scaling
Sizing of GUI options and buttons
Font for labels

 

[Rich]

Part 5
Got scaling and labels working now

So how does the code look?

        beach = Image.Load("beach.jpg",0,0)
        image_display = New Image(10,10)
        
        ' game width is 800px
        game_scale = DeviceWidth()/800.0
        
        tabs=Image.LoadFrames("tabtitle.png",2,False)
        checkbuttons=Image.LoadFrames("check.png",2,False)
        buttons=Image.LoadFrames("buttons.png",10,False)
                
        g = New Gui(30,30,600,400)   
        g.SetScale(game_scale,game_scale)
        g.AddTab(tabs[1])
        g.AddText(0,"SOME TEXT NOT LINKED TO A BUTTON",25,325,GuiText.LEFT,GuiText.MIDDLE)

        check_btn=g.AddCheckButton(0,checkbuttons,425,50)
        g.AddButton(0,buttons[8],50,50)
        load_btn = g.AddButton(0,buttons[4],125,50)
        load_btn.SetLabel("LOAD IMAGE",GuiText.BOTTOM)
        
        col_btn = g.AddButton(0,buttons[9],350,50)
        refresh_btn = g.AddButton(0,buttons[0],200,50)
        g.AddButton(0,buttons[1],275,50)

        g.AddTab(tabs[0])
        multi_btn = g.AddMultiButton(1,buttons,250,50)
        gui_win = g.AddWindowImage(0,image_display,25,100,400,200)
        g.AddWindowImage(1,beach,25,100,550,200)
        
        g.AddTab(tabs[1])
        quit_btn = g.AddButton(2,buttons[3],50,50)

 

[MikeHart]

Great job Rich.

 

[Rich]

Currently also making a Mojo1 version

 

[Rich]

....And also writing docs

 

[MikeHart]

....And also writing docs

Guess you are on fire! Btw. attaching a screenshot in the first post of a topic can make a entry in the frontpage look much better.

 

[Rich]

Ive uploaded a "playble" demo on Itch.io if anyone is interested

https://richpantson.itch.io/cerberusx-gui-class

Still got some stuff to finalise before release

 

[Phil7]

First, nice work! A GUI Class that is made by one of the active members is very valuable for CX.

Some things I noticed when trying your demo:
- Is the zooming random? I would keep it to 2 or 3 levels and then reset it, because some content is not visible otherwise.
- I would avoid closeApp when clicking on Quit. It is kind of awkward if the app freezes on html. Maybe a MessageRequester could do the trick.
- The scrollbars behavior is not what I would expect. Imo the scrolling should still work if you leave the buttonarea while keeping the mousebutton pressed.

 

[Rich]

@Phil7 thanks for the feedback.
A lot of the functionality has been removed in HTML demo you can't load an external pic or choose a colour from a requestor* as these requestors only work in glfw. The demo makes a lot more sense for desktop.
I need to work on a proper HTML demo, but thought I'd give the forum a chance to see it in dev
He zooming is random, just to show scaling working, but I will make it so that it doesn't go larger than the screen
The scrollbars are on my list of items to fix before a release
I'm also working in a pinch zoom/zoom buttons for the GuiWindow type

*Do I do a built-in color requestor in the GUI class? Maybe further down the line...

 

[Rich]

@Phil7

The scrollbars are on my list of items to fix before a release

Well that was easier than I expected.... try that

 

[Phil7]

That was a quick fix!
Maybe you could put all the glfw only functionality into one tab called 'desktop only' and disable everything there on html. This way you would not have to create a separate demo, have an easy show off demo on html where you can guess what functionality is possible on desktop and your users are not confused about why some things are not functional.

 

[Rich]

Ive removed requestors in HTML, so that code loads an image automatically or picks a random color
Quite happy with the demo now

https://richpantson.itch.io/cerberusx-gui-class

 

[Phil7]

Works fine here!
Is it possible on the demo site to put the headline and a short description above the demo canvas. It kind of visualy irritates me, that it looks like it sticks to the ceiling.

 

[Rich]

Works fine here!
Is it possible on the demo site to put the headline and a short description above the demo canvas. It kind of visualy irritates me, that it looks like it sticks to the ceiling.

I dont actually know if that is possible. I dont seem to have an option of where to place the HTML5 app. This is my first upload to itch.io
@MikeHart - do you know if this is possible

 

[MikeHart]

Not that i know of.

 

[Rich]

@MikeHart @Phil7 Theres an option to add an image banner... is that better?

 

[Phil7]

Much better