Plot: Heat Map using Qt

fem_dev

Is there a way to create a chart type "Heat Map" like this image below using Qt?

In this image above, for each pixel point, I have 3 informations:

X position (time)
Y position (frequency)
Pixel color (intensity)

How can I do that using Qt?

jsulm

@fem_dev One simple, but not most efficient solution would be simply to draw on a QWidget: you have x/y and the color and can use QPainter. To optimise you can draw once into a pixmap and then draw that pixmap on the widget.
See https://doc.qt.io/qt-5/qpainter.html
And https://doc.qt.io/qt-5/qwidget.html#paintEvent

fem_dev

@jsulm thank you! May be it can solve my problem.
Do you have any ideas about how could I add X and Y axis to this QPainter class?
Like the Hot Map image above, I need the scaled X and Y axis, axis labels and the right-side color palette intensity levels.

Is there any way to join/mix the QChart class with this QPainter class to be possible to get the axis, labels, etc from QChart?

jsulm

@fem_dev said in Plot: Heat Map using Qt:

Is there any way to join/mix the QChart class with this QPainter

No, with QPainter you would need to hanlde axes and scaling by yourself. You should look for some dedicated libraries (not sure QChart does what you want).

beecksche

@fem_dev

I would suggest QDataVizualization.

For example, with Q3DSurface you can set the x (time), z (frequency) and y (heat) values. The surface can be colored with your own color gradient.

In general the graph results in a 3D object, which can be viewed dynamically. But you can also "freeze" the camera and preset it above the graph (to get your shown figure).

Have a look at the examples.

fem_dev

@beecksche thank you!

Well, now I saw 2 Qt possibilities:

Option A: Using Qt3DSurface and "freeze" the z axis (example here)
Option B: Using QML (example here)

I opened the 3DSurface example described above using Qt Creator IDE and ran it.
It opens ok, but I have no rotation interaction. So I just have the selection and the zoom mouse interaction.
I read th Qt documentation (link here) and it said that:

End users can interact with the rendered graph by using either the mouse or touch to rotate, zoom, or select data. 
Graphs can be rotated freely by holding down the right mouse button and moving the mouse.

In this example source-code I didn't found any references to the setRotationEnabled(bool enable) (described here)

QUESTIONS
a) What I have to do to get the rotation interaction working in this Qt3DSurface example?
b) In the Qt3DSurface example, how can I set the graph start position to a view from top to down, to user see only X and Y axis (no z axis)?

beecksche

@fem_dev

For the camera preset have a look here. I would also enable the ortho projection.

You can also disable the selection mode.

fem_dev

@beecksche thank you for your help...

I don't know how to apply this setCameraPreset(Q3DCamera::CameraPreset preset) because, in this Qt3Surface example the surface variable doesn't have this setCameraPreset() method.

How can I do that?

beecksche

@fem_dev

The function is part of the camera of the current scene:

Q3DSurface *surface;
surface->scene()->activeCamera()->setCameraPreset()

https://doc.qt.io/qt-5/qtdatavisualization-scatter-example.html#setting-up-the-graph

fem_dev

@beecksche perfect! It works great! Thank you!

Could you please help me a little bit more?
In this post above, I said that:

@fem_dev said in Plot: Heat Map using Qt:

I read th Qt documentation (link here) and it said that:
End users can interact with the rendered graph by using either the mouse or touch to rotate, zoom, or select data.
Graphs can be rotated freely by holding down the right mouse button and moving the mouse.

In this example source-code I didn't found any references to the setRotationEnabled(bool enable) (described here)

QUESTION:
a) What I have to do to get the rotation interaction working in this Qt3DSurface example?

fem_dev

@fem_dev I got it! Is a right-click event! Thank you all!

fem_dev

To finish my questions ins this post, I would like to compare the Qt3DSurface graphical result and my target graphical result:

If I open the Qt 3DSurface example and use this:

m_graph->scene()->activeCamera()->setCameraPreset(Q3DCamera::CameraPresetDirectlyAbove)

and change the line:

m_sqrtSinSeries->setDrawMode(QSurface3DSeries::DrawSurfaceAndWireframe);

to:

m_sqrtSinSeries->setDrawMode(QSurface3DSeries::DrawSurface);

I got this graph output:

My "target image style" is:

So, in the 3DSurface example the image appears divided in triangles, where each triangle have a different color. Because of this method, the final image result IS NOT so "well defined" (color smooth transition) and doesn't have a "high resolution appearance" like the "target image style" above.

a) Is there a way to get the same "well defined pixel resolution" using Q3DSurface?
b) The "target image" have a right-side color pallet. How can I do that in Qt using Q3DSurface?

Trap

Hi,

I have added a Qt implementation of the HeatMap that you can find in this repo.

Best regards,
Ahmed Trabelsi

SGaist

@Trap hi and welcome to devnet,

Thanks for the class !

There are some small improvements you can do to it.

Technically, you do not need to keep your QImage nor QPixmap as member variables since you will replace them with new ones when changing the data.

This will also remove the current memory leak you have with imageD. There's usually no need to allocate them on the heap.