Page 1 of 1

"Shuttering" a GUI panel

Posted: Tue Oct 31, 2017 9:30 am
by docclox
Dead simple one, this. Hope it's not old news to too many of you.

Suppose you have a box with buttons in it as part of your GUI. I have one that looks like this:

Image

Now, suppose you want to be able to collapse that box so it takes up less screen space. Not hide it completely, perhaps, just collapse it down. I thought that in addition to the obvious three buttons, it might be cool to be able to click on the title box and reduce the panel down to just that header. Like this:

Image

Turns out there's quite an easy trick to do it. You can use "if" statements in screen language. And not just for enabling hotspots:

Code: Select all

init:
    define ui_shutter_flag = False

screen ibox():
    if ui_shutter_flag:
        imagemap:
            xalign 0.98
            yalign 0.02
            auto "ibox_shut_s_%s.png"
            hotspot (74, 2, 153, 26) action SetVariable("ui_shutter_flag", False) alt "Unhide"
    else:
        imagemap:
            xalign 0.98
            yalign 0.02
            auto "ibox_s_%s.png"
            hotspot (19, 35, 70, 70) action Return(navman.layout.look_str(game.chapter)) alt "Inspect"
            hotspot (115, 35, 70, 70) action Return(navman.layout.talk_str(game.chapter)) alt "Talk"
            hotspot (211, 35, 70, 70) action Return(navman.layout.map_str(game.chapter)) alt "Map"
            hotspot (74, 2, 153, 26) action SetVariable("ui_shutter_flag", True) alt "Unhide"
So that defines a flag to say if the panel is shuttered or not. I've defined a hotspot for the title box. I don't highlight it on hover, but it takes mouse clicks. And when it gets a click it uses the SetVariable action to change the value from True to False or vice versa.

Changing the variable means a different imagemap gets displayed. But it's in the same place, and since the images behind the imagemaps are the same size (albeit largely transparent in one case) it just looks as if the buttons disappear leaving only the title. And in the "shuttered" version, the button hotspots are not defined, so you can't click on invisible buttons and get a result.

It also means that if you have a loop like this:

Code: Select all

    while True:
        call screen ibox
		# do stuff with _return
... then it's still the same screen, shuttered or not, and the screen doesn't even bother returning for shutter events.

Anyway, I just figured that out. I was feeling quite pleased with myself so I thought I'd share. Hopefully someone finds it useful :)

Re: "Shuttering" a GUI panel

Posted: Wed Nov 01, 2017 10:29 pm
by Ibitz
I rather like this design. It's pretty awesome! Are you able to have more than 3 clickable icons with this? If so, I might just use it for my next game, since I'm trying to go for a simple "social media" look. If you wouldn't mind, I would credit you and everything if I did use it. Wish I could give ya a gold star or something, for this awesome piece you've shared. :)

Re: "Shuttering" a GUI panel

Posted: Thu Nov 02, 2017 8:43 am
by docclox
Ibitz wrote:
Wed Nov 01, 2017 10:29 pm
I rather like this design. It's pretty awesome!
Thank you! :D
Ibitz wrote:
Wed Nov 01, 2017 10:29 pm
Are you able to have more than 3 clickable icons with this?
Oh yeah. It's just an imagemap, so it can be as simple or as complex as you like.
Ibitz wrote:
Wed Nov 01, 2017 10:29 pm
If so, I might just use it for my next game, since I'm trying to go for a simple "social media" look. If you wouldn't mind, I would credit you and everything if I did use it.
By all means!

Re: "Shuttering" a GUI panel

Posted: Thu Nov 02, 2017 6:03 pm
by Ibitz
docclox wrote:
Thu Nov 02, 2017 8:43 am
Ibitz wrote:
Wed Nov 01, 2017 10:29 pm
I rather like this design. It's pretty awesome!
Thank you! :D
Ibitz wrote:
Wed Nov 01, 2017 10:29 pm
Are you able to have more than 3 clickable icons with this?
Oh yeah. It's just an imagemap, so it can be as simple or as complex as you like.
Ibitz wrote:
Wed Nov 01, 2017 10:29 pm
If so, I might just use it for my next game, since I'm trying to go for a simple "social media" look. If you wouldn't mind, I would credit you and everything if I did use it.
By all means!
Awesome! Thank you so much for the response. I'll definitely be using it, then. :)