Custom UI question: Item preview navigation

[BunnyInfernal]

Hi. Got a question on a UI element I'd like to try out. I'm sure I can probably get an idea of how to do it if I scour through the documentation, but I thought it might go smoother if I just ask the knowledgeable LSF people first.

I'd like to create a menu window where the player can select an item (in this case, an outfit for their character). The idea being that there will be a preview window showing the image of the item in the middle, and buttons on either side that will allow the player to navigate forward or backward through the available options.

Here's a quick mock-up of what I'm thinking of.

Can anyone give me some ideas on how to go about creating this?

Thanks for your help!

[gas]

The best way that come to my mind is to use a deque.

Code: Select all

init python:
    from collections import deque

default dress =deque(["jacket","shirt","hat"])

screen select_dress():
    hbox:
        imagebutton auto "left_arrow_%s.png" action Function("dress_move",1)
        $ datext = dress[0]
        text "[datext]" # that should be changed with an imagebutton that do something...
        imagebutton auto "right_arrow_%s.png" action Function("dress_move", -1)

init python:
    def dress_move(x):
        dress.rotate(x)

This is a broad prototype, not tested.

[BunnyInfernal]

Thanks! I'm totally unfamiliar with deque, but it looks fairly simple. I'll read up on it and give it a shot.

Update:
I'm running into a problem with the function. I get the error:

Code: Select all

TypeError: 'unicode' object is not callable

When I click on the arrow buttons I created. I tried a new project with exactly the code you provided (save for file name changes for the images), so I'm not sure where I went wrong.

Update 2:
Ah. I think I've got it. It worked when I removed the quotes in the Function() actions:

Code: Select all

screen select_dress():
    hbox:
        imagebutton auto "left_arrow_%s.png" action Function(dress_move,1)
        $ datext = dress[0]
        text "[datext]" # that should be changed with an imagebutton that do something...
        imagebutton auto "right_arrow_%s.png" action Function(dress_move, -1)