[SOLVED] How to scroll Viewport with Imagebutton ?

[Pierrou]

Hi again

I'm using this code http://www.renpy.org/wiki/renpy/doc/coo ... xt_History for a readback.

I try to use some button for the navigation. But i can't make the screen scrolling when you hit the button.

I tried this code :

Code: Select all

        imagebutton auto "image/ui/backlog/previous_page_%s.png" xpos 745 ypos 162 focus_mask True action SetVariable('yvalue', yvalue - 5.0)
        imagebutton auto "image/ui/backlog/previous_line_%s.png" xpos 745 ypos 223 focus_mask True action SetVariable('yvalue', yvalue - 1.0)
        imagebutton auto "image/ui/backlog/backlog_exit_%s.png" xpos 748 ypos 277 focus_mask True  action Return()
        imagebutton auto "image/ui/backlog/next_line_%s.png" xpos 745 ypos 338 focus_mask True action SetVariable('yvalue', yvalue + 1.0)
        imagebutton auto "image/ui/backlog/next_page_%s.png" xpos 745 ypos 380 focus_mask True  action SetVariable('yvalue', yvalue + 5.0)

But it doesn't work :/ How to scroll the viewport using imagebutton then ?

Thank you in advance

[xela]

Try searching for uiadjustment functions and classes. There should be plenty of examples of those in the forums.

[Pierrou]

Hahaha thank you again Xela

I already found ui.adjustment statement : http://www.renpy.org/doc/html/screen_py ... adjustment

But it's hard to understand how it works I found many threads in the forum. No one of them use imagebutton but they are using "bar"...

My navigation is like this and i don't want to put a scrollbar... That's why i can't find anything on the forum to help me :/

Code: Select all

[UP+] (10 lines)
[UP] (1 line)
[EXIT]
[DOWN] (1 line)
[DOWN-] (10 lines)

[xela]

Scrollbar is a bar...

I've never tried this myself, I'll take a look.

[Pierrou]

Yes and that's why i don't want to put a scrollbar but only 4 imagebutton ^^

[xela]

Here you go:

Don't blame yourself for not getting this I had to read the Adjustment class after misunderstanding the documentation completely. You can apply this to any viewport.

Example will work on any fresh project in recent Ren'Pt version without any added resources. You'll have to calculate the pixel width of 10 lines yourself since I don't know what font you're using.

Code: Select all

# Declare characters used by this game.
screen test():
    default xadj = ui.adjustment()
    default yadj = ui.adjustment()
    viewport:
        child_size (10000, 10000)
        xysize (400, 400)
        id "test"
        xadjustment xadj
        yadjustment yadj
        vbox:
            spacing 10
            for i in xrange(100):
                hbox:
                    spacing 10
                    for i in xrange(10):
                        add Solid("F00", xysize=(50, 100))
                
    vbox:
        align (1.0, 0.5)
        spacing 3
        textbutton "up":
            xalign 0.5
            action Function(yadj.change, yadj.value - 10), renpy.restart_interaction
        hbox:
            textbutton "left":
                action Function(xadj.change, xadj.value - 10), renpy.restart_interaction
            textbutton "down":
                action Function(yadj.change, yadj.value + 10), renpy.restart_interaction
            textbutton "right":
                action Function(xadj.change, xadj.value + 10), renpy.restart_interaction
                

label start:
    call screen test

[xela]

LoL I just realized:

This is where your keymap udd/transform is really useful You can actually scroll down while the button is pressed and not released! You can prolly even modify udd class a bit to increase the scrolling speed the longer you keep the hold down the button (it can definitely be done with manual button class with event method override).

[Pierrou]

I tried to use your function

This is my code :

Code: Select all

screen text_history:

    #use navigation
    tag menu 
    
    key "b" action Return()
    
    if not current_line and len(readback_buffer) == 0:
        $ lines_to_show = []
        
    elif current_line and len(readback_buffer) == 0:
        $ lines_to_show = [current_line]
        
    elif current_line and not ( ( len(readback_buffer) == 3 and current_line == readback_buffer[-2]) or current_line == readback_buffer[-1]):  
        $ lines_to_show = readback_buffer + [current_line]
        
    else:
        $ lines_to_show = readback_buffer
    
    
    $ adj = NewAdj(changed = store_yvalue, step = 300)
    
    window:
        style_group "readback"
    
        side "c r":
            
            frame:
                
                has viewport:
                    mousewheel True
                    draggable True
                    yinitial yvalue - .1
                    yadjustment adj

                vbox:
                    null height 10
                    
                    for line in lines_to_show:
                        
                        if line[0] and line[0] != " ":
                            label line[0] # name

                        # if there's no voice just log a dialogue
                        if not line[2]:
                            text line[1]
                            
                        # else, dialogue will be saved as a button of which plays voice when clicked
                        else: 
                            textbutton line[1] action Play("voice", line[2])
                        
                        null height 10
        
        imagebutton auto "image/ui/backlog/previous_line_%s.png" xpos 745 ypos 223 focus_mask True action Function(adj.change, adj.value - 1), renpy.restart_interaction
        imagebutton auto "image/ui/backlog/backlog_exit_%s.png" xpos 748 ypos 277 focus_mask True action Return()

i don't get any error but it always jump to the 1st line :s Don't understand why...

[xela]

Screen code is read from top to bottom on every interaction, this:

Code: Select all

    $ adj = NewAdj(changed = store_yvalue, step = 300)

My guess would be that this resets the position as opposed to default statement that sets something up on creation and than updates it.

**Mind you, I have no idea of what this is or does: "store_yvalue" as I've never looked into it or seen the code that sets it up.

[Pierrou]

I dind't paste the whole code cause it's really huge.

But i forget to paste this :

Code: Select all

init python:
    yvalue = 1.0
    class NewAdj(renpy.display.behavior.Adjustment):
        def change(self,value):

            if value > self._range and self._value == self._range:
                return Return()
            else:
                return renpy.display.behavior.Adjustment.change(self, value)
                
    def store_yvalue(y):
        global yvalue
        yvalue = int(y)

I think you'll understand what is store_yvalue now :p

EDIT : If you need the whole code : http://pastebin.com/kvzChwmb

[xela]

Best I can tell without testing is:

Code: Select all

    class NewAdj(renpy.display.behavior.Adjustment):
        def change(self,value):

Overwrites normal behavior of change method of Adjustment class to return someplace/quit the game (less likely) when the value is above the range and and is exactly equal the range.

Code: Select all

    def store_yvalue(y):
        global yvalue
        yvalue = int(y)

Function to change the yvalue on global namespace, that is not particularity useful.

==============
I did not read the whole code

My point remains the same, did you try:

Code: Select all

    default adj = NewAdj(changed = store_yvalue, step = 300)

instead of:

Code: Select all

    $ adj = NewAdj(changed = store_yvalue, step = 300)

==============
This, is particularly odd:

Code: Select all

action Function(adj.change, adj.value - 1)

You're using direct access to classes namespace! Instead of using the control function you have defined:

Code: Select all

def store_yvalue

At this point I don't really know what to suggest...

==============
If you want to use my code, your code needs to look like this:

Code: Select all

screen text_history:

    #use navigation
    tag menu

    default adj = ui.adjustment()
   
    key "b" action Return()
   
    if not current_line and len(readback_buffer) == 0:
        $ lines_to_show = []
       
    elif current_line and len(readback_buffer) == 0:
        $ lines_to_show = [current_line]
       
    elif current_line and not ( ( len(readback_buffer) == 3 and current_line == readback_buffer[-2]) or current_line == readback_buffer[-1]): 
        $ lines_to_show = readback_buffer + [current_line]
       
    else:
        $ lines_to_show = readback_buffer
   
    window:
        style_group "readback"
   
        side "c r":
           
            frame:
               
                has viewport:
                    mousewheel True
                    draggable True
                    yadjustment adj
                    yinitial adj.value - .1

                vbox:
                    null height 10
                   
                    for line in lines_to_show:
                       
                        if line[0] and line[0] != " ":
                            label line[0] # name

                        # if there's no voice just log a dialogue
                        if not line[2]:
                            text line[1]
                           
                        # else, dialogue will be saved as a button of which plays voice when clicked
                        else:
                            textbutton line[1] action Play("voice", line[2])
                       
                        null height 10
       
        imagebutton auto "image/ui/backlog/previous_line_%s.png" xpos 745 ypos 223 focus_mask True action Function(adj.change, adj.value - 1), renpy.restart_interaction
        imagebutton auto "image/ui/backlog/backlog_exit_%s.png" xpos 748 ypos 277 focus_mask True action Return()

You can setup pages, lines, steps. You can even create buttons to change them whenever you like directly accessing the instance of the class. I just don't get the logic of the code you've posted. You'll have to explain what you require it to do providing an example/project to mess with...

[Pierrou]

My point remains the same, did you try:

Code: Select all

    default adj = NewAdj(changed = store_yvalue, step = 300)

instead of:

Code: Select all

    $ adj = NewAdj(changed = store_yvalue, step = 300)

Yes... Same problem... When i hit the button i jump to the first line instead of go 1 line up.

If you want to use my code, your code needs to look like this:

Code: Select all

screen text_history:

    #use navigation
    tag menu

    default adj = ui.adjustment()
   
    key "b" action Return()
   
    if not current_line and len(readback_buffer) == 0:
        $ lines_to_show = []
       
    elif current_line and len(readback_buffer) == 0:
        $ lines_to_show = [current_line]
       
    elif current_line and not ( ( len(readback_buffer) == 3 and current_line == readback_buffer[-2]) or current_line == readback_buffer[-1]): 
        $ lines_to_show = readback_buffer + [current_line]
       
    else:
        $ lines_to_show = readback_buffer
   
    window:
        style_group "readback"
   
        side "c r":
           
            frame:
               
                has viewport:
                    mousewheel True
                    draggable True
                    yadjustment adj
                    yinitial adj.value - .1

                vbox:
                    null height 10
                   
                    for line in lines_to_show:
                       
                        if line[0] and line[0] != " ":
                            label line[0] # name

                        # if there's no voice just log a dialogue
                        if not line[2]:
                            text line[1]
                           
                        # else, dialogue will be saved as a button of which plays voice when clicked
                        else:
                            textbutton line[1] action Play("voice", line[2])
                       
                        null height 10
       
        imagebutton auto "image/ui/backlog/previous_line_%s.png" xpos 745 ypos 223 focus_mask True action Function(adj.change, adj.value - 1), renpy.restart_interaction
        imagebutton auto "image/ui/backlog/backlog_exit_%s.png" xpos 748 ypos 277 focus_mask True action Return()

This code was found on this forum So i don't really know how it works.

I tried your code but i've the same bug... When i hit the button, i jump to the first line :p

You'll have to explain what you require it to do providing an example/project to mess with...

It's a readback. When you scroll up in game the readback opened to show the text history. I just need to put a navigation with imagebutton to scrollup or scrolldown the text history.

This is a screenshot when you enter in the the text history :



When i hit the button (it jumps to the 1st line) :

[xela]

My ability to help you without access to code/resources is very limited in this case.

For example, this code works perfectly, it doesn't matter if there are solids or text in the vp:

Code: Select all

screen test():
    default xadj = ui.adjustment()
    default yadj = ui.adjustment()
    frame:
        background Transform(Solid("FFF", xysize=(420, 420)), alpha=0.5)
        has viewport:
            align (0.5, 0.5)
            child_size (10000, 10000)
            xysize (400, 400)
            id "test"
            xadjustment xadj
            yadjustment yadj
            
            has vbox spacing 10
            for i in xrange(100):
                hbox:
                    spacing 10
                    for i in xrange(10):
                        add Solid("F00", xysize=(50, 100))
                
    vbox:
        align (1.0, 0.5)
        spacing 3
        textbutton "up":
            xalign 0.5
            action Function(yadj.change, yadj.value - 10), renpy.restart_interaction
        hbox:
            textbutton "left":
                action Function(xadj.change, xadj.value - 10), renpy.restart_interaction
            textbutton "down":
                action Function(yadj.change, yadj.value + 10), renpy.restart_interaction
            textbutton "right":
                action Function(xadj.change, xadj.value + 10), renpy.restart_interaction

label start:
    call screen test

Technically it is the same as your code... rest is stuff I cannot test without replication

Did you try setting something like child_size (800, 10000)? Maybe it will help. Viewport is coded in such a way that even if child is huge, as long as there is nothing to display there, it will not be used in the adjustment functionality.

[Pierrou]

My ability to help you without access to code/resources is very limited in this case.

I pasted the whole code before. Do you need something else ? Tell me

Did you try setting something like child_size (800, 10000)? Maybe it will help. Viewport is coded in such a way that even if child is huge, as long as there is nothing to display there, it will not be used in the adjustment functionality.

I tried but... Same problem... It jumps to the first line.

[xela]

I pasted the whole code before. Do you need something else ? Tell me

At this point, I need you to rip apart your game and put together a project that shows the problem!

From coding perspective, this:

Code: Select all

screen test2():
    default adj = ui.adjustment()
    window:
        side "c r":
            frame:
                has viewport:
                    mousewheel True
                    draggable True
                    yadjustment adj
                    yinitial adj.value - .1
                    child_size (1000, 10000)

                    has vbox spacing 10
                    for i in xrange(20):
                        hbox:
                            spacing 10
                            for i in xrange(4):
                                add Solid("F00", xysize=(50, 100))
                    # We add one last row to know it's an end:
                    hbox:
                        spacing 10
                        for i in xrange(4):
                            add Solid("FFF", xysize=(50, 100))
                
            vbox:
                spacing 3
                textbutton "--":
                    action Function(adj.change, 0), renpy.restart_interaction
                textbutton "-":
                    action Function(adj.change, adj.value - 10), renpy.restart_interaction
                textbutton "Quit":
                    action Quit()
                textbutton "+":
                    action Function(adj.change, adj.value + 10), renpy.restart_interaction
                textbutton "++":
                    action Function(adj.change, adj.range), renpy.restart_interaction

label start:
    call screen test2

Is exactly the same as your code. It doesn't matter if text or solids are rendered! It starts with some weird offset, it can jump to the end (bit wrong if you try it right off the bat due to to weird offset, but you can always correct that + it will work perfectly without the weird offset), it can jump to the very start and it can adjust itself by the amount of pixels you like. More complicated setups that require just a few more letters/lines of code can setup pages, steps and access the classes directly.

I don't know what else to suggest...

Ren'Py allows you to do almost everything save the 3D rendering, but it's hard to debug code that you cannot test. I can replicate the core logic at times but that's about it

****
If I am not clear, you can start a new renpy project and copy/paste the code I provide erasing everything in the script.rpy file. It will work without any added resources. Maybe it will help you understand the logic better so you can fix your problem...