Can one "Animate" (control) the speed/smoothness of movement of a sprite between A & B?

[Gerard Bucas]

Hi guys,

I have a number of Sprites which move around their center (so circular movement checked). I was wondering if it is possible to do any of the following when one changes the "Heading" value of the Sprite:

1. Can one control the DIRECTION of the Sprite movement from old position to new position (so force clock or anti-clockwise movement when the heading value is changed)?

2. Can one control the SPEED (& especially the visual "smoothness" of the movement) when the Sprite heading value is changed from A to B?

Curious....!

Gerard

[Chris Ward]

Hi Gerard

It's all there in the Blocks - experiment!

[ABG]

See https://docs.google.com/document/d/1vMOewOPYmN4gzbDiXJgLeCQ1W5MzuT7ogXQqV96R0P8/edit#heading=h.e6km4ffvayf1

in this Billiards sample doc, the pool cue movement.

ABG

[Gerard Bucas]

Chris & ABG,

Of course I "experiment" before asking the experts (ie: you guys!). :)

But guess my English is not good enough to get my point across.....

You make it sound possible (even easy!), whereas I think it is not possible (or at best difficult/cumbersome!).

So to more clearly show you what I my "problem" is, I created the attached "demo" which compares the pointer "animation" (ie: moving from A to B on a dial) of a Google Gauge Chart with my "best cloning effort" in AI2. Of course the Google Gauge chart must initially be loaded via Internet, whereas my AI2 clone requires no internet).

So please load the attached .aia & you will see what I mean!

The Google Gauge moves "smoothly" from A to B on the dial, whereas my AI2 clone "jumps" from point to poiint.

Also look at the "reset" case (green button) & see how smoothly the Google Gauge moves from min to max & vice versa (this was my other question, ie: how does one control the rotation from min to max and force the pointer to go the "long way around" as opposed to jumping from one to the other!).

Of course I realize that I could create some elaborate timer based "emulation" that "slowly" moves the AI2 pointer "degree by degree" but this is too slow and would require the timer to be set to less than 100msecs otherwise it would still look a little "jumpy". Doesn't seem practical & would take to long (eg: min to max is 270 degrees so if one wants to move that "distance:" in (say) 1 second with a 100msec time, one would have to move the pointer 27 degrees per timer interval - quite a large "distance" and will appear "jumpy"...).

So please advise, o wise ones..... (is Google REALLY "smarter"!? :) ).

Curious.......

Gerard   

[ABG]

To smooth your pointer movement, you could

use an Easing Function and fast ease-in and ease-out Timers.

Attached is an example from the defunct Ferguson Archive,

(search the FAQ for Ferguson)

ABG

[TimAI2]

Here is my solution. See attached VIDEO for demo app in action

Use the heading function for an image sprite

You need sprite for you dial with the "circle" in the centre, so blank space to one side.

This means the sprite will rotate around the centre circle on the gauge pointer.

I have it set so that the pointer always stops at 405 (which is 45 degrees from the vertical, or 0 on the gauge)

With the timer interval set to 50msecs, and the heading change to 10, this seems smooth, but play around with these two values

Apologies for the quickly drawn pointer ;)

BLOCKS

AIA attached (after edit)

[Gerard Bucas]

Thanks Tim.

Video looks good & blocks look simple. :)

I had been considering that (as I mentioned in my post) but I sort of felt that the "overhead" of a timer below 100msecs was too much to handle in my "real" app (where I also receive data from a BLE connected device at the rate of a data point every 200msecs). As there is quite a lot of processing to be done, I felt that it would be too "heavy" (on CPU load) to add a timer with such a short firing time.

Having said that & seeing the end result, I will give it a shot & maybe use this approach whenever the BLE data point received would result in the pointer having to move more than "x" degrees (eg: 30).

I also have a "reset" function - where I like to "visually" indicate (feedback to user)  the reset by moving the pointer to max then min (as in my demo) - so I will definitely use your approach for THAT feature!

Guess I am still too much "old school", where I want to keep the CPU/overhead of my app(s) as low as possible! But given the speed of CPU's/devices nowadays, I guess my concerns are no longer that applicable/valid - so need to change my mindset!

Thanks again for taking the time to do this (with video which is compelling! :) ).

Regards

Gerard  

[Juan Antonio]

Implemented Tim's solution:

[Gerard Bucas]

Thanks for that Juan!

I like the way you added it with that "mover" block/concept. Niiice.

However, I noticed that you used a fixed increment of 3 degrees with a 10msec timer. This poses some issues, for example, the maximum "move" (min to max) is actually 270 degrees. So using that combination would take 900msecs to complete the "animation". That's longer than the time of clock1, that will issue a new "target" value. So in some cases the animation won't complete. Also 3 may not be an exact multiple of the target value, giving some small errors on the target (especially noticeable when the target is 0 or 100, as the pointer will "land" a few degrees off the target value).

Having said all that I REALLY like your "mover" concept, so I extended it slightly to change the incremental value to be dynamic, depending on the "distance" from the start to end values. In addition, in my "real" app, I receive new data values (pointer targets) roughly every 250msecs, so I need the total "animation" to be completed in roughly 250 msecs (even if the pointer has to "travel" from min to max, ie: 270 degrees). It is interesting to note that Google also increases the "speed" of movement when the "distance" is long. Then of course I also updated the "reset" function to also animate properly.

I am not sure why you removed the TaifunTools "PathToAssets" block for html file path? Without this, the .aia will only work in companion and not as an apk (unless you change it - so two versions to maintain!). So I put that back so the attached .aia will work BOTH in companion and as an apk if you build it (with no filepath changes).

So the result is attached. I am now REALLY happy with it!

Thanks again for the initiative (also to Tim!).

Let me know if you like this final outcome!

Best Regards

Gersrd 

[Juan Antonio]

Hi Gerard,

I am following your entire gauge creation process and it is getting better!

I simply deleted the extension to be able to upload it to this forum, since sometimes it is a problem to upload codes with extensions.

[Chris Ward]

Hi Gerard

I receive new data values (pointer targets) roughly every 250msecs

It is pointless updating the Gauge output that fast, the human eye cannot concentrate on the values at that speed.  

[Chris Ward]

@ Juan

You can upload an aia that includes an aix by first saving your post, then editing it to attach the aia. The reason you cannot add it to the new post is because it will be forwarded by email to subscribers of the Topic and Google saw that as a way to distribute malicious code.

[Juan Antonio]

Right Chris.

[Gerard Bucas]

Hi Juan Antonio (et al),

Wow - I didn't know I had any "followers" on my "AI2 Gauge Discovery Exploits/Journey"!! :)

Hope I didn't bore you too much....!? 

Anyway, I after a LOT more testing, I have now completed the Animation of the Pointer "test". It turns out that the AI2 app can't keep up with a 10msec timer (timer overhead plus processing - moving sprite, etc - takes longer than 10msec). So I changed the Clock2 timer to 20msecs & it seems to be close to what my "old" Nexus 5 phone can handle *Android 6.0.1). Not surprisingly, there seems no visual difference between the 10msec Clock2 and the 20msec Clock2 timer! In fact I have a feeling that one could maybe even set it to 25msecs (for lower CPU overhead) - though I haven't tried that to see if there is a visual difference. But it was a LOT of fun doing this (as usual!). :)

I have now improved the test program to allow the user to specify "no Animation" or any "custom Animation" time (per Pointer Movement!). So "we" can experiment with different values (depends how fast pointer data arrives in a real-world application). As I mentioned before, in my own case, our custom BLE based device spews out new data points at a rate of around 250msecs. So for MY "real" app, I am setting the "animation time" (for each "move" of the pointer) to 225msecs. That way, I should be "ready" for a new Pointer Value every 250 msecs. That is also the default I use in the new (& final!) attached test .aia (see screenshot below!).

When you run the app, try also consecutive clicks & consecutive LongClicks on the green "reset" button! Other than that, the UI should be self-explanatory.

Hope you guys will enjoy playing with it as much as I did developing it. AI2 NEVER ceases to amaze and impress me!! BEST APP DEVELOPMENT TOOL IN THE WORLD - TOTALLY UNDER-APPRECIATED! 

So that close this chapter (I will now incorporate that into my other "GaugeGenerator" app (another thread on this forum) after which I will probably publish that App into the AI2 Gallery. So back to work on using all my newly gained knowledge in real-world apps! 

Thanks again for all the help from all who contributed and kept me motivated!

Regards

Gerard

[Juan Antonio]

Good job Gerard! 

Just an idea, if you put an edited photo of a real gauge, the look will be more "professional". Here a not-edited image.

(source image: https://www.pngguru.com/search?png=Dial+Gauge)

[Chris Ward]

Great work Gerard :)  I think 250 milliseconds is still too fast  - you would struggle to concentrate on 1 second updates........

I think App Inventor is brilliant - indeed so do a lot of people:

https://appinventor.mit.edu/explore/about-us.html

With over 400,000 unique monthly active users who come from 195 countries who have created almost 22 million apps, MIT App Inventor is changing the way the world creates apps and the way that kids learn about computing.

[Gerard Bucas]

Hi again Chris (et al),

I hear you (250msecs too fast!), All I was trying to say is that in some "real world" applications, some connected devices generate data at a rate faster than one would like. In my case we have a BLE device that generates a new data point roughly every 250msecs.

In any case, I have added a few more controls to the UI so you (or anyone else!) can set your own parameters in the UI and "test" your preferences! I have now set the default data rate at 950msecs (couldn't quite get myself to set it at 1000 msecs!!! :) ), with an animation time of 425msecs (to move the data pointer) in 35msecs steps. Interesting enough that seems to be close to the Google Gauge Chart Animation times. Also added an "info" (as to what & why I am trying to do) & "help" button for the uninitiated.

So this is it - we can now close this thread & consider everything learnt that we need to know.

FYI, I have also updated my "gauge generator" (other thread I started) with all the new animation magic learnt here. In fact I used that app (GaugeGenerator) to generate the "byAI2+GB" faceplate & pointer in the .aia attached here. Here is a link to my "gauge generator" thread for quick reference: https://groups.google.com/d/msg/mitappinventortest/k20NEzXSBy8/a3lNL7ZbAgAJ - which is now also in Gallery, here: GaugeGenerator

Great stuff....!! :)

Regards

Gerard

[Italo]

Gerard, don't forget Abraham also gave you a solution up there too. 

https://groups.google.com/d/msg/mitappinventortest/p2tW88Mi4hY/sJPadQR9BAAJ

[Chris Ward]

Hi Gerard

You could seek help from GA (Gauges Anonymous)  :)

Your work has opened the door to many possibilities. If you step back and think about what you have achieved, it's fair to say that your gauge is more useful and therefore better than Google's.

[Gerard Bucas]

Hi Italo,

Yes, I know - that's why I used the term "Chris et al" (after editing!).

Having said that I didn't use the info from Abraham as it was above my head (I am smart but not THAT smart! :) ).

Gerard 

[Gerard Bucas]

Hahaha!!! :) 

("help from GA" - LOVE IT!!)

You are absolutely right - gotta stop this now!