diff --git a/JKQtPlotterBuildAllExamples.pro b/JKQtPlotterBuildAllExamples.pro index 3d1c40307a..60b8ff513e 100644 --- a/JKQtPlotterBuildAllExamples.pro +++ b/JKQtPlotterBuildAllExamples.pro @@ -63,6 +63,7 @@ addSimpleTest(parametriccurve) addSimpleTest(parsedfunctionplot) addSimpleTest(functionplot) addSimpleTest(geometric) +addSimpleTest(ui) #addSimpleTest(imageplot_nodatastore) #addSimpleTest(rgbimageplot_opencv) #addSimpleTest(imageplot_opencv) diff --git a/README.md b/README.md index c47a512fe4..4a72086ff8 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ All test-projects are Qt-projects that use qmake to build. You can load them int | Screenshot | Description | Notes | |:-------------:| ------------- | ------------- | | [![](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/screenshots/test_multiplot_small.png)](https://github.com/jkriege2/JKQtPlotter/tree/master/examples/test_multiplot) | [Layouting Several Plots](https://github.com/jkriege2/JKQtPlotter/tree/master/examples/test_multiplot) | Combining plots in Qt Layouts
linking plot axes
copy data from a `std::map` int the datastore
print plots/print preview | +| [![](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/screenshots/simpletest_ui_small.png)](https://github.com/jkriege2/JKQtPlotter/tree/master/examples/simpletest_ui) | [Placing JKQtPlotter into a Qt User-Interface-XML-file (`*.ui`)](https://github.com/jkriege2/JKQtPlotter/tree/master/examples/simpletest_ui) | | ### Tools and Special Features diff --git a/doc/images/uidesigner_step1.png b/doc/images/uidesigner_step1.png new file mode 100644 index 0000000000..9fcdfb529e Binary files /dev/null and b/doc/images/uidesigner_step1.png differ diff --git a/doc/images/uidesigner_step2.png b/doc/images/uidesigner_step2.png new file mode 100644 index 0000000000..4756495eb0 Binary files /dev/null and b/doc/images/uidesigner_step2.png differ diff --git a/doc/images/uidesigner_step3.png b/doc/images/uidesigner_step3.png new file mode 100644 index 0000000000..9b064e923f Binary files /dev/null and b/doc/images/uidesigner_step3.png differ diff --git a/examples/simpletest/README.md b/examples/simpletest/README.md index f367da0565..9ff7ff5c42 100644 --- a/examples/simpletest/README.md +++ b/examples/simpletest/README.md @@ -20,12 +20,11 @@ TARGET = jkqtplotter_simpletest # include JKQtPlotter source headers and link against library DEPENDPATH += . ../../lib INCLUDEPATH += ../../lib -CONFIG (debug, debug|release):LIBS += -L../../lib/debug -ljkqtplotterlib -CONFIG (release):LIBS += -L../../lib/release -ljkqtplotterlib - -# here you can activate some debug options -#DEFINES += SHOW_JKQTPLOTTER_DEBUG -#DEFINES += JKQTBP_AUTOTIMER +CONFIG (debug, debug|release) { + LIBS += -L../../staticlib/debug -ljkqtplotterlib_debug +} else { + LIBS += -L../../staticlib/release -ljkqtplotterlib +} ``` Alternatively to linking agains a `libjkqtplotter`, you can also directy add the JKQtPlotter sources to the project: diff --git a/examples/simpletest_ui/README.md b/examples/simpletest_ui/README.md new file mode 100644 index 0000000000..3f96e9cbf5 --- /dev/null +++ b/examples/simpletest_ui/README.md @@ -0,0 +1,145 @@ +[Back to JKQTPlotter main page](https://github.com/jkriege2/JKQtPlotter/) + +# JKQtPlotter + +## Using a JKQtPlotter inside a Qt User Interface Designer (UI) File +This project (see `./examples/simpletest_ui/`) demonstrates how to create add a `JKQtPlotter` inside the Qt Form Editor (e.g. called from of Qt Creator) into a widget. + +### Instructions on how to use JKQtPlotter in the Qt Form Designer + +For this to work you have to follow the steps shown below: + +1. add a new UI-file to your project and open it in the Form Editor. Then right-click the form and select `Promote Widgets ...`: + ![step1](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/doc/images/uidesigner_step1.png) + +2. In the dialog that opens, you have to define `JKQtPlotter` as a promotion to `QWidget` as shown below. Finally store the settings by clicking `Add` and closing the dialog with `Close`. + ![step2](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/doc/images/uidesigner_step2.png) + +3. Now you can add a `QWidget`from the side-bar to the form and then promote it to `JKQtPlotter`, by selecting and right-clicking the `QWidget` and then selecting `Promote To | JKQtPlotter`: + ![step3](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/doc/images/uidesigner_step3.png) + + + +### QMake-Project of this example + +The QMake project for such a project looks like this (see [`jkqtplotter_simpletest_ui.pro`](https://github.com/jkriege2/JKQtPlotter/blob/master/examples/simpletest_ui/jkqtplotter_simpletest_ui.pro): +```qmake +# source code for this simple demo +SOURCES = jkqtplotter_simpletest_ui.cpp \ + formwithjkqtplotter.cpp + +FORMS += formwithjkqtplotter.ui + +HEADERS += formwithjkqtplotter.h + +# configure Qt +CONFIG += qt +QT += core gui xml svg +greaterThan(QT_MAJOR_VERSION, 4): QT += widgets printsupport + +# output executable name +TARGET = jkqtplotter_simpletest_ui + +# include JKQtPlotter source headers and link against library +DEPENDPATH += . ../../lib +INCLUDEPATH += ../../lib +CONFIG (debug, debug|release) { + LIBS += -L../../staticlib/debug -ljkqtplotterlib_debug +} else { + LIBS += -L../../staticlib/release -ljkqtplotterlib +} +message("LIBS = $$LIBS") + +win32-msvc*: DEFINES += _USE_MATH_DEFINES + +# here you can activate some debug options +#DEFINES += SHOW_JKQTPLOTTER_DEBUG +#DEFINES += JKQTBP_AUTOTIMER +``` + +As you can see there is a main CPP-file (shown below) and a `formwithjkqtplotter.ui`-file with the `formwithjkqtplotter.cpp/.h`-files that are used to implement the functionality behind the form (see next chapter). + +The soruce code of the main application is simply instanciating the Form class `FormWithJKQtPlotter` from `formwithjkqtplotter.ui/.h/.cpp`: +```c++ +#include +#include "formwithjkqtplotter.h" + + +int main(int argc, char* argv[]) +{ + QApplication app(argc, argv); + + FormWithJKQtPlotter plot; + plot.show(); + plot.resize(600,400); + + return app.exec(); +} +``` + +### Form Class `FormWithJKQtPlotter` + +The Form was designed in the Qt Form Designer within Qt Creator, using the method described above (see `formwithjkqtplotter.ui`): +![jkqtplotter_simpletest_ui1](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/screenshots/jkqtplotter_simpletest_ui_widget.png) + +In addition the example implements some simple functionality in the `formwithjkqtplotter.cpp/.h`-files. A single graph, which parses and plots a function (from a `QLineEdit`) is added to the plot in the constructor: +```c++ +#include "formwithjkqtplotter.h" +#include "ui_formwithjkqtplotter.h" + +FormWithJKQtPlotter::FormWithJKQtPlotter(QWidget *parent) : + QWidget(parent), + ui(new Ui::FormWithJKQtPlotter) +{ + ui->setupUi(this); + graph=new JKQTPxParsedFunctionLineGraph(ui->plot); + graph->set_function(ui->edtEquation->text()); + graph->set_title(ui->edtEquation->text()); + ui->plot->addGraph(graph); + ui->plot->setXY(-10,10,-10,10); +} +``` + +Then three slots react to user interactions. First two interactions set the x- or y-axis to linear or logarithmic, depending on the state of the two check-boxes. It also sets the scaling of the axes to meaningful default values: +```c++ +void FormWithJKQtPlotter::on_chkLogX_toggled(bool checked) +{ + ui->plot->get_xAxis()->set_logAxis(checked); + if (checked) { + ui->plot->setX(1e-3,10); + } else { + ui->plot->setX(-10,10); + } +} + +void FormWithJKQtPlotter::on_chkLogY_toggled(bool checked) +{ + ui->plot->get_yAxis()->set_logAxis(checked); + if (checked) { + ui->plot->setY(1e-3,10); + } else { + ui->plot->setY(-10,10); + } +} +``` + +A third slot is connected to the `clicked()`-event of the `QPushButton` labeled "REPLOT!". This slot reads the function from the `QLineEdit` and updates the plot with it: +```c++ +void FormWithJKQtPlotter::on_btnReplot_clicked() +{ + graph->set_function(ui->edtEquation->text()); + graph->set_title(ui->edtEquation->text()); + ui->plot->update_plot(); +} +``` + +``` +The result looks like this: +![jkqtplotter_simpletest_ui1](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/screenshots/jkqtplotter_simpletest_ui.png) + +If you set both axes to logarithmic and modify the plotted function a bit, you get: +![jkqtplotter_simpletest_ui1](https://raw.githubusercontent.com/jkriege2/JKQtPlotter/master/screenshots/jkqtplotter_simpletest_ui_loglog.png) + + + +[Back to JKQTPlotter main page](https://github.com/jkriege2/JKQtPlotter/) \ No newline at end of file diff --git a/examples/simpletest_ui/formwithjkqtplotter.cpp b/examples/simpletest_ui/formwithjkqtplotter.cpp new file mode 100644 index 0000000000..401cc8f169 --- /dev/null +++ b/examples/simpletest_ui/formwithjkqtplotter.cpp @@ -0,0 +1,46 @@ +#include "formwithjkqtplotter.h" +#include "ui_formwithjkqtplotter.h" + +FormWithJKQtPlotter::FormWithJKQtPlotter(QWidget *parent) : + QWidget(parent), + ui(new Ui::FormWithJKQtPlotter) +{ + ui->setupUi(this); + graph=new JKQTPxParsedFunctionLineGraph(ui->plot); + graph->set_function(ui->edtEquation->text()); + graph->set_title(ui->edtEquation->text()); + ui->plot->addGraph(graph); + ui->plot->setXY(-10,10,-10,10); +} + +FormWithJKQtPlotter::~FormWithJKQtPlotter() +{ + delete ui; +} + +void FormWithJKQtPlotter::on_chkLogX_toggled(bool checked) +{ + ui->plot->get_xAxis()->set_logAxis(checked); + if (checked) { + ui->plot->setX(1e-3,10); + } else { + ui->plot->setX(-10,10); + } +} + +void FormWithJKQtPlotter::on_chkLogY_toggled(bool checked) +{ + ui->plot->get_yAxis()->set_logAxis(checked); + if (checked) { + ui->plot->setY(1e-3,10); + } else { + ui->plot->setY(-10,10); + } +} + +void FormWithJKQtPlotter::on_btnReplot_clicked() +{ + graph->set_function(ui->edtEquation->text()); + graph->set_title(ui->edtEquation->text()); + ui->plot->update_plot(); +} diff --git a/examples/simpletest_ui/formwithjkqtplotter.h b/examples/simpletest_ui/formwithjkqtplotter.h new file mode 100644 index 0000000000..08577b2336 --- /dev/null +++ b/examples/simpletest_ui/formwithjkqtplotter.h @@ -0,0 +1,29 @@ +#ifndef FORMWITHJKQTPLOTTER_H +#define FORMWITHJKQTPLOTTER_H + +#include +#include "jkqtplotter/jkqtpgraphsparsedfunction.h" + +namespace Ui { + class FormWithJKQtPlotter; +} + +class FormWithJKQtPlotter : public QWidget +{ + Q_OBJECT + + public: + explicit FormWithJKQtPlotter(QWidget *parent = nullptr); + ~FormWithJKQtPlotter(); + protected slots: + void on_chkLogX_toggled(bool checked); + void on_chkLogY_toggled(bool checked); + void on_btnReplot_clicked(); + + private: + Ui::FormWithJKQtPlotter *ui; + + JKQTPxParsedFunctionLineGraph* graph; +}; + +#endif // FORMWITHJKQTPLOTTER_H diff --git a/examples/simpletest_ui/formwithjkqtplotter.ui b/examples/simpletest_ui/formwithjkqtplotter.ui new file mode 100644 index 0000000000..18151477f6 --- /dev/null +++ b/examples/simpletest_ui/formwithjkqtplotter.ui @@ -0,0 +1,74 @@ + + + FormWithJKQtPlotter + + + + 0 + 0 + 505 + 379 + + + + Form + + + + + + equation: + + + + + + + sin(x*4*pi)*exp(-x/5) + + + + + + + REPLOT! + + + + + + + + + + logarithmic y-axis + + + + + + + logarithmic x-axis + + + + + + + settings: + + + + + + + + JKQtPlotter + QWidget +
jkqtplotter/jkqtplotter.h
+ 1 + + + + + diff --git a/examples/simpletest_ui/jkqtplotter_simpletest_ui.cpp b/examples/simpletest_ui/jkqtplotter_simpletest_ui.cpp new file mode 100644 index 0000000000..07350fec17 --- /dev/null +++ b/examples/simpletest_ui/jkqtplotter_simpletest_ui.cpp @@ -0,0 +1,14 @@ +#include +#include "formwithjkqtplotter.h" + + +int main(int argc, char* argv[]) +{ + QApplication app(argc, argv); + + FormWithJKQtPlotter plot; + plot.show(); + plot.resize(600,400); + + return app.exec(); +} diff --git a/examples/simpletest_ui/jkqtplotter_simpletest_ui.pro b/examples/simpletest_ui/jkqtplotter_simpletest_ui.pro new file mode 100644 index 0000000000..75d5fcdfe5 --- /dev/null +++ b/examples/simpletest_ui/jkqtplotter_simpletest_ui.pro @@ -0,0 +1,31 @@ +# source code for this simple demo +SOURCES = jkqtplotter_simpletest_ui.cpp \ + formwithjkqtplotter.cpp + +FORMS += formwithjkqtplotter.ui + +HEADERS += formwithjkqtplotter.h + +# configure Qt +CONFIG += qt +QT += core gui xml svg +greaterThan(QT_MAJOR_VERSION, 4): QT += widgets printsupport + +# output executable name +TARGET = jkqtplotter_simpletest_ui + +# include JKQtPlotter source headers and link against library +DEPENDPATH += . ../../lib +INCLUDEPATH += ../../lib +CONFIG (debug, debug|release) { + LIBS += -L../../staticlib/debug -ljkqtplotterlib_debug +} else { + LIBS += -L../../staticlib/release -ljkqtplotterlib +} +message("LIBS = $$LIBS") + +win32-msvc*: DEFINES += _USE_MATH_DEFINES + +# here you can activate some debug options +#DEFINES += SHOW_JKQTPLOTTER_DEBUG +#DEFINES += JKQTBP_AUTOTIMER diff --git a/examples/simpletest_ui/jkqtplotter_simpletest_ui_and_lib.pro b/examples/simpletest_ui/jkqtplotter_simpletest_ui_and_lib.pro new file mode 100644 index 0000000000..367761d5b1 --- /dev/null +++ b/examples/simpletest_ui/jkqtplotter_simpletest_ui_and_lib.pro @@ -0,0 +1,8 @@ +TEMPLATE = subdirs + +SUBDIRS += jkqtplotterlib jkqtplotter_simpletest_ui + +jkqtplotterlib.file = ../../staticlib/jkqtplotterlib.pro + +jkqtplotter_simpletest_ui.file=$$PWD/jkqtplotter_simpletest_ui.pro +jkqtplotter_simpletest_ui.depends = jkqtplotterlib diff --git a/screenshots/jkqtplotter_simpletest_ui.png b/screenshots/jkqtplotter_simpletest_ui.png new file mode 100644 index 0000000000..d9e38a189f Binary files /dev/null and b/screenshots/jkqtplotter_simpletest_ui.png differ diff --git a/screenshots/jkqtplotter_simpletest_ui_loglog.png b/screenshots/jkqtplotter_simpletest_ui_loglog.png new file mode 100644 index 0000000000..642069d841 Binary files /dev/null and b/screenshots/jkqtplotter_simpletest_ui_loglog.png differ diff --git a/screenshots/jkqtplotter_simpletest_ui_small.png b/screenshots/jkqtplotter_simpletest_ui_small.png new file mode 100644 index 0000000000..a39eea9fc2 Binary files /dev/null and b/screenshots/jkqtplotter_simpletest_ui_small.png differ diff --git a/screenshots/jkqtplotter_simpletest_ui_widget.png b/screenshots/jkqtplotter_simpletest_ui_widget.png new file mode 100644 index 0000000000..c83be61510 Binary files /dev/null and b/screenshots/jkqtplotter_simpletest_ui_widget.png differ