QML Questions

Everything about software tools, new software development and toolchains. For developers, mostly.

Moderators: marcelr, TheHogNL, Toonz

robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

I load SwitchItem.qml in code below (in the Repeater).
Is it possible to load another qml-file in an if-statement?

(If type=a, load Switchitem, otherwise load Otheritem)

Code: Select all

Grid {
		spacing:10
		columns: 4
		rows:5
		visible: app.devicesReceived
		anchors {
			top: btnRow.bottom
			topMargin: 10
			left: parent.left
			leftMargin: 32
		}

		Repeater {
			id: switches
			model: app.devices
			SwitchItem {
				idx: model['idx']
				title: model['Name']
				status: model['Data']
				lastupdate: model['LastUpdate']
			}
		}
	}
Last edited by robgeerts on Wed Nov 29, 2017 9:52 pm, edited 1 time in total.
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

With the function below (from boilerapp) I always get a timeout.
The url is working because when I open it in the browser it shows me the correct JSON-output.

Code: Select all

function httpRequest(requestType, url, callback, data) {
		var http = HttpRequestFactory.create();

		http.finished.connect(function() {
			http.finished.disconnect(arguments.callee);
			console.log("Req: request done\n  code:", http.responseCode, "response:", http.responseText);
			if (callback !== undefined) {
				callback(http.responseCode, http.responseText);
			}
		});

		http.error.connect(function() {
			http.error.disconnect(arguments.callee);
			console.log("Req: request error\n  status:", http.status, http.responseCode, http.statusText);
		});

		http.timeout.connect(function() {
			http.timeout.disconnect(arguments.callee);
			console.log("Req: request timeout");
		});

		http.open(requestType, url);
		http.setRequestHeader("Accept", "application/json");
		http.send(data);
	}
[
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

Interesting, never used the function HttpRequestFactory. So far I did everything with XMLHttpRequest.
This function is introduced very recently (from 4.8/4.9 onwards), need to dive into it a bit.

Congratulations with your 10th post :D :D :D :D
member of the Toon Software Collective
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

Thanks!
Well, I've tried getting the JSON with XMLHttpRequest, it worked, but using the data didnt...

Code: Select all

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState == 4) {
		if (xmlhttp.status == 200) {
                        console.log("Result JSON: "+xmlhttp.responseText);
			var res = JSON.parse(xmlhttp.responseText);
			devices = res["result"];
			devicesReceived = true;
		}
	}
}
xmlhttp.open("GET", "http://192.168.1.3:8084/json.htm?username="+username+"&password="+password+"&type=devices&favorite=1&filter=all&used=true&order=Name", true);
xmlhttp.send();
In the console from the code above, I only get: {
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

how/where did you define username and password variables?
member of the Toon Software Collective
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

It's all in the APP-qml:

Code: Select all

App {
	id: root
	
	property variant devices : []
	property bool devicesReceived: false
	
	property string username: "base64username";
	property string password: "base64password";
	
	function getDevices() {
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange=function() {
			if (xmlhttp.readyState == 4) {
				if (xmlhttp.status == 200) {
					console.log("Req JSON: "+xmlhttp.responseText);
					var res = JSON.parse(xmlhttp.responseText);
					devices = res["result"];
					devicesReceived = true;
				}
			}
		}
		xmlhttp.open("GET", "http://192.168.1.3:8084/json.htm?username="+username+"&password="+password+"&type=devices&favorite=1&filter=all&used=true&order=Name", true);
		xmlhttp.send();
	}

}
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

you don't need the ; at the end of a property definition. Not sure if that causes the issues but worth a try
member of the Toon Software Collective
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

Ok, for some reason, it did work, so this is a part of my app-qml:

Code: Select all

App {
	id: root
	
	property variant devices : []
	property bool devicesReceived: false
	
	property string username: "username"
	property string password: "password"
	
	function getDevices() {
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange=function() {
			if (xmlhttp.readyState == 4) {
				if (xmlhttp.status == 200) {
					var res = JSON.parse(xmlhttp.responseText);
					devices = res["result"]
					for (var p in devices){
						console.log("Device: "+p + ": " + devices[p]['Name']);
					}

					devicesReceived = true;
				}
			}
		}
		xmlhttp.open("GET", "http://192.168.1.3:8084/json.htm?username="+username+"&password="+password+"&type=devices&favorite=1&filter=all&used=true&order=Name", true);
		xmlhttp.send();
	}

}
In my screen-qml, i have to following:

Code: Select all

Repeater {
	id: switches
	model: app.devices
	SwitchItem {
		idx: model['idx']
		title: model['Name']
		status: model['Data']
		lastupdate: model['LastUpdate']
	}
}
In the console.log in the first part of my code above, I get:
Device: 0 : Woonkamer
Device: 1 : Slaapkamer

BUT, for some reason, the variables are undefined (like: model['Name']) in the Repeater (I refer to app.devices in the model-argument, the devices-variable in my app-qml)

EDIT, SOLVED!!!!!

Code: Select all

SwitchItem {
	idx: app.devices[index]['idx']
	title: app.devices[index]['Name']
	status: app.devices[index]['Data']
	lastupdate: app.devices[index]['LastUpdate']
}
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

Why doesnt this work (removed code wich doesnt matter in this particular case) ?
I put var status in the text element and it shows me "On" or "Off" correctly but it doesnt show the image.
When I use switchIcon["On"] instead of switchIcon[status] it DOES show the image

Code: Select all

Item {
    
        property string status;
    
        property variant switchIcon: {
		"On": "./drawables/on.png",
		"Off": "./drawables/off.png"
	}
	Item {
		Image {
			source: switchIcon[status];
		}

    	        Text {
        	        id: switch1Title
        	        text: status
    	        }
	}
}
Ierlandfan
Member
Member
Posts: 151
Joined: Thu Oct 03, 2013 7:53 pm

Re: QML Questions

Post by Ierlandfan »

Hi Rob,

(not related to your question)
How do you execute an app? Simply add it to the globals.qml, restarting Qt and monitoring the console?
(And where does that output show up?)
Ierlandfan
Member
Member
Posts: 151
Joined: Thu Oct 03, 2013 7:53 pm

Re: QML Questions

Post by Ierlandfan »

Found it:
debugging possible when running the qt-gui manually:

First edit the /usr/bin/startqt and add "exit" on the second line (after the #!/bin/sh line). This will cause the Toon not to restart qt-gui itself anymore.
Add some debugging into your app with "console.log("yourdebugtext")
Then start then qt-gui manually and only look for the debug lines you are interested in: " /HCBv2/sbin/qt-gui -platform linuxfb -plugin Tslib 2>&1 | grep -i yourdebugtext"
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

try something like this:
source: (status === "On") ? "./drawables/on.png" : "./drawables/off.png"

or make a function SwitchIcon which returns the string for the image
member of the Toon Software Collective
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

Toonz wrote:try something like this:
source: (status === "On") ? "./drawables/on.png" : "./drawables/off.png"

or make a function SwitchIcon which returns the string for the image
Unfortunately... Still only shows the off image... In the same item (qml) I show 'status' as text and it shows it correctly (on/off)

Ierlandfan wrote:Found it:
debugging possible when running the qt-gui manually:

First edit the /usr/bin/startqt and add "exit" on the second line (after the #!/bin/sh line). This will cause the Toon not to restart qt-gui itself anymore.
Add some debugging into your app with "console.log("yourdebugtext")
Then start then qt-gui manually and only look for the debug lines you are interested in: " /HCBv2/sbin/qt-gui -platform linuxfb -plugin Tslib 2>&1 | grep -i yourdebugtext"
Well, this is how I do it now... That works, sort of, but not 'live' while clicking through the app..
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

can you have a look at ToonstoreDelegate.qml for an example with the last IconButton
member of the Toon Software Collective
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

I did... the function it uses there return true or false, just like the if statement I use from your example:

Code: Select all

source: (status === "On") ? "./drawables/bulb_on.png" : "./drawables/bulb_off.png"
Also tried == instead of === but no luck :(
Tried change the var name from status to switchstatus, I thought, maybe 'status' is some reserved variable name or something..

EDIT: FIXED!!!
I tried 'data' instead of 'status', both didnt work...
But, because I really was sure the code was correct I tried another variable 'switchdata', this worked!
So, data and status seems to be reserved or something.
Post Reply

Return to “Toon software development”