cancel
Showing results for 
Search instead for 
Did you mean: 

TouchGFX

APate.18
Associate III

Hi Team,

I have a requirement to create an elevator animation based on user input.

I have a 3D image representing a single floor, and I am using it in a container to create a scroll list for multiple floors. However, because of the 3D image, there is a gap between the floors, which is causing issues.

Please find the attached images showing the actual output and the desired output. How can I manage this gap effectively?

Thank you.

ScrollistBlock_ActualOP.PNG

SingleBlock.PNG

RequiredOP.PNG

   

6 REPLIES 6
MM..1
Chief III

Transparency ... 

I am Using Transparent Image for Box 

But it reflected on main page as attached file 

ScrollistBlock_ActualOP.PNG

 

 

It looks like a vector image with a few straight and a few diagonal lines. You can use inkscape to draw the vector image and then export it as svg or as png. So a single image.
Another solution is to use the line object in TouchGFX. The floors are 3 vertical lines in total and 2 diagonal lines per floor (+ 4 extra for top floor).

unsigned_char_array_0-1717661371308.png

 

Kudo posts if you have the same problem and kudo replies if the solution works.
Click "Accept as Solution" if a reply solved your problem. If no solution was posted please answer with your own.
LouisB
ST Employee

Hello @APate.18,
You cant put negative margin in Designer, a simple solution is to directly edit the project file (myproject.touchgfx).

The steps:

1) Put margin to a value above 0 (Or add manually in the project file "itemMargin" in component->scrolllist)

2) Generate the project

3) Edit  "ItemMargin" in the project file

4) Go back to designer, accept to reload.

tweak the margin value with steps 3-4 until you find the one you need.

I hope it helps,

Regards,

Louis BOUDO
ST Software Developer | TouchGFX

Is it possible using custom container.? 

My tip start with tiled image + Special image on top + cabin image ...

read Tiled Image | TouchGFX Documentation 

elevtiled.png