[SOLVED] save/load preview on hover?

[Marchare]

I'm looking for a way to make the save/load screen display slot informations on hover like this:



On the right, you get the FileScreenshot, the slot number, the time/date and a bit of the game text.
These informations only appear here, not on the slot themselves.

Any suggestion?

[xavimat]

In the file_picker screen add hovered and unhovered actions to the button:
Something like this:

Code: Select all

    $ infotext = file_name+'. '+file_time+'\n'+save_name
                button:
                    action FileAction(i)
                    hovered Show("moreinfo", txt=infotext, img=FileScreenshot(i))
                    unhovered Hide("moreinfo")

(The "infotext" variable uses variables defined in the hbox of the button, they have to be moved before the infotext line)

Then add your infoscreen:

Code: Select all

screen moreinfo(txt, img):
    add img
    text txt

EDIT:
A different way for the same. Using Tooltip() you don't need to add a screen:
add the tooltip default at the beginning of the file_picker screen:

Code: Select all

screen file_picker():
    default tt = Tooltip(("", Null()))

Then, in the button, add the "hovered" action. As above, the variables used in infotext must be set before infotext itself:

Code: Select all

                # Each file slot is a button.
                $ file_name = FileSlotName(i, columns * rows)
                $ file_time = FileTime(i, empty=_("Empty Slot."))
                $ save_name = FileSaveName(i)
                $ infotext = file_name+'. '+file_time+'\n'+save_name

                button:
                    action FileAction(i)
                    hovered tt.Action((infotext, FileScreenshot(i)))

Finally, add, in the same file_picker screen the info of tt.value (the text and the image):

Code: Select all

    frame:
        align (0.1, 0.9)
        has vbox
        text tt.value[0]
        add tt.value[1]

[Marchare]

Thanks for your help!

Let's see, I have this code right now:

Code: Select all

init -2 python: #we initialize x and y, so the load_save_slot screen below works at startup
    x=32
    y=32
screen load_save_slot:
    add FileScreenshot(number) xpos x ypos y
    
screen save:
    tag menu
    add "image/ui/saveload/s_back30.png"
    use file_picker

screen load:
    tag menu
    add "image/ui/saveload/l_back30.png"
    use file_picker

screen file_picker:
    default tt = Tooltip(("", Null()))
    # Each file slot is a button.
    $ file_name = FileSlotName(i, columns * rows)
    $ file_time = FileTime(i, empty=_("Empty Slot."))
    $ save_name = FileSaveName(i)
    $ infotext = file_name+'. '+file_time+'\n'+save_name

    imagebutton auto "image/ui/saveload/stuff_%s.png" xpos 32 ypos 32 focus_mask None action FileAction(1) hovered tt.Action((infotext, FileScreenshot(i)))
    use load_save_slot(number=1, x=32, y=32)
    imagebutton auto "image/ui/saveload/stuff_%s.png" xpos 138 ypos 32 focus_mask None action FileAction(2) hovered tt.Action((infotext, FileScreenshot(i)))
    use load_save_slot(number=2, x=138, y=32)
    imagebutton auto "image/ui/saveload/stuff_%s.png" xpos 244 ypos 32 focus_mask None action FileAction(3) hovered tt.Action((infotext, FileScreenshot(i)))
    use load_save_slot(number=3, x=244, y=32)
    imagebutton auto "image/ui/saveload/stuff_%s.png" xpos 350 ypos 32 focus_mask None action FileAction(4) hovered tt.Action((infotext, FileScreenshot(i)))
    use load_save_slot(number=4, x=32, y=32)
    imagebutton auto "image/ui/saveload/stuff_%s.png" xpos 456 ypos 32 focus_mask None action FileAction(5) hovered tt.Action((infotext, FileScreenshot(i)))
    use load_save_slot(number=5, x=32, y=32)
    frame:
        align (0.1, 0.9)
        has vbox
        text tt.value[0]
        add tt.value[1]

And I get this error:

Code: Select all

While running game code:
  File "game/screens.rpy", line 694, in execute
    screen load:
  File "game/screens.rpy", line 697, in execute
    use file_picker
  File "game/screens.rpy", line 699, in execute
    screen file_picker:
  File "game/screens.rpy", line 702, in execute
    $ file_name = FileSlotName(i, columns * rows)
  File "game/screens.rpy", line 702, in <module>
    $ file_name = FileSlotName(i, columns * rows)
NameError: name 'i' is not defined

Tried to replace 'i' with 'number', but I get a similar error.

By the way I'm using imagebutton for the file slots since I don't really know better.
However, since I'm trying to imitate as closely as possible the first post's screenshots (working on the Ren'py port of said game), the screenshots are entirely covering the imagebutton zones and we can't see the red frame ("stuff_hovered") that's supposed to appear when hovered.

Edit: your first option works with Ren'py's default styling. Don't know for the second.

[xavimat]

Well. the "i" is the variable in the for loop. My code was part of the screen. I copy here the whole screen:

Code: Select all

screen file_picker():
    default tt = Tooltip(("", Null()))

    frame:
        style "file_picker_frame"
        # ADD HERE THE POSITIONAL PROPERTIES 

        has vbox

        # The buttons at the top allow the user to pick a
        # page of files.
        hbox: # MAYBE YOU DON'T NEED THIS HBOX WITH THESE BUTTONS
            style_group "file_picker_nav"

            textbutton _("Previous"):
                action FilePagePrevious()

            textbutton _("Auto"):
                action FilePage("auto")

            textbutton _("Quick"):
                action FilePage("quick")

            for i in range(1, 9):
                textbutton str(i):
                    action FilePage(i)

            textbutton _("Next"):
                action FilePageNext()

        $ columns = 2  # YOUR GRID HAS 5 COLUMNS AND 6 ROWS
        $ rows = 5

        # Display a grid of file slots.
        grid columns rows:
            transpose True
            xfill True
            style_group "file_picker"

            # Display ten file slots, numbered 1 - 10.
            for i in range(1, columns * rows + 1):

                # Each file slot is a button.
                $ file_name = FileSlotName(i, columns * rows)
                $ file_time = FileTime(i, empty=_("Empty Slot."))
                $ save_name = FileSaveName(i)
                $ infotext = file_name+'. '+file_time+'\n'+save_name

                button:
                    action FileAction(i)
                    hovered tt.Action((infotext, FileScreenshot(i)))

                    xfill True

                    has hbox

                    # Add the screenshot.
                    add FileScreenshot(i)  

                    text "[file_name]. [file_time!t]\n[save_name!t]"  # DELETE THIS

                    key "save_delete" action FileDelete(i)

    frame:
        align (0.1, 0.9)  # <- Change this position to fit yours
        has vbox        
        text tt.value[0]
        add tt.value[1]

You don't need the screen load_save_slot. The ScreeShot image is stored in tt.value[1] and displayed in the frame, at the bottom of the code. Change the position to fit yours.

[Marchare]

... I can't seem to make the definition of "number" or "i" without the use of "for i in range().
The idea would be to multiply the first imagebutton 5 times horizontally and 6 times vertically.
But I don't know how to apply grid nor range with my "style-less" imagebuttons, which leads me to quite a lot of issues.

[xavimat]

I don‘t know why you want to use imagebutons. You can use button and add the Screenshots.

EDIT: I mean, if you have a reason to use Imagebuttons instead of the default file_picker screen, please explain it.
I think you can achieve what you want using the default screen:

In the default screen you have columns and rows and can define them:

Code: Select all

$ columns = 2  
$ rows = 5

Then apply positional values to the grid to leave room on the left to add the frame with the information.

[Marchare]

Well, as I stated earlier I am not doing this for some game of my own. I'm doing the Ren'py port of a Japanese game, so the idea is to imitate it's UI as closely as possible.
And since the UI looks like this:


I dont know how to do this with buttons and Renpy's styling option. Also the FileScreenshot must appear both in their original stance and then on the right on hover.

[xavimat]

Ok. Give me a moment.

EDIT:
Try this. I'm using the default 800x600 window. You need to change positional and size values to fit your screen:

Code: Select all

init python:
    config.thumbnail_width = 104
    config.thumbnail_height = 71
    
screen file_picker():

    default tt = Tooltip((Null(), "", "", ""))

    hbox:
        xysize (600, 550)
        pos (25, 25)
        box_wrap True

        for i in range(1, 31):
            # Each file slot is a button.
            $ file_name = FileSlotName(i, 30)
            $ file_time = FileTime(i)
            $ save_name = FileSaveName(i)
            $ slot_foot = str(i)
            if len(slot_foot) < 3:
                $ slot_foot = '0' + slot_foot
            if len(slot_foot) < 3:
                $ slot_foot = '0' + slot_foot
            $ slot_foot = "No " + slot_foot

            vbox:

                button:
                    left_padding 2
                    right_padding 2
                    xysize (110, 75)
                    background None
                    hover_background "#f00"
                    action FileAction(i)
                    hovered tt.Action((FileScreenshot(i), slot_foot, file_time, save_name))

                    xfill True

                    has vbox

                    # Add the screenshot.
                    if file_time:
                        add FileScreenshot(i) xalign .5
                    else:
                        add Solid("#900", xysize=(110, 75)) # HERE THE IMAGE OF THE EMPTY SLOT

                    key "save_delete" action FileDelete(i)

                text slot_foot xalign .5 size 15
                
    vbox:
        xsize 200
        pos (600, 100)
        
        add tt.value[0] xalign .5
        text tt.value[1]  # ADD POSITIONAL VALUES TO THESE
        text tt.value[2]
        text tt.value[3] size 15

screen save():
    tag menu
    add "image/ui/saveload/s_back30.png"
    use file_picker

screen load():
    tag menu
    add "image/ui/saveload/l_back30.png"
    use file_picker

[Marchare]

It works!
The text below the slots worked too, but since the slot numbers are already in the background pic I removed it. Will make other adjustements later.

I have a hard time figuring how to properly place the buttons. When I try to ajust the vbox's padding and hbox's pos, the buttons seem to shorten? Don't know what's causing this.
(also extra question: is there a way to change the text's font?)

Thank you for your help and your patience so far! >_<

[xavimat]

First, set the config thumbnail size:
config.thumbnail_width = ???
config.thumbnail_height = ???
The saves you've already made won't change, you need to overwrite them to see the changes in that values.

Then play with all the positional/size values: xysize (the width and height of a frame, hbox, vbox, button...), pos, left_padding, right_padding, xsize, xalign. It's important to understand what every of that does. If you have a question, we can link to the documentation. The page about style properties is a long and frightening one, but you need to face it http://renpy.org/doc/html/style_properties.html

As I can see, you have the empty slots image in the background, then you can delete the red square I've made as a placeholder:

Code: Select all

add Solid("#900", xysize=(110, 75)) # HERE THE IMAGE OF THE EMPTY SLOT

And also delete the 'if file_time:' that I've put for that (and indent properly the line add FileScreenshot(i)

You say you don't need the "number" text under the buttons (line text slot_foot xalign .5 size 15) but you need some empty space in there. Use "null height 15" with the number of pixels instead of the text.

Look at the documentation to find exactly what you need: the boxes can take a "spacing" property that maybe is causing you problems: http://renpy.org/doc/html/style_propert ... properties

Also, you can change the font, but I'm not telling you how look at the Text Style Properties of the "text" statement: http://renpy.org/doc/html/screens.html#text

Good luck!

[Marchare]

The finalization of the saveload menu took much longer than expected. Since it's very long, here's the part pertaining this thread only:

Code: Select all

    default tt = Tooltip((Null(), "", "", "", Null()))             # adds a black border on top of the right-hand FileScreenshot,
    $ borderblack = "image/ui/saveload/borderblack.png"           # they were in the original game so we added them, though they're useless
           
    hbox:
        xysize (600, 550)
        pos (30, 30)
        spacing 0
        box_wrap True

        if int(persistent._file_page) == 1:
            $ page_sl1 = 1   # There's only 2 file pages, with 30 slots each.
            $ page_sl2 = 31 # 1rst page goes from save n°01 to n°30.
        else:
            $ page_sl1 = 31
            $ page_sl2 = 61 # 2nd page goes from save n°31 to n°60.

        for i in range(page_sl1, page_sl2):
            # Each file slot is a button.
            $ file_name = FileSlotName(i, 30)
            $ file_time = FileTime(i, format='%d/%m/%Y %H:%M')
            $ slot_foot = str(i)
            if len(slot_foot) < 3:
                $ slot_foot = '0' + slot_foot
            if len(slot_foot) < 3:
                $ slot_foot = '0' + slot_foot
            $ slot_foot = "No." + slot_foot
            $ save_name = FileSaveName(i)


            vbox:
                spacing 0

                button:
                    left_padding 2
                    right_padding 2
                    top_padding 2
                    bottom_padding 2
                    left_margin 0
                    right_margin 0
                    top_margin 0
                    bottom_margin 0
                    xysize (104, 79)
                    background None
                    hover_background "image/ui/saveload/borderred.png"
                    action get_save_name(i) #asks the player to name the save, coded somewhere else.
                    hovered tt.Action((FileScreenshot(i), slot_foot, file_time, save_name, borderblack)) #save_name shows the saved text

                    xfill True

                    add FileScreenshot(i)

                    key "save_delete" action FileDelete(i)
                    key "K_BACKSPACE" action FileDelete(i)

                null height 11 width 106
       
    add tt.value[0] xpos 625 ypos 155
    add tt.value[4] xpos 625 ypos 155
    
    vbox:
        xsize 150
        pos (600, 175)

        text tt.value[1] ypos 80 size 15
        text tt.value[2] ypos 80 size 15
        text tt.value[3] xpos 5 ypos 83 size 12

Here's the result:


Positionning properly the left-side FileScreenshots AND the red framing "borderred.png" was quite a hassle.

Anyway, thank you xavimat!
I wonder if stuff like how to show the save time or the last line shown in-game could be added in the documentation?
Sounds like the function quite a few devs would like to add in their games.