how to create the roll wheel to switch the image within the same window ?

[miker]

hello, i want to switch 5 images within the same window as following picture illustration; could you have any sample to me for reference ?

[GaetanGodart]

Hello @miker ,

Can you explain a bit more what you want to achieve?

Do you just want to show one image and then after some event (ex: button click or x time passed), you want to show another image instead of the first one?

Do you want to have a scrollable menu like on image one where we can see 2 small icons and you want to be able to move the focus? If so, you can look at the ScrollWheel example.

If it is something else, please explain it to me so I can give you an example or guide you on how to achieve the desired result.

Regards,

[miker]

my aim is that when i slide the area of red rectangle box with the STM32H747I-DISO's touch panel, the image of red rectangle box will be replaced by another image , now i need use the container of scroll wheel to do that and create a custom container template , how to come true this function or release similar sample to refer ?

[GaetanGodart]

Hello @miker 

Ok so you have a scrollWheel (where we see "Standard clean", "Deep clean" and "Showroom") and an image below that.
You want to change the image below based on the currently selected item of the scollWheel?

This is exactly what we do in the "Scroll Wheel and List Example" that is available in the Designer :

When selecting ScrollWheel, we update the textArea in real time but you could replace the textArea by your images and use a switch case to setVisible the right image :

When you select the ScrollList, you see images instead of textArea (so this is what you want) but this time the image is only updated when you click on the item: 

Note that this difference in behavior is because we don't use the same callbacks for the ScrollWheel and for the ScrollList:

But you could have either behavior with the scrollList or the scrollWheel.

I hope this answers you question!
If it does, I invite you to select this comment as "best answer".

Regards,

[miker]

could you simplify the scroll list or scroll wheel sample with changing image ? i want to be precise to refer this. thanks

[miker]

I just exchange the image within changed area as scroll wheel , no any touch selection or clicked action , but after compiling , it's fail to debug.

[GaetanGodart]

I think the example is simple enough, I don't know how to simplify it more.

Everything happens on the MainView.cpp.
Here you can see how we initialize the icons on the scrollList:

Here you can see how we update the image when we select the item in the scrollList:

And you can also see how we setup the scrollWheel.

Regards,

[miker]

just change some image with scroll wheel or scroll list , single function.

[GaetanGodart]

I don't think it can be done with a single function.

What we do is we have a function to initialize the items (custom containers) in the scrollWheel, then we have a callback to get the click and finally we have a function called when  there is an item selected where we can do anything we want.

Regards,

[GaetanGodart · Accepted solution]

Your custom container have the elements "box1" and "image1".

But in your update item function you try to access an element called "item".

In the scrollList and scrollWheel we change the element "item" because in our custom container we have an element called that, but you, you probably want to change your box1 or image1.

The error message say that the bitmap doesn't exist.
The bitmaps have the name BITMAP_nameOfYourImageAssetInCapitalLetters.
So for instance if you have an image asset called "MyImage1", the bitmap will be called BITMAP_MYIMAGE1.

Regards,