TouchGFX : Elevator System

[APate.18]

Dear Team,

I hope this message finds you well.

I am currently working on an elevator project and have outlined a few key requirements that need to be implemented. For your reference, I have attached a link to a YouTube video that illustrates these requirements clearly.

Ref Video Link : https://www.youtube.com/watch?v=J8rWm0xfuKA

Here are the specific requirements:

1. Floor Index Movement: The floor index should move in the manner demonstrated in the video. This includes smooth transitions and precise updates to the current floor display as the elevator moves between floors.

2. Door Animation: Upon tapping on a floor, an animation should be triggered, simulating the elevator doors opening and closing. This animation should be similar to the one shown in the video.

Please take a moment to review the video and let me know if you have any questions or need further clarification on these requirements.

Thank you for your attention to this matter. I look forward to your feedback and suggestions on how we can best implement these features.

Best regards,

[MM..1]

What is problem?

[APate.18]

The problem we are trying to address is the implementation of two specific features for our elevator project:

Floor Index Movement: We need to ensure that the floor index moves smoothly and accurately, reflecting the current floor as the elevator travels. This feature is crucial for providing users with a clear and intuitive indication of the elevator's location at all times.

Door Animation: We need to create an engaging user experience by animating the elevator doors to open and close upon selecting a floor. This animation is essential for simulating a real elevator experience and enhancing the overall user interface.

[unsigned_char_array]

I just made a simple test. I created a long image with transparency as long as all the floors (I used paint and used gimp to add transparency). Then check "MoveAnimator" under the image properties in the canvas window. I set the floors image above the elevator image. Then I called image1.startMoveAnimation(image1.getX(),image1.getY()-100,60); . It results in smooth animation. Took me 5 minutes. I've attached a video.

Door animation would just be 2 rectangles moving away from or towards the center of the elevator. The elevator can be part of the background image since it's static. You can just overlay the doors over the elevator.

[GaetanGodart]

Hello @APate.18 ,

@unsigned_char_array seems to have provided a great answer to the moving of the floor.

Regarding the door animation. Since it is "the building" who moves, you can keep an invisible flexButton over the door to trigger the click. Then, to get the best result, you should design your animation frame by frame and use the animatedImage widget. When clicking on the flexButton, trigger the animation.
This would get you the best result.

You can achieve a quick result by using two rectangles and unsigned_char_array mentioned.

Regards,

[unsigned_char_array]

An animated image is also a great solution. Maybe simpler. But the advantage of move animators is that you can also set the ProgressionEquation so you can get even more realistic elevator/door movements as those have limits on acceleration and jerk in the real world.

[GaetanGodart]

Yes @unsigned_char_array , I think that movingAnimator is the best solution for the elevator movement itself (up and down).

I think that the animatedImage is only better for the doors movement.

Regards,

[unsigned_char_array]

Another thing I was thinking about is to cut the floor/building image in parts since it's mostly empty space. That way less of the screen needs to be redrawn every frame. This could speed up rendering. You can also enable caching. But that is probably premature optimization. Basically you have multiple ways to achieve what you want and if it is too slow we can help you optimize it. Let us know how it is going.

[APate.18]

Hi

Can you please share me code file to verifying logic and designed

[unsigned_char_array]

I checked moveanimator checkbox of the building/floors image (image1) then I just added two interactions in the interactions menu on the right. And then selected custom c++ code.

Up button clicked:

image1.startMoveAnimation(image1.getX(),image1.getY()+100,60);

Down button clicked:

image1.startMoveAnimation(image1.getX(),image1.getY()-100,60);

Of course you need to calculate the exact number of pixels that need to be moved (and the speed, mind that simulator is 60 fps and target might be lower) and also program in limits so the Elevator won't go past the lowest or highest flour. And probably also a check if the animation is already started. But to test the animation this is enough. This is all the code.