Initialize by Point & Click

droelf

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

dheerendra

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

droelf

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 :)

SGaist

Hi and welcome to devnet,

Do you mean something like the elastic node example ?

? Offline

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;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    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.save()
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.lineWidth = 3
            ctx.beginPath()

            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 )
            }
            ctx.closePath()
            ctx.stroke();
            ctx.restore()
        }
    }

    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 )
            canvas.requestPaint()
        }
    }

}

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

Cheers!
Wieland

droelf

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

droelf

@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 :)
http://en.wikipedia.org/wiki/Blossom_algorithm

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