Add progress bar or ARC and auto regenerate function.

[Alpaca131]

• ARC
• image animation

Might be useful.
I'm working on this in my fork.

[ZoLArk173]

Below is my original prototype. I think you would like to design something like that. Unfortunately, it is kind of impossible to do right now. Whenever I place an arc in front of a list, it will cover the list. It seems like the middle of the arc is solid, which is really weird. Thus, I think it is a bug that we can only wait until software update to fix it. Or design in another way.

By the way, the screenshoot feature added in the app is broken. It will take a corrupt screenshoot in this app.

[Alpaca131]

I see.
I'll send a feedback to dev team on slack.
Their response is quite fast so I hope they'll fix it soon.
However, I thought another way: use image animation to make a progress bar on somewhere on the screen.
(Make 30 images of progress bar and animate it.)
Is this seems possible?

[ZoLArk173]

I just tried it. Unfortunately it is still broken. I cannot make the image animation in front of the scroll list. This might be another bug or limitation.
Here is the png animation I made. Maybe you can figure it out.😆
arc.zip

[Alpaca131]

Can I have the code you've tried?
I'm new at Zepp OS, (and I'm even struggling to build my own app) so I'm glad if I can edit the code you wrote and try several ways I came up with.

(I simply just want to show an image, but somehow my app doesn't work...)

[Alpaca131]

btw, I meant to put the progress bar on here(yellow part) or here(blue part).
I think this will work cause it won't cover any items.
(Though, it looks a lot nicer if we can put the progress ARC around the watchface.)

[ZoLArk173]

Can I have the code you've tried? I'm new at Zepp OS, (and I'm even struggling to build my own app) so I'm glad if I can edit the code you wrote and try several ways I came up with.

(I simply just want to show an image, but somehow my app doesn't work...)

I have pushed the code to 2-Add-refrash-animation branch. Feel free to try.

[ZoLArk173]

btw, I meant to put the progress bar on here(yellow part) or here(blue part). I think this will work cause it won't cover any items. (Though, it looks a lot nicer if we can put the progress ARC around the watchface.)

That is actually a good idea. I think I will implement the auto refresh first. Then add the animation.

[Alpaca131]

Ok! Maybe I can work on animation while you're implementing auto refresh.
I added the image in my repo as my first work.

[Alpaca131]

#3
I managed to do it by using ARC!
You can move 8°/sec to count 30 seconds.
I couldn't put ARC in front of the list, so I adjusted the height of the list and the angle of ARC, so the scroll-list won't cover up ARC.

Method with progress bar didn't work because it wasn't able to put an item in front of scroll-list.

[ZoLArk173]

#3 I have compiled your code, and I think the solution is less than ideal, specially when there is more than one item in the list. Thus, I think of a workaround that the ark put at the side of the screen. It seems like the scroll list will always be at the top.

(The gray circle is the watch screes border)

[Alpaca131]

#3 I have compiled your code, and I think the solution is less than ideal, specially when there is more than one item in the list. Thus, I think of a workaround that the ark put at the side of the screen. It seems like the scroll list will always be at the top.

(The gray circle is the watch screes border)

Yes.
It's true that if there's more than one card, it's hard to see another one.
(Cause I shortened the height of the scrollable -list.)

[Alpaca131]

You're new idea was nice! so I coded it.
Calculating every second so it will work fine even after the screen got off.
Commit

[ZoLArk173]

I have merged your code. Good job! I also edit some code to let the ark auto resize according to the screen size.

[Alpaca131]

I have merged your code. Good job! I also edit some code to let the ark auto resize according to the screen size.

Oh I've mistakenly set the fixed width and height.
thank you for fixing it!

[Alpaca131]

@ZoLArk173 ARC frame images are still in assets/trex-2. I forgot to remove those files.

[ZoLArk173]

I removed these files and add auto refresh functionality. Also add a background for the arc!

[Alpaca131]

I removed these files and add auto refresh functionality. Also add a background for the arc!

I love this better UI. 😄

[Alpaca131]

Accidentally closed. Sry