GUI class

Rich

Active Member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Completed
Multiple tabs (attach any icon to the tab header. Cant attach text yet)
Simple buttons

Todo
Scroll areas


scrolling image windows
 
Last edited:

Rich

Active Member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
latest update

now with
  1. Skins
  2. Coloured buttons
  3. Checkboxes
 

Rich

Active Member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
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

Active Member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Part 5
Got scaling and labels working now
So how does the code look?
OnCreate():
        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)
 

Rich

Active Member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
....And also writing docs
 

Phil7

Moderator
Joined
Jun 26, 2017
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

Active Member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
@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

Moderator
Joined
Jun 26, 2017
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

Active Member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Ive removed requestors in HTML, so that code loads an image automatically or picks a random color
Quite happy with the demo now
 

Phil7

Moderator
Joined
Jun 26, 2017
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

Active Member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
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
 
Top Bottom