• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

Showcase GUI class

Rich

Well-known member
CX Code Contributor
3rd Party Module Dev
Tutorial Author
3rd Party Tool Dev
Joined
Sep 9, 2017
Messages
451
While working on my Font Editor, I realised I need a tidy GUI. So Ive started working on this.


620

demo here
 
Last edited:
Completed
Multiple tabs (attach any icon to the tab header. Cant attach text yet)
Simple buttons

Todo
Scroll areas


scrolling image windows
 
Last edited:
latest update

now with
  1. Skins
  2. Coloured buttons
  3. Checkboxes
 
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
 
Part 5
Got scaling and labels working now
So how does the code look?
Code:
        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)
 
Currently also making a Mojo1 version
 
....And also writing docs
 
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.
 
@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...
 
@Phil7
The scrollbars are on my list of items to fix before a release
Well that was easier than I expected.... try that
 
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.
 
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.
 
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 @Phil7 Theres an option to add an image banner... is that better?
 
Back
Top Bottom