I’m new to Qt and I’m looking for a way to create my own components. I need to create my own custom styled (needs to look specifically) component. The problem is I’m looking at the tutorials and I’m a bit baffled as to how to do this, because the tutorials show something else than I need to do.
I need to create something like my own plotwidget, containing two graphs (one of them editable by clicking and dragging control points by mouse) that will have accessible properties and slots/events like “plotchanged”.
Now, what I’looking for is not someone to write me the code (would be nice though 😀 ) but someone to tell me where to start looking/ tell me what to do?
Like You need to
-
create your own “custom widget”/”qml component”/”something else you don’t know about cause you’re new in Qt and don’t know the names or where to look”.
-
You should also read something about this,this and maybe that little thing that is useful. And here, this is what you should be looking at.
I started a lot of QML tutorial since i started looking, but when i start them I’m not sure that they lead to what I’m ultimately looking for.
What I want to create is a “Plot widget” that shows two graphs, the thing that looks close to it might be “curves tool” like in photoshop or GIMP.
3
Answers
This is a little hard to answer as there are many things you need to do something like in your linked picture. So I will just address the two main things:
Just create a class inherited from
QWidget
and add a Layout to it:You can use this class anywhere in for example other
QWidget
based classes via layouts, just like I usednew QLineEdit
, you can usenew CustomWidget
in another class.There are also many other Layouts
QPainter is the class you run all your drawing with ( lines, curves, etc ).
You can draw in a
QWidget
( or to be exact: a class inherited from QPaintDevice ).To draw on a
QWidget
when appropriate, override paintEvent(QPaintEvent*). Just google, there a millions of examples how to do this properly.You want to create a widget so the first thing to do is to create your own class
myWidget
which inherits fromQWidget
.Then, you want 2 graphs. I advise you to take a look at
qwt library
: http://qwt.sourceforge.net/With this library you have a lot of examples with graphs. It’s a bit complex, it’s a quite big lib but very complete.
You also have to manage your layout, I advise you to use Qt designer with
QGridLayout
.With this layout object, you can define a “matrix” where you can put all of you widgets wherever you want.
To make your buttons, widgets, plots, … doing things when you click on it, you have to create your
signal/slot
mechanism. Have a look there: http://qt-project.org/doc/qt-4.8/signalsandslots.htmlFinally, to have a beautiful widget, you can create a stylesheet using
CSS language
to improve your design.I think a good start is to read up a bit. Qt is a multiplatform framework for C++ applications.
http://en.wikipedia.org/wiki/Qt_(software)
QML is a markup language (as is html, hypertext markup language) for rapid Qt UI development.
http://en.wikipedia.org/wiki/QML
With QML you can design your graphical interface. “plotwidget” is very unclear as to what math you need for your application.
I haven’t tested this library myself, but it looks promising
http://www.qcustomplot.com
(which is the first hit when googling “qt plot”) I don’t know what you mean by “drag and click control points” , so you will have to read in the library documentation if it supports that.
I would:
1)Create a widget by inheriting from QWidget. Making the plot library of your choice work and perhaps display some mockup plots like y=x^2 or something before continuing.
2) Writing down what calls and responses you need from the library. How is the “drag and click” thing solved using your library?
3)Designing UI with QML or e.g. the ordinary UI feature in QtCreator, based on the specifications for buttons and displays etc you have derived in 2).