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

QML two display problem

Scheduled Pinned Locked Moved Solved QML and Qt Quick
7 Posts 3 Posters 993 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.
  • 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 Online
      J.HilkJ Online
      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 Online
            J.HilkJ Online
            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