Real-time graph based on Canvas blinking

Hi all,
I am building an audio player which shows a volume graph of the song. The volume graph is shown for the next 5 seconds of the song and slides in real-time as the song plays forward. Basically, you can see what volume to expect in the next 5 seconds of the song at all times.
I got it working but it is not very smooth and it has annoying blinking.
The methods I tried in a 10ms timer loop are:

  1. Clear canvas and then draw the graph with multiple line graphs
  2. Clear canvas and then draw the graph with drawShape point list
  3. Same as 1) but except for clearing the canvas I would draw a black line to erase the old graph.
  4. I also tried the KIO4_DynamicGraph extension
    None of them produce a smooth scrolling graph.
    Do you have any other idea?
    While it is understandable that 1) and 2) produce blinking it is not clear why 3) does it as well. Probably the canvas is updated only after the timer function has completed?
    Any help would be appreciated.

Have you tried the new AI2 Charts component, loading a Chart2Ddata subcomponent from a sliding window into your list?

This appears to be an issue of the ability of AppInventor to post to the Canvas as fast as you hope. App Inventor either can not post your images to the Canvas or your processing/calculation routine may not be fast enough.

Counter intuitive but instead of a 10 ms Clock you could try a slower rate

Otherwise ABG's advice may be appropriate.

Hi Johny

I would also add that the Android System timers are used. They are low priority and thus not pin-point accurate.

You have tried everything I would have tried with the canvas, which is overall a slow component. Both the advice from ABG and SteveJG could help - a lot also depends on how fast your device's processor is.

If you can't get a good enough result using the canvas, the next possibility would be to draw the graph in HTML/CSS, with the help of the Custom WebView Extension.

Thanks for the ideas. I will try and let you know.