Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How do load QML Components when needed?
Forum Updated to NodeBB v4.3 + New Features

How do load QML Components when needed?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 2 Posters 1.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • L Offline
    L Offline
    LogiSch17
    wrote on last edited by LogiSch17
    #1

    Hi guys,

    i am working on an embedded Linux device driven by an RPI CM1.
    My problem is that it takes over 10 secs to load my application.qml to my QQmlApplicationEngine.

    I have all my Items in their own *.qml files in qml/ui directory.
    e.g. :
    -LoginPage.qml
    -InfoPage.qml
    -ServiceMenu.qml
    ....

    So when i remove all components out of application.qml and only load the LoginPage.qml which is the first and only i need at startup , the engine only need 600ms to load the gui.

    So my question is, is there a possibility to load all the other components later?

    Actually my gui is controlled by states which are setting the visibility of the components.
    I thought that QML only loads visible Items, but it doesn´t seem so.

    this is how my application.qml is working basicly:

    ApplicationWindow {
        id: window
        width: 800
        height: 480
        color: Style.backgroundColor
    
        Item {
        id: state
        state: "LOGIN"
    
        states: [
            State {
                name: "LOGIN"
                PropertyChanges { target: menu; visible: false}
                PropertyChanges { target: cluster; visible: false}
                PropertyChanges { target: infoPage; visible: false}
                PropertyChanges { target: icons; visible: false}
                PropertyChanges { target: rfidLogo; visible: true  }
                PropertyChanges { target: hornIcon; visible: false  }
    
            },
            State {
                name: "DRIVE"
                PropertyChanges { target: menu; visible: true}
                PropertyChanges { target: cluster; visible: true}
                PropertyChanges { target: icons; visible: true}
                PropertyChanges { target: rfidLogo; visible:false  }
                PropertyChanges { target: hornIcon; visible: true  }
                PropertyChanges { target: infoPage; visible: false}
    
            }
        ]
     }
    Item {
            anchors.fill: parent
    
           InfoPage{
                id: infoPage
                anchors.left: parent.left
                anchors.top: parent.top
                height: parent.height
                width: 300
                errorCode: ie.hexError
                errorCode1: errorLogMessage
                voltage: io.batteryVoltage
                ontime: io.onHours
                optime: io.operatingHours
                lowcell: io.batteryLowestCell
                batttemp: io.batteryTemp
                motortemp: io.motorTemp
                celldiff: io.batteryDiff
                cutback: io.voltageCutback
                current: io.batteryCurrent
                brakerelease: io.brakerelease
    
            }
    

    So is there a possibility to load for example this InfoPage after changing state from LOGIN to DRIVE?

    Would be really nice if someone has a few advices for me, how to get this thing faster from StartUp.

    Thanks,
    Logi

    E 1 Reply Last reply
    0
    • L LogiSch17

      Hi guys,

      i am working on an embedded Linux device driven by an RPI CM1.
      My problem is that it takes over 10 secs to load my application.qml to my QQmlApplicationEngine.

      I have all my Items in their own *.qml files in qml/ui directory.
      e.g. :
      -LoginPage.qml
      -InfoPage.qml
      -ServiceMenu.qml
      ....

      So when i remove all components out of application.qml and only load the LoginPage.qml which is the first and only i need at startup , the engine only need 600ms to load the gui.

      So my question is, is there a possibility to load all the other components later?

      Actually my gui is controlled by states which are setting the visibility of the components.
      I thought that QML only loads visible Items, but it doesn´t seem so.

      this is how my application.qml is working basicly:

      ApplicationWindow {
          id: window
          width: 800
          height: 480
          color: Style.backgroundColor
      
          Item {
          id: state
          state: "LOGIN"
      
          states: [
              State {
                  name: "LOGIN"
                  PropertyChanges { target: menu; visible: false}
                  PropertyChanges { target: cluster; visible: false}
                  PropertyChanges { target: infoPage; visible: false}
                  PropertyChanges { target: icons; visible: false}
                  PropertyChanges { target: rfidLogo; visible: true  }
                  PropertyChanges { target: hornIcon; visible: false  }
      
              },
              State {
                  name: "DRIVE"
                  PropertyChanges { target: menu; visible: true}
                  PropertyChanges { target: cluster; visible: true}
                  PropertyChanges { target: icons; visible: true}
                  PropertyChanges { target: rfidLogo; visible:false  }
                  PropertyChanges { target: hornIcon; visible: true  }
                  PropertyChanges { target: infoPage; visible: false}
      
              }
          ]
       }
      Item {
              anchors.fill: parent
      
             InfoPage{
                  id: infoPage
                  anchors.left: parent.left
                  anchors.top: parent.top
                  height: parent.height
                  width: 300
                  errorCode: ie.hexError
                  errorCode1: errorLogMessage
                  voltage: io.batteryVoltage
                  ontime: io.onHours
                  optime: io.operatingHours
                  lowcell: io.batteryLowestCell
                  batttemp: io.batteryTemp
                  motortemp: io.motorTemp
                  celldiff: io.batteryDiff
                  cutback: io.voltageCutback
                  current: io.batteryCurrent
                  brakerelease: io.brakerelease
      
              }
      

      So is there a possibility to load for example this InfoPage after changing state from LOGIN to DRIVE?

      Would be really nice if someone has a few advices for me, how to get this thing faster from StartUp.

      Thanks,
      Logi

      E Offline
      E Offline
      Eeli K
      wrote on last edited by
      #2

      @LogiSch17 The Loader type is just for that, just read the docs.

      1 Reply Last reply
      0
      • L Offline
        L Offline
        LogiSch17
        wrote on last edited by LogiSch17
        #3

        Hi @Eeli-K
        I have allready read about the Loader, but i don´t know how to set an ID to a loaded Item so I can set them Visiblie with my States.
        And i can´t find any example for this.

        1 Reply Last reply
        0
        • L Offline
          L Offline
          LogiSch17
          wrote on last edited by
          #4

          OK,
          I think i figuered it out now is this a correct way to do that?

          application.qml

          Item{
            id: infoPage
            anchors.left: parent.left
            anchors.top: parent.top
            height: parent.height
            width: 300
            Loader{
                 id: infoPageLoader
                 source: "ui/components/InfoPage.qml"
                 onLoaded: {
                         item.visivle=true
                         item.errorCode = ie.hexError
                         .....
                }
          }
             
          

          And at my State I set the Loader to active instead of visible:

          State {
              name: "INFO"
              PropertyChanges { target: infoPageLoader; active: true }
              .....
          }
          

          Is this how the Loader should be used?

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved