Grids, pseudo-grids and styling

[Iylae]

What I want to do is display a spreadsheet style grid, where the cells are clickable for interactions with minimal padding and spacing between cells (maybe 1 or 2 pixels). I don't need help with the preparation of data for the grid, sorting etc, just the styling elements.

1. I've seen cautions (though I cannot find the thread) about the grid function, though I attempted this way regardless, yet couldn't remove the huge amount of padding. I'm probably trying to alter the wrong parameter(s) so if someone could explain how to do this using grid I'd appreciate it.
2. I also tried this using hboxes within vboxes, however I don't know how to make the text clickable. If I use textbutton, I just end up with (again) large amounts of padding and styling I simply don't want. Is there a way to make text clickable, or strip the padding/spacing from a textbutton?

My issues are probably with styling but after trying pretty much every parameter I think would fix this issue for me and not getting anywhere, I'm turning to you all for help.

[Donmai]

Would the anchor text tag be useful to you?
http://www.renpy.org/doc/html/text.html#text-tag-a

[Iylae]

Would the anchor text tag be useful to you?
http://www.renpy.org/doc/html/text.html#text-tag-a

A good suggestion, thankyou. It's an improvement on what I know right now. However, I'd like to make the entire cell/box clickable, not just the text.

[SundownKid]

Then make a grid with buttons? You can use "spacing 0" to remove any padding.

[philat]

It's not very helpful for us as troubleshooters if you don't post what you're doing and what it looks like. I believe you when you say you've tried tinkering with all sorts of properties, but since there are multiple properties that can affect spacing, on multiple levels, it's just difficult to pinpoint.

For example:

Code: Select all

screen blah:
    hbox:
        vbox:
            textbutton "1" # action blah blah
            textbutton "2"
        vbox:
            textbutton "3"
            textbutton "4"

The above is a 2x2 grid with hbox/vbox. The hbox has spacing/padding/margin. The vbox has spacing/padding/margin. The textbuttons themselves have padding/margin. The DEFAULT styles for all three elements have these properties set to some number above zero, off the top of my head it's like 10 or something but I can't be bothered to check. There may be minimum or maximum properties affecting the size of each element. Obviously buttons also have a background by default, which will affect your perception of the size compared to elements that have no background like boxes.

In short, it's basically impossible to tell what you need to change without knowing what the screen looks like now, what the style tree looks like (shift+I), and what your custom styles look like.

[Iylae]

My fault for a bad OP, I appreciate your efforts despite my lack of example. You'll find one below but I apologise for not taking out the sorting feature - I hope it's not too hard to read the pertinent parts.

Code: Select all

screen test():
    modal True
    tag example
    zorder 1
    hbox:
        for col in range(len(a)):
            vbox:
                for row, jtem in enumerate(table_list):
                    if row == 0:
                        # Insert titles above the columns                        
                        if tableObject["Sort"] == col:
                            if (tableObject["Reverse"] == True):
                                $ rev = False
                            else:
                                $ rev = True
                        else:
                            $ rev = False
                        textbutton str(x[col]) action Return({"Sort": col, "Reverse": rev, "Crew": -1}) style "button2"
                    
                    if col == 0:
                        # return row number on button press
                        textbutton str(jtem[col]) action Return({"Sort": -1, "Reverse": False, "Crew": row}) style "button2"
                    else:
                        text str(jtem[col])

style button2:
    ysize 20
    spacing 1
    
# The game starts here.
label start:
    python:
        #column titles
        x = ["Name", "Age", "Location"]
        #create list of lists for the grid
        a = ["Alan", 23, "Work"]
        b = ["Bob", 56, "Home"]
        c = ["Charlie", 82, "Deceased"]
        d = ["Dan",75,"Work"]
        table_list = [a,b,c,d]
        sortIndex = 0
        tableObject = {"Sort": 0, "Reverse": False, "Crew": -1}
        while True:
            table_list.sort(key = itemgetter(tableObject["Sort"]), reverse = tableObject["Reverse"])
            if tableObject["Crew"] > -1:
                renpy.jump("outsideMenu")
            # renpy.say(None, str(tableObject["Sort"]) + " " + str(tableObject["Reverse"]))
            tableObject = renpy.call_screen("test")
            
label outsideMenu:
    $ renpy.say(None, str(table_list[tableObject["Crew"]][0]))

    return

The above code gives me:

However, I've stripped out practically all the style from the textbutton (button2), so only clicking on the text calls the interact. I want to be able to click anywhere in each cell to interact with that cell. So I want it to function like a textbutton, but look like text.

I'm really struggling with styling it seems.

[philat]

Do you need to fiddle with spacing further or is the only outstanding issue the textbutton behavior?

Re: the latter, it's odd that it's acting as you say -- textbuttons usually have transparent space responsive by default. But try changing focus_mask and see if that does the trick. http://www.renpy.org/doc/html/style_pro ... focus_mask

[Iylae]

Ok, so it looks as if the reason I cannot get the textbutton to behave like one was I didn't specify a background. I've solved this by adding the following line:

Code: Select all

style button2:
    background "#0000001"

It's not perfect but I doubt anyone will notice that transparent a background colour.

Moving on, the problem I'm having now is this (I've used background #FFF to show the size of the textbuttons):

Each text button uses the minimum amount of width possible. I want each textbutton to take up the width of the column, but setting xfill causes it to fill the entire screen. As I'll be using dynamic information in these tables, how do I make each textbutton occupy the full width of a column/vbox so all textbox widths match the largest textbox in that column?

Here's a mock up of what I want:

[philat]

The pictures were actually helpful -- since it seems the problem is that there IS no transparent space to click in your buttons. The slivers of black around your textbuttons currently are barely clickable without clicking on the text -- the rest of the blank space is actually blank space. Whereas if you have textbuttons that take up the rest of the space in the column, you can have those with background None and they'll register clicks just fine.

In any case, there's no built-in way to do what you want as far as I know. I can think of a hack, but it would be imperfect with variable width fonts. Up to you how you want to proceed, I guess.

Code: Select all

screen test():
    default xmin = 10
    # find longest item in your list of names, take its len, then multiply by some appropriate number
    $ xmin = 11 * len(max([x[0] for x in table_list], key=len)) 
    # snip for the rest of the code
                    if col == 0:
                        textbutton str(jtem[col]) action Return({"Sort": -1, "Reverse": False, "Crew": row}) style "button2" xminimum xmin

style button2_text:
    xalign 0.0 # the text will show up center aligned inside the buttons otherwise

[Iylae]

I was hoping it wouldn't be a font-width calculating loop, but a built in function.

A shame that RenPy doesn't follow the same inheritance rules as html tables.

Thanks philat, I can make my own font-width calculating function once I decide on a font.

[philat]

It's been a while since I've dabbled in html, so I don't remember off the top of my head how html works, but does it really work that way? LEAVING blank space is easy. FILLING blank space up only up to a point doesn't seem that straightforward. The issue is that the box's size is decided by the largest child -- and if you apply xfill to the buttons, the buttons take up all available space i.e., the entire screen, so the box's size becomes the entire screen. Either you have an xminimum for the buttons or you have an xmaximum for the box, but you have to have a limit somewhere. As far as I know, there's no built-in function to have the limit be the size of the largest child (I mean, I could be wrong).

I also don't work with grids often so I have no idea if a grid would behave differently. *shrug*

[Iylae]

In html you could set the width of a child to the maximum size allowed by it's parent, providing the parent (or higher) had a set width. See here for a simple example. I think I slightly mislead you by saying it does, when you have the option of changing the behaviour by what parameters you set.

As for grids, I saw a PyTom post about recommending using vboxes and hboxes over grid but can't find it any more. The post was an old one as it was using the ui.grid() function rather than the renpy screen language. Tonight I'll take a look at where I can get using a grid, and show my results, just for the sake of thoroughness.