Forum Archive

Scrolling in scene module

Gerzer

I am making an app in Pythonista with the scene module. The app collects images from the user's camera roll (using the photos module) and displays them as thumbnails in a scene. To account for large numbers of photos to be displayed, I tried to come up with a way to scroll through the thumbnails. I've had no luck, though. Any suggestions as to how to accomplish this are welcome.

eliskan175

I wrote a file browser that had to solve the same problem.

What I did was make a scrollbar on the right. When you click the scrollbar, it adjusts the Y position drawing of the scene.

Then I iterated through all the objects in the scene and calculated their Y position. To do this, you have a counter that starts based on the scrollbar. If current object Y is > or < than scene.size.y , then it would skip drawing. Otherwise, draw.

Here is a file browser (for IPAD ONLY) I made that has a scrollbar. It's important that I include how to use the app because it can delete files or move them: https://gist.github.com/anonymous/6c2d9bf5b04221f675bf

When the app starts, it will ask for a name. This will be the name of rennamed documents or folders. You can skip it if you don't want to rename anything.

There are three buttons on the right of the scrollbar (move, delete, rename). Press those, then press the black box to the extreme right of each item and it will ask if you want to perform the action. Moving is special. When you click an item with move enabled, it's 'being moved' and when you click the green box on the right of the screen you drop it to its new location.

Finally you can sort items by clicking the columns, like in Windows. Also you can click that unlabeled puke-brown box to go up one directory (so if you're in a folder that is how you get out).

The main reason though I am posting this is the scrollbar. Images aren't much different than text.

eliskan175

Alright another way I could explain this.

Let's say you resize all thumbnails to a MAXIMUM of 100 height and width.

So you could make a fill browser that does something like this (sorry for the formatting cant seem to find out how to make spaces work on these forums so I replaced them with dashes):

x,y = 10,10
for thumbnail in thumbnails:
---x = x+100
---if x>self.size.w:
------x =10
------y+=100
---if y > 0 and y < self.size.h:
------drawThumbnail(x, y, imageInfo, etc..)

But you also add a scrollbar into the equation. Depending on the position of the scrollbar, you can modify the starting y location. THEN you do the loop. And bingo, problem solved.

Gerzer

eliskan: Thanks for the suggestion. I'll certainly try your idea out. However, it would be nice if I or someone else could figure out a way to just swipe up or down anywhere on the screen, rather than having to drag a scroll bar.

eliskan175

How about when someone does a touch_start, it stores the position of the touch. Then when touch_ended or touch_moved is called you can alter the position of the scene based off the difference between the touches.

Gerzer

I tried that, but it didn't work.

Dalorbi39

maybe this will help

from scene import *

class MyScene (Scene):
    def setup(self):
        self.dx = self.size.w / 2
        self.dy = self.size.h / 2 + 10

    def draw(self):
        background(0, 0, 0)
        translate(self.dx, self.dy)
        fill(1, 1, 1) 
        stroke(1, 1, 1)
        stroke_weight(3)

        for x in range(-3000,3100,100):
            line(x,-3000,x,3000)
            text(str(x), font_size = 30, x = x, y = 0, alignment = 5)

        for y in range(-3000,3100,100):
            line(-3000,y,3000,y)
            text(str(y), font_size = 30, x = 0, y = y, alignment = 5)

        for i in range(-3000,3000,100):
            image('PC_Grass_Block',i,-125)

    def touch_began(self, touch):
        pass

    def touch_moved(self, touch):
        #self.dx += touch.location.x - touch.prev_location.x
        self.dy += touch.location.y - touch.prev_location.y

    def touch_ended(self, touch):
        pass

run(MyScene())
Gerzer

Dalorbi: It worked! Thanks. The only problem is that when I move the transformation matrix down, the screen has a hard time refreshing the image thumbnails. Moving it up, however, works perfectly.

Gerzer

Maybe I could explain the problem better. When scrolling up, I see parts of the thumbnails flashing at the top of the screen. It looks like the program is trying to draw the thumbnails in their original locations, even when you are scrolling up. Scrolling down works perfectly.

hroe139

To satisfy my own curiosity, I added a simple implementation of inertial scrolling to Dalorbi's example:

http://gist.github.com/henryroe/6724117