Ren'py UI feature request - Website-like table layout

In this forum we discuss the future of Ren'Py, both bug fixes and longer-term development. Pre-releases are announced and discussed here.
Post Reply
Message
Author
Counter Arts
Miko-Class Veteran
Posts: 645
Joined: Fri Dec 16, 2005 5:21 pm
Completed: Fading Hearts, Infinite Game Works
Projects: Don't Save the World
Organization: Sakura River
Location: Canada
Contact:

Ren'py UI feature request - Website-like table layout

#1 Post by Counter Arts » Mon Aug 31, 2009 5:06 pm

One of the most annoying thing I found while laying out things was that I could not get things to layout like a webpage table and have everything align properly. The grid layout was too strict that required all parts to be equal size and I have long item names. It would make dynamically generating things like store items lists to buy much easier. Also maybe a callback like row_hover would be good. I had to use ui.fixed and alter the ymaximum to something like 28 to align things vertically and hoizontally.

Is it possible to have this kind of layout that I don't have to do a hacky kind of code to use?

EDIT: Either this or I really want to have an size_group parameter for text.
Fading Hearts is RELEASED
http://www.sakurariver.ca

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Ren'py UI feature request - Website-like table layout

#2 Post by Aleema » Mon Aug 31, 2009 10:48 pm

Actually, hbox and vbox act like "tables". Think of them as <tr> and <td>, respectively.

Code: Select all

<table>
<tr>
       <td width="50%">Box1</td>
       <td>Box2</td>
</tr>
</table>
Equals:

Code: Select all

    $ui.hbox(xfill=True)
    $ui.vbox(xminimum=0.5)
    $ui.text("Box1")
    $ui.close()
    $ui.vbox()
    $ui.text("Box2")
    $ui.close()
    $ui.close()
They're not exactly alike, because Ren'Py doesn't "wrap" objects to determine what is on the next line, so you'll have to use either vbox or hbox whether you want horizontal or vertical lines of widgets. Also, you'll have to know which properties to apply to each box to make the contents do what you want.

And, to be honest, if you want to make something look a certain way you're going to have put some hard work into it. It may take have to meticulously going through each item and aligning it personally. As a programmer, you might be able to find a way around this, but if push comes to shove, you have to put some time in to get what you want.

Counter Arts
Miko-Class Veteran
Posts: 645
Joined: Fri Dec 16, 2005 5:21 pm
Completed: Fading Hearts, Infinite Game Works
Projects: Don't Save the World
Organization: Sakura River
Location: Canada
Contact:

Re: Ren'py UI feature request - Website-like table layout

#3 Post by Counter Arts » Tue Sep 01, 2009 8:04 am

Those tables are easy to replicate with the existing layout.

I'm talking about a table like this...

Code: Select all

item          | price | buy
---------------------------------------------
lime          |    34 | [buy now!]
Super Arrow   |    34 | [buy now!]
Timer         |   234 | [buy now!]
lance         |  2334 | [buy now!]
Aligning the buttons and the price on the right isn't straightforward. I suspect that I would have to make the text of the left buttons with no backgrounds. Something like that might not come naturally to someone who isn't used to programming and such and I'm not sure I would really want to combine a really long list of items with the viewport.

But if ren'py is trying to make this easier for non-programmers to use then at least I can suggest something that is closer to a non-programmer like a website designer.
Fading Hearts is RELEASED
http://www.sakurariver.ca

User avatar
PyTom
Ren'Py Creator
Posts: 15219
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Ren'py UI feature request - Website-like table layout

#4 Post by PyTom » Tue Sep 01, 2009 9:58 am

This is something I need to work on. For now, you can get away with the minwidth attribute on ui.text, which ensures that the text is always at least a minimum size, making it possible to line up columns using ui.vbox and ui.hbox.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

Post Reply

Who is online

Users browsing this forum: No registered users