Window resize problem
-
I'm trying to swap 2 elements which is a map and a graph model where the map fills the whole application window and the graph model will be look like embedded in it..swapping function works perfectly.But,when minimised the map component only minimizing.the graph model still remains the size..upon resizing/maximising, the component which fills the window still exists in same minimised size?
How to make the components responsible with respect to the window resizing -
Hi,
Without a minimal example showing your issue, it's impossible to answer your question.
Qt version and OS used are also a good thing to provide.
-
Hi,
Without a minimal example showing your issue, it's impossible to answer your question.
Qt version and OS used are also a good thing to provide.
Rectangle { id:mapContainer width:parent.width height: parent.height MouseArea { id:click anchors.fill: parent x:parent.x y:parent.y acceptedButtons: Qt.LeftButton| Qt.RightButton onClicked: function(mouse) { mouse.accepted=true f((mapContainer.width<model.width)&&(mapContainer.height<model.height)) { swapped() console.log("small map and Big model in Bottom") } } } } Rectangle { id: model width:0.18*root.width height:.24*root.height border.color: "black" border.width: 3 visible: true color:"White" anchors.margins: 0.01*parent.width MouseArea { id:model_area anchors.fill: parent drag.target: parent onClicked: { if((model.width<mapContainer.width)&&(model.height<mapContainer.height)) { swapped() console.log("small model and Big Map in Bottom") } } } } function swapped() { if (mapContainer.z==0) { map_x = mapContainer.x map_y = mapContainer.y width2 = mapContainer.width height2= mapContainer.height mapContainer.x = model.x mapContainer.y = model.y mapContainer.z = 1 mapContainer.width = model.width mapContainer.height= model.height mapContainer.anchors.margins=0.01*root.width model.x = map_x model.y = map_y model.z=0 model.width = width2 model.height= height2 model.anchors.margins=0 cam.z=1 } else { map_x = model.x map_y = model.y width2 = model.width height2= model.height //clearAnchors(model) model.x = mapContainer.x model.y = mapContainer.y model.width = mapContainer.width model.anchors.margins=10 mapContainer.x = map_x mapContainer.y = map_y mapContainer.z=0 mapContainer.width = width2 mapContainer.height= height2 mapContainer.anchors.margins=0 } } -
That's not a minimal sample.
Please reduce it to the bare minimum (and a minimum that can be used directly to test).
-
That's not a minimal sample.
Please reduce it to the bare minimum (and a minimum that can be used directly to test).
Rectangle { id:mapContainer width:parent.width height: parent.height z:0 MouseArea { id:click anchors.fill: parent acceptedButtons: Qt.LeftButton| Qt.RightButton onClicked: function(mouse) { mouse.accepted=true if((mapContainer.width<model.width)&& (mapContainer.height<model.height)) { swapped(); } } } } Rectangle { id: model width:0.18*root.width height:.24*root.height visible: true z:1 anchors.margins: 0.01*parent.width MouseArea { id:model_area anchors.fill: parent onClicked: { if((model.width<mapContainer.width)&& (model.height<mapContainer.height)) { swapped() } } } } function swapped() { if (mapContainer.z==0) { map_x = mapContainer.x map_y = mapContainer.y width2 = mapContainer.width height2= mapContainer.height mapContainer.x = model.x mapContainer.y = model.y mapContainer.z = 1 mapContainer.width = model.width mapContainer.height= model.height mapContainer.anchors.margins=0.01*root.width model.x = map_x model.y = map_y model.z=0 model.width = width2 model.height= height2 model.anchors.margins=0 cam.z=1 } else { map_x = model.x map_y = model.y width2 = model.width height2= model.height model.x = mapContainer.x model.y = mapContainer.y model.width = mapContainer.width model.anchors.margins=10 mapContainer.x = map_x mapContainer.y = map_y mapContainer.z=0 mapContainer.width = width2 mapContainer.height= height2 mapContainer.anchors.margins=0 } } -
Rectangle { id:mapContainer width:parent.width height: parent.height z:0 MouseArea { id:click anchors.fill: parent acceptedButtons: Qt.LeftButton| Qt.RightButton onClicked: function(mouse) { mouse.accepted=true if((mapContainer.width<model.width)&& (mapContainer.height<model.height)) { swapped(); } } } } Rectangle { id: model width:0.18*root.width height:.24*root.height visible: true z:1 anchors.margins: 0.01*parent.width MouseArea { id:model_area anchors.fill: parent onClicked: { if((model.width<mapContainer.width)&& (model.height<mapContainer.height)) { swapped() } } } } function swapped() { if (mapContainer.z==0) { map_x = mapContainer.x map_y = mapContainer.y width2 = mapContainer.width height2= mapContainer.height mapContainer.x = model.x mapContainer.y = model.y mapContainer.z = 1 mapContainer.width = model.width mapContainer.height= model.height mapContainer.anchors.margins=0.01*root.width model.x = map_x model.y = map_y model.z=0 model.width = width2 model.height= height2 model.anchors.margins=0 cam.z=1 } else { map_x = model.x map_y = model.y width2 = model.width height2= model.height model.x = mapContainer.x model.y = mapContainer.y model.width = mapContainer.width model.anchors.margins=10 mapContainer.x = map_x mapContainer.y = map_y mapContainer.z=0 mapContainer.width = width2 mapContainer.height= height2 mapContainer.anchors.margins=0 } } -
@Vijaykarthikeyan
So in response to @SGaist's request for a "bare minimum" you have copied and pasted what you had already posted, right?@JonB No..wrong..reduced the code to the atmost minimum..beyond that,you can't get the code structure correct..defining 2 rectangles..defining swapping function..called it in both rectangles..Besides that,how could one reduce as much as it is?
-
@JonB No..wrong..reduced the code to the atmost minimum..beyond that,you can't get the code structure correct..defining 2 rectangles..defining swapping function..called it in both rectangles..Besides that,how could one reduce as much as it is?
@Vijaykarthikeyan
So I was wrong even though I compared the two, they were within one line of each other and the only difference I could see was the removal one one already commented-out line? And all those lines are required, without reducing it the problem does not happen?Anyway, good luck, perhaps someone will accept this.
-
@Vijaykarthikeyan
So I was wrong even though I compared the two, they were within one line of each other and the only difference I could see was the removal one one already commented-out line? And all those lines are required, without reducing it the problem does not happen?Anyway, good luck, perhaps someone will accept this.
@JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.
-
@JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.
@Vijaykarthikeyan
Yes, you say the same each time. Everybody here is bad. Not much point asking if you never get any useful help and sort it out yourself. -
@JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.
@Vijaykarthikeyan it's not a very active forum. There are only a couple of real experts who hang out here and I imagine they are busy. Unless an answer is obvious or you make it really easy to reproduce a problem - i.e. by providing a small example which can be run easily - it is unlikely that you will get a lot of help.
I have asked a few questions here that have gone unanswered. That's the way it is. Nobody owes me anything.
-
@JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.
@Vijaykarthikeyan
Intended as a constructive suggestion: if you are not happy with the answers here, maybe post a question to https://stackoverflow.com/ ? If you get an answer there they tend to be more "formal", perhaps will give you a solution in the form you would like. -
Here's a screenshot of what I have when running your code :
Not really self explanatory. Why is it 100 lines long to swap 2 items?
It also refers to variable not declared,root,map_x,map_y.Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.
Anyway, here's what I would do if I understood correctly what you want:
import QtQuick 2.15 import QtQuick.Window 2.15 Window { id: root width: 640 height: 480 visible: true property bool graphInCorner: true Rectangle { id: fullContainer width: parent.width height: parent.height border.width: 1 } Rectangle { id: cornerContainer width: 0.18 * parent.width height: 0.24 * parent.height border.width: 1 } Text { parent: root.graphInCorner ? fullContainer : cornerContainer anchors.fill: parent text: "MAP" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter MouseArea { anchors.fill: parent onClicked: root.graphInCorner = !root.graphInCorner } } Text { parent: root.graphInCorner ? cornerContainer : fullContainer anchors.fill: parent text: "GRAPH" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter MouseArea { anchors.fill: parent onClicked: root.graphInCorner = !root.graphInCorner } } }Have two container parents and swap the parent of the graph and map items to one of those.
-
Here's a screenshot of what I have when running your code :
Not really self explanatory. Why is it 100 lines long to swap 2 items?
It also refers to variable not declared,root,map_x,map_y.Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.
Anyway, here's what I would do if I understood correctly what you want:
import QtQuick 2.15 import QtQuick.Window 2.15 Window { id: root width: 640 height: 480 visible: true property bool graphInCorner: true Rectangle { id: fullContainer width: parent.width height: parent.height border.width: 1 } Rectangle { id: cornerContainer width: 0.18 * parent.width height: 0.24 * parent.height border.width: 1 } Text { parent: root.graphInCorner ? fullContainer : cornerContainer anchors.fill: parent text: "MAP" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter MouseArea { anchors.fill: parent onClicked: root.graphInCorner = !root.graphInCorner } } Text { parent: root.graphInCorner ? cornerContainer : fullContainer anchors.fill: parent text: "GRAPH" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter MouseArea { anchors.fill: parent onClicked: root.graphInCorner = !root.graphInCorner } } }Have two container parents and swap the parent of the graph and map items to one of those.
@GrecKo understood..can i have some question
-
@Vijaykarthikeyan
Yes, you say the same each time. Everybody here is bad. Not much point asking if you never get any useful help and sort it out yourself.@JonB Whenever I asking any doubt,at the end of the day,the intend of the topic diverted as off your desire. Then.what's the purpose of asking question? When I came here for one small doubt, you guys totally diverting it to somewhere which is not important,indeed not relevant to the topic, finally leads to find the solution on my own
-
@Vijaykarthikeyan it's not a very active forum. There are only a couple of real experts who hang out here and I imagine they are busy. Unless an answer is obvious or you make it really easy to reproduce a problem - i.e. by providing a small example which can be run easily - it is unlikely that you will get a lot of help.
I have asked a few questions here that have gone unanswered. That's the way it is. Nobody owes me anything.
@Bob64 I ready to give anything the speakers need to see..Perhaps,they are totally diverting the intent of the question. If I gave a code snippet,they didn't tell me to repost it or correct it but always insulting the needy like go and study the documrentation, go and study the documentation.. I go through the documentation many times before coming here, If the solution was there,why should I coming here to clear my doubt?
-
Here's a screenshot of what I have when running your code :
Not really self explanatory. Why is it 100 lines long to swap 2 items?
It also refers to variable not declared,root,map_x,map_y.Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.
Anyway, here's what I would do if I understood correctly what you want:
import QtQuick 2.15 import QtQuick.Window 2.15 Window { id: root width: 640 height: 480 visible: true property bool graphInCorner: true Rectangle { id: fullContainer width: parent.width height: parent.height border.width: 1 } Rectangle { id: cornerContainer width: 0.18 * parent.width height: 0.24 * parent.height border.width: 1 } Text { parent: root.graphInCorner ? fullContainer : cornerContainer anchors.fill: parent text: "MAP" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter MouseArea { anchors.fill: parent onClicked: root.graphInCorner = !root.graphInCorner } } Text { parent: root.graphInCorner ? cornerContainer : fullContainer anchors.fill: parent text: "GRAPH" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter MouseArea { anchors.fill: parent onClicked: root.graphInCorner = !root.graphInCorner } } }Have two container parents and swap the parent of the graph and map items to one of those.
@GrecKo That is because of the relative positioning.These 2 components should swap with respect to the 3rd element in 3 different positions. each of these 3 components have 2 positions so,6 different fucntions are needed according to the positions
-
Here's a screenshot of what I have when running your code :
Not really self explanatory. Why is it 100 lines long to swap 2 items?
It also refers to variable not declared,root,map_x,map_y.Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.
Anyway, here's what I would do if I understood correctly what you want:
import QtQuick 2.15 import QtQuick.Window 2.15 Window { id: root width: 640 height: 480 visible: true property bool graphInCorner: true Rectangle { id: fullContainer width: parent.width height: parent.height border.width: 1 } Rectangle { id: cornerContainer width: 0.18 * parent.width height: 0.24 * parent.height border.width: 1 } Text { parent: root.graphInCorner ? fullContainer : cornerContainer anchors.fill: parent text: "MAP" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter MouseArea { anchors.fill: parent onClicked: root.graphInCorner = !root.graphInCorner } } Text { parent: root.graphInCorner ? cornerContainer : fullContainer anchors.fill: parent text: "GRAPH" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter MouseArea { anchors.fill: parent onClicked: root.graphInCorner = !root.graphInCorner } } }Have two container parents and swap the parent of the graph and map items to one of those.
As I explained the reason why I used a lot of lines for swapping ,this is the picture of what i want to achieve. Actually, these are the 3 components..each have to swap from their respective position to fill the window. But,their sizes and positions should be dynamically attached with the window for any resolution. So,according to the logics, the swapping must be bigger.
And in my updtaed swapping,there are only 10-15 lines of code for swappuing and it works..no issue with that
-
As I explained the reason why I used a lot of lines for swapping ,this is the picture of what i want to achieve. Actually, these are the 3 components..each have to swap from their respective position to fill the window. But,their sizes and positions should be dynamically attached with the window for any resolution. So,according to the logics, the swapping must be bigger.
And in my updtaed swapping,there are only 10-15 lines of code for swappuing and it works..no issue with that
@Vijaykarthikeyan
Instead of using x and y coordinates, I would place 3 of the same objects into the view and align them according to what you want in the end. Here you should apply all resizing and alignment constrains, so that they represent the final "wrapper" of your different views, which resize automatically with window changes.Then add your components as children to those 3 objects. As each of your components now has the same type of parent object, you can simply swap the parents.
Here a very basic example of what I understood from your question.
Note: I would use anchors and layouts, so all resizing is managed automatically.ApplicationWindow { width: 860 height: 640 visible: true // switch parents function switchParents(item1, item2) { let temp = item1.parent item1.parent = item2.parent item2.parent = temp } // full screen view // note: main view should use the same parent object as mini views // to swap parents without issues // in this example "ColumnLayout" ColumnLayout { id: viewManager anchors.fill: parent Rectangle { id: map Layout.fillWidth: true Layout.fillHeight: true color: "red" Text { anchors.centerIn: parent text: "Map" } MouseArea { anchors.fill: parent onClicked: { switchParents(parent, viewManager.children[0]) } } } } // mini views Item { id: miniViews anchors.right: parent.right anchors.bottom: parent.bottom // adjust to your liking height: parent.height * 2 / 3 width: height < 250 ? parent.width / 2 : parent.width / 4 // use gridlayout to easily switch between vertical and horizontal // alignment of mini views GridLayout { anchors.fill: parent anchors.margins: 20 // make the miniviews be shown next to each other // if the height is smaller than a breakpoint columns: height >= 250 ? 1 : 2 columnSpacing: 20 rowSpacing: 20 ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true Rectangle { id: cam color: "green" Layout.fillWidth: true Layout.fillHeight: true Text { anchors.centerIn: parent text: "Cam" } MouseArea { anchors.fill: parent onClicked: { switchParents(parent, viewManager.children[0]) } } } } ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true Rectangle { id: graph color: "yellow" Layout.fillWidth: true Layout.fillHeight: true Text { anchors.centerIn: parent text: "Graph" } MouseArea { anchors.fill: parent onClicked: { switchParents(parent, viewManager.children[0]) } } } } } } } -
@Vijaykarthikeyan
Instead of using x and y coordinates, I would place 3 of the same objects into the view and align them according to what you want in the end. Here you should apply all resizing and alignment constrains, so that they represent the final "wrapper" of your different views, which resize automatically with window changes.Then add your components as children to those 3 objects. As each of your components now has the same type of parent object, you can simply swap the parents.
Here a very basic example of what I understood from your question.
Note: I would use anchors and layouts, so all resizing is managed automatically.ApplicationWindow { width: 860 height: 640 visible: true // switch parents function switchParents(item1, item2) { let temp = item1.parent item1.parent = item2.parent item2.parent = temp } // full screen view // note: main view should use the same parent object as mini views // to swap parents without issues // in this example "ColumnLayout" ColumnLayout { id: viewManager anchors.fill: parent Rectangle { id: map Layout.fillWidth: true Layout.fillHeight: true color: "red" Text { anchors.centerIn: parent text: "Map" } MouseArea { anchors.fill: parent onClicked: { switchParents(parent, viewManager.children[0]) } } } } // mini views Item { id: miniViews anchors.right: parent.right anchors.bottom: parent.bottom // adjust to your liking height: parent.height * 2 / 3 width: height < 250 ? parent.width / 2 : parent.width / 4 // use gridlayout to easily switch between vertical and horizontal // alignment of mini views GridLayout { anchors.fill: parent anchors.margins: 20 // make the miniviews be shown next to each other // if the height is smaller than a breakpoint columns: height >= 250 ? 1 : 2 columnSpacing: 20 rowSpacing: 20 ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true Rectangle { id: cam color: "green" Layout.fillWidth: true Layout.fillHeight: true Text { anchors.centerIn: parent text: "Cam" } MouseArea { anchors.fill: parent onClicked: { switchParents(parent, viewManager.children[0]) } } } } ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true Rectangle { id: graph color: "yellow" Layout.fillWidth: true Layout.fillHeight: true Text { anchors.centerIn: parent text: "Graph" } MouseArea { anchors.fill: parent onClicked: { switchParents(parent, viewManager.children[0]) } } } } } } }@lemons Thank you for the logic
-
V Vijaykarthikeyan has marked this topic as solved on
