here Window_1 is the first screen, in this image home_1_1 is a component and i want to connect the Window_2 by clicking that component
import QtQuick 2.15
Rectangle {
id: window_1
width: 409
height: 560
color: "#ffffff"
Rectangle {
id: rectangle_1
x: 0
y: 0
width: 409
height: 560
color: "#d9d9d9"
}
Image {
id: home_1_1_2
x: 0
y: 0
source: "assets/home_1_1_2.png"
}
Image {
id: home_1_1
x: 179
y: 10
source: "assets/home_1_1.png"
Connections {
target: home_1_1
onClicked: window_1.state = "Window.2.ui.qml"
}
}
}
here Window_2 is normal window it will just appear and i imported Window_1.ui.qml
import QtQuick 2.15
import "Window_1.ui.qml"
Rectangle {
id: window_2
width: 409
height: 560
color: "#ffffff"
property alias temperatureText: temperature.text
property alias climateText: climate.text
Image {
id: home_1_1_1
x: 0
y: 0
source: "assets/home_1_1_1.png"
}
Image {
id: multilingual_1_1
x: 9
y: 309
source: "assets/multilingual_1_1.png"
}
Image {
id: down_1_1
x: 179
y: 0
source: "assets/down_1_1.png"
}
Image {
id: slice_1
x: 9
y: 214
source: "assets/slice_1.png"
}
Image {
id: clloud_sunny_2_1
x: 9
y: 226
source: "assets/clloud_sunny_2_1.png"
}
Text {
id: climate
x: 74
y: 222
width: 301
height: 58
color: "#ffffff"
text: qsTr("Climate ")
font.pixelSize: 36
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignTop
wrapMode: Text.Wrap
font.family: "Inter"
font.weight: Font.Normal
}
Text {
id: temperature
x: 74
y: 309
width: 301
height: 53
color: "#ffffff"
text: qsTr("Temperature")
font.pixelSize: 36
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignTop
wrapMode: Text.Wrap
font.family: "Inter"
font.weight: Font.Normal
}
}
Related
I have a qml Line Chart with DateTime X Axis and I need to measure time difference(dx) between two points similar to this chart
Here is the Chart code with sample data
ChartView {
id:chart
title: "Line"
anchors.fill: parent
antialiasing: true
DateTimeAxis {
id: axisX
format: "hh:mm:ss,ms"
tickCount: 10
}
ValueAxis {
id: axisY
min: 0
max: 10
}
LineSeries {
id:series1
name: "LineSeries"
axisX: axisX
axisY: axisY
pointsVisible: true
XYPoint { x: Date.parse("2020-10-09 05:51:00:500"); y: 0 }
XYPoint { x: Date.parse("2020-10-09 05:51:00:600"); y: 2 }
XYPoint { x: Date.parse("2020-10-09 05:52:00:100"); y: 4 }
XYPoint { x: Date.parse("2020-10-09 05:53:00:20"); y: 5 }
XYPoint { x: Date.parse("2020-10-09 05:54:00:200"); y: 8 }
XYPoint { x: Date.parse("2020-10-09 05:55:00:100"); y: 7 }
XYPoint { x: Date.parse("2020-10-09 05:56:00:200"); y: 6 }
XYPoint { x: Date.parse("2020-10-09 05:57:00:400"); y: 2 }
}
}
Any idea how to achieve this using QML or C++?
I roughly did like this. You should adjust time difference handling better.
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
property int rectangeXPosition: 0
property int rectangleYPosition: 0
property int rWidth: 0
property int rHeight: 0
property int minuteDiff: 0
ChartView {
id:chart
title: "Line"
anchors.fill: parent
antialiasing: true
Rectangle
{
x: rectangeXPosition
y: rectangleYPosition
width: rWidth
height: rHeight
color: "red"
opacity: 0.2
Text {
anchors.left: parent.right
anchors.top: parent.top
text: minuteDiff + " minutes"
}
}
MouseArea
{
anchors.fill: parent
onPositionChanged:
{
rWidth = mouse.x - rectangeXPosition
rHeight = mouse.y - rectangleYPosition
var currentPoint = chart.mapToValue(Qt.point(mouse.x, mouse.y), series1)
var startPoint = chart.mapToValue(Qt.point(rectangeXPosition,rectangleYPosition),series1)
var dateTimeDiff = new Date(currentPoint.x - startPoint.x)
minuteDiff = dateTimeDiff.getMinutes()
}
onPressed:
{
var point = Qt.point(mouse.x, mouse.y);
rectangeXPosition = point.x
rectangleYPosition = point.y
}
onReleased:
{
rectangeXPosition = 0
rectangleYPosition = 0
rWidth = 0
rHeight = 0
}
}
DateTimeAxis {
id: axisX
format: "hh:mm:ss,ms"
tickCount: 10
}
ValueAxis {
id: axisY
min: 0
max: 10
}
LineSeries {
id:series1
name: "LineSeries"
axisX: axisX
axisY: axisY
pointsVisible: true
XYPoint { x: Date.parse("2020-10-09 05:51:00:500"); y: 0 }
XYPoint { x: Date.parse("2020-10-09 05:51:00:600"); y: 2 }
XYPoint { x: Date.parse("2020-10-09 05:52:00:100"); y: 4 }
XYPoint { x: Date.parse("2020-10-09 05:53:00:20"); y: 5 }
XYPoint { x: Date.parse("2020-10-09 05:54:00:200"); y: 8 }
XYPoint { x: Date.parse("2020-10-09 05:55:00:100"); y: 7 }
XYPoint { x: Date.parse("2020-10-09 05:56:00:200"); y: 6 }
XYPoint { x: Date.parse("2020-10-09 05:57:00:400"); y: 2 }
}
}
}
I'm currently developping a qml application and I need to specify various area in the plotArea.
I'm drawing rectangles but my scatterseries dot are not visible because drawn behing the rectangle.
I tried to add transparency, or to set a z value somewhere but it is not giving a good result.
It is possible with qwidget qcharts and I'm looking to do the same in qml.
Here a working sample of code with my issue (if I comment the rectangles' part the dots are visible)
import QtQuick 2.15
import QtCharts 2.3
ChartView {
id: test
width: 600
height: 400
animationOptions: ChartView.NoAnimation
theme: ChartView.ChartThemeDark
legend.visible: false
ValueAxis {
id: axisX
min: 0
max: 100
}
ValueAxis {
id: axisY1
min: 0
max: 100
}
Rectangle {
id: rect1
color: "red"
border.width: 2
width: plotArea.width * 4 / 10
height: plotArea.height * 4/15
x: plotArea.x
y: plotArea.y
Text {
anchors.left: parent.left
anchors.leftMargin: 8
anchors.top: parent.top
anchors.topMargin: 8
text: qsTr("Rectangle 1")
}
}
Rectangle {
id: rect2
color: "orange"
border.width: 2
width: plotArea.width * 6 / 10
height: plotArea.height * 4 / 15
x: rect1.x + rect1.width
y: plotArea.y
Text {
anchors.left: parent.left
anchors.leftMargin: 8
anchors.top: parent.top
anchors.topMargin: 8
text: qsTr("Rectangle 2")
}
}
Rectangle {
id: rect3
color: "orange"
border.width: 2
width: plotArea.width * 4 / 10
height: plotArea.height * 7 / 15
x: plotArea.x
y: rect1.y + rect1.height
Text {
anchors.left: parent.left
anchors.leftMargin: 8
anchors.top: parent.top
anchors.topMargin: 8
text: qsTr("Rectangle 3")
}
}
Rectangle {
id: rect4
color: "green"
border.width: 2
width: plotArea.width * 6 / 10
height: plotArea.height * 7 / 15
x: rect3.x + rect3.width
y: rect3.y
Text {
anchors.left: parent.left
anchors.leftMargin: 8
anchors.top: parent.top
anchors.topMargin: 8
text: qsTr("Rectangle 4")
}
}
Rectangle {
id: rect5
color: "gray"
width: plotArea.width
height: plotArea.height * 4 / 15
x: plotArea.x
y: rect3.y + rect3.height
border.color: "black"
border.width: 2
}
ScatterSeries {
axisX: axisX
axisY: axisY1
color: "blue"
XYPoint {
x: 10
y: 10
}
XYPoint {
x: 98
y: 5
}
XYPoint {
x: 95
y: 89
}
XYPoint {
x: 5
y: 75
}
markerShape: ScatterSeries.MarkerShapeRectangle
}
}
I didn't find a solution on the documentation or online.
The closed question I found is Qml ChartView with sections for X Axis points but they was no answer
I found a solution by drawing AreaSeries.
import QtQuick 2.15
import QtCharts 2.3
ChartView {
id: test
width: 600
height: 400
animationOptions: ChartView.SeriesAnimations
theme: ChartView.ChartThemeDark
legend.visible: false
ValueAxis {
id: axisX
min: 0
max: 100
}
ValueAxis {
id: axisY1
min: 0
max: 100
}
AreaSeries{
axisX: axisX
axisY: axisY1
color: "red"
upperSeries: LineSeries {
XYPoint { x: 0; y: 50}
XYPoint { x: 75; y: 50}
}
lowerSeries: LineSeries {
XYPoint { x: 0; y: 0}
XYPoint { x: 75; y: 0}
}
}
AreaSeries{
axisX: axisX
axisY: axisY1
color: "orange"
upperSeries: LineSeries {
XYPoint { x: 75; y: 50}
XYPoint { x: 100; y: 50}
}
lowerSeries: LineSeries {
XYPoint { x: 75; y: 0}
XYPoint { x: 100; y: 0}
}
}
AreaSeries{
axisX: axisX
axisY: axisY1
color: "green"
upperSeries: LineSeries {
XYPoint { x: 0; y: 100}
XYPoint { x: 100; y: 100}
}
lowerSeries: LineSeries {
XYPoint { x: 0; y: 50}
XYPoint { x: 100; y: 50}
}
}
ScatterSeries {
axisX: axisX
axisY: axisY1
color: "blue"
XYPoint {
x: 10
y: 10
}
XYPoint {
x: 98
y: 5
}
XYPoint {
x: 95
y: 89
}
XYPoint {
x: 5
y: 75
}
markerShape: ScatterSeries.MarkerShapeRectangle
}
}
I am trying to reduce the size of qml file by calling same rectangle component and changing only the required fields and keep the rest same.
The part shown below is working but want to reduce the size.
Basically, I dont want to make moisture rectangle. I want to use temperature rectangle and modify say "x " value and inside connections modify only "path". Is that possible if yes than how ? thank you !!!
Rectangle {
id: landingScreen
x: 0
y: 0
width: 800
height: 350
color: "#E4E4E4"
visible: true
property string path: ""
property string val: ""
Rectangle {
id: temperature
x: 8
y: 11
width: 351
height: 329
color: "#ffffff"
radius: 10
Text{
id: textFieldtemp
text :qsTr("")
y:50
font.family: "Helvetica"
font.pointSize: 24
anchors.horizontalCenter: parent.horizontalCenter
}
Connections
{
target: myModel
onSensorValueChanged:{
path = "/root/temp"
val = value
if (addr === path)
{
textFieldtemp.text = "Temperature " + val + "*C"
}
}
}
}
Rectangle {
id: moisture
x: 369
y: 13
width: 209
height: 157
color: "#ffffff"
radius: 10
Text{
id: textFieldmoist
text :qsTr("")
y:50
font.family: "Helvetica"
font.pointSize: 24
anchors.horizontalCenter: parent.horizontalCenter
}
Connections
{
target: myModel
onSensorValueChanged:{
path = "/root/moist"
val = value
if (addr === path)
{
textFieldmoist.text = "Moisture " + val + "*C"
}
}
}
}
}
This sounds like you should just create a new QML file and give it some properties which you can set from the landingScreen. I named it SensorRectangle.qml
Rectangle {
id: sensor
color: "#ffffff"
radius: 10
property string address
property string title
property string unit
Text{
id: textField
property var value
text: sensor.title + " " + value + " " + sensor.unit
y:50
font.family: "Helvetica"
font.pointSize: 24
anchors.horizontalCenter: parent.horizontalCenter
}
Connections
{
target: myModel
onSensorValueChanged:{
if (addr === sensor.address)
{
textField.value = value
}
}
}
}
And then your landing screen becomes:
Rectangle {
id: landingScreen
x: 0
y: 0
width: 800
height: 350
color: "#E4E4E4"
visible: true
property string path: ""
property string val: ""
SensorRectangle {
id: temperature
x: 8
y: 11
width: 351
height: 329
title: "Temperature"
unit: "°C"
address: "/root/temp"
}
SensorRectangle {
id: moisture
x: 369
y: 13
width: 209
height: 157
title: "Moisture"
unit: "°C"
address: "/root/moist"
}
}
I need to position rotated Text elements relative to a rectangle. Here an example:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: rectangle
x: 180
y: 99
width: 200
height: 200
color: "#b73131"
Text {
id: text1
x: -112
y: 85
text: qsTr("Text")
rotation: -90
anchors.right: parent.left
anchors.rightMargin: 20
font.pixelSize: 12
}
Text {
id: text2
x: -46
y: 160
text: qsTr("Textg")
font.pixelSize: 12
rotation: -90
anchors.right: parent.left
anchors.rightMargin: 20
}
}
}
However, I would like that text1 and text2 share the same baseline (which does not happen in the above example because the g character goes below the baseline and thus the right edge is different for the two texts). How can I use the baseline anchor for rotated texts?
you can change the rotation origin. I think this will give you the wanted result:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: rectangle
x: 180
y: 99
width: 200
height: 200
color: "#b73131"
Text {
id: text1
x: -112
y: 85
text: qsTr("Text")
//rotation: -90
anchors.right: parent.left
anchors.rightMargin: 20
font.pixelSize: 12
transform: Rotation { origin.x: text1.width; origin.y: 0; angle: -90}
}
Text {
id: text2
x: -46
y: 160
text: qsTr("Textg")
font.pixelSize: 12
//rotation: -90
anchors.right: parent.left
anchors.rightMargin: 20
transform: Rotation { origin.x: text2.width; origin.y: 0; angle: -90}
}
}
}
I try to learn PySide-QML connections and try to make a simple application like addition. Such as: a+b=c. How can I connect the button to calculate two inputs?
Thanks
Edit: My code's algorithm: when pressing button, it just types 10. When clicking somewhere in the window, it types "hello man" on interpreter.
Python code:
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import math
import sys
from PySide.QtCore import *
from PySide.QtGui import *
from PySide.QtDeclarative import *
class MainWindow(QDeclarativeView):
now=Signal(str)
def __init__(self,parent=None):
super(MainWindow,self).__init__(parent)
self.setWindowTitle("Main Widnowww")
self.setSource(QUrl.fromLocalFile('view.qml'))
self.setResizeMode(QDeclarativeView.SizeRootObjectToView)
#self.rootObject().messageRequired.connect(self.echo)
self.rootObject().messageRequired.connect(self.emit_now)
self.rootObject().clicked.connect(self.printThat)
self.now.connect(self.rootObject().updateMessage)
def printThat(self):
print "hello man"
#print str(bt)
def emit_now(self):
a=6
b=4
c=a+b
#formatted_date = v.toString()
formatted_date = str(c)
self.now.emit(formatted_date)
def echo(self,a_text,b_text):
an=float(a_text or 0)
bn=float(b_text or 0)
ce=an + bn
c=str(ce)
self.rootObject().updateAnswer(str(c))
if __name__ == '__main__':
app=QApplication(sys.argv)
window=MainWindow()
window.show()
sys.exit(app.exec_())
QML code:
import QtQuick 1.1
Rectangle {
id: rectangle1
width: 480
height: 272
gradient: Gradient {
GradientStop {
id: gradientStop1
position: 0
color: "#ffffff"
}
GradientStop {
position: 1
color: "#abc09f"
}
}
function updateScoreA(string ) {
score_a.text = string
}
function updateScoreB(string ) {
score_b.text = string
}
Text {
id: score_a
x: 45
y: 8
width: 131
height: 48
text: qsTr("Text")
verticalAlignment: Text.AlignVCenter
font.pixelSize: 12
}
Text {
id: score_b
x: 303
y: 8
width: 131
height: 48
text: qsTr("Text")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignRight
font.pixelSize: 12
}
Text {
id: dash
x: 232
y: 5
text: qsTr("-")
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 47
}
MouseArea {
id: a_scored
x: 303
y: 200
}
Rectangle {
id: team_a
x: 45
y: 218
width: 127
height: 46
color: "#4e3a3a"
radius: 10
TextInput {
id: team_a_txt
x: 24
y: 13
width: 80
height: 20
text: qsTr("A")
horizontalAlignment: TextInput.AlignHCenter
font.pixelSize: 12
}
MouseArea {
id: team_a_score_ma
x: 0
y: 0
width: 126
height: 46
onClicked: {
qScoreInterface.aScored()
}
}
}
Rectangle {
id: team_b
x: 307
y: 218
width: 127
height: 46
color: "#4e3a3a"
radius: 10
TextInput {
id: team_b_txt
x: 24
y: 13
width: 80
height: 20
text: qsTr("B")
horizontalAlignment: TextInput.AlignHCenter
font.pixelSize: 12
}
MouseArea {
id: team_b_score_ma
x: 0
y: 0
width: 126
height: 46
onClicked: {
qScoreInterface.bScored()
}
}
}
Rectangle {
id: startstopgame
x: 177
y: 113
width: 127
height: 46
color: "#4e3a3a"
radius: 10
TextInput {
id: startstopgame_txt
x: 24
y: 13
width: 80
height: 20
text: qsTr("Start Game")
horizontalAlignment: TextInput.AlignHCenter
font.pixelSize: 12
}
MouseArea {
id: startstopgame_ma
x: 1
y: 0
width: 126
height: 46
onClicked: {
qScoreInterface.startMatch()
}
}
}
}