QML Questions

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

Moderators: marcelr, TheHogNL, TerrorSource, Toonz

QML Questions

Postby robgeerts » Thu Nov 23, 2017 4:29 pm

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...
robgeerts
Starting Member
Starting Member
 
Posts: 38
Joined: August 2017

Re: QML Questions

Postby Toonz » Thu Nov 23, 2017 9:50 pm

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
User avatar
Toonz
Forum Moderator
Forum Moderator
 
Posts: 1026
Joined: December 2016

Re: QML Questions

Postby robgeerts » Thu Nov 23, 2017 10:55 pm

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.
robgeerts
Starting Member
Starting Member
 
Posts: 38
Joined: August 2017

Re: QML Questions

Postby gielie » Fri Nov 24, 2017 11:06 am

robgeerts wrote:Hi,

I started creating an app voor Toon (more on this later).

Dashticz 3.0 for Toon? That would be awesome.
gielie
Member
Member
 
Posts: 51
Joined: November 2017

Re: QML Questions

Postby robgeerts » Fri Nov 24, 2017 2:03 pm

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..
robgeerts
Starting Member
Starting Member
 
Posts: 38
Joined: August 2017

Re: QML Questions

Postby Toonz » Fri Nov 24, 2017 2:11 pm

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
User avatar
Toonz
Forum Moderator
Forum Moderator
 
Posts: 1026
Joined: December 2016

Re: QML Questions

Postby robgeerts » Fri Nov 24, 2017 8:42 pm

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...
robgeerts
Starting Member
Starting Member
 
Posts: 38
Joined: August 2017

Re: QML Questions

Postby Toonz » Sat Nov 25, 2017 12:27 am

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
User avatar
Toonz
Forum Moderator
Forum Moderator
 
Posts: 1026
Joined: December 2016

Re: QML Questions

Postby robgeerts » Mon Nov 27, 2017 9:38 am

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...
robgeerts
Starting Member
Starting Member
 
Posts: 38
Joined: August 2017

Re: QML Questions

Postby Toonz » Mon Nov 27, 2017 5:54 pm

Yes you can. See the BoilerMonitorApp.qml for examples using JSON
member of the Toon Software Collective
User avatar
Toonz
Forum Moderator
Forum Moderator
 
Posts: 1026
Joined: December 2016

Re: QML Questions

Postby robgeerts » Mon Nov 27, 2017 7:12 pm

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..
robgeerts
Starting Member
Starting Member
 
Posts: 38
Joined: August 2017

Re: QML Questions

Postby Toonz » Mon Nov 27, 2017 8:36 pm

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
User avatar
Toonz
Forum Moderator
Forum Moderator
 
Posts: 1026
Joined: December 2016

Re: QML Questions

Postby robgeerts » Mon Nov 27, 2017 11:10 pm

Well, I already got it working, but every post of mine has to be approved by an administrator so there's some delay ;)
robgeerts
Starting Member
Starting Member
 
Posts: 38
Joined: August 2017

Re: QML Questions

Postby marcelr » Tue Nov 28, 2017 9:59 am

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.
marcelr
Global Moderator
Global Moderator
 
Posts: 1012
Joined: May 2012
Location: Ehv

Re: QML Questions

Postby robgeerts » Wed Nov 29, 2017 7:26 pm

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 8:31 pm, edited 1 time in total.
robgeerts
Starting Member
Starting Member
 
Posts: 38
Joined: August 2017

Next

Return to Toon software development

Who is online

Users browsing this forum: No registered users and 1 guest

cron