"Shuttering" a GUI panel
Posted: Tue Oct 31, 2017 9:30 am
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:
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:
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:
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:
... 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
Suppose you have a box with buttons in it as part of your GUI. I have one that looks like this:
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:
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"
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
Anyway, I just figured that out. I was feeling quite pleased with myself so I thought I'd share. Hopefully someone finds it useful
