How to manipulate viewports ?

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
korova
Veteran
Posts: 217
Joined: Sat Jun 27, 2009 5:15 pm
Completed: Ivy, Chocolate, Time, Clair Obscur
Projects: Writing exercises, The House [Nano18]
Tumblr: korova08
itch: korova
Location: Normandie, France
Contact:

How to manipulate viewports ?

#1 Post by korova »

Sorry to bother you, renpy specialists, but I'm currently struggling to implement viewports

I'm trying to mimic messages appearing on a tablet-like screen
I'd like the messages to appear on the bottom of the white rectangle and going up when new messages appear.
When there are too many messages, they "disappear" but you can make them appear again scrolling the mouse or using the scrollbar of the viewport

Here is the code I use

Code: Select all

screen comms(correspondant,messages):

    add "gui/tab.png"

    viewport id "com":

        area (268,98,744,486)

        draggable False
        scrollbars "vertical"
        mousewheel True

        yalign 1.0

        vbox:
            spacing 10


            for message in messages:

                frame:
                    has vbox

                    label message[0]
                    text message[1]
At the moment : I don't know how to make the messages appear aligned on the bottom and going up when a new message appear.
Plus : the scrollbar is in the middle of the white rectangle and outside on top.

the screen is called with a "showscreen" statement

screenshot :
viewport.png
Any idea what's wrong in my code ?
Last edited by korova on Sat Mar 25, 2017 6:08 am, edited 2 times in total.

User avatar
Alex
Lemma-Class Veteran
Posts: 3090
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: How to use viewports ?

#2 Post by Alex »

Try to use "side" to place content and scrollbar onscreen properly. See https://www.renpy.org/doc/html/screens.html#viewport
Also set yinitial to 1.0 to show the very last message.

User avatar
korova
Veteran
Posts: 217
Joined: Sat Jun 27, 2009 5:15 pm
Completed: Ivy, Chocolate, Time, Clair Obscur
Projects: Writing exercises, The House [Nano18]
Tumblr: korova08
itch: korova
Location: Normandie, France
Contact:

Re: How to use viewports ?

#3 Post by korova »

So, after a lot and trials and errors and with the help of your advice (Thanks !), I achieved a much more aesthetic aspect for my viewport.
viewport-enhenced.png
with that code

Code: Select all

screen comms(correspondant,messages):

    add "gui/tab.png"

    side "c r":
        area (268,98,744,486)

        viewport id "com":

            draggable False
            mousewheel True
            yinitial 1.0

            vbox:
                xsize 730
                
                style_prefix "comm"

                for message in messages:
                    $ comm_image = "comm " + message[0]
                    if message[0] == "laura":

                        hbox:
                            xalign 1.0

                            frame:
                                background Solid("#00ffaa")

                                has vbox

                                label "Me" xalign 1.0 text_color "#006644"
                                text message[1]

                            add "comm laura"
                    else:
                        hbox:

                            add comm_image

                            frame:
                                xalign 0.0
                                background Solid("#cc99ff")

                                has vbox

                                label message[0] text_color "#6600cc"
                                text message[1]

        vbar value YScrollValue("com")
A little issue still remains.

When I first show the screen, last messages are visible at the bottom of the screen, first ones are hidden, as expected.

But when I add a new message (like that)

Code: Select all

    $ messages_eliott.append(("laura","Nanana"))
    pause
the new message is "hidden", and I have to scroll up to make it appear. I'd like it to appear at the bottom and "pushing" old messages up.

I have no idea how to do that.... :(

User avatar
Alex
Lemma-Class Veteran
Posts: 3090
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: How to use viewports ?

#4 Post by Alex »

Maybe reshow screen after message was added?

User avatar
korova
Veteran
Posts: 217
Joined: Sat Jun 27, 2009 5:15 pm
Completed: Ivy, Chocolate, Time, Clair Obscur
Projects: Writing exercises, The House [Nano18]
Tumblr: korova08
itch: korova
Location: Normandie, France
Contact:

Re: How to use viewports ?

#5 Post by korova »

Still struggling with my viewport to show the bottom portion of the iewport first.
Alex wrote:Maybe reshow screen after message was added?
Tried that, didn't work.

The viewport content updates when I modify the list that controls it, but the new message is at the bottom, hidden. I want it to be visible.

My current screen code is:

Code: Select all

screen comms(correspondant,messages):

    add "gui/tab.png"

    side "c r":
        area (268,98,744,486)

        viewport id "com":

            draggable False
            mousewheel True
            yinitial 1.0

            vbox:
                xsize 730

                style_prefix "comm"

                for message in messages:

                    if message[0] == "laura":

                        hbox:
                            xalign 1.0

                            frame:
                                background Solid("#00ffaa")

                                has vbox

                                label "Me" xalign 1.0 text_color "#006644"
                                text message[1]

                            add "comm laura"
                    else:
                        $ comm_image = "comm " + message[0]
                        hbox:

                            add comm_image

                            frame:
                                xalign 0.0
                                background Solid("#cc99ff")

                                has vbox

                                label message[0] text_color "#6600cc"
                                text message[1]

        vbar value YScrollValue("com"):
            unscrollable "hide"
I show the screen for the first time with

Code: Select all

show screen comms("John",messages_john)
And then I update viewport content with this function and this instruction

Code: Select all

init python:

    def new_message(liste_messages,message):

        liste_messages.append(message)

Code: Select all

$ new_message(messages_john,("laura",_("What do you know about this new security thing?")))
Viewport content is updated without re-showing the screen, but my new message is hidden at the bottom, I have to scroll to make it appear (which is not trivial for the player...)

I thought about manipulating the viewport position by manipulating the scrollbar.
So I first added this to my function definition

Code: Select all

    def new_message(liste_messages,message):

        liste_messages.append(message)
        YScrollValue("com") = 1.0
which resulted in an error, because, as I discovered, YScrollValue is not a variable but a BarValue object.
So I tried to manipulate that BarValue object like that

Code: Select all

    def new_message(liste_messages,message):

        liste_messages.append(message)

        YScrollValue("com").get_adjustment().change(1.0)
Which didn't work either, because I discovered that 1.0 doesn't represent a proportion but more an absolute value, and that value changes all the time.
So I thought range of the bar would represent the maximum, and I tried that

Code: Select all

    def new_message(liste_messages,message):

        liste_messages.append(message)

        YScrollValue("com").get_adjustment().change(YScrollValue("com").get_adjustment().range)
which still didn't work. Last message still appear hidden, and I have to scroll to make it appear. Plus I randomly bump on this error, depending on how I moved the scrollbar inside the game

Code: Select all

While running game code:
  File "game/script.rpy", line 366, in script
    $ new_message(messages_john,("laura",_("OK, love dates!")))
  File "game/script.rpy", line 366, in <module>
    $ new_message(messages_john,("laura",_("OK, love dates!")))
  File "game/script.rpy", line 78, in new_message
    YScrollValue("com").get_adjustment().change(0.0)
  File "renpy/common/00barvalues.rpy", line 475, in get_adjustment
    raise Exception("The displayable with id %r is not declared, or not a viewport." % self.viewport)
Exception: The displayable with id u'com' is not declared, or not a viewport.
At that point I feel a little depressed and I don't see what to try next.

I can't wrap my head around that BarValue object and ui.adjusment() thing.

Is there a specialist around here that might explain me how all that work?

User avatar
Alex
Lemma-Class Veteran
Posts: 3090
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: How to manipulate viewports ?

#6 Post by Alex »

This seems to work for me

Code: Select all

init python:
    def add_msg(x):
        global messages
        messages.append(x)
        Hide("my_scr")()
        Show("my_scr", msgs_list=messages)()
        
screen my_scr(msgs_list):
    frame:
        pos(100,100)
        side "c r":
            area (0,0,200,150)

            viewport id "com":

                draggable False
                mousewheel True
                yinitial 1.0

                vbox:
                    xfill True
                    text "Test" size 30 xalign 0.5
                    for msg in msgs_list:
                        text "%s - %s" %(msg[0], msg[1])
                        null height 10
                        
            vbar value YScrollValue("com"):
                unscrollable "hide"

# The game starts here.
label start:
    $ messages = [["J","Hi!"], ["Me", "?"], ["J", "?!"], ["Me","..."], ["J", "x_x"]]
    "..."
    show screen my_scr(messages)
    "."
    $ add_msg(["xxx","Ok?"])
    "?"

User avatar
korova
Veteran
Posts: 217
Joined: Sat Jun 27, 2009 5:15 pm
Completed: Ivy, Chocolate, Time, Clair Obscur
Projects: Writing exercises, The House [Nano18]
Tumblr: korova08
itch: korova
Location: Normandie, France
Contact:

Re: How to manipulate viewports ?

#7 Post by korova »

Thanks a lot, it works !

It seems a bit strange to have to hide the screen first to show it again immediatly after, but as long as it's working...

User avatar
xavimat
Eileen-Class Veteran
Posts: 1460
Joined: Sat Feb 25, 2012 8:45 pm
Completed: Yeshua, Jesus Life, Cops&Robbers
Projects: Fear&Love, unknown
Organization: Pilgrim Creations
Github: xavi-mat
itch: pilgrimcreations
Location: Spain
Contact:

Re: How to manipulate viewports ?

#8 Post by xavimat »

korova wrote:It seems a bit strange to have to hide the screen first to show it again immediatly after, but as long as it's working...
This is because RenPy is smart enough to do nothing when you ask it to show something that is already shown. Actually you don't want to show, you want to refresh it. :)
I've had the same problem and did the same thing of hiding/showing, but in this forum there was another solution 'refreshing' the screen. I'm sorry but I can't remember the exact function that was used for that (I'm getting old...).
Comunidad Ren'Py en español: ¡Únete a nuestro Discord!
Rhaier Kingdom A Ren'Py Multiplayer Adventure Visual Novel.
Cops&Robbers A two-player experiment | Fear&Love Why can't we say I love you?
Honest Critique (Avatar made with Chibi Maker by ~gen8)

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot]