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. QML two display problem
Forum Updated to NodeBB v4.3 + New Features

QML two display problem

Scheduled Pinned Locked Moved Solved QML and Qt Quick
7 Posts 3 Posters 1.1k Views 2 Watching
  • 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.
  • artwawA Offline
    artwawA Offline
    artwaw
    wrote on last edited by
    #1

    Good afternoon.
    I decided to dive into QML a bit.

    I have a C++ backend that is properly communicating with the QML frontend. It all works just fine but one problem I can't figure out.

    The idea is that the application has two screens available:

    • the main screen, which is a touch screen - on it runs a stack view with controls and such (I started to code it, it runs just fine).
    • the "display screen", where is just one fullscreen window with data display (again, I have that coded and works just fine).

    Problem is that I would like to join those two in a single program. From the documentation I figure, that setting the screen option using Qt.application.screens array values is the way to go but when I set it all the views are on just one screen (array Qt.application.screens has two entries, as expected and both return expected screen sizes). My main.qml file:

    import QtQuick 2.11
    import QtQuick.Window 2.11
    import QtQuick.Controls 2.4
    import QtQuick.Controls.Material 2.3
    import QtQuick.VirtualKeyboard 2.3
    import BackEnd 1.0
    
    ApplicationWindow {
        id: appwindow
        visible: true
        screen: Qt.application.screens[1]
        width: screen.width
        height: screen.height
        title: qsTr("Large")
    
        BackEnd {
            id: backend
        }
    
        Window {
            id: mainwindow
            screen: Qt.application.screens[0]
            width: screen.width
            height: screen.height
            visible: true
        }
    
        header: Text {
            Text {
                text: "Control panel"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    
        footer: status
    
        StackView {
            id: cfg
            visible: true
            anchors.fill: parent
            initialItem: ConfigWindow
    
            Connections {
                target: backend
                onProgressStart: {
                    push(progres);
                    pHeaderText.text=backend.progressHeader;
                    pFooterText.text=backend.progressFooter;
                }
                onProgressStop: pop(progres)
            }
        }
    
        Item {
            id: status
            Text {
                text: "Status: "+backend.status
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
        }
    
        Page {
            id: progres
            anchors.fill: parent
            header: Text {
                id: pHeaderText
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
    
            footer: Text {
                id: pFooterText
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
    
            ProgressBar {
                id: bar
                value: 0
                from: 0
                to: 100
            }
    
            Connections {
                target: backend
                onProgressChanged: bar.value=backend.progressValue
            }
        }
    
        Component.onCompleted: {
       //not important here
        }
    }
    

    For more information please re-read.

    Kind Regards,
    Artur

    J.HilkJ 1 Reply Last reply
    1
    • artwawA artwaw

      Good afternoon.
      I decided to dive into QML a bit.

      I have a C++ backend that is properly communicating with the QML frontend. It all works just fine but one problem I can't figure out.

      The idea is that the application has two screens available:

      • the main screen, which is a touch screen - on it runs a stack view with controls and such (I started to code it, it runs just fine).
      • the "display screen", where is just one fullscreen window with data display (again, I have that coded and works just fine).

      Problem is that I would like to join those two in a single program. From the documentation I figure, that setting the screen option using Qt.application.screens array values is the way to go but when I set it all the views are on just one screen (array Qt.application.screens has two entries, as expected and both return expected screen sizes). My main.qml file:

      import QtQuick 2.11
      import QtQuick.Window 2.11
      import QtQuick.Controls 2.4
      import QtQuick.Controls.Material 2.3
      import QtQuick.VirtualKeyboard 2.3
      import BackEnd 1.0
      
      ApplicationWindow {
          id: appwindow
          visible: true
          screen: Qt.application.screens[1]
          width: screen.width
          height: screen.height
          title: qsTr("Large")
      
          BackEnd {
              id: backend
          }
      
          Window {
              id: mainwindow
              screen: Qt.application.screens[0]
              width: screen.width
              height: screen.height
              visible: true
          }
      
          header: Text {
              Text {
                  text: "Control panel"
                  horizontalAlignment: Text.AlignHCenter
                  verticalAlignment: Text.AlignVCenter
              }
          }
      
          footer: status
      
          StackView {
              id: cfg
              visible: true
              anchors.fill: parent
              initialItem: ConfigWindow
      
              Connections {
                  target: backend
                  onProgressStart: {
                      push(progres);
                      pHeaderText.text=backend.progressHeader;
                      pFooterText.text=backend.progressFooter;
                  }
                  onProgressStop: pop(progres)
              }
          }
      
          Item {
              id: status
              Text {
                  text: "Status: "+backend.status
                  verticalAlignment: Text.AlignVCenter
                  horizontalAlignment: Text.AlignHCenter
              }
          }
      
          Page {
              id: progres
              anchors.fill: parent
              header: Text {
                  id: pHeaderText
                  verticalAlignment: Text.AlignVCenter
                  horizontalAlignment: Text.AlignHCenter
              }
      
              footer: Text {
                  id: pFooterText
                  verticalAlignment: Text.AlignVCenter
                  horizontalAlignment: Text.AlignHCenter
              }
      
              ProgressBar {
                  id: bar
                  value: 0
                  from: 0
                  to: 100
              }
      
              Connections {
                  target: backend
                  onProgressChanged: bar.value=backend.progressValue
              }
          }
      
          Component.onCompleted: {
         //not important here
          }
      }
      
      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #2

      @artwaw what platform do you target ?

      I assume you're using a version of Qt 5.11 (according to the imports)

      I tried the following:

      import QtQuick 2.12
      import QtQuick.Window 2.12
      import QtQuick.Controls 2.12
      
      ApplicationWindow {
          id: appWindow
      
          screen: Qt.application.screens[1]
          visible: true
          width: 400
          height: 100
      
          Window {
                  id: mainwindow
                  screen: Qt.application.screens[0]
                  width: screen.width
                  height: screen.height
                  visible: true
              }
      }
      

      on macOS (BigSur) with Qt 5.12.6 and I get both windows on different screens, one "full screen" and one not, like expected


      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      artwawA 2 Replies Last reply
      1
      • J.HilkJ J.Hilk

        @artwaw what platform do you target ?

        I assume you're using a version of Qt 5.11 (according to the imports)

        I tried the following:

        import QtQuick 2.12
        import QtQuick.Window 2.12
        import QtQuick.Controls 2.12
        
        ApplicationWindow {
            id: appWindow
        
            screen: Qt.application.screens[1]
            visible: true
            width: 400
            height: 100
        
            Window {
                    id: mainwindow
                    screen: Qt.application.screens[0]
                    width: screen.width
                    height: screen.height
                    visible: true
                }
        }
        

        on macOS (BigSur) with Qt 5.12.6 and I get both windows on different screens, one "full screen" and one not, like expected

        artwawA Offline
        artwawA Offline
        artwaw
        wrote on last edited by
        #3

        @J-Hilk Hi,
        yes, I forgot to add platform... It is indeed 5.11, Raspberry Pi. I see the difference, will try it out later today and let you know the outcome.

        Thanks a lot!

        For more information please re-read.

        Kind Regards,
        Artur

        1 Reply Last reply
        0
        • J.HilkJ J.Hilk

          @artwaw what platform do you target ?

          I assume you're using a version of Qt 5.11 (according to the imports)

          I tried the following:

          import QtQuick 2.12
          import QtQuick.Window 2.12
          import QtQuick.Controls 2.12
          
          ApplicationWindow {
              id: appWindow
          
              screen: Qt.application.screens[1]
              visible: true
              width: 400
              height: 100
          
              Window {
                      id: mainwindow
                      screen: Qt.application.screens[0]
                      width: screen.width
                      height: screen.height
                      visible: true
                  }
          }
          

          on macOS (BigSur) with Qt 5.12.6 and I get both windows on different screens, one "full screen" and one not, like expected

          artwawA Offline
          artwawA Offline
          artwaw
          wrote on last edited by
          #4

          @J-Hilk no joy. I don't understand why.
          I think I'll try do do it with QtWidgets instead - less of a look I'd prefer but I feel more confident there.

          For more information please re-read.

          Kind Regards,
          Artur

          J.HilkJ 1 Reply Last reply
          0
          • artwawA artwaw

            @J-Hilk no joy. I don't understand why.
            I think I'll try do do it with QtWidgets instead - less of a look I'd prefer but I feel more confident there.

            J.HilkJ Offline
            J.HilkJ Offline
            J.Hilk
            Moderators
            wrote on last edited by
            #5

            @artwaw you could try 5.12 maybe its a bug, and its fixed in this later Version ?


            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            artwawA 1 Reply Last reply
            0
            • J.HilkJ J.Hilk

              @artwaw you could try 5.12 maybe its a bug, and its fixed in this later Version ?

              artwawA Offline
              artwawA Offline
              artwaw
              wrote on last edited by
              #6

              @J-Hilk Unfortunately I can not - Raspi comes with 5.11. I tried to compile from source and it does compile however make install throws some errors about non-existing files in the build tree. I'll close this topic and try Qt Widgets instead...

              For more information please re-read.

              Kind Regards,
              Artur

              1 Reply Last reply
              0
              • GrecKoG Offline
                GrecKoG Offline
                GrecKo
                Qt Champions 2018
                wrote on last edited by
                #7

                Try using a QtObject as a root object and 2 child Window/ApplicationWindow in it.

                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