Happy new year AI2 community,
is there a method, function or extension with whom I can shift a whole canvas a certain amount of pixels to the right or to the left?
In my BLE-nano control App, I use a canvas to monitor voltage and current over time (like at a scope, but much slower ). But when the "cursor" reaches the right edge, I want the whole canvas to shift to the left, so that I can continue to draw new measurements at the right edge with preserving the history of the last minutes.
Similar to how a common task manager shows up the usage or load.
Not a bad idea, but I think this doesn't really work for me.
In fact I use 3 canvas. first one with 40 pixel width (for the voltage markers), then the "drawing" canvas (440 pixel) and another one with 40 pixel width (for the current markers):
Thanks TIMAI2,
that seems to be a solution for the problem... but I've to dig a little bit deeper into the .aia to understand how it's really done (just started with the MIT AI2 & app developement a few days ago).
At first sight, it looks a little bit confusing .
Yeah, that works "somehow".
But as mentioned before by Patryk_F, it's necessary to increase the width of the canvas to solve my little challenge when using a horizontal scroll arrangement, which can't be done unlimited.
As soon as the canvas reaches a width somehow between 2560 and 3072 pixel (at 256 pixel height), the whole thing gets weird. Then every attempt to draw onto the canvas results in a blank canvas. Furthermore AI2 only allows a max canvas width of 9999...
Even so that the ScrollHandler is quite a nice extension, it seems to be a cul-de-sac for my "task-manager like scrolling graph problem".
I've to dig a little bit deeper into Martyn_HK's approach (as posted by TIMAI2).
Try to modify Tim's Example - the beauty is, you can retain your markers. I don't see having a finite length of canvas as a problem (that's the same in most programming languages and OS) for something like a scrolling 2D game.
In your case, the canvas can be a fixed size and not physically scroll, but give the impression of scrolling. For each value, the canvas is cleared and the data, a single pixel dot ( = portion of line), is added to a record (existing dot coordinates), and all are drawn from the right-hand-side, less the far-left dot. This should happen fast enough that the User doesn't see the mechanics of it - much depends on the consistency of data feed and the speed of the device processor - give it a go!
Hmmm.... tried to turn TIMAI2's example for a scrolling "window" at the canvas to a task-manager-like graph.
But I've still the problem, that the canvas size (and VerticalArrangement1.width) is limited.
I still can't get the clue, to "wrap the canvas around" (if you know what I mean).
I guess I've to use a canvas twice the width of the viewing window and that I've to draw my values at X and as soon as the "cursor" exceeds 1 times the width at "X minus width" as well (which will not show up, because I'm acutally looking at a window beyond that area).
When the cursor then reaches the end of the viewing window, I've to reset the window to "from 0 to width". Right?
@Chris: as far as I understood your proposal, that requires two things: 1st I've to store the values in a record, 2nd I've to redraw the whole canvas every time new data has arrived.
Correct?
That is it exactly - If your Canvas is 200 pixels wide, you have 200 x,y records (all 0,0 to start). When a new value arrives, it is added (prefixed) to the list and the last value (now item 201) is dropped/deleted. The Canvas is cleared and the current chart plotted. Takes longer to explain than it does to work
@all:
Evaluating all your ideas and hints, I think the most elegant way of implementing the "endless" task-manager-like graph would be using a canvas twice the size as needed and show it up in a HorizontalScrollArrangement that's limited to half of the canvas width.
I'm going to start with a view window from 0 to (0.5width) with an X-value increasing every timer tick.
I'll then plot my data @ X and, as soon as X reaches 0.5width, @ X-(0.5*width) too.
As soon as X reaches the (width/2)-value, I'll then use the ScrollHandler extension to set the view window from (X-(width/2) to X, so that the viewing window scrolls with the incomming data. When X reaches the full width of the canvas, I'll then reset X to (width/2) and the viewing window to (X-(width/2) and X to (width/2).
If you don't want to have a history of measurements, why don't you follow the way in Tim's post? I checked it and it works great. Unless it's about stories up to, for example, 2000 measurements where the window width about 300.
Then this hint you judged not to work will be useful.
). But when the "cursor" reaches the right edge, I want the whole canvas to shift to the left, so that I can continue to draw new measurements at the right edge with preserving the history of the last minutes.
.
