In Qt, I have a thousand nodes which each of them has some millions points and I want to add these huge number of points on the map in QML. To this, I used MapQuickItem with Repeater as follows:
Repeater
{
id: nodes
Repeater
{
id: nodesPoints
MapQuickItem
{
id: mc
opacity : 0.7
smooth: true
property string color: ""
property int nodeId: -2
property int f0: -2
property int f1: -2
property int f2: -2
property int f3: -2
property int f4: -2
sourceItem: Rectangle {
id:mapMarker
color: mc.color
width: 10
height: 10
radius: 5
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: {
popup.visible=true
}
onExited: {
popup.visible=false
}
}
}
Popup {
id: popup
width: 130
height: 160
modal: true
opacity: 0.7
background: Rectangle {
radius: 5
color: "White"
border.color: "Red"
}
visible: false
Text {
id: tx
text: "Some information"
}
}
}
}
}
and by pressing an update button in the map, the following code will be executed:
nodes.model=loc.nodesIdsQML.length //This is 1000
for(var i=0;i<loc.nodesIdsQML.length;i++)
{
var thisNodeCoordinatesLength = loc.nodesMapInfoQML[loc.nodesIdsQML[i]][5].length //This is about some millions
nodes.itemAt(i).model=thisNodeCoordinatesLength
for (var j=0;j<thisNodeCoordinatesLength;j++)
{
nodes.itemAt(i).itemAt(j).nodeId=loc.nodesIdsQML[i]
nodes.itemAt(i).itemAt(j).coordinate=loc.nodesMapInfoQML[loc.nodesIdsQML[i]][5][j]
nodes.itemAt(i).itemAt(j).f0=loc.nodesMapInfoQML[loc.nodesIdsQML[i]][0][j]
nodes.itemAt(i).itemAt(j).f1=loc.nodesMapInfoQML[loc.nodesIdsQML[i]][1][j]
nodes.itemAt(i).itemAt(j).f2=loc.nodesMapInfoQML[loc.nodesIdsQML[i]][2][j]
nodes.itemAt(i).itemAt(j).f3=loc.nodesMapInfoQML[loc.nodesIdsQML[i]][3][j]
nodes.itemAt(i).itemAt(j).f4=loc.nodesMapInfoQML[loc.nodesIdsQML[i]][4][j]
myMap.addMapItem(nodes.itemAt(i).itemAt(j))
}
}
nodesIdsQML contains the nodes id and nodesMapInfoQML contains the nodes points with some information. myMap is my Map item id. After pressing update button, the Repater item is constructed and each elements of that is added to the map. Now I have a huge number of points on the map which by entering the mouse on a point, a little popup is opened at the top of the point and is including some information.
But pressing update button, takes a long time. Is my procedure, is the most efficient way?
Related
I have noticed that the listview will highlight the first item automatically/by defualt how can I disable it and only highlight the item item I have selected on mouse click?
Component {
id: highlight
Rectangle {
width: 180; height: 40
color: "lightsteelblue"; radius: 5
y: list.currentItem.y
Behavior on y {
SpringAnimation {
spring: 3
damping: 0.2
}
}
}
}
ListView {
id: list
width: 180; height: 200
model: ContactModel {}
delegate: Text {
text: name
MouseArea{
anchors.fill: parent
onClicked: {
list.currentIndex = index
}
}
}
highlight: highlight
highlightFollowsCurrentItem: false
focus: true
}
I have aleardy done the mouse part but i'm stuck in disabling the highlight at item appending.
By default, currentIndex is set to 0, which is why the first item always starts highlighted. You can turn that off by simply initializing currentIndex to -1.
ListView {
currentIndex: -1
...
}
Okay after several hours of searching I have used the onCountChanged signal
to indicate the items addition into the list and then rest the ListView currentIndex to -1 so the code will be like this
onCountChanged: {
list.currentIndex = -1
}
I have a row for a listview delegate with buttons on it. On click of a button, i need a dialog to open just below that button. I tried mapToItem property and partially succeeded but this listview is scrollable and on scrolling the dialog stays in its initial position. Unsure of how to get it working. Also, new to posting questions. Kindly ignore if I am being vague and help me out.
The dialog i want to open is placed outside of this delegate. I have provided a short outline of my code.
Listview{
delegate: Row{
Button1{
}
Button2{
id: button2Id
onCheckedChanged{
var coords = button2Id.mapToItem(null,0,0)
dialogId.x = coords.x
dialogId.y= coords.y
dialogId.visible = true
}
}
}
}
//dialog rect outside of my listview
Rectangle{
id: dialogId
}
You could add the dialog to the highlight item of the list. I have modified your example a little so that I could test it. I encapsulated your Rectangle in an Item because ListView controls the size and position of the root object of the highlight. The Rectangle then just has to be anchored to the bottom of that Item.
ListView {
id: lv
width: 200
height: parent.height
model: 50
spacing: 1
currentIndex: -1
delegate: Row {
spacing: 1
height: 40
Button {
text: index
}
Button {
id: button2Id
text: ">"
onClicked: {
lv.currentIndex = index;
}
}
}
highlight: Item { // ListView controls the size/pos of this Item
z: 1
Rectangle {
id: dialogId
anchors.top: parent.bottom // Anchor to bottom of parent
width: 200
height: 100
color: "red"
}
}
}
UPDATE:
Here is a way to keep the dialog directly under the button without calculating margins. I put it in a Loader so that each item in the list doesn't always carry the whole dialog around with it. It might make a performance difference.
The ugly part of this solution is the z-ordering. Each item in the list is drawn after the one that comes sequentially before it. (I'm not actually sure if that's even guaranteed.) That means the dialog gets drawn underneath any item that comes after it in the list. I was able to get around that by changing the z value of each item in the list to be less than the item before it.
ListView {
id: lv
width: 200
height: parent.height
model: 50
spacing: 1
currentIndex: -1
delegate: Row {
z: lv.count - index // <<- z-value fix
spacing: 1
height: 40
Button {
text: index
}
Button {
id: button2Id
text: ">"
onClicked: {
lv.currentIndex = index;
}
Loader {
anchors.top: parent.bottom
asynchronous: true
sourceComponent: (index === lv.currentIndex) ? dialogComp : null
}
}
}
}
Component {
id: dialogComp
Rectangle {
id: dialogId
width: 200
height: 100
color: "red"
}
}
I'm trying to get a displayed number to change when a button is clicked. How would I do that?
Here is my QML code
Button {
id:button
x:232
y:250
width:18
height:18
// Makes button have a transparent background
palette {
button: "transparent"
}
Image {
anchors.fill: Button
source:"Images/image.png"
}
// Moves rectangle down, on button click
onClicked: rectangle.y-=10
}
Text{
text: qsTr("12.0")
}
I want the number 12 to increase each time the button is clicked
You have to declare a property of type int, visible for both Text and Button items.
So an example code can be:
import QtQuick 2.0
import QtQuick.Controls 2.0
Window {
id: rootWindow
visible: true
width: 300; height: 300
property int displayValue: 12
Text {
id: displayTextId
anchors.left: addOneButtonId.right
text: displayValue.toString() //more clear if you explicit the parent rootWindow.displayValue.toString()
}
Button {
id: addOneButtonId
text: "Add 1"
onClicked: {
rootWindow.displayValue += 1
}
}
}
Alternatively, the property can be declared local to the Text element (so defined inside it), but pay attention, because a property is visible only for its child.
By the way, your code is full of error. If you want to create a button, that contains an image and a text, the best way is that you create a Rectangle object and define a Mouse area inside it.
The code structure should be like:
Rectangle {
id: root
property int number: 12
width: 100; height: 50
color: "transparent"
border.width: 1
border.color: "black"
Image { id: imageId }
Text { id: textId; text: root.number.toString() }
MouseArea {
anchors.fill: parent
onClicked: {
root.y += 10 // shift the y position down
root.number += 1
}
}
}
I am using a ComboBox in QML and when populated with a lot of data it exceeds my main windows bottom boarder. From googling I have learned that the drop-down list of a ComboBox is put on top of the current application window and therefore it does not respect its boundaries.
Ideally I would want the ComboBox to never exceed the main applications boundary, but I can not find any property in the documentation.
A different approach would be to limit the number of visible items of the drop-down list so that it do not exceed the window limits for a given window geometry. I was not able to find this in the documentation either and I have run out of ideas.
Take a look to the ComboBox source code, the popup is of a Menu type and it doesn't have any property to limit its size. Moreover, the z property of the Menu is infinite, i.e. it's always on top.
If you Find no way but to use the ComboBox of Qt you can create two models one for visual purpose, I will call it visual model, you will show it in your ComboBox and the complete one , it will be the reference model. Items count in your VisualModel wil be equal to some int property maximumComboBoxItemsCount that you declare . you'll need o find a way that onHovered find the index under the mouse in the visualmodel if it's === to maximumComboBoxIemsCount you do visualModel.remove(0) et visualModel.add(referenceModel.get(maximum.. + 1) and you'll need another property minimumComboBoxIemsCount, same logic but for Scroll Up , I dont know if it will work. but it's an idea
I think there is no solution using the built-in component and you should create your own comboBox. You can start from the following code.
ComboBox.qml
import QtQuick 2.0
Item {
id: comboBox
property string initialText
property int maxHeight
property int selectedItem:0
property variant listModel
signal expanded
signal closed
// signal sgnSelectedChoice(var choice)
width: 100
height: 40
ComboBoxButton {
id: comboBoxButton
width: comboBox.width
height: 40
borderColor: "#fff"
radius: 10
margin: 5
borderWidth: 2
text: initialText
textSize: 12
onClicked: {
if (listView.height == 0)
{
listView.height = Math.min(maxHeight, listModel.count*comboBoxButton.height)
comboBox.expanded()
source = "qrc:/Images/iconUp.png"
}
else
{
listView.height = 0
comboBox.closed()
source = "qrc:/Images/iconDown.png"
}
}
}
Component {
id: comboBoxDelegate
Rectangle {
id: delegateRectangle
width: comboBoxButton.width
height: comboBoxButton.height
color: "#00000000"
radius: comboBoxButton.radius
border.width: comboBoxButton.borderWidth
border.color: comboBoxButton.borderColor
Text {
color: index == listView.currentIndex ? "#ffff00" : "#ffffff"
anchors.centerIn: parent
anchors.margins: 3
font.pixelSize: 12
text: value
font.bold: true
}
MouseArea {
anchors.fill: parent
onClicked: {
listView.height = 0
listView.currentIndex = index
comboBox.selectedItem = index
tools.writePersistence(index,5)
comboBoxButton.text = value
comboBox.closed()
}
}
}
}
ListView {
id: listView
anchors.top: comboBoxButton.bottom
anchors.left: comboBoxButton.left
width: parent.width
height: 0
clip: true
model: listModel
delegate: comboBoxDelegate
currentIndex: selectedItem
}
onClosed: comboBoxButton.source = "qrc:/Images/iconDown.png"
Component.onCompleted: {
var cacheChoice = tools.getPersistence(5);
listView.currentIndex = tools.toInt(cacheChoice)
selectedItem = listView.currentIndex
comboBoxButton.text = cacheModel.get(selectedItem).value
}
}
ComboBoxButton.qml
import QtQuick 2.0
Item {
id: container
signal clicked
property string text
property alias source : iconDownUp.source
property string color: "#ffffff"
property int textSize: 12
property string borderColor: "#00000000"
property int borderWidth: 0
property int radius: 0
property int margin: 0
Rectangle {
id: buttonRectangle
anchors.fill: parent
color: "#00000000"
radius: container.radius
border.width: container.borderWidth
border.color: container.borderColor
Image {
id: image
anchors.fill: parent
source: "qrc:/Images/buttonBackground.png"
Image {
id: iconDownUp
source: "qrc:/Images/iconDown.png"
sourceSize.height:20
sourceSize.width: 20
anchors.verticalCenter: parent.verticalCenter
}
}
Text {
id:label
color: container.color
anchors.centerIn: parent
font.pixelSize: 10
text: container.text
font.bold: true
}
MouseArea {
id: mouseArea;
anchors.fill: parent
onClicked: {
container.clicked()
buttonRectangle.state = "pressed"
startTimer.start()
}
}
Timer{
id:startTimer
interval: 200
running: false;
repeat: false
onTriggered: buttonRectangle.state = ""
}
states: State {
name: "pressed"
when: mouseArea.pressed
PropertyChanges { target: image; scale: 0.7 }
PropertyChanges { target: label; scale: 0.7 }
}
transitions: Transition {
NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
}
}
}
I've used it in some software of mine, hence it is possible that It could not work "out of the box". I use it like this:
ComboBox{
id:cacheChoice
initialText: "None"
anchors.top: baseContainer.top
anchors.topMargin: 2
anchors.right: baseContainer.right
maxHeight: 500
listModel: cacheModel
onExpanded: {
cacheChoice.height = 500
}
onClosed: {
cacheChoice.height = 20
}
}
In case you are working with ComboBox from Qt Quick Controls 2, here's the source code for it:
https://github.com/qt/qtquickcontrols2/blob/5.12/src/imports/controls/ComboBox.qml
Based on that, this override of the behavior works to limit the height to something reasonable:
myComboBox.popup.contentItem.implicitHeight = Qt.binding(function () {
return Math.min(250, myComboBox.popup.contentItem.contentHeight);
});
It is possible to access the hidden MenuStyle within the ComboBoxStyle component. There you can use all the things and hidden things you have within a MenuStyle, including its maximum height.
The thing looks roughly like this.
Not pretty but it works well enough.
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.3
import QtQuick.Window 2.2
ComboBox {
id: comboBox
style: ComboBoxStyle {
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: 400
__menuItemType: "comboboxitem" //not 100% sure if this is needed
}
}
As it came up resonantly in our team, here is a updated version of the idea shown above. The new version restricts the size automatically to the size of your application.
ComboBox {
id: root
style: ComboBoxStyle {
id: comboBoxStyle
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: Math.max(55, //min value to keep it to a functional size even if it would not look nice
Math.min(400,
//limit the max size so the menu is inside the application bounds
comboBoxStyle.control.Window.height
- mapFromItem(comboBoxStyle.control, 0,0).y
- comboBoxStyle.control.height))
__menuItemType: "comboboxitem" //not 100% sure if this is needed
} //Component __dropDownStyle: MenuStyle
} //style: ComboBoxStyle
} //ComboBox
We have to make progress bar consisting with slider, which has colour transition as the slider proceeds as shown in the figure below.
I tried my hand with below logic but could not get the desired effect. Any help or suggestion how to implement the same.
Below is my code snippet
import QtQuick 1.1
Rectangle {
id: container
width: 500; height: 400
Row {
id:repeaterid
x: 75
y: 280
anchors.bottom: parent.bottom
anchors.bottomMargin: 114
spacing: 4
Repeater {
model: 50
Rectangle {
id: smallrect
color: "red"
width:4
height:4
}
}
}
Timer {
id: progressTimer
interval: 50
running: true
repeat: true
onTriggered: {
if (slider.x < 460)
{
slider.x += repeaterid.spacing + 4
smallrect.color = "green"
}
}
}
Rectangle {
id: slider
x: repeaterid.x
y: repeaterid.y
width: 6; height: 6
color: "blue"
}
}
I have tried to use ColorAnimation, but got any luck.
The timer works correctly. The problem is entirely different: Your try to access smallrect in the onTriggerd handler, an undefined reference outside of the Repeater. Try to solve the problem more declarative:
use an integer property in the container to store the current position of progress bar
in smallrect use the value of that property to set the color (index < position? "green": ... )
use a Timer or better a NumberAnimation to update that property
get rid of slider rectangle, just give the right rectangle in the Repeater a blue color
To access the items within the repeater you can use the itemAt(index) function. This will allow you to change the color of the repeaters children. I also added a indexCurrent property to keep track of the current index.
Try this code:
import QtQuick 1.1
Rectangle {
id: container
width: 500; height: 400
property int indexCurrent: 0
Row {
id:repeaterid
x: 75
y: 280
anchors.bottom: parent.bottom
anchors.bottomMargin: 114
spacing: 4
Repeater {
id: repeater
model: 50
Rectangle {
id: smallrect
color: "red"
width:4
height:4
}
}
}
Timer {
id: progressTimer
interval: 50
running: true
repeat: true
onTriggered: {
if (slider.x < 460)
{
slider.x += repeaterid.spacing + 4
repeater.itemAt(indexCurrent).color = "green"
indexCurrent = indexCurrent + 1
}
}
}
Rectangle {
id: slider
x: repeaterid.x
y: repeaterid.y
width: 6; height: 6
color: "blue"
}
}