{"id":139,"date":"2014-12-26T22:51:20","date_gmt":"2014-12-26T21:51:20","guid":{"rendered":"http:\/\/www.arnorehn.de\/blog\/?p=139"},"modified":"2016-08-07T11:59:57","modified_gmt":"2016-08-07T09:59:57","slug":"quickplot-a-collection-of-native-qtquick-plot-items","status":"publish","type":"post","link":"https:\/\/www.arnorehn.de\/blog\/2014\/12\/26\/quickplot-a-collection-of-native-qtquick-plot-items\/","title":{"rendered":"QuickPlot: A collection of native QtQuick plotting items"},"content":{"rendered":"

For a project at university I recently needed a\u00a0plotting widget to display some\u00a0data. Naturally, Qwt came to my mind. I’ve already been using it in a number of other projects and it works great.<\/p>\n

The one drawback, however: The project was intended to be run on the Raspberry Pi. Now the X-Server on the R-Pi doesn’t have any 3D acceleration yet, so the performance of Qwt was subpar.<\/p>\n

Luckily, Qt has the eglfs backend (using Broadcom’s EGL libraries), which works very well on the R-Pi. The problem: You\u00a0have to use QML\/QtQuick with that, so Qwt was out of the game (actually, I’ve played around with\u00a0creating a QtQuick backend for Qwt, but with Qwt being QPainter-based, still, it was nowhere near performant enough). A\u00a0more QtQuick-like solution was needed.<\/p>\n

Since QtQuick supports the HTML5 Canvas API, I thought that maybe some HTML5 chart library like Chart.js<\/a> could do the trick. The good news: It works pretty much out of the box and you get very pretty charts. The bad news: performance on the Raspberry Pi is more or less abysmal (on a laptop or desktop PC it’s fine, though). Even some hand-crafted plotting code based on the Canvas API ate the better part of the R-Pi’s CPU when displaying\u00a0a continuous stream of data. This isn’t actually that much of a wonder, considering that it was all based on JavaScript and has redrawn the whole plot area in an FBO every time there was a data update.<\/p>\n

So all\u00a0of the “simple” solutions where dead ends. Eventually I ended up writing\u00a0my own plot items, this time based on QtQuick’s Scene Graph to get the best\u00a0performance out of the little computer. I was actually surprised that no-one had done something like this yet – or at least I couldn’t find anything.
\nAnyway, here’s a screenshot of the thing displaying a sine wave with axes:
\n\"\"<\/a>
\nThe sine wave is actually scrolling through the view, always showing the most recent\u00a0300 data points of the data source. It’s even anti-aliased on most hardware, including the R-Pi, just not on my laptop’s Intel GPU on which I took the screenshot. The performance\u00a0on the Raspberry Pi is now very<\/strong> good, using less than 5% of the CPU, while the other solutions where north of 70% for a continuously updated data source (values from top<\/code>, not claiming any sort of\u00a0accuracy).<\/p>\n

The API is somewhat inspired by Qwt’s. There’s the PlotArea<\/code> Item which is responsible for managing all items of the plot. It keeps a collection of PlotItem<\/code>s, displays the axes and makes the used ScaleEngine<\/code>s (used for the axis limits) known to every item and axis in the plot.
\nI haven’t implemented more than the most basic PlotItems and ScaleEngines at the moment (because those are currently the only things I need):<\/p>\n