Qt World Summit: Register Today!

Initialize by Point & Click

  • First of all I am kinda new to c++ (came from Java).
    My Application is going to be a Demo App about an algorithm on graphs.

    I have a single mainframe i want to use, now i want to make a field in which i can create nodes by just clicking in the field.
    That means if i click somewhere in the field, it should save this point and create a dot on the field.

    Any suggestions, or maybe infos what to use to create that kind of a field inside the mainframe?

    PS: my structure is a bit related to #13 here http://stackoverflow.com/questions/5493474/graph-implementation-c

  • Qt Champions 2017

    Did you look at handling QMouseEvent ? I'm sure this will help you.

  • First of all i need a field where i can draw in and visualize Nodes as black points and draw lines as edges.
    Like this http://webmathematics.net/images/six nodes.jpg

    But thx for the info :)

  • Lifetime Qt Champion

    Hi and welcome to devnet,

    Do you mean something like the elastic node example ?

  • Hi droelf!

    You can write the GUI in QML. That's so easy, I just did it for you:

    // main.cpp
    #include <QApplication>
    #include <QQmlApplicationEngine>
    #include <QObject>
    int main(int argc, char *argv[])
        QApplication app(argc, argv);
        QQmlApplicationEngine engine;
        return app.exec();
    // AppState.js
    var items = []
    // Node.qml
    import QtQuick 2.4
    Rectangle {
        property string text: ""
        property real centerX: x + width/2
        property real centerY: y + height/2
        width: 60
        height: 60
        border.width: 1
        border.color: "black"
        radius: 30
        Text {
            anchors.centerIn: parent
            text: parent.text
    // main.qml
    import QtQuick 2.4
    import QtQuick.Window 2.2
    import "qrc:///AppState.js" as AppState
    Window {
        title: qsTr("Hello World")
        width: 640
        height: 480
        visible: true
        Canvas {
            id: canvas
            anchors.fill: parent
            onPaint: {
                var ctx = canvas.getContext('2d')
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.lineWidth = 3
                if (AppState.items.length>0) {
                    ctx.moveTo( AppState.items[0].centerX, AppState.items[0].centerY )
                for (var i=1; i<AppState.items.length; i++) {
                    ctx.lineTo( AppState.items[i].centerX, AppState.items[i].centerY )
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            property int counter: 1
            onClicked: {
                var component = Qt.createComponent("Node.qml");
                var newItem = component.createObject(mouseArea)
                newItem.x = mouse.x
                newItem.y = mouse.y
                newItem.text = "" + counter++
                AppState.items.push( newItem )

    The result looks like this: https://drive.google.com/file/d/0B2D1UtsPfTx-VWhJOUN3T1B5NW8/view?usp=sharing


  • @SGaist a really nice example, i am quite sure i will find a lot of useful code snippets :)

  • @Wieland Hi Wieland,

    it looks very clean and easy but the thing is.
    It is easy to visualize but a bit harder to manipulate the raw data of nodes and edges since
    a way more complicated version of this algorithm is going to follow :)

    And since i am quite new i want to keep the code spectrum
    i use as small as possible :D

Log in to reply