Scrolling on navigation images

[isobellesophia]

Hello, i wanted some help.

I had my gallery code, i only show this part becuase its too long.

Code: Select all

screen imagegallery():
    tag menu
    use exgame_menu(scroll="viewport"):
        grid 3 3:
            style_prefix "gslot"
            xalign 0.5
            yalign 0.5
            spacing gui.slot_spacing
            add g.make_button("cg_gallery01","images/placeholder.png")
            add g.make_button("cg_gallery02","images/placeholder.png")
            add g.make_button("cg_gallery03","images/placeholder.png")
            add g.make_button("cg_gallery04","images/placeholder.png")
            add g.make_button("cg_gallery05","images/placeholder.png")
            add g.make_button("cg_gallery06","images/placeholder.png")
            add g.make_button("cg_gallery07","images/placeholder.png")
            add g.make_button("cg_gallery08","images/placeholder.png")
            add g.make_button("cg_gallery09","images/placeholder.png")

style gslot:
    xsize 256
    ysize 144

All i want is, when i click a thumbnail in the images gallery, and the images show, i want to have them a scrollbar on the right side, because my image is large. It is about 500x2000.. can somebody help me and how would i put a scrollbar to review the image at full navigation? I only use scrollbar to vertical only to show the full image.

Sorry for bad english...

[isobellesophia]

This is the image (just a placeholder, the top of the image is a circle.)

But i want to scroll it up to down, and letting the user to scroll it for viewing its image, but i found nothing and dont know how , also, this image is large than the resolution.

[Alex]

Gallery images are shown up in a _gallery screen (\renpy-xxx-sdk\renpy\common\00gallery.rpy), so you can recreate it the way you like in your script file. Something like

Code: Select all

screen _gallery:

    side "c b r":
        area (100, 100, 600, 600)

        viewport id "vp":
            draggable True
    
            if locked:
                add "#000"
                text _("Image [index] of [count] locked.") align (0.5, 0.5)
            else:
                for d in displayables:
                    add d align (0.5, 0.5)
                    
        bar value XScrollValue("vp") ysize 50
        vbar value YScrollValue("vp") xsize  50

        
    if gallery.slideshow:
        timer gallery.slideshow_delay action Return("next") repeat True

    key "game_menu" action gallery.Return()

    #if gallery.navigation: #you'll really need navigation...))
    use gallery_navigation

In this case you'll need navigation buttons to go to next image, 'cause clicking over viewport won't affect the game.

[isobellesophia]

Gallery images are shown up in a _gallery screen (\renpy-xxx-sdk\renpy\common\00gallery.rpy), so you can recreate it the way you like in your script file. Something like

Code: Select all

screen _gallery:

    side "c b r":
        area (100, 100, 600, 600)

        viewport id "vp":
            draggable True
    
            if locked:
                add "#000"
                text _("Image [index] of [count] locked.") align (0.5, 0.5)
            else:
                for d in displayables:
                    add d align (0.5, 0.5)
                    
        bar value XScrollValue("vp") ysize 50
        vbar value YScrollValue("vp") xsize  50

        
    if gallery.slideshow:
        timer gallery.slideshow_delay action Return("next") repeat True

    key "game_menu" action gallery.Return()

    #if gallery.navigation: #you'll really need navigation...))
    use gallery_navigation

In this case you'll need navigation buttons to go to next image, 'cause clicking over viewport won't affect the game.

Thank you Alex! Im gonna try this, hope i wont get any error.

[isobellesophia]

Gallery images are shown up in a _gallery screen (\renpy-xxx-sdk\renpy\common\00gallery.rpy), so you can recreate it the way you like in your script file. Something like

Code: Select all

screen _gallery:

    side "c b r":
        area (100, 100, 600, 600)

        viewport id "vp":
            draggable True
    
            if locked:
                add "#000"
                text _("Image [index] of [count] locked.") align (0.5, 0.5)
            else:
                for d in displayables:
                    add d align (0.5, 0.5)
                    
        bar value XScrollValue("vp") ysize 50
        vbar value YScrollValue("vp") xsize  50

        
    if gallery.slideshow:
        timer gallery.slideshow_delay action Return("next") repeat True

    key "game_menu" action gallery.Return()

    #if gallery.navigation: #you'll really need navigation...))
    use gallery_navigation

In this case you'll need navigation buttons to go to next image, 'cause clicking over viewport won't affect the game.

Buut.. how am i supposed to add my images in there?

Or should i will replace that code in the 00gallery.rpy for recreation?

This is my defined images

Code: Select all

init python:
    mg= MusicRoom()
    mg.add("track1.ogg", always_unlocked=True)
    mg.add("track2.ogg")
    mg.add("track3.ogg")

    g = Gallery()
    g.button("cg_gallery02")
    g.image("placeholder")
    g.condition("persistent.unlockm")

    g.button("cg_gallery03")
    g.image("placeholder")
    g.condition("persistent.unlocka")

    g.button("cg_gallery04")
    g.image("image4")
    g.condition("persistent.unlocki")

    g.button("cg_gallery05")
    g.image("image5")
    g.condition("persistent.unlocki2")

    g.button("cg_gallery06")
    g.image("image6")
    g.condition("persistent.unlockj")

    g.button("cg_gallery07")
    g.image("image7")
    g.condition("persistent.unlockt")

    g.button("cg_gallery08")
    g.image("image8")
    g.condition("persistent.unlockf")

    g.button("cg_gallery09")
    g.image("image9")
    g.condition("persistent.unlockt")

    g.button("cg_gallery10")
    g.image("image10")
    g.condition("persistent.unlockc")

    g.locked_button=("images/placeholder.png")
    g.transition = dissolve

[isobellesophia]

Could you give me an example how should i put my images there?
I literally had no idea how to use that from 00gallery.rpy.. can you help me?

[Alex]

Could you give me an example how should i put my images there?
I literally had no idea how to use that from 00gallery.rpy.. can you help me?

If you already have a Gallery that works, all you need to do is put the code for '_gallery" screen in script.rpy (don't change 00gallery.rpy - just see how things made).

After that, your Gallery will use your screen instead of original, so you don't need to additionaly put your images inside it somehow.

[isobellesophia]

Could you give me an example how should i put my images there?
I literally had no idea how to use that from 00gallery.rpy.. can you help me?

If you already have a Gallery that works, all you need to do is put the code for '_gallery" screen in script.rpy (don't change 00gallery.rpy - just see how things made).

After that, your Gallery will use your screen instead of original, so you don't need to additionaly put your images inside it somehow.

So basically, like you said that i need gallery_navigation, i found this at github

https://github.com/renpy/renpy/blob/mas ... allery.rpy
in the very bottom, there is a screen named gallery_navigation.

So when i copied that code to the script, i don't need to remove my original code?
As you said, i dont need to add my images on that code. How does the gallery confirms that i had my defined images?

Or THAT code will use my original code for navigation?

So exactly like you said.. that code you gave, and copy it without removing my original, it will detect my images to my original code right?

Sorry again for another question, just a bit confused.

[isobellesophia]

And if i use that like..

Code: Select all

use imagegallery

on that code.. will be turn into a navigation right?

[Alex]

...

Well, the '_gallery' screen is used by Gallery to actually show images when you click on a button in a Gallery (like this one - add g.make_button("cg_gallery01","images/placeholder.png")).

So, you don't need to remove or change your Gallery code (all the button definitions, Gallery screen itself and all other stuff).

You can make your own screen named '_gallery' in a script.rpy file and it will be used instead of original one when you click on a button in the Gallery.
Since you plan on using a viewport to show images, you'll need some buttons to click through images - they are already made in a 'gallery_navigation' screen, so you can just use it (it's not neccesary to code it again in a script.rpy).

[isobellesophia]

...

Well, the '_gallery' screen is used by Gallery to actually show images when you click on a button in a Gallery (like this one - add g.make_button("cg_gallery01","images/placeholder.png")).

So, you don't need to remove or change your Gallery code (all the button definitions, Gallery screen itself and all other stuff).

You can make your own screen named '_gallery' in a script.rpy file and it will be used instead of original one when you click on a button in the Gallery.
Since you plan on using a viewport to show images, you'll need some buttons to click through images - they are already made in a 'gallery_navigation' screen, so you can just use it (it's not neccesary to code it again in a script.rpy).

I had a error when i used it

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/extras.rpy", line 197, in execute
    screen _gallery:
  File "game/extras.rpy", line 197, in execute
    screen _gallery:
  File "game/extras.rpy", line 199, in execute
    side "c b r":
  File "game/extras.rpy", line 202, in execute
    viewport id "vp":
  File "game/extras.rpy", line 205, in execute
    if locked:
NameError: name 'locked' is not defined

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "renpy/common/_layout/screen_main_menu.rpym", line 28, in script
    python hide:
  File "G:\SECRET\Renpy\renpy\ast.py", line 912, in execute
    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
  File "G:\SECRET\Renpy\renpy\python.py", line 2004, in py_exec_bytecode
    exec bytecode in globals, locals
  File "renpy/common/_layout/screen_main_menu.rpym", line 28, in <module>
    python hide:
  File "renpy/common/_layout/screen_main_menu.rpym", line 35, in _execute_python_hide
    ui.interact()
  File "G:\SECRET\Renpy\renpy\ui.py", line 295, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "G:\SECRET\Renpy\renpy\display\core.py", line 2699, in interact
    repeat, rv = self.interact_core(preloads=preloads, trans_pause=trans_pause, **kwargs)
  File "G:\SECRET\Renpy\renpy\display\core.py", line 3091, in interact_core
    root_widget.visit_all(lambda i : i.per_interact())
  File "G:\SECRET\Renpy\renpy\display\core.py", line 541, in visit_all
    d.visit_all(callback, seen)
  File "G:\SECRET\Renpy\renpy\display\core.py", line 541, in visit_all
    d.visit_all(callback, seen)
  File "G:\SECRET\Renpy\renpy\display\core.py", line 541, in visit_all
    d.visit_all(callback, seen)
  File "G:\SECRET\Renpy\renpy\display\core.py", line 541, in visit_all
    d.visit_all(callback, seen)
  File "G:\SECRET\Renpy\renpy\display\screen.py", line 430, in visit_all
    callback(self)
  File "G:\SECRET\Renpy\renpy\display\core.py", line 3091, in <lambda>
    root_widget.visit_all(lambda i : i.per_interact())
  File "G:\SECRET\Renpy\renpy\display\screen.py", line 440, in per_interact
    self.update()
  File "G:\SECRET\Renpy\renpy\display\screen.py", line 625, in update
    self.screen.function(**self.scope)
  File "game/extras.rpy", line 197, in execute
    screen _gallery:
  File "game/extras.rpy", line 197, in execute
    screen _gallery:
  File "game/extras.rpy", line 199, in execute
    side "c b r":
  File "game/extras.rpy", line 202, in execute
    viewport id "vp":
  File "game/extras.rpy", line 205, in execute
    if locked:
  File "<screen language>", line 205, in <module>
NameError: name 'locked' is not defined

Windows-7-6.1.7601-SP1
Ren'Py 7.3.2.320
Maddox Everyday Talk 2Beta
Thu Aug 22 20:01:16 2019

[Alex]

...I had a error when i used it...

And what if you rename this '_gallery' screen in extras.rpy to something else (like 'my_gallery')? Will it work as it was?

If so, then could you send me an archive of your project to test it out?
If not, then what have you changed in 00gallery.rpy?

[isobellesophia]

...I had a error when i used it...

And what if you rename this '_gallery' screen in extras.rpy to something else (like 'my_gallery')? Will it work as it was?

If so, then could you send me an archive of your project to test it out?
If not, then what have you changed in 00gallery.rpy?

Well, i didnt change the 00gallery.rpy, i just copied it in the extras.rpy.
And the 'locked' one is not just defined.

I'll try it later, thanks for the reply.