2019-01-20 23:15:10 +08:00
# Example (JKQTPlotter): Simple RGB image plot, showing a 3-channel OpenCV cv::Mat {#JKQTPlotterImagePlotRGBOpenCV}
2019-06-21 04:24:47 +08:00
This project (see `./examples/imageplot_opencv/` ) simply creates a JKQTPlotter widget (as a new window) and shows an RGB image read from a BMP-file. The image is generated as an [OpenCV ](https://opencv.org/ ) [`cv::Mat` ](https://docs.opencv.org/4.0.0/d3/d63/classcv_1_1Mat.html ) image and then copied into a single column of the internal datasdtore (JKQTPMathImage could be directly used without the internal datastore).
2019-02-10 05:17:01 +08:00
To copy the data a special OpenCV Interface function `JKQTPCopyCvMatToColumn()` is used, that copies the data from a (https://opencv.org/) [`cv::Mat` ](https://docs.opencv.org/4.0.0/d3/d63/classcv_1_1Mat.html ) directly into a column.
2018-12-29 00:46:47 +08:00
2019-02-10 05:17:01 +08:00
The function `JKQTPCopyCvMatToColumn()` is available from the (non-default) header-only extension from `jkqtplotter/jkqtpopencvinterface.h` . This header provides facilities to interface JKQTPlotter with OpenCV.
2018-12-29 00:46:47 +08:00
2019-06-21 04:24:47 +08:00
The source code of the main application is (see [`imageplot_opencv.cpp` ](https://github.com/jkriege2/JKQtPlotter/tree/master/examples/imageplot_opencv/imageplot_opencv.cpp ):
2019-01-19 16:40:52 +08:00
```.cpp
2018-12-29 00:46:47 +08:00
#include <QApplication>
#include <cmath>
#include "jkqtplotter/jkqtplotter.h"
2019-06-20 22:06:31 +08:00
#include "jkqtplotter/graphs/jkqtpimage.h"
2018-12-29 00:46:47 +08:00
#include "jkqtplotter/jkqtpopencvinterface.h"
#include <opencv2/core.hpp>
#include <opencv2/imgcodecs.hpp>
int main(int argc, char* argv[])
{
QApplication app(argc, argv);
2019-01-20 23:15:10 +08:00
JKQTPlotter plot;
2018-12-29 00:46:47 +08:00
// 1. create a plotter window and get a pointer to the internal datastore (for convenience)
2019-01-26 03:16:04 +08:00
plot.getPlotter()->setUseAntiAliasingForGraphs(true); // nicer (but slower) plotting
plot.getPlotter()->setUseAntiAliasingForSystem(true); // nicer (but slower) plotting
plot.getPlotter()->setUseAntiAliasingForText(true); // nicer (but slower) text rendering
2019-01-20 17:49:29 +08:00
JKQTPDatastore* ds=plot.getDatastore();
2018-12-29 00:46:47 +08:00
// 2. now we open a BMP-file and load it into an OpenCV cv::Mat
cv::Mat picture = cv::imread("example.bmp");
2019-01-20 23:15:10 +08:00
// 3. make data available to JKQTPlotter by adding it to the internal datastore.
2018-12-29 00:46:47 +08:00
// In this step the contents of each channel of the openCV cv::Mat is copied into a column
// of the datastore in row-major order
2019-01-20 17:49:29 +08:00
size_t cPictureR=JKQTPCopyCvMatToColumn(ds, picture, "R-channel", 2);
size_t cPictureG=JKQTPCopyCvMatToColumn(ds, picture, "G-channel", 1);
size_t cPictureB=JKQTPCopyCvMatToColumn(ds, picture, "B-channel", 0);
2018-12-29 00:46:47 +08:00
// 4. create a graph (JKQTPColumnRGBMathImage) with the columns created above as data
JKQTPColumnRGBMathImage* graph=new JKQTPColumnRGBMathImage(&plot);
2019-01-26 20:00:40 +08:00
graph->setTitle("");
2018-12-29 00:46:47 +08:00
// set size of the data (the datastore does not contain this info, as it only manages 1D columns of data and this is used to assume a row-major ordering
2019-01-26 20:00:40 +08:00
graph->setNx(picture.cols);
graph->setNy(picture.rows);
2018-12-29 00:46:47 +08:00
// where does the image start in the plot, given in plot-axis-coordinates (bottom-left corner)
2019-01-26 20:00:40 +08:00
graph->setX(0);
graph->setY(0);
2018-12-29 00:46:47 +08:00
// width and height of the image in plot-axis-coordinates
2019-01-26 20:00:40 +08:00
graph->setWidth(picture.cols);
graph->setHeight(picture.rows);
2018-12-29 00:46:47 +08:00
// image column with the data
2019-01-26 20:00:40 +08:00
graph->setImageRColumn(cPictureR);
graph->setImageGColumn(cPictureG);
graph->setImageBColumn(cPictureB);
2018-12-29 00:46:47 +08:00
// determine min/max of each channel manually
2019-01-26 20:00:40 +08:00
graph->setImageMinR(0);
graph->setImageMaxR(255);
graph->setImageMinG(0);
graph->setImageMaxG(255);
graph->setImageMinB(0);
graph->setImageMaxB(255);
2018-12-29 00:46:47 +08:00
// 5. add the graphs to the plot, so it is actually displayed
plot.addGraph(graph);
// 6. set axis labels
2019-01-26 03:16:04 +08:00
plot.getXAxis()->setAxisLabel("x [pixels]");
plot.getYAxis()->setAxisLabel("y [pixels]");
2018-12-29 00:46:47 +08:00
// 7. fix axis aspect ratio to width/height, so pixels are square
2019-01-26 03:16:04 +08:00
plot.getPlotter()->setMaintainAspectRatio(true);
plot.getPlotter()->setAspectRatio(double(picture.cols)/double(picture.rows));
2018-12-29 00:46:47 +08:00
// 8. autoscale the plot so the graph is contained
plot.zoomToFit();
// show plotter and make it a decent size
plot.show();
plot.resize(800,600);
plot.setWindowTitle("JKQTPColumnMathImage");
return app.exec();
}
```
The result looks like this:
2019-06-21 04:24:47 +08:00
![imageplot ](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/screenshots/rgbimageplot_opencv.png )
2018-12-29 00:46:47 +08:00
2019-01-20 23:15:10 +08:00
The image is upside-down, because computer images use a coordinate system with 0 at the top-left (left-handed coordinate system) and the JKQTPlotter has its 0 at the bottom-left (right-handed coordinate system).
2018-12-29 00:46:47 +08:00
2019-02-10 05:17:01 +08:00
You can modify the program above to display the image in the correct orientation, by adding the line
```.cpp
// 5.1 invert y-axis, so image is oriented correctly
plot.getYAxis()->setInverted(true);
```
This will reorient the y-axis to point from top to bottom (for increasing positive coordinates):
2019-06-21 04:24:47 +08:00
![imageplot ](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/screenshots/rgbimageplot_opencv_updisdedown.png )
2019-02-10 05:17:01 +08:00
2019-01-13 01:53:16 +08:00