Storing dynamically QML objects - qt

i want to store in a variant or a list, a set of dynamically QML created objects.
when i do it once, it works nice:
property var obj
var component = Qt.createComponent("MyObject.qml")
obj = componente.createObject(contenedor)
i am trying to iterate 10 times to create a 10 length object
property variant objs
var component = Qt.createComponent("MyObject.qml")
for (var i=0; i<10; i++){
objs[i] = component.createObject(contenedor)
}
How can i do it?
Edit: i attach you my 2 files: main.qml and MyObject.qml
main.qml
import QtQuick 2.1
import QtQuick.Window 2.1
Rectangle {
visible: true
width: 1920
height: 1080
color: "white"
id: contenedor
property variant colors: ['blue', 'red', 'gray', 'orange']
property var arrayObjects: []
property int currentObj: 0
property var singleObject
Component.onCompleted: init()
function init(){
var componente = Qt.createComponent("MyObject.qml")
//singleObject = componente.createObject(contenedor,{"x":50,"y":10})
//singleObject = componente.createObject(contenedor)
for (var i=0; i<colors.length; i++){
arrayObjects.push(componente.createObject(contenedor))
}
for (var i=0; i<colors.length; i++){
console.log(arrayObjects[i])
}
next()
}
function next(){
console.log("Next");
if(currentObj > colors.length){
currentObj--
}else if(currentObj===colors.length){
console.log('--------------------Reset')
currentObj = 0
}
console.log("Index: " + currentObj)
arrayObjects[currentObj].visible = true
arrayObjects[currentObj].color = colors[currentObj]
arrayObjects[currentObj].end.connect(next)
arrayObjects[currentObj].init()
/*singleObject.visible = true
singleObject.color = colors[currentObj]
singleObject.end.connect(next)
singleObject.init()*/
currentObj++
}
}
MyObject.qml
import QtQuick 2.1
Rectangle {
visible: true
anchors.fill: parent
id: object
signal end()
Timer {
id: timer
running: false
repeat: false
onTriggered: end()
}
function init(){
console.log('Init object')
timer.interval = 5000
timer.start()
}
}

Something like this should work:
property var objs : []
var component = Qt.createComponent("MyObject.qml")
for (var i=0; i<10; i++){
objs.push(component.createObject(contenedor))
}
for (var i=0; i<10; i++){
console.log(objs[i])
}
Edit after your added code:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQml.Models 2.2
Window {
visible: true
width: 920
height: 500
color: "white"
id: contenedor
property variant colors: ['blue', 'red', 'gray', 'orange']
property var arrayObjects: []
property int currentObj: 0
property int zIndex: 1
property var singleObject
Component.onCompleted: init()
function init(){
var componente = Qt.createComponent("MyObject.qml")
//singleObject = componente.createObject(contenedor,{"x":50,"y":10})
//singleObject = componente.createObject(contenedor)
for (var i=0; i<colors.length; i++){
arrayObjects.push(componente.createObject(contenedor))
}
for (var i=0; i<colors.length; i++){
console.log(arrayObjects[i])
}
next()
}
function next(){
console.log("Next");
if(currentObj > colors.length){
currentObj--
}else if(currentObj===colors.length){
console.log('--------------------Reset')
currentObj = 0
}
console.log("Index: " + currentObj)
arrayObjects[currentObj].visible = true
console.log("Color: " + colors[currentObj]);
arrayObjects[currentObj].color = colors[currentObj];
arrayObjects[currentObj].z = zIndex;
arrayObjects[currentObj].end.connect(next)
zIndex++;
arrayObjects[currentObj].init()
/*singleObject.visible = true
singleObject.color = colors[currentObj]
singleObject.end.connect(next)
singleObject.init()*/
currentObj++
}
}

Related

how to add PathLine to ShapePath with a Repeater?

UPDATE 1 - i can get it to work using Javascript - but that seems to be a little bit unoptimized (from 2-3% to 30% load with qmlscene.exe when activated) - complete recreation when the model changes (its not ever growing), is that the only way or is there a more "declarative" style available?
How can i add a PathLine to a ShapePath based on a Model?
i know how to use a Repeater from outside of Items but not how to implode them inside of Items
do i need some sort of Repeater-Delegate on pathElements?
and i don't want to use the LineSeries component
import QtQuick.Shapes 1.15
import QtQuick 2.15
Shape {
ListModel {
id: myPositions
ListElement { x: 0; y:38 }
ListElement { x: 10; y: 28 }
ListElement { x: 20; y: 30 }
ListElement { x: 30; y: 14 }
}
ShapePath {
strokeColor: "black"
strokeWidth: 1
fillColor: "transparent"
startX: 0
startY: 0
PathLine { x: 0; y: 38 }
PathLine { x: 10; y: 28 }
PathLine { x: 20; y: 30 }
PathLine { x: 30; y: 14 }
// Repeater {
// model: myPositions
// PathLine { x: model.x; y: model.y }
// }
}
}
UPDATE 1
import QtQuick.Shapes 1.15
import QtQuick 2.15
Shape {
ListModel {
id: myPositions
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Timer
{
interval: 100
running: true
repeat: true
property real myX: 0
onTriggered: {
myPositions.append({"x":myX, "y":getRandomInt(0,30)})
myX = myX + 10
}
}
function createPathLineElements(positionsModel, shapePath)
{
var pathElements = []
for (var i = 0; i < positionsModel.count; i++)
{
var pos = myPositions.get(i)
var pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}',
shapePath);
pathLine.x = pos.x
pathLine.y = pos.y
pathElements.push(pathLine)
}
return pathElements
}
ShapePath {
id: myPath
strokeColor: "black"
strokeWidth: 1
fillColor: "transparent"
startX: 0
startY: 0
pathElements: createPathLineElements(myPositions, myPath)
}
}
Use an Instantiator:
Shape {
ListModel {
id: myPositions
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Timer {
interval: 100
running: true
repeat: true
property real myX: 0
onTriggered: {
myPositions.append({"x":myX, "y":getRandomInt(0,30)})
myX = myX + 10
}
}
ShapePath {
id: myPath
fillColor: "transparent"
strokeColor: "red"
capStyle: ShapePath.RoundCap
joinStyle: ShapePath.RoundJoin
strokeWidth: 3
strokeStyle: ShapePath.SolidLine
}
Instantiator {
model: myPositions
onObjectAdded: myPath.pathElements.push(object)
PathLine {
x: model.x
y: model.y
}
}
}
You can't use repeater in that element.
The most performant way is to use QQuickItem in order to create a custom Item which draws incremental path.
Yet another simpler ways are:
1- Use PathSvg element and set its path runtime like below:
ShapePath {
fillColor: "transparent"
strokeColor: "red"
capStyle: ShapePath.RoundCap
joinStyle: ShapePath.RoundJoin
strokeWidth: 3
strokeStyle: ShapePath.SolidLine
PathSvg { id: ps; path: parent.p } //<== fill path property using js
property string p: ""
Component.onCompleted: {
for ( var i = 0; i < myModel.count; i++) {
p += "L %1 %2".arg(myModel.get(i).x).arg(myModel.get(i).y);
}
ps.path = p;
}
}
2- If you know steps, so you can pre-declare all PathLines and then set their values runtime. Just like a heart rate line on a health care monitor.

if the program is maximized and I minimize it and then click back to the program it is in windowed mode?

My program is starting by default in windowed mode.
My problem is if I start it and then press on maximize, then on minimize and then click on it in the taskbar, it is in windowed mode and not maximized.
To be honest I made that whole new window because I like programs that have a nice clear design. I don't know if you can change the top of a normal Window like the icon of the close button or the color of it.
main.qml:
/***********************************************************************************************************/
/*********************************************** S T A R T *************************************************/
/***********************************************************************************************************/
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls.Universal 2.0
import QtQuick.Controls.Imagine 2.3
import QtQuick.Controls.Material 2.0
import QtQuick.Dialogs.qml 1.0
import QtQuick.Extras 1.4
import QtQuick.Templates 2.5
import QtQuick.LocalStorage 2.0
ApplicationWindow {
id: mainWindow
visible: true
width: 900
height: 600
title: qsTr("Test")
color: "#2F3136"
flags: Qt.Window | Qt.FramelessWindowHint
property int _max: 0
property int _min: 0
property int _resizeRightVar: 0
property int _resizeLeftVar: 0
property int _resizeTopVar: 0
property int _resizeBottomVar: 0
property bool _resizeRight: true
property bool _resizeLeft: true
property bool _resizeTop: true
property bool _resizeBottom: true
property int _rRCursor: Qt.SizeHorCursor
property int _rLCursor: Qt.SizeHorCursor
property int _rTCursor: Qt.SizeVerCursor
property int _rBCursor: Qt.SizeVerCursor
property bool _moveWindow: true
property int previousX
property int previousY
///////////////////////////////////////////////////////////
/// TOP RECTANGLE WITH TITLE, MINIMIZE, MAXIMIZE, CLOSE ///
///////////////////////////////////////////////////////////
Rectangle {
id: rectangle
width: parent.width
height: 23
color: "#202225"
anchors.top: parent.top
//////////////////////////////////
/// TITLE IN THE TOP RECTANGLE ///
//////////////////////////////////
Text {
leftPadding: 6
topPadding: 1
opacity: 0.75
text: mainWindow.title
font.pixelSize: 14
font.family: "Dodge"
color: "white"
}
///////////////////////////////////////
/// MOUSE AREA IN THE TOP RECTANGLE ///
///////////////////////////////////////
MouseArea {
anchors.fill: parent
enabled: mainWindow._moveWindow
onPressed: {
previousX = mouseX
previousY = mouseY
}
onMouseXChanged: {
var dx = mouseX - previousX
mainWindow.setX(mainWindow.x + dx)
}
onMouseYChanged: {
var dy = mouseY - previousY
mainWindow.setY(mainWindow.y + dy)
}
onDoubleClicked: {
//mainWindow.visibility = "Maximized"
mainWindow._max ++
if(mainWindow._max == 1){
mainWindow.visibility = "Maximized"
//mainWindow.showMaximized()
mainWindow._moveWindow = false
mainWindow._rRCursor = Qt.ArrowCursor
mainWindow._rLCursor = Qt.ArrowCursor
mainWindow._rTCursor = Qt.ArrowCursor
mainWindow._rBCursor = Qt.ArrowCursor
mainWindow._resizeRight = false
mainWindow._resizeLeft = false
mainWindow._resizeTop = false
mainWindow._resizeBottom = false
} else if(mainWindow._max == 2){
mainWindow.visibility = "Windowed"
//mainWindow.showNormal()
mainWindow._max = 0
mainWindow._moveWindow = true
mainWindow._rRCursor = Qt.SizeHorCursor
mainWindow._rLCursor = Qt.SizeHorCursor
mainWindow._rTCursor = Qt.SizeVerCursor
mainWindow._rBCursor = Qt.SizeVerCursor
mainWindow._resizeRight = true
mainWindow._resizeLeft = true
mainWindow._resizeTop = true
mainWindow._resizeBottom = true
}
}
}
/////////////////////////////////////////
/// CLOSE BUTTON IN THE TOP RECTANGLE ///
/////////////////////////////////////////
Rectangle {
id: close_window
width: 27
height: 22.5
anchors.top: parent.top
anchors.topMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
color: "#202225"
Image {
id: closeImage
source: "close_window.png"
anchors.fill: parent
opacity: 0.6
fillMode: Image.PreserveAspectFit
}
MouseArea {
id: close_windowMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
mainWindow.close()
}
onEntered: {
cursorShape: Qt.PointingHandCursor
close_window.color = "#F04747"
closeImage.opacity = 1
}
onExited: {
cursorShape: Qt.ArrowCursor
close_window.color = "#202225"
closeImage.opacity = 0.6
}
}
}
////////////////////////////////////////////
/// MAXIMIZE BUTTON IN THE TOP RECTANGLE ///
////////////////////////////////////////////
Rectangle {
id: maximize_window
width: 27
height: 22.5
anchors.top: parent.top
anchors.topMargin: 0
anchors.right: parent.right
anchors.rightMargin: 29
color: "#202225"
Image {
id: maximizeImage
source: "maximize_window.png"
anchors.fill: parent
opacity: 0.6
fillMode: Image.PreserveAspectFit
}
MouseArea {
id: maximize_windowMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
mainWindow._max ++
if(mainWindow._max == 1){
mainWindow.visibility = "Maximized"
//mainWindow.showMaximized()
mainWindow._moveWindow = false
mainWindow._rRCursor = Qt.ArrowCursor
mainWindow._rLCursor = Qt.ArrowCursor
mainWindow._rTCursor = Qt.ArrowCursor
mainWindow._rBCursor = Qt.ArrowCursor
mainWindow._resizeRight = false
mainWindow._resizeLeft = false
mainWindow._resizeTop = false
mainWindow._resizeBottom = false
} else if(mainWindow._max == 2){
mainWindow.visibility = "Windowed"
//mainWindow.showNormal()
mainWindow._max = 0
mainWindow._moveWindow = true
mainWindow._rRCursor = Qt.SizeHorCursor
mainWindow._rLCursor = Qt.SizeHorCursor
mainWindow._rTCursor = Qt.SizeVerCursor
mainWindow._rBCursor = Qt.SizeVerCursor
mainWindow._resizeRight = true
mainWindow._resizeLeft = true
mainWindow._resizeTop = true
mainWindow._resizeBottom = true
}
}
onEntered: {
maximize_window.color = "#2B2D30"
maximizeImage.opacity = 1
}
onExited: {
maximize_window.color = "#202225"
maximizeImage.opacity = 0.6
}
}
}
////////////////////////////////////////////
/// MINIMIZE BUTTON IN THE TOP RECTANGLE ///
////////////////////////////////////////////
Rectangle {
id: minimize_window
width: 27
height: 22.5
anchors.top: parent.top
anchors.topMargin: 0
anchors.right: parent.right
anchors.rightMargin: 57
color: "#202225"
Image {
id: minimizeImage
source: "minimize_window.png"
anchors.fill: parent
opacity: 0.6
fillMode: Image.PreserveAspectFit
}
MouseArea {
id: minimize_windowMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
mainWindow._min ++
if(mainWindow._min >= 1){
mainWindow._min = 0
//mainWindow.showMinimized()
mainWindow.visibility = "Minimized"
//if(mainWindow._max == 1){
// mainWindow.showMaximized()
// mainWindow.visibility = "Maximized"
//}
}
}
onEntered: {
minimize_window.color = "#2B2D30"
minimizeImage.opacity = 1
}
onExited: {
minimize_window.color = "#202225"
minimizeImage.opacity = 0.6
}
}
}
}
///////////////////////////
/// RIGHT RESIZE WINDOW ///
///////////////////////////
MouseArea {
id: rightResize
width: 5
enabled: mainWindow._resizeRight
cursorShape: mainWindow._rRCursor
anchors {
right: parent.right
top: parent.top
bottom: parent.bottom
}
onEntered: {
if(mainWindow._resizeRight == true){
mainWindow._rRCursor = Qt.SizeHorCursor
} else if(mainWindow._resizeRight == false){
mainWindow._rRCursor = Qt.ArrowCursor
}
}
onPressed: previousX = mouseX
onMouseXChanged: {
var dx = mouseX - previousX
mainWindow.setWidth(parent.width + dx)
}
}
//////////////////////////
/// LEFT RESIZE WINDOW ///
//////////////////////////
MouseArea {
id: leftResize
width: 5
enabled: mainWindow._resizeLeft
cursorShape: mainWindow._rLCursor
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
onEntered: {
if(mainWindow._resizeLeft == true){
mainWindow._rLCursor = Qt.SizeHorCursor
} else if(mainWindow._resizeLeft == false){
mainWindow._rLCursor = Qt.ArrowCursor
}
}
onPressed: previousX = mouseX
onMouseXChanged: {
var dx = mouseX - previousX
mainWindow.setX(mainWindow.x + dx)
mainWindow.setWidth(mainWindow.width - dx)
}
}
/////////////////////////
/// TOP RESIZE WINDOW ///
/////////////////////////
MouseArea {
id: topResize
height: 5
enabled: mainWindow._resizeTop
cursorShape: mainWindow._rTCursor
anchors {
top: parent.top
left: parent.left
right: parent.right
}
onEntered: {
if(mainWindow._resizeTop == true){
mainWindow._rTCursor = Qt.SizeVerCursor
} else if(mainWindow._resizeTop == false){
mainWindow._rTCursor = Qt.ArrowCursor
}
}
onPressed: previousY = mouseY
onMouseYChanged: {
var dy = mouseY - previousY
mainWindow.setY(mainWindow.y + dy)
mainWindow.setHeight(mainWindow.height - dy)
}
}
////////////////////////////
/// BOTTOM RESIZE WINDOW ///
////////////////////////////
MouseArea {
id: bottomResize
height: 5
enabled: mainWindow._resizeBottom
cursorShape: mainWindow._rBCursor
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
onEntered: {
if(mainWindow._resizeBottom == true){
mainWindow._rBCursor = Qt.SizeVerCursor
} else if(mainWindow._resizeBottom == false){
mainWindow._rBCursor = Qt.ArrowCursor
}
}
onPressed: previousY = mouseY
onMouseYChanged: {
var dy = mouseY - previousY
//mainWindow.setY(mainWindow.y + dy)
mainWindow.setHeight(mainWindow.height + dy)
}
}
////////////////////////////
/// TEXT INPUT IN MIDDLE ///
////////////////////////////
Rectangle{
id: textInputBG
}
}
/***********************************************************************************************************/
/************************************************** E N D **************************************************/
/***********************************************************************************************************/
Here's a hacky way to solve this:
Add property int saved_state to your ApplicationWindow
Then add the following code:
onVisibilityChanged: {
if(saved_state === 4 && visibility === 2) {
showMaximized()
saved_state = -1
}
}
Then isnide your MouseArea minimize_sindowMouseArea add the following line:
saved_state = mainWindow.visibility //NEW LINE
mainWindow.visibility = "Minimized" //Existing line
Explanation: Save the state of your window right before you minimize, then restore it to the save_state when restored.
I don't know of any cleaner way, but that should do it :)

QML: How to re-order repeater items with drag and drop? Somewhat working code inside

I'm trying to reorder Repeater items using drag & drop. I'm using a Repeater due to dynamically loaded data. Below is what I have so far using a simple sqlite database with sample data added. What I'm hoping for is to get the re-order set up so when the user releases the dragged object, the database is updated to reflect the new order. The "Change" button reorders the elements as I want, I just can't get it to work property with drag and drop.
The loadData() function simply creates the table and inserts sample data. The "Change" button won't be in the final code, I just wanted to use it to get the re-ordering code to work.
import QtQuick.Controls 2.2 as QC2
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.LocalStorage 2.0
Window {
id: root
width: 320
height: 480
property var db
property int rowHeight: 90
Component.onCompleted: {
db = LocalStorage.openDatabaseSync("test_db", "1.0", "Database", 100000)
loadData()
}
property var sql_data: []
function loadData() {
var sql, rs, len, i
db.transaction(function(tx) {
tx.executeSql("DROP TABLE IF EXISTS tbl")
tx.executeSql("CREATE TABLE IF NOT EXISTS tbl (
rowId INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL, listOrder INTEGER NOT NULL)")
len = 5
for (i = 0; i < len; i++)
tx.executeSql("INSERT INTO tbl (name, listOrder) VALUES ('Item " + i + "', " + i + ")")
rs = tx.executeSql("SELECT name, listOrder FROM tbl ORDER BY listOrder ASC")
})
len = rs.rows.length
sql_data = new Array(len)
for (i = 0; i < len; i++) {
sql_data[i] = {"name": "", "order": ""}
sql_data[i]["name"] = rs.rows.item(i).name
sql_data[i]["order"] = rs.rows.item(i).listOrder
}
repeater.model = sql_data
}
Flickable {
id: mainFlick
anchors.fill: parent
contentHeight: mainColumn.height
Column {
id: mainColumn
width: parent.width
QC2.Button {
text: "Change"
onClicked: {
var p1, p2
var d1 = new Date().getTime()
var movedEle = 3
var newPos = 1
var ele1 = repeater.itemAt(movedEle)
var ele2 = repeater.itemAt(newPos)
ele1.y = ele2.y
root.sql_data[movedEle]["order"] = root.sql_data[newPos]["order"]
if (newPos < movedEle) {
p1 = newPos
p2 = movedEle
} else {
p1 = movedEle
p2 = newPos
}
root.db.transaction(function(tx) {
var sql = "UPDATE tbl SET listOrder = " + root.sql_data[p1]["order"] + " "
sql += "WHERE listOrder = " + (root.sql_data[p2]["order"])
for (var i = p1; i < p2; i++) {
if (i !== movedEle) {
repeater.itemAt(i).y = repeater.itemAt(i).y + rowHeight
root.sql_data[i]["order"] += 1
sql = "UPDATE tbl SET listOrder = " + root.sql_data[i]["order"] + " "
sql += "WHERE listOrder = " + (root.sql_data[i]["order"] - 1)
tx.executeSql(sql)
}
}
})
sql_data = sql_data.sort(function(a,b) {
return a["order"] - b["order"]
})
repeater.model = sql_data
var d2 = new Date().getTime()
console.debug("Seconds: " + (d2 - d1) / 1000)
}
}
Repeater {
id: repeater
width: parent.width
model: []
delegate: Column {
id: repeaterItem
width: parent.width - 20
height: rowHeight
anchors.horizontalCenter: parent.horizontalCenter
property int pos: index
DropArea {
id: dragTarget
width: parent.width
height: 20
Rectangle {
id: dropRect
anchors.fill: parent
color: "green"
states: [
State {
when: dragTarget.containsDrag
PropertyChanges {
target: dropRect
color: "red"
}
}
]
}
}
Row {
id: contentRow
width: parent.width
height: parent.height
z: 1
Column {
id: itemColumn
width: parent.width - 70
Text {
text: "Name: " + modelData["name"]
}
Text {
text: "Order: " + modelData["order"]
}
Text {
text: "Repeater Index: " + index
}
} // itemColumn
MouseArea {
id: dragArea
width: 40
height: itemColumn.height
drag.axis: Drag.YAxis
drag.target: dragRect
onReleased: parent = ((dragRect.Drag.target !== null) ? dragRect.Drag.target : root)
Rectangle {
Component.onCompleted: console.debug(dragRect.Drag.target)
id: dragRect
width: 40
height: itemColumn.height
color: "grey"
Drag.active: dragArea.drag.active
Drag.source: dragArea
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
states : State {
when: dragArea.drag.active
ParentChange { target: dragRect; parent: root }
AnchorChanges {
target: dragRect
anchors.verticalCenter: undefined
anchors.horizontalCenter: undefined
}
}
}
}
} // contentRow
Behavior on y {
PropertyAnimation {
duration: 200
easing.type: Easing.Linear
}
}
} // repeaterItem
} // repeater
} // mainColumn
} // mainFlick
} // id
Much of the drag and drop code came from the Qt Examples site.
Here's what my problems are:
The MouseArea used for dragging the rectangles doesn't seem to change locations. Once a rectangle is actually moved, it stays in its new location but if I want to move it again, I have to click and drag where it was originally when the app loads.
If I switch the target of the Drag Area from the child rectangle to the entire row (repeaterItem), everything moves properly but will no longer interact with the Drop areas.
I think I can get the index of the new location after a row has been dragged simply by getting the y-value of the Drop Area. Would there be a better way to do this?
Since the "Change" button already re-orders the row elements, I only need help getting the rows to properly interact with the Drop Areas and then get the y-position of the Drop Area when the dragged item is released.
It may not be the most efficient out there but it's a good start for anybody looking to do something similar.
import QtQuick.Controls 2.2 as QC2
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.LocalStorage 2.0
Window {
id: root
width: 320
height: 580
property var db
property int rowHeight: 90
property int len
Component.onCompleted: {
db = LocalStorage.openDatabaseSync("test_db", "1.0", "Database", 100000)
loadData()
}
property var sql_data: []
function loadData() {
var sql, rs, i
db.transaction(function(tx) {
tx.executeSql("DROP TABLE IF EXISTS tbl")
tx.executeSql("CREATE TABLE IF NOT EXISTS tbl (
rowId INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL, listOrder INTEGER NOT NULL)")
len = 15
for (i = 0; i < len; i++)
tx.executeSql("INSERT INTO tbl (name, listOrder) VALUES ('Item " + i + "', " + i + ")")
rs = tx.executeSql("SELECT name, listOrder FROM tbl ORDER BY listOrder ASC")
})
len = rs.rows.length
sql_data = new Array(len)
for (i = 0; i < len; i++) {
sql_data[i] = {"name": "", "order": ""}
sql_data[i]["name"] = rs.rows.item(i).name
sql_data[i]["order"] = rs.rows.item(i).listOrder
}
repeater.model = sql_data
}
Flickable {
id: mainFlick
anchors.fill: parent
contentHeight: mainColumn.height
rebound: Transition {
NumberAnimation {
properties: "y"
duration: 500
easing.type: Easing.OutCirc
}
}
Column {
id: mainColumn
width: parent.width
function moveEle(start, end, f) {
if (f === false) {
var p1, p2, ele1, ele2
var c = false
var d1 = new Date().getTime()
ele1 = repeater.itemAt(start)
console.debug(f)
ele2 = repeater.itemAt(end)
root.sql_data[start]["order"] = root.sql_data[end]["order"]
if (end < start) {
p1 = end
p2 = start
} else {
p1 = start
p2 = end
c = true
}
root.db.transaction(function(tx) {
var sql = "UPDATE tbl SET listOrder = " + root.sql_data[p1]["order"] + " "
sql += "WHERE listOrder = " + (root.sql_data[p2]["order"])
for (var i = p1; i < p2; i++) {
if (c === false) {
if (i !== start) {
root.sql_data[i]["order"]++
sql = "UPDATE tbl SET listOrder = " + root.sql_data[i]["order"] + " "
sql += "WHERE listOrder = " + (root.sql_data[i]["order"] - 1)
tx.executeSql(sql)
}
} else {
root.sql_data[i]["order"]--
sql = "UPDATE tbl SET listOrder = " + root.sql_data[i]["order"] + " "
sql += "WHERE listOrder = " + (root.sql_data[i]["order"] - 1)
tx.executeSql(sql)
}
}
})
} else if (f === true) {
c = false
d1 = new Date().getTime()
ele1 = repeater.itemAt(start)
console.debug(f)
end--
ele2 = repeater.itemAt(end)
root.sql_data[start]["order"] = root.sql_data[end]["order"]
p1 = start
p2 = end
c = true
root.db.transaction(function(tx) {
var sql = "UPDATE tbl SET listOrder = " + root.sql_data[p1]["order"] + " "
sql += "WHERE listOrder = " + (root.sql_data[p2]["order"])
tx.executeSql(sql)
for (var i = p1; i <= p2; i++) {
if (i !== start) {
root.sql_data[i]["order"]--
sql = "UPDATE tbl SET listOrder = " + root.sql_data[i]["order"] + " "
sql += "WHERE listOrder = " + (root.sql_data[i]["order"] - 1)
tx.executeSql(sql)
}
}
})
}
sql_data = sql_data.sort(function(a,b) {
return a["order"] - b["order"]
})
repeater.model = sql_data
var d2 = new Date().getTime()
console.debug("Seconds: " + (d2 - d1) / 1000)
}
Repeater {
id: repeater
width: parent.width
model: []
delegate: Column {
id: repeaterItem
width: parent.width
height: rowHeight
anchors.horizontalCenter: parent.horizontalCenter
z: dragArea.drag.active ? 2 : 1
property int pos: index
DropArea {
id: dragTarget
width: parent.width
height: 15
property int ind: index
onEntered: {
drag.source.ind = index
drag.source.f = false
if (drag.source.ind !== drag.source.oldInd && drag.source.ind !== drag.source.oldInd + 1)
drag.source.caught = true
}
onExited: drag.source.caught = false
Rectangle {
id: dropRect
anchors.fill: parent
z: 0
states: [
State {
when: dragTarget.containsDrag
PropertyChanges {
target: dropRect
color: "grey"
}
PropertyChanges {
target: dropRectLine
visible: false
}
}
]
Rectangle {
id: dropRectLine
width: parent.width
height: 1
anchors.verticalCenter: parent.verticalCenter
color: "black"
}
}
}
Row {
id: contentRow
width: parent.width
height: parent.height
Drag.active: dragArea.drag.active
Drag.source: dragArea
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
Column {
id: itemColumn
width: parent.width - 70
Text {
text: "Name: " + modelData["name"]
}
Text {
text: "Order: " + modelData["order"]
}
Text {
text: "Repeater Index: " + index
}
} // itemColumn
MouseArea {
id: dragArea
width: 40 //repeater.width
height: itemColumn.height
drag.axis: Drag.YAxis
drag.target: contentRow
property point beginDrag
property point dropTarget
property bool caught: false
property int ind
property int oldInd: index
property bool f
onPressed: {
dragArea.beginDrag = Qt.point(contentRow.x, contentRow.y);
}
onReleased: {
if (dragArea.caught) {
dropRectFinal.color = "white"
dropRectLineFinal.visible = true
mainColumn.moveEle(index,dragArea.ind, dragArea.f)
} else {
backAnimY.from = contentRow.y;
backAnimY.to = beginDrag.y;
backAnim.start()
}
}
Rectangle {
id: dragRect
width: 40
height: itemColumn.height
color: "grey"
}
} // contentRow
} // dragArea
ParallelAnimation {
id: backAnim
SpringAnimation { id: backAnimY; target: contentRow; property: "y"; duration: 300; spring: 2; damping: 0.2 }
}
} // repeaterItem
} // repeater
DropArea {
id: dragTargetFinal
width: parent.width
height: 15
property int ind: root.len
onEntered: {
drag.source.ind = ind
drag.source.f = true
if (drag.source.ind !== drag.source.oldInd && drag.source.ind !== drag.source.oldInd + 1)
drag.source.caught = true
}
onExited: drag.source.caught = false
Rectangle {
id: dropRectFinal
anchors.fill: parent
states: [
State {
when: dragTargetFinal.containsDrag
PropertyChanges {
target: dropRectFinal
color: "grey"
}
PropertyChanges {
target: dropRectLineFinal
visible: false
}
}
]
Rectangle {
id: dropRectLineFinal
width: parent.width
height: 1
anchors.verticalCenter: parent.verticalCenter
color: "black"
}
}
}
} // mainColumn
QC2.ScrollBar.vertical: QC2.ScrollBar { active: scrollAnim.running ? true : false }
} // mainFlick
DropArea {
id: scrollUp
width: parent.width
height: 50
anchors.top: parent.top
visible: {
var visible = false
if (mainFlick.contentY > 0)
visible = true
visible
}
onEntered: {
scrollAnim.from = mainFlick.contentY
scrollAnim.to = 0
scrollAnim.start()
}
onExited: scrollAnim.stop()
}
DropArea {
id: scrollDown
width: parent.width
height: 50
anchors.bottom: parent.bottom
visible: {
var visible = false
if (mainFlick.contentY < mainColumn.height - Window.height)
visible = true
visible
}
onEntered: {
scrollAnim.from = mainFlick.contentY
scrollAnim.to = mainColumn.height - Window.height
scrollAnim.start()
}
onExited: scrollAnim.stop()
}
SmoothedAnimation {
id: scrollAnim
target: mainFlick
property: "contentY"
velocity: 400
loops: 1
maximumEasingTime: 10
}
} // root

How can I get pixel array from qml canvas?

I have a Canvas with the image, that I load via filedialog, how can I get the pixel array of this image?
I need convert it to grayscale by converting every pixel using formula and load it back to the Canvas.
Here the code:
import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtQuick.Layouts 1.2
import QtQuick.Dialogs 1.0
ApplicationWindow {
id: window
visible: true
width: 1000
height: 750
Material.theme: Material.Dark
Material.background: "#2C303A"
Material.accent: "#65B486"
Material.foreground: "#efefef"
GridLayout {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 9
columns: 4
rows: 3
rowSpacing: 10
columnSpacing: 10
Canvas {
id: canvas
height: window.height - 15
Layout.columnSpan: 4
Layout.fillWidth: true
property bool loaded: false
property var filepath: ''
onDrawChanged: requestPaint()
onFilepathChanged: {
loadImage(filepath)
}
onImageLoaded: {
loaded = true
requestPaint()
}
onPaint: {
if (loaded) {
var ctx = getContext("2d");
ctx.drawImage(filepath, 0, 0, width, height)
}
if (to_grayscale) {
var ctx = getContext("2d");
var ar = ctx.getImageData(0, 0, width, height).data
for(var i in ar){
print(i)
}
}
}
}
FileDialog {
id: fileDialog
title: "Please choose a file"
nameFilters: ["Image files (*.jpg *.png *.jpeg)"]
onAccepted: {
console.log("You chose: " + fileDialog.fileUrls)
canvas.filepath = fileDialog.fileUrls
canvas.requestPaint()
}
onRejected: {
console.log("Canceled")
}
}
Drawer {
id: drawer
visible: true
modal: false
width: 0.33 * window.width
height: window.height
GridLayout {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 9
columns: 2
rows: 3
rowSpacing: 10
columnSpacing: 10
Button {
text: 'Load image'
onClicked: fileDialog.visible = true
}
Button {
text: 'RGB to Grayscale'
onClicked: canvas.draw = true
}
}
}
}
}
I'm trying to get ImageData, but here's empty
I read that Canvas contain PixelArray, but I don't know how to get it.
Thank you.
To access the rgba values
var ar = ctx.getImageData(0, 0, width, height);
for( var x=0; x < ar.data.length; x=x+4 )
{
// To read RGBA values
var red = ar.data[x];
var green = ar.data[x + 1];
var blue = ar.data[x + 2];
var alpha = ar.data[x + 3];
console.log(red + ", " + green + ", " + blue + ", " + alpha );
// To convert to grey scale, modify rgba according to your formula
ar.data[x] = 0.2126 *ar.data[x] + 0.7152* ar.data[x+1] + 0.0722 *ar.data[x+2];
ar.data[x+1] = 0.2126 *ar.data[x] + 0.7152* ar.data[x+1] + 0.0722 *ar.data[x+2];
ar.data[x+2] = 0.2126 *ar.data[x] + 0.7152* ar.data[x+1] + 0.0722 *ar.data[x+2];
ar.data[x+3] = 255;
}
// update the canvas with new data
ctx.drawImage(ar.data, 0, 0);
You have to requestPaint() in onClicked slot of Button

How disable drag of points in the x axis on chartview

I have a qtchart with a lineseries with 5 points on the graph. I can drag these points on in both x and y axis inside min and max of axisX and axisY.
How can disable drag of points in the x axis? so it is possible to drag points vertically on the chart. Here is my code:
ChartView {
id: chart
property var selectedPoint: undefined
anchors.fill: parent
antialiasing: true
property real toleranceX: 0.05
property real toleranceY: 0.05
ValueAxis {
id: axisX
min: 0
max: 5
}
ValueAxis {
id: axisY
min: -10
max: 10
}
LineSeries {
id: series1
axisX: axisX
axisY: axisY
pointsVisible: true
}
MouseArea {
anchors.fill: parent
onPressed:
{
var cp = chart.mapToValue(Qt.point(mouse.x,mouse.y));
for(var i = 0;i < series1.count;i ++)
{
var p = series1.at(i);
if(Math.abs(cp.x - p.x) <= chart.toleranceX && Math.abs(cp.y - p.y) <= chart.toleranceY)
{
chart.selectedPoint = p;
break;
}
}
}
onPositionChanged: {
if(chart.selectedPoint != undefined) {
var p = Qt.point(mouse.x, mouse.y);
var cp = chart.mapToValue(p);
if(cp.x >= axisX.min && cp.x <= axisX.max && cp.y >= axisY.min && cp.y <= axisY.max) {
series1.replace(chart.selectedPoint.x, chart.selectedPoint.y, cp.x, cp.y);
chart.selectedPoint = cp;
}
}
}
onReleased: {
chart.selectedPoint = undefined;
}
}
}
// Add data to the series
Component.onCompleted: {
for (var i = 0; i <= 5; i++) {
series1.append(i, Math.random());
}
}
So far I could disable drag on x axis for one point in this case point on 3 by changing onPositionChanged to following code but there are two problems, first this is just one point, second, it does not disable the drag completely instead the point can be dragged on x axis between 2 to 4 but it cannot be dragged outside this range.
onPositionChanged: {
if(chart.selectedPoint != undefined) {
var p = Qt.point(mouse.x, mouse.y);
var cp = chart.mapToValue(p);
if(cp.x >= axisX.min && cp.x <= axisX.max && cp.y >= axisY.min && cp.y <= axisY.max) {
if (Math.round(cp.x) == 3){
series1.replace(chart.selectedPoint.x, chart.selectedPoint.y, cp.x, cp.y);
chart.selectedPoint = cp;
}
}
}
}

Resources