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
-
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.jpgBut thx for the info :)
-
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; 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 -
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; 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@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_algorithmAnd since i am quite new i want to keep the code spectrum
i use as small as possible :D