Skip to content

Implement back and forth animation #892

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mariobehling opened this issue Jan 2, 2024 · 15 comments · May be fixed by #1258
Open

Implement back and forth animation #892

mariobehling opened this issue Jan 2, 2024 · 15 comments · May be fixed by #1258
Assignees

Comments

@mariobehling
Copy link
Member

mariobehling commented Jan 2, 2024

The Python version has a back and forth animation.

Please implement the same here

bicycle

This option should be part of the animation screen (middle option).
Screenshot from 2024-02-26 11-27-33

@amrsalah3
Copy link
Contributor

According to BadgeBLE, the device only supports 8 types of animations that are already included in BadgeMagic Android app. The python version implements this back-and-forth animation by sending 2 messages to the device: One message sliding to the left then the same but sliding to the right (and repeat).

However, the android version doesn't support sending more than 1 message (Please checkSendingUtils.kt):

fun convertToDeviceDataModel(message: Message): DataToSend {
        return DataToSend(listOf(message))
 }  

Therefore, we need first to modify the project to support accepting a list of messages, not only 1 message. After that, we can implement this back-and-forth animation easily.

@amrsalah3
Copy link
Contributor

#644

@Vishveshwara
Copy link

Vishveshwara commented Mar 13, 2025

@mariobehling @Jhalakupadhyay I would like to work on this issue.

@Jhalakupadhyay
Copy link
Contributor

@Vishveshwara go ahead and tell me if you need any help.

@adityastic
Copy link
Collaborator

@Vishveshwara @Jhalakupadhyay This needs to be thought through. We will be occupying 2 slots to make this possible so it cannot be part of the animation tab. Else you'll end up poisoning how 8 badge transfer works.

@Vishveshwara
Copy link

badgemagic.app.vid.mp4

@adityastic @Jhalakupadhyay
I’ve replaced the previous row and column implementation with a scrollable grid-based system to handle animations more efficiently. For now, I’ve named the animations "Left to Right" and "Right to Left". The "Left To Right" animation flips the arrow after it reaches one end, while the "Right To Left" doesn't flip it.

@Jhalakupadhyay
Copy link
Contributor

Jhalakupadhyay commented Mar 14, 2025

@adityastic it should not be in animation tab I was planning to have the user to controll this by using the slots directly so that we do not need to have a particular UI for it rather it will be what user wants and this will give more freedom to user and I guess this was the reason we had 8 slots, and if are going for the slots animation we should probably have another tab for them.

@adityastic
Copy link
Collaborator

@Jhalakupadhyay we can have custom animations which can work on top of 8 badge slots. It should indeed not be in animations tab, maybe another tab? Idk but the idea is to have these animations to have no relation with the animation tab.

In future we can also host the repository for prebuilt badge animations as well, I remember opening an issue for the same a while back.

@Jhalakupadhyay
Copy link
Contributor

@adityastic I guess having a new tab for custom animation is the best approach here because it aligns with our current app design and makes it easier for the user to know that there is some new feature.

@Vishveshwara
Copy link

@adityastic @Jhalakupadhyay
Thank you for your feedback on the scrollable grid-based system and the direction for custom animations. I completely agree that separating custom animations from the existing animation tab is a great idea, as it aligns with the goal of giving users more freedom and flexibility.

Here’s my understanding of the proposed approach:

  • Custom Animations Tab: Create a new tab dedicated to custom animations, allowing users to control animations using the 8 badge slots.

  • Future Expansion: Hosting a repository for prebuilt badge animations, as mentioned earlier, would be a fantastic addition for users to explore and share animations.

Questions I have for this issue:

1)Should the new tab be named something like "Custom Animations" or "Slot Animations"?

2)How should the UI for this tab be structured? For example:

  • Should it include a list of prebuilt animations (for future use)?

  • Should it provide tools for users to create and save their own animations?

3)Are there any specific features or constraints we should consider for the initial implementation?

@Jhalakupadhyay
Copy link
Contributor

@Vishveshwara

  1. change the animation tab to Modes and have a animation tab for the new custom animations.
  2. It should have a list of pre built animations we can probably start with one or two then the list can grow.
  3. we should absolutely have the features where user can create custom animations bit still need to see where those custom animations can be shown we would probably do not want it to be seen on the animation tab.

Initial start with the base I guess having a robust base for a new feature is good.

@Vishveshwara
Copy link

@Jhalakupadhyay @adityastic
1)
Image
2)
Image

  1. Should we follow the first design (where animations are part of the existing grid) or the second design (with a separate tab for custom animations)?
  2. Should custom animations work independently of the default animations, or should they require an animation mode (e.g., "Left to Right") to be selected alongside them?

My Opinion:
I believe we should proceed with the first design, where animations are integrated into the existing grid. This approach maintains consistency with the current UI and provides a seamless experience for users.

Additionally, I suggest making custom animations completely separate from the predefined modes. This ensures users have full control over their creations without relying on or being constrained by the default animations. This aligns perfectly with our goal of empowering users with greater flexibility and creative freedom.

Please help me with your suggestions.

@Jhalakupadhyay
Copy link
Contributor

Jhalakupadhyay commented Mar 15, 2025

@Vishveshwara
So I guess we could have two tabs 1) Modes where we will have all the animations that are already there so they will be called modes now and then we can have 2) Animation tab and it will have all the custom animation so it will give a separation to the existing animations and the upcoming custom one.

Having tabs inside a tab view is ok but I guess not necessary but obviously we can do the other one also it depends what users like. So I will like you to build the one I suggested and if user says that they do not like it we can change it later.

@Vishveshwara
Copy link

@Jhalakupadhyay

Image

  • Modes Tab: Contains all the existing animations (now referred to as "modes").

  • Animation Tab: Dedicated to custom animations, providing a clear separation between predefined modes and user-created animations.

  • Custom animations will be completely separate from the predefined modes, ensuring users have full control and flexibility without relying on existing animations.

Could you please confirm if this is the direction you’d like to proceed with? If approved, I’ll start implementing this design.

@Vishveshwara
Copy link

@Jhalakupadhyay @adityastic

WhatsApp.Video.2025-03-15.at.23.34.12_f2180b29.mp4
  • Linear Scroll Animation:
    This animation scrolls content from left to right in a continuous loop. When the content reaches the end, it seamlessly restarts without flipping.

  • Bidirectional Scroll Animation:
    This animation scrolls content from left to right in a continuous loop. When the content reaches the end, it seamlessly restarts after flipping.

please review and provide your comments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment