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

QML Questions

Post by robgeerts »

Hi,

I started creating an app voor Toon (more on this later).
I have a few questions to get things more efficient, first:

I create a new page like:

Code: Select all

import QtQuick 1.1;
Flow {
	
	width: 735 
	height: 326 
	spacing: 10

	newTile {}
}
newTile{} executes newTile.qml (wich shows a new tile on my page)
How can I send attributes to newTile{} ?

So far, I've tried:

Code: Select all

SwitchTile {
	argument : value
}
AND

Code: Select all

SwitchTile(value) {}
But with no success...
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

Where to start...... welcome in the dev community by the way

My advice would be to start reading the code from existing apps.
A good one to start with is the clock app, it shows how to use tiles and timers.
Secondly start with an app with a screen as well.

Typically each app has a file ...App.qml which basically initiates all components for that app likes tiles and screens.
Start reading the ...App.qml files
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 did that already, I checked out the domoticz-apps, easyenergy apps, the original homescreen apps etc.
I did learn a lot from it. BUT none of them had a function as I want. For example, the domoticz-apps can show 3 buttons for switching off/on lights but you have to define them in the scripts, as switch1title, switch2title etc.. What if I have 10 of them? I have to copy the pieces of code to define new buttons.

I want 1 qml, for a button, and call it several times with different arguments.
Currently, I have 1 page with 4 buttons. Each button has its own qml-file. But I want 1 qml-file wich I can use for all 4 buttons.
gielie
Member
Member
Posts: 70
Joined: Thu Nov 02, 2017 11:06 am

Re: QML Questions

Post by gielie »

robgeerts wrote:Hi,

I started creating an app voor Toon (more on this later).
Dashticz 3.0 for Toon? That would be awesome.
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

Well, Dashticz cannot be used on Toon as it is now but want to use some of the Dashticz-ideas for it ;)
But its in a very very early stage... Getting to know how the qml-files works..
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

I hope I understand your question correctly: you want a flexible number of buttons to appear on screen in one QML file?

You can achieve that via for instance a SimpleList or GridView where you can display multiple items based on the contents of an xml file or array.
Fileinfo app as example:
- FileinfoFilterScreen.qml with the FileinfoFilterDelegate.qml using a gridview (multiple columns)
- FileinfoScreen.qml for the Simple List example
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 »

Well, that was my question.
I know the ability of using gridviews/listviews.
But, I want a mix of contents on my screen, buttons, rectangles with text etc. Thats not hard to do but I do not want to define a qml-file for every 'block' but re-use some sort of template file. If I could just send some variables while calling a qml-file, that would be great...
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

Got you now. You can mix several components in one qml file but each one refers to a separate qml file in the end.
In the folder /qmf/qml/qb/components you can find all standard pre-defined user interface components which are shared between all apps.
You can simply refer to these in your own app without having to include that component's qml file in your app.
The advantage of using these components is that your app will have the same look as the other Toon apps.

Two exceptions: if you want to use a standard component but want to taylor it to your needs.
In that case you need to copy that qml file from the components folder and put it in your own app under a different name.
An example is the file /qmf/qml/apps/temperaturelogger-1.3.1/AreaGraphMod.qml which is a changed version from the standard AreaGraph.qml component.
Second reason for customizing a standard component is firmware compatibility. Sometimes a newer firmware version contains changed standard components.
This can create an issue in your app developed on a firmware 4.x to be incompatible with firmware 3.x.
To circumvent that you need to include that component in your own app.
Example: /qmf/qml/apps/buienradar-8.2.0/EditTextLabel4421.qml is the standard component EditTextLabel.qml from firmware 4.4.21 but included in the app to make it work on firmware 3.x as well.

Regarding passing arguments: you need to define these as properties. Typically you do this in the root component of your app (typically with id:app).
All child qml components can refer to the properties from their parents, like app.propertyname. By doing it like this each tile and screen component can access and change the same set of properties. When a screen component changes an app.property which is also used as datasource for an element on a Tile, the tile is automatically updated as well.

Hope this answers your question but probably raises many more :-)
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, got it working now :)

I use a list of items (model) and with a grid and repeater I place new buttons with the properties I added in the model.

Code: Select all

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

	Repeater {
		id: switches
		model: switchesModel
		SwitchItem {
			idx: switches.itemAt(index).idx
			title: switches.itemAt(index).title
			status: switches.itemAt(index).status
		}
	}
}
Also found some answers on http://doc.qt.io/qt-4.8/index.html !
Is it possible to fetch JSON-data from a remote URL? I only saw some XML-examples but JSON would be better in my case...
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

Yes you can. See the BoilerMonitorApp.qml for examples using JSON
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, JSON-request is working now!
Also saw an answer to another question in that app ;)

I had:

Code: Select all

Repeater {
      id: switches
      model: switchesModel
      SwitchItem {
         idx: switches.itemAt(index).idx
         title: switches.itemAt(index).title
         status: switches.itemAt(index).status
      }
   }
But that had to be:

Code: Select all

Repeater {
	id: switches
	model: switchesModel
	SwitchItem {
		idx: model.idx
		title: model.title
		status: model.status
	}
}
(I add pieces of code to this topic so other users (inlcuding me) can find solutions in the future ;)

Next problem I have:

Code: Select all

Grid {
		spacing:10
		columns: 4
		rows:5
		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
			}
		}
	}
I want this grid to be build when app.devicesReceived == true because then, app.devices (model) exists.
Tried surrounding it by an if but obviously, that doesnt work..
Toonz
Forum Moderator
Forum Moderator
Posts: 1873
Joined: Mon Dec 19, 2016 1:58 pm

Re: QML Questions

Post by Toonz »

robgeerts wrote:I want this grid to be build when app.devicesReceived == true because then, app.devices (model) exists.
Tried surrounding it by an if but obviously, that doesnt work..
You could set the visible property to app.devicesReceived
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 »

Well, I already got it working, but every post of mine has to be approved by an administrator so there's some delay ;)
marcelr
Global Moderator
Global Moderator
Posts: 1153
Joined: Thu May 10, 2012 10:58 pm
Location: Ehv

Re: QML Questions

Post by marcelr »

robgeerts wrote:Well, I already got it working, but every post of mine has to be approved by an administrator so there's some delay ;)
Hang in there, buddy, just a few more posts and you don't need approval any more.
robgeerts
Starting Member
Starting Member
Posts: 38
Joined: Tue Aug 08, 2017 10:30 pm

Re: QML Questions

Post by robgeerts »

I dont get it, how can i see the output from console.log?
I tried, rebooting by: /HCBv2/sbin/qt-gui -platform linuxfb -plugin Tslib 2>&1

But dont see anything?
I want to see the console-output when running my Toon?

EDIT: NEVER MIND ;)
Last edited by robgeerts on Wed Nov 29, 2017 9:31 pm, edited 1 time in total.
Post Reply

Return to “Toon software development”