(Solved)Vpgrid empty cells

[Wertous]

Hello everyone!
According to the documentation
https://www.renpy.org/doc/html/screens.html
written about Vpgrid :
"If there are not enough children to fill all cells, any empty cells will not be rendered."
So the question arose: can I still insert some kind of picture so that I have displayed empty cells?
I have an inventory in Game based on vpgrid
And everything works fine - but empty space where are empty cells visually spoils the picture.

[Alex]

... So the question arose: can I still insert some kind of picture so that I have displayed empty cells? ...

If you show your cells like buttons with some bg, then try to add some empty frames to fill up the last line of inventory slots.

Try something like

Code: Select all

vpgrid:
    cols 5
    for i in inventory:
        button:
            # all the button's stuff

    if len(inventory)%5 != 0: # if there's the reminder of division inventory length to number of columns
        for i in range(5 - len(inventory)%5):
            frame:
                background 'my_cell_bg'
                # xysize (50, 50)

[Wertous]

Thanks for the advice, but with this code, my inventory looks like a mosaic, all the elements are located diagonally
So far, this is all that I have managed to achieve with this code.
I got the idea to just draw blank cells in the background and it looks good but it would be better if they could also scroll with the main background of the item buttons
Hence the question is whether it is possible to somehow combine into one scrollable area Vpgrid and viewport?

[Alex]

Thanks for the advice, but with this code, my inventory looks like a mosaic, all the elements are located diagonally
So far, this is all that I have managed to achieve with this code. ...

Hm, that's strange... What's the actual code you've used?
Vpgrid is a kind of a viewport.
You could use a viewport and put a grid (not the vpgrid) inside it.

This code worked for me

Code: Select all

default inventory = '12345678901234567'

screen test_scr():
    
    vpgrid:
        align(0.95, 0.1)
        cols 5
        spacing 5
        ysize 400
        draggable True
        mousewheel True
        
        for i in inventory:
            frame:
                xysize (170, 170)
                background Solid("#ccc")
                text "[i]" align(0.5, 0.5)
                
                # all the button's stuff

        if len(inventory)%5 != 0: # if there's the reminder of division inventory length to number of columns
            for i in range(5 - len(inventory)%5):
                frame:
                    background Solid("#ccc")
                    xysize (170, 170)

[Imperf3kt]

If you want to add empty cells, you only need to add a null.
For example, using the sample code from the documentation

Code: Select all

screen vpgrid_test():

    vpgrid:

        cols 2
        spacing 5
        draggable True
        mousewheel True

        scrollbars "vertical"

        # Since we have scrollbars, we have to position the side, rather
        # than the vpgrid proper.
        side_xalign 0.5

        for i in range(1, 100):

            textbutton "Button [i]":
                xysize (200, 50)
                action Return(i)
        null
        null
        textbutton _("Another button") action NullAction()

[Wertous]

Alex
i created a new project to test your code and it really works very well thanks for the advice
Apparently I need to check a lot in my main project.
Imperf3kt
I don't quite understand why you need to specify null twice What happens when this happens, he draws two times an empty space then creates a button
In any case, thanks for your advice

[Imperf3kt]

I posted it as an example. You can use just one to make an empty cell, I should have given a more clear example

[Wertous]

Ok I understood you, thanks for your idea!

[Wertous]

Alex I need your help!
as I wrote earlier your code works fine in the newly created project
But I just can't figure out why it doesn't work as it should in my inventory.
With this code, nothing new is added to the visible area.

Code: Select all

screen inventory_view_1(inventory):
    
    side "c r":
        style_group "invstyle"
        area (0, 0, 600, 375) xpos -75 ypos 100
    
   
    
    
        vpgrid id ("vp"+inventory.name):
        
            mousewheel True
            draggable True
            xsize 600 ysize 375
            cols 5 spacing 5
            for item in inventory.inv:
                $ value_z = item[0].value_z
                $ value_s = item[0].value_s
                $ value_m = item[0].value_m
                $ qty = str(item[1])
                
                if pl_all and pl_sword==False and pl_equipment==False: # Показать все
                    if item[0].img:
                        $ img = item[0].img
                        $ hover_img = im.Sepia(img)
                        frame:
                            style "slots"
                            xysize (90, 90)
                            imagebutton:
                                mouse "hand"
                                idle LiveComposite( (80,80), (0,0), img,(10,60), Text(qty))
                                hover LiveComposite((80,80),(0,0),"images/elements/Frame_hover.png",(0,0), hover_img, (10,60), Text(qty))
                                action SetVariable("selected_item",item[0] ), Show ("question_screen"),Hide("nameitem") 
                                hovered Show("nameitem",item=item)
                                unhovered Hide("nameitem")
            
                                
                                
            if len(inventory.inv)%5 != 0: 
                for i in range(5 - len(inventory.inv)%5):
                    frame:
                        background "images/elements/square_5.png"
                        xysize (90, 90)   
                        
                        
            if len(inventory.inv) == 0:
                add Null(height=90,width=90)            
        vbar value YScrollValue("vp"+inventory.name):
            ymaximum 400
            left_bar Frame("images/elements/bar_1.png")
            right_bar Frame("images/elements/bar_1.png")  
            thumb"images/elements/button_skroll_1.png"
            xpos 10                

[Wertous]

Even if I just add something like this instead of your code
then for some reason, after inventory items, empty cells do not show
I don't understand what could be the reason

Code: Select all

for item in inventory.inv:
    frame:
        style "slots"
        xysize (90, 90)
        imagebutton:
        mouse "hand"
        idle LiveComposite( (80,80), (0,0), img,(10,60), Text(qty))
        # all about button 
frame:
    background "images/elements/square_5.png"
    xysize (90, 90)              
    
                        
                        
    
                            

[Wertous]

In general, the situation is as follows.
I rewrote the screen I used for inventory,removed side "c r":
And everything works
why the code that I wrote earlier does not work, I still cannot understand