Created
March 9, 2016 16:00
-
-
Save Rahix/e38aa6ab2b70e20bc9af to your computer and use it in GitHub Desktop.
QML Node editor proof of concept. Works with my gtk themes, but may not work with others (non-dynamic spacing)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import QtQuick 2.3 | |
import QtQuick.Controls 1.2 | |
import QtQuick.Extras 1.4 | |
import QtQuick.Window 2.2 | |
import QtPositioning 5.5 | |
ApplicationWindow { | |
id: window | |
visible: true | |
width: 640 | |
height: 480 | |
title: qsTr("Node Demo") | |
menuBar: MenuBar { | |
Menu { | |
title: qsTr("File") | |
MenuItem { | |
text: qsTr("Exit") | |
onTriggered: Qt.quit(); | |
} | |
} | |
} | |
Item { | |
id: node_edit | |
x: 0 | |
y: 0 | |
width: window.width | |
height: window.height | |
Canvas { | |
id: spline_canvas | |
width: node_edit.width | |
height: node_edit.height | |
onPaint:{ | |
function do_spline(x1, y1, x2, y2, context) { | |
x1 += 16; | |
x2 += 16; | |
y1 += 34; | |
y2 += 34; | |
context.moveTo(x1, y1); | |
if(x1>x2) { | |
context.bezierCurveTo((x1-x2)+x1,y1,x2-(x1-x2),y2, x2, y2); | |
} else { | |
context.bezierCurveTo((x1+x2)/2,y1,(x1+x2)/2, y2, x2, y2); | |
} | |
} | |
var ctx = spline_canvas.getContext("2d"); | |
ctx.clearRect(0, 0, spline_canvas.width, spline_canvas.height); | |
ctx.strokeStyle = Qt.rgba(0, 0, 0, 1); | |
ctx.lineWidth = 1; | |
ctx.beginPath(); | |
// num1 -> sum1 | |
do_spline(num1.x+num1_out1.x, num1.y+num1_out1.y, sum1.x+sum1_in1.x, sum1.y+sum1_in1.y, ctx); | |
do_spline(num2.x+num2_out1.x, num2.y+num2_out1.y, sum1.x+sum1_in2.x, sum1.y+sum1_in2.y, ctx); | |
do_spline(sum1.x+sum1_out1.x, sum1.y+sum1_out1.y, subtract1.x+subtract1_in1.x, subtract1.y+subtract1_in1.y, ctx); | |
do_spline(subtract1.x+subtract1_out1.x, subtract1.y+subtract1_out1.y, output1.x+output1_in1.x, output1.y+output1_in1.y, ctx); | |
ctx.stroke(); | |
} | |
} | |
Rectangle { | |
id: num1 | |
x: 40 | |
y: 34 | |
width: 130 | |
height: 58 | |
//title: qsTr("Number") | |
color: "lightblue" | |
Drag.active: num1_drag_area.drag.active | |
Drag.hotSpot.x: 130/2 | |
Drag.hotSpot.y: 58/2 | |
onXChanged: { | |
spline_canvas.requestPaint(); | |
} | |
onYChanged: { | |
spline_canvas.requestPaint(); | |
} | |
MouseArea { | |
id: num1_drag_area | |
x: 0 | |
y: 0 | |
width: 130 | |
height: 58 | |
drag.target: parent | |
} | |
GroupBox { | |
id: num1_group | |
x: 0 | |
y: 0 | |
width: num1.width | |
height: num1.height | |
title: qsTr("Number") | |
RadioButton { | |
id: num1_out1 | |
x: 112 | |
y: 3 | |
text: qsTr("") | |
enabled: false | |
clip: true | |
visible: true | |
checked: true | |
activeFocusOnPress: false | |
} | |
TextField { | |
id: textField1 | |
x: 0 | |
y: 0 | |
text: "1" | |
placeholderText: qsTr("Number") | |
inputMask: qsTr("") | |
} | |
} | |
} | |
Rectangle { | |
id: num2 | |
x: 40 | |
y: 114 | |
width: 130 | |
height: 58 | |
//title: qsTr("Number") | |
color: "lightblue" | |
Drag.active: num2_drag_area.drag.active | |
Drag.hotSpot.x: 130/2 | |
Drag.hotSpot.y: 58/2 | |
onXChanged: { | |
spline_canvas.requestPaint(); | |
} | |
onYChanged: { | |
spline_canvas.requestPaint(); | |
} | |
MouseArea { | |
id: num2_drag_area | |
x: 0 | |
y: 0 | |
width: 130 | |
height: 58 | |
drag.target: parent | |
} | |
GroupBox { | |
id: num2_group | |
x: 0 | |
y: 0 | |
width: num2.width | |
height: num2.height | |
title: qsTr("Number") | |
RadioButton { | |
id: num2_out1 | |
x: 112 | |
y: 3 | |
text: qsTr("") | |
enabled: false | |
clip: true | |
visible: true | |
checked: true | |
activeFocusOnPress: false | |
} | |
TextField { | |
id: textField2 | |
x: 0 | |
y: 0 | |
text: "2" | |
placeholderText: qsTr("Number") | |
inputMask: qsTr("") | |
} | |
} | |
} | |
Rectangle { | |
id: sum1 | |
x: 214 | |
y: 60 | |
width: 142 | |
height: 88 | |
//title: qsTr("Number") | |
color: "lightblue" | |
Drag.active: sum1_drag_area.drag.active | |
Drag.hotSpot.x: 130/2 | |
Drag.hotSpot.y: 58/2 | |
onXChanged: { | |
spline_canvas.requestPaint(); | |
} | |
onYChanged: { | |
spline_canvas.requestPaint(); | |
} | |
MouseArea { | |
id: sum1_drag_area | |
x: 0 | |
y: 0 | |
width: parent.width | |
height: parent.height | |
drag.target: parent | |
} | |
GroupBox { | |
id: sum1_group | |
x: 0 | |
y: 0 | |
width: sum1.width | |
height: sum1.height | |
title: qsTr("Sum") | |
RadioButton { | |
id: sum1_in1 | |
x: -18 | |
y: 0 | |
enabled: false | |
checked: true | |
} | |
RadioButton { | |
id: sum1_in2 | |
x: -18 | |
y: 33 | |
enabled: false | |
checked: true | |
} | |
TextField { | |
id: textField3 | |
x: 12 | |
y: 0 | |
text: "Number 1" | |
readOnly: true | |
placeholderText: qsTr("Text Field") | |
} | |
TextField { | |
id: textField4 | |
x: 12 | |
y: 30 | |
text: "Number 2" | |
readOnly: true | |
placeholderText: qsTr("Text Field") | |
} | |
RadioButton { | |
id: sum1_out1 | |
x: 124 | |
y: 17 | |
enabled: false | |
checked: true | |
} | |
} | |
} | |
Rectangle { | |
id: output1 | |
x: 475 | |
y: 312 | |
width: 134 | |
height: 55 | |
//title: qsTr("Number") | |
color: "lightblue" | |
Drag.active: output1_drag_area.drag.active | |
Drag.hotSpot.x: 130/2 | |
Drag.hotSpot.y: 58/2 | |
onXChanged: { | |
spline_canvas.requestPaint(); | |
} | |
onYChanged: { | |
spline_canvas.requestPaint(); | |
} | |
MouseArea { | |
id: output1_drag_area | |
x: 0 | |
y: 0 | |
width: parent.width | |
height: parent.height | |
drag.target: parent | |
} | |
GroupBox { | |
id: output1_group | |
x: 0 | |
y: 0 | |
width: output1.width | |
height: output1.height | |
RadioButton { | |
id: output1_in1 | |
x: -17 | |
y: 0 | |
text: qsTr("") | |
enabled: false | |
checked: true | |
activeFocusOnPress: false | |
} | |
TextField { | |
id: textField5 | |
x: 13 | |
y: 0 | |
text: 1*textField1.text + 1*textField2.text - 1*textField7.text | |
readOnly: true | |
inputMask: qsTr("") | |
placeholderText: qsTr("Number") | |
} | |
title: qsTr("Output") | |
} | |
} | |
Rectangle { | |
id: subtract1 | |
x: 426 | |
y: 133 | |
width: 142 | |
height: 88 | |
//title: qsTr("Number") | |
color: "lightblue" | |
Drag.active: subtract1_drag_area.drag.active | |
Drag.hotSpot.x: 130/2 | |
Drag.hotSpot.y: 58/2 | |
onXChanged: { | |
spline_canvas.requestPaint(); | |
} | |
onYChanged: { | |
spline_canvas.requestPaint(); | |
} | |
MouseArea { | |
id: subtract1_drag_area | |
x: 0 | |
y: 0 | |
width: parent.width | |
height: parent.height | |
drag.target: parent | |
} | |
GroupBox { | |
id: subtract1_group | |
x: 0 | |
y: 0 | |
width: 142 | |
height: 88 | |
RadioButton { | |
id: subtract1_in1 | |
x: -18 | |
y: 0 | |
enabled: false | |
checked: true | |
} | |
RadioButton { | |
id: subtract1_in2 | |
x: -18 | |
y: 33 | |
enabled: false | |
} | |
TextField { | |
id: textField6 | |
x: 12 | |
y: 0 | |
text: "Number 1" | |
readOnly: true | |
placeholderText: qsTr("Text Field") | |
} | |
TextField { | |
id: textField7 | |
x: 12 | |
y: 30 | |
text: "3" | |
readOnly: false | |
placeholderText: qsTr("Number") | |
} | |
RadioButton { | |
id: subtract1_out1 | |
x: 124 | |
y: 17 | |
enabled: false | |
checked: true | |
} | |
title: qsTr("Subtraction") | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment