Hi All,
The last few months I have been working on a personal movie/streaming app. One of my goals was to have a sliding animation effect to cycle through my movie collection…pretty much just like how you cycle (left/right and also up/down) through movies on the Netflix app and also similar to firestick home screen. My idea was sliding panels(filled with buttons and pictureboxes for the movie posters) along the x/y axis, the data for each movie would come from my media server where the movies and mysql db are. You might have seen a lot of my questions here. Lots of you helped me learn a lot including both Bruces and cogier. Cogier even gave me a nice snippet of code for sliding panels. I integrated that into my app but unforunately it didn't mesh well. The panels moved really really slow and it was just unusable. That form did have a lot going on but it made me think that a lot of sliding panels on the x/y axis wasn't the solution. If panels aren't the solution, could someone suggest another direction to go to accomplish this? I was thinking maybe Drawingarea might work? I'm unfamiliar working with Drawingarea so I'm spending today looking for more info and examples.

 Maybe a ScrollView with Alignment = Align.Horizontal.

you could hide the scrollbar
add buttons to scroll manually a few images.

BruceSteers said

Maybe a ScrollView with Alignment = Align.Horizontal.

you could hide the scrollbar
add buttons to scroll manually a few images.

I think I had a scrollview experiment project at one point. Must have abandoned it but I'll see if I can find it and try again. Thanks Bruce!

rj71 said

BruceSteers said

Maybe a ScrollView with Alignment = Align.Horizontal.

you could hide the scrollbar
add buttons to scroll manually a few images.

I think I had a scrollview experiment project at one point. Must have abandoned it but I'll see if I can find it and try again. Thanks Bruce!

I found the scrollview project and I see why I abandoned it. I used scrollview1.scrollX = 25 or whatever number. It just jumps that distance, it doesn't slide in a slight animated way. Also, the items I put inside the panels (picturebox and button) behave differently than if that panel was inside another panel instead of the scrollview its in. I don't think scrollview is the answer either. I will keep experimenting with different things.

well yeah, there is not a default or built in animation method.

you'll have to program a simple one.


add more frames and less distance to make it smoother.

BruceSteers said

well yeah, there is not a default or built in animation method.

you'll have to program a simple one.

Code (gambas)

1.  
2. For c As Integer = 1 To 5 ' Adjust for more "frames"
3. scrollview1.scrollX +=5 ' Adjust for speed
4. Wait 0.01  ' Adjust for speed (try without Wait if too slow)
5. Next
6.  
7.  

add more frames and less distance to make it smoother.

I'll give that a try. Thanks Bruce.

This worked okay for me…


I uploaded a video clip..
https://www.youtube.com/shorts/LEDDn-FeRHo?feature=share

BruceSteers said

This worked okay for me…

Code (gambas)

1.  
2. Public Sub ButtonGoLeft_Click()
3.  
4.   Dim w As Integer = ScrollView1.W - Desktop.Scale
5.   Dim iCount As Integer
6.  
7.   Do
8.     ScrollView1.ScrollX -= 1
9.     iCount += 1
10.     If iCount >= W Or If ScrollView1.ScrollX = 0 Then Break
11.     Wait 0.001
12.   Loop
13.  
14. End
15.  
16. Public Sub ButtonGoRight_Click()
17.  
18.   Dim w As Integer = ScrollView1.W - Desktop.Scale
19.   Dim iCount As Integer
20.  
21.   Do
22.     ScrollView1.ScrollX += 1
23.     iCount += 1
24.     If iCount >= W Or If ScrollView1.ScrollX >= ScrollView1.ContentsWidth - ScrollView1.ClientW Then Break
25.     Wait 0.001
26.   Loop
27.  
28. End
29.  
30.  
31.  

I uploaded a video clip..
https://www.youtube.com/shorts/LEDDn-FeRHo?feature=share

Wow that looks great. Thanks Bruce. This is what I am looking for I think. I will see if I can get it integrated with the movie data that is fetched from the server and then into the main app.

 Hey Bruce, I appreciate the help but I can't get that code to work the way I need it to. I am going to revisit the sliding panels because it is the closest I have got to achieving my goal. I am working on a sample project that I'll attach to this thread when it's ready. That project has cogier's code that I chopped up a little. I will just have to somehow deal with the slowness when integrating into the main app.

 I have attached a project that I have been working on. I apologize for some of the sloppy code, I am NOT a professional programmer and I have been distracted by other life things. So here's the breakdown of this test project:
Form1 - experimenting with dynamic panel creation (thanks again BruceSteers!) with pictureboxes and buttons inside of those. It won't work for you because it is hitting my media server for data and of course my server is not open to the internet. Still working on that and I am not really sure if I will integrate it into the sliding panels. You can sort of see how I'm grabbing data from the server if you're interested.
Form2 - This started with 3 panels that could individually go left/right but an up/down motion moved all 3 panels at the same time. This is what made it slow. I stopped working on Form2 when I had an ipiphany and created Form3 to start over.
Form3 - The idea hit me that I should just put those 3 panels in another container panel and just move that container up/down. Not sure why I didn't think of that sooner. That right there seems to have solved the slowness problem.

I am making progress and I think I'm on the right track but I have several issues that I would appreciate advice on. Read the textarea on form3. I think that lists all the issues.


I'm using cogier's code where he simplified moving along the x/y axis and reduced the amount of code by a huge amount. Thanks cogier!

 Of course I notice something wrong after I upload! Just some of the keypress events that I apparently didn't finish. Not the cause of the overall big problems though.

I possibly have a solution to at least one of the other problems and will post the updated project again later today if I can.

 Here's an updated project. I was able to figure out a simple way to track the left/right movements of dypan1, dypan2 and dypan3. This made it so going up and down won't be screwed up.

 I seemed to have solved a lot of the issues I was having and I now have begun to integrate this new code into the main movies/streaming app. I am trying to combine some existing things such as shrink/enlarge an image when it has focus and of course adding the code that grabs data from the server. I'd like to share the movie app project at some point but it won't work since all the data is coming from my server so I will try to do screen record if anyone is interested.

I'm soooooooo close to getting this the way I want it! Sliding dypan1 to the left (right arrow key), each time dypan1 moves it appears to move a little more. I know that can't be what it is doing but that's what it appears to do. The goal was to have the "previous" panel still partially visible before disappearing altogether as the user cycles to the right (just like how netflix does it). By the time you get to item 5 on dypan1 (the android image) you can see how far off it is.  Here's cogiers code below that I used. I have been changing the 20 in 'For iLoop = 1 To 20', trying different numbers but I can't find the sweet spot. I tried 19, 19.1 through 19.9999 and it still looks inconsistent. Is there some sort of calculation based on the x axis and the width of the individual panels or dypan1?? So close…any advice on how to fix this?

 Not sure if you can use a value of '19.1' with an integer type.
Try declaring iLoop & iPan as FLOAT.
That may help you find the sweet spot you're looking for.

Maybe Container.FindChild(x, Y) can help you determine what's where?

/comp/gb.qt4/container/findchild - Gambas Documentation

 Thanks Quin and Bruce, I'll try both of those tomorrow.

Quincunxian said

Not sure if you can use a value of '19.1' with an integer type.
Try declaring iLoop & iPan as FLOAT.
That may help you find the sweet spot you're looking for.

Quin,
I tried this and it's the same result. I tried 19.1 through 19.999 and it is still inconsistent.
Silly question, moving along the x/y axis is NOT measured in pixels, correct? Seems like if it were, all I would have to do is calculate the width of the panels inside dypan1 plus the space between panels and use that number as the distance to move dypan1. In cogiers code, that 20 would convert to what in pixels? Am I looking at this the wrong way? I've never really dealt with the x/y axis much.

Yes it is in pixels relative to it's parent container.
It's also an Integer value so 19, 19.99, 19.9999 are all just Floored Integer 19

Subtracting the X pos of item 1 from item 2 should give the distance.

Dim iDistance As Integer = dypan1.Children[2].X - dypan1.Children[1].X

moving 4 pixels at a time makes it better as you can use a longer wait.


It's less jumpy like that because it moves more.

moving less pixels and using a shorter wait like you do gets glitchy because of the GUI refresh time. (ie the more there is to show the longer it takes and because it's varied as it moves the animation is inconsistent.
So when some objects are off screen the wait is too short.

Trick is to move more and wait more.

Doing automated process with your GUI is difficult as you have not set any Arrangement properties.

The order of the Children is not the order you see them.

Meaning dypan1.Children[0] may not be the spacer.
it's Children are in the order in which you added them to the GUI.

If you set dypan1.Arrangement = Arrange.Horizontal then they will be in the correct order as you see them.

I found it very troublesome and preferred ScrollViews with Arrangements set as ScrollView already does everything you want a Panel to do except scroll in a slower animated way.

This works on GTK3 but not on QT5 for some reason.

I re-worked one of your Forms a bit to try to turn many of the repeated methods into one. (much less code)
I've only used 1 Timer.
Made ALL Buttons have the Group "BTN" and work from a single BTN_KeyPress event.

Rather than using explicit Names for the next buttons I use Object.Parent and Container.Children to obtain the next/prev items automatically.

BruceSteers said

Yes it is in pixels relative to it's parent container.
It's also an Integer value so 19, 19.99, 19.9999 are all just Floored Integer 19

Subtracting the X pos of item 1 from item 2 should give the distance.

Dim iDistance As Integer = dypan1.Children[2].X - dypan1.Children[1].X

moving 4 pixels at a time makes it better as you can use a longer wait.

Code (gambas)

1.  
2.   For iLoop = 0 To (dypan1.Children[2].X - dypan1.Children[1].X) / 4
3.     dypan1.X += 4
4.     Wait 0.001
5.   Next
6.  
7.  

It's less jumpy like that because it moves more.

moving less pixels and using a shorter wait like you do gets glitchy because of the GUI refresh time. (ie the more there is to show the longer it takes and because it's varied as it moves the animation is inconsistent.
So when some objects are off screen the wait is too short.

Trick is to move more and wait more.

Oh wow…this looks like it works. I will apply to that project and upload it again later today. Thanks Bruce!

 just a thought, did you set…

 Application.Animations = True ?

i'm not sure what that does exactly, possibly it animates scrollview movement ?

I figured out why it was failing with QT but not GTK

unlike GTK QT wants to do it's own thing with arrow keypresses so you need to use Stop Event in the KeyPress event.


Just in case you run into the same issue

BruceSteers said

just a thought, did you set…

 Application.Animations = True ?

i'm not sure what that does exactly, possibly it animates scrollview movement ?

I didn't even know that was a thing.    I assume that goes in form load? The snippet you posted earlier seems to have solved the move distance issue:


I am focusing on adding that to the main app and then when I get some time I will upload (where?) a screen recording snippet of the main portion of the app.

Thanks Bruce!