Canvas drawing too slow

[Matt Dabney]

As part of a project to develop a low-cost tocometer (device for measuring contractions during labor) for third world countries using mobile devices, a group (of non-CS majors with me as an App Inventor consult) at Clemson wanted to develop an app in App Inventor that would measure accelerometer data and look for spikes to find possible contractions. We were able to get a nice looking graph of the current accelerometer data as it came in that could detect spikes in the data and plot timestamps on the graph at each peak. However, the graph would quickly run off the edge of the canvas, so we needed to store previous data in order to look back through the graph. We decided to store it in a list and allow the user to redraw past data on a second canvas beneath the current data canvas and swipe left and right to move through the previous data. Unfortunately, drawing lines on the canvas is incredibly slow, especially when you're trying to plot 500 data points on a canvas in a for loop. To fix this, we ended up implementing a timer that would draw something like 5-10 data points and then start a timer for 1 millisecond to draw the next 5-10 when it fires. That at least prevented the screen from freezing for 45 seconds while it drew the whole graph, but it still takes 45 seconds to draw the graph, it's just responsive while it does it. 

I'm guessing this has to do with repeatedly having to lock the canvas, draw a line, and unlock the canvas for every single line. Is there any way we could get the ability to draw multiple lines/shapes within a single canvas lock/unlock action? Or, if the bottleneck is some other issue, could that be sped up somehow? There are some really powerful apps that could really show off the usefulness of programming and computer science to non-majors through App Inventor if some of these issues could get cleared up.

[josmasflores]

Hi Matt, this the source for the Canvas component: https://github.com/mit-cml/appinventor-sources/blob/master/appinventor/components/src/com/google/appinventor/components/runtime/Canvas.java

Any improvements that could be done there would be very much appreciated. Thanks!

[Abraham Getzler]

You only need to draw a canvas once.
There's a save=canvas block you can use to keep a running log of images.
Number them so you can jump forward and back through the images.

ABG

[mate...@gmail.com]

That's an interesting idea, Abraham, I hadn't thought to save the canvas and replay previous frames. We were hoping for more of a fluid scrolling interface, though, so pictures wouldn't quite do it. That would be a nice workaround until the canvas performance is improved, though.