Add rates graph balloon labels for maximum rates

[GaryKeeble]

Add legend to rates graph to show maximum rates for roll, pitch and
yaw. Adjust auto-scale so that it is in multiples of 200deg/s so that
the auto-scale operates less often.

[GaryKeeble]

Example of the balloons...

[mikeller]

Nice work!

[mikeller]

@GaryKeeble :

I think the snapping of your balloons is broken. They overlap and blot each other out, instead of snapping next to each other:

Also, is it possible to add some transparency to the balloons, or put them into the background, so they don't blot out the actual curves:

Plus I think you need to use larger fonts on smaller zoom factors, the numbers are quite hard to read.

Can you please fix these?

[GaryKeeble]

@mikeller,

I'll take a look at preventing the overlapping of the balloons, currently there is no check for overlap as the canvas is not aware of things already drawn on it so I'll have to find someway of tracking the positions.

I have also tried balloons with transparency, it's really easy to do and looks fine; however, unless I can resolve the overlapping issue, the text becomes completely unreadable as it gets confused by the balloon below.

Also, I will look into a minimum scale size for the font; again, this shouldn't be too difficult (I hope).

[mikeller]

Thanks.

Re the font sizing, the culprit seems to be that we are rescaling the canvas, which makes drawing the curve easier, but wrecks havoc on font rendering.

In general, I am thinking we should probably move away from trying to squeeze everything into a single layer, and towards using individual layers for background, curves, labels and stick positions (particularly those, we do not want to redraw the curves for every refresh of the stick positions).

According to http://stackoverflow.com/questions/3008635/html5-canvas-element-multiple-layers , even just using multiple canvas elements layered over top of each other should accomplish this.

[GaryKeeble]

I tried to use multiple layers as several canvas' but when you make the containing DIV absolute position it screwed up the presentation (as in all the canvas' sizes went to nothing). Multiple canvas layers was the way I went with the BB Viewer (for the craft and analyser windows).

Anyway,
I have managed to make the balloons non-overlapping, with transparent background and also for the font size to be clamped to a minimum; and I have even added the stick position indicators that Boris mentioned; So basically it looks a lot more integrated.

But my sticking point at the moment is a really silly one. For the stick positions and font size to update when the user re-sizes the window or moves their sticks, I need to trigger the updateRates function to re-draw the rates-graph. I've done this in the TABS.pid_tuning.renderModel function at the moment but I am really unhappy firstly where it is in the javascript as I don't think TABS.pid_tuning.renderModel is the right place and that I seem to be struggling to provide some sort of update frequency.... I don't want it to refresh the graph if either I am not re-sizing the window, or the sticks haven't moved but for the life of me I am struggling to prevent it updating too quickly and driving the CPU usage through the roof. Perhaps I'm a little tired and need a fresh set of eye's tomorrow :-)

Regards....

[mikeller]

Nice, good work! Do you have this on a branch that we could play with? ;-)

If we need to change the way the DIV is implemented in order to make multiple canvases work, then we should do this.

I think particularly for the stick position points, redrawing the whole graph all the time is not the way to go, there are already complaints from users about the configurator being slow on their hardware, so this is probably going to kill them. Using a separate canvas for the points would be an easy and elegant way to get around this. I agree that renderModel is probably not the ideal place for stick updates, but since renderModel is already processing the stick updates, it will probably be most performant if we update the stick points in there as well.

[GaryKeeble]

My branch is here... [https://github.com/GaryKeeble/betaflight-configurator/tree/Rates-graph-enhancements]. It is fully functional but I haven't solved limiting the update rate or triggering a re-draw on window resize (which is only required to prevent the fonts getting too small).

I like the idea of moving the balloons and stick positions onto a separate canvas layer to speed up re-draw and it should be trivial, just point the draw functions at the other canvas context... After we resolve the update rate/window resize issues, I'll turn my focus on the multiple layer method...I agree, it's got to be the right way to go :-)

If you prefer, I could generate another pull request to keep it all in one place.

[GaryKeeble]

Just updated my branch
Think I've got the resizing of fonts, stick position indicators (with values) and non-overlapping transparent balloons sorted.
Also implemented "layers" in the canvas so only the stick positions and balloons are refreshed when the window is resized or rcCommand changes.