I have such piece of code in my QML file, which handle
the CircularGauge:
CircularGauge
{
id: speedometer
objectName: speedometer
x: 230
value: valueSource.kph
minimumValue: 0
maximumValue: 180
width: 730
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.bottomMargin: -34
anchors.topMargin: -505
antialiasing: true
style: DashboardGaugeStyle{}
Connections
{
target: connection
function onTestSignal(num){
speedometer.value(num); // here - the typeError
}
}
However I'm keep getting an error: TypeError: Type error when trying to set
some value
My testSignal is definied like this:
void testSignal(int num);
You are setting the value the wrong way. It's not a function that you call. It's a property that you set, like this:
speedometer.value = num;
Related
Its very hard to formulate question. But look on the followind picture:
For example there are exists list widget which items dynammically change content when receive hover state. For simplicity item contents depends on some set of bool values.
With QWidgets its easy could be achieved by checking the bool values when some signal raised and show/hide dependent components.
But how it could achieved with qml?
As I understand correctly the qml gui - its kind of "static" GUI and I should have different gui set to switch. But in described example I receive the combinatorial explosion.
I am not sure I got your question right, but let's begin from examples
ListModel {
id: listModel
ListElement {
name: "John"
age: 32
gender: "male"
}
ListElement {
name: "Kate"
age: 23
gender: "female"
}
}
ListView {
anchors.fill: parent
model: listModel
spacing: 5
delegate: Rectangle {
color: "#24F5F2"
width: parent.width
height: 50
Text {
id: nameText
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
text: name
}
Text {
id: ageOrGenderText
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
text: gender
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
ageOrGenderText.text = age
}
onExited: {
ageOrGenderText.text = gender
}
}
}
}
Also, you can create a separate boolean property and set it on entered/exited to true/false and do a QML binding to this property
property bool hovered: false
Text {
id: textItem
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
text: hovered ? "age" : "gender" // or CppBackend.GetValue(hovered)
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
textItem = true;
}
onExited: {
textItem = false;
}
}
I was getting my self familiar with QML in QT5. So i was trying to make the code from the follwing video: video
In this video the code:send.connect(target.receive()); is used. But This part does not work. I am getting the error:
qrc:/Receiver.qml:8: Error: Cannot assign [undefined] to QString
Is this method deprecated or am i doing something wrong?
main.qml
Window {
visible: true
width: 640
height: 480
title: qsTr("Jurassic World")
Background {
id: background
anchors.fill: parent
target: sender
Sender {
id: sender
y: 145
displayText: "Sender"
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 50
target: receiver
}
Receiver {
id: receiver
x: 376
y: 158
displayText: "Receiver"
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 50
width: sender.width
}
}
}
Receiver.qml
Cirkel {
id: receiveButton
function receive(value)
{
displayText = value
clicknotify.running = true
}
SequentialAnimation on buttonColor
{
id: clicknotify
running: false
ColorAnimation {
from: "#afc4cb"
to: "red"
duration: 200
}
ColorAnimation {
from: "red"
to: "#afc4cb"
duration: 200
}
}
}
Sender.qml
Cirkel {
id: sendButton
property int counter: 0
property Receiver target: null
signal send(string value)
onTargetChanged: {
send.connect(target.receive());
}
MouseArea {
anchors.fill: parent
onClicked: {
counter++
parent.send(counter)
displayText = counter
}
onPressed: parent.buttonColor = "green"
onReleased: parent.buttonColor = "#afc4cb"
}
}
Question:
How can i link a signal from one qml to a other qml function?
You write:
send.connect(target.receive());
where you call target.receive() and try to connect its return value to send.
What you want is:
send.connect(target.receive);
where you connect send to the function receive itself.
Recommendation:
Also try the declarative way, using a Connection-object.
I'd say, in Sender.qml just do:
signal send(int value)
...
sendButton.send(counter)
and in main.qml just do
Sender {
id: sender
...
onSend: receiver.receive(value)
}
That's all. No need for the whole target assignment.
And by the way, you have a data type issue in the receive function (integer to string)
Fix with this:
function receive(value)
{
displayText = "" + value
clicknotify.running = true
}
In general, a signal in QML can be handled as a function by adding "on" and uppercase first letter.
For example, a Button exposes the clicked signal, and when you handle it you use onClicked
How to remove "British-English" which is in the spacebar? Please refer below image.
[Update 1]:
Following is the code that i am using for input panel:
InputPanel {
id: inputPanel
parent:mainWindow.contentItem
z: 1000002
anchors.bottom:parent.bottom
anchors.left: parent.left
anchors.right: parent.right
visible: Qt.inputMethod.visible
}
You'd need to make a custom style where you override the spaceKeyPanel. For example, adapting the default style's spaceKeyPanel:
spaceKeyPanel: KeyPanel {
Rectangle {
id: spaceKeyBackground
radius: 5
color: "#35322f"
anchors.fill: parent
anchors.margins: keyBackgroundMargin
}
}
I am trying to communicate between 2 QML pages.
In my page Main.qml I receive a signal from my C++ code. On receiving this signal I want text on InputPage.qml to change. This page is shown within Main.qml using a Loader. The only way I could find so far is to set up another signal between the 2 pages. However, I think there is a much easier way to do this. I already tried this way but I could not get it to work. So before I proceed I would like to know if this is the right method or not.
Any ideas on how to do this, and if the method described above is the correct one?
My code:
Main.qml
Item {
id: screen_InputPage
width: 1920
height: 930
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 100
visible: false
opacity: 1
Loader {//Loads the pages
id: pageLoader_ID2
source: "inputPage.qml"
}
}
And i would like to access the text(and maybe functions) placed on inputPage.qml
Text {
id: text_volume_perc_ID1
height: 48
text: qsTr("50")
anchors.right: parent.right
anchors.rightMargin: 0
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.top: parent.top
anchors.topMargin: 126
anchors.left: parent.left
anchors.leftMargin: 0
font.pixelSize: 42
}
To access the created object, you can use
idLoader.item.idInputpage.idText.text
I propose that you load objects dynamically to improve performance. To do so you can create your own CustomLoader.qml:
CustomLoader.qml
import QtQuick 2.0
Item {
id: idRoot
width: childrenRect.width
height: childrenRect.height
property Item createdObject
property string source
function fnSourceChange() {
if (""!== source){
var component
// create component
component = Qt.createComponent(source)
if (Component.Ready === component.status) {
createdObject= component.createObject(idRoot)
if(!createdObject)
console.log("Loader::Could not create the object ")
}
else {
console.log("Loader::Could not create panel", component.errorString(), "component has errors")
}
}
else {
createdObject.destroy();
createdObject = null
// unComment this line if you want to force the garbage collector
//gc()
}
}
onSourceChanged: {
fnSourceChange()
}
// even without that it should detect the source change and create it
// you can unComment this line if you want, but like that it will parse the function
// two times one on the sourceChanged signal and on on in this handler
// print the source or somthing in the function and you'll see
// Component.onCompleted: fnSourceChange()
}
main.qml
import QtQuick 2.0
Item {
id: screen_InputPage
width: 1920
height: 930
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 100
visible: false
opacity: 1
CustomLoader{
id: pageLoader_ID2
source: "inputPage.qml"
}
}
InputPage.qml
import QtQuick 2.0
Item {
width: 800
height: 480
property alias text: idText.text
property alias label: idText
property alias rect: idRect
Text{
id: idText
}
Rectangle{
id: idRect
width: 100
height: 200
}
}
In your main add :
//or another scope like click button
Component.onCompleted: {
pageLoader_ID2.createdObject.text = "hello"
pageLoader_ID2.createdObject.rect.color = "red"
}
I have a component which displays a custom combo box:
Column {
anchors.top: parent.top
anchors.topMargin: 200
anchors.left: parent.left
anchors.leftMargin: 30
Rectangle {
id: rectangle1
signal comboClicked
Column {
id: column_button
MenuButtonStyle {
id: buttonCombo
style: MyComboBoxButtonStyle {
label: ButtonTextStyle {
text: "Choose"
}
}
}
}
Column {
id: column1
anchors.left: column_button.right
anchors.leftMargin: -25
anchors.top: parent.top
anchors.topMargin: 3
Image {
id: image1
width: 16
source: "arrow_down.png"
}
}
Keys.onReturnPressed: {
rectangle1.state = rectangle1.state==="dropDown"?"":"dropDown"
console.log("Open Drop Down..")
}
states: State {
name: "dropDown";
PropertyChanges { target: buttonCombo; style: MyButtonStyle }
}
}
}
The goal is to change the style property in "MenuButtonStyle" module.
I tried it with the line
PropertyChanges { target: buttonCombo; style: MyButtonStyle }
but it gives me the error:
file:///D:/projekte/qt_quick/FirstTest/MainPane.qml:82: ReferenceError: MyButtonStyle is not defined
If I replace the "MyComboBoxButtonStyle" directly with "MyButtonStyle" QT did not complain over a not defined reference.
What is the problem? Is it not possible to change the style of a component like it is possible with CSS in HTML?
I am not sure how your MyButtonStyle is written, but you can instantiate MyButtonStyle in your root component and use it throughout the application:
MyButtonStyle { id: myButtonStyle }
or you can define it as a singleton object.
Reference: http://qt-project.org/wiki/QmlStyling