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. Making a logging Window which automatically scrolls to end and allows to select text
Forum Updated to NodeBB v4.3 + New Features

Making a logging Window which automatically scrolls to end and allows to select text

Scheduled Pinned Locked Moved Solved QML and Qt Quick
4 Posts 3 Posters 2.8k 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.
  • M Offline
    M Offline
    maxwell31
    wrote on 19 Aug 2019, 05:31 last edited by maxwell31
    #1

    Hi,

    The problem is that I want to create a window which is logging something. Updates will probably be every 0.1 to 2 seconds. I thought I do this via making a TextEdit which I put inside a Flickable or ScrollView. The content should be selectable via mouse and copyable to clipboard (which TextEdit already provides). If a new line is added, the view should scroll to the bottom, so that the new line will always be visible.

    I tried the following solution:
    https://stackoverflow.com/questions/23933269/how-do-i-manually-scroll-a-textarea-of-scrollview-qt-quick
    Here, the TextEdit is put inside a Flickable, and ScrollView, and contentY is set automatically. The scrolling works fine, but it seems that placing the TextEdit into a Flickable makes it impossible to select text.

    The other solution I tried was

    ScrollView {
                    id: view
                    anchors.fill: parent
                    wheelEnabled: true
                    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
    
                    TextEdit {
                        id: t
                        focus: true
                        anchors.fill: parent
                        text: root.log
                        readOnly: true
                        font.pointSize: 10
                        font.family: monospaceFont.name
                        selectByMouse: true
                    }
                }
    

    which makes the text selectable, but I would not know how to set the scroll position of the ScrollBar. I tried

    onogChanged: {
           view.ScrollBar.position=1.0
        }
    

    but this would not change the view position.

    So how can this be done?

    O 1 Reply Last reply 21 Aug 2019, 13:19
    0
    • M maxwell31
      19 Aug 2019, 05:31

      Hi,

      The problem is that I want to create a window which is logging something. Updates will probably be every 0.1 to 2 seconds. I thought I do this via making a TextEdit which I put inside a Flickable or ScrollView. The content should be selectable via mouse and copyable to clipboard (which TextEdit already provides). If a new line is added, the view should scroll to the bottom, so that the new line will always be visible.

      I tried the following solution:
      https://stackoverflow.com/questions/23933269/how-do-i-manually-scroll-a-textarea-of-scrollview-qt-quick
      Here, the TextEdit is put inside a Flickable, and ScrollView, and contentY is set automatically. The scrolling works fine, but it seems that placing the TextEdit into a Flickable makes it impossible to select text.

      The other solution I tried was

      ScrollView {
                      id: view
                      anchors.fill: parent
                      wheelEnabled: true
                      ScrollBar.vertical.policy: ScrollBar.AlwaysOn
      
                      TextEdit {
                          id: t
                          focus: true
                          anchors.fill: parent
                          text: root.log
                          readOnly: true
                          font.pointSize: 10
                          font.family: monospaceFont.name
                          selectByMouse: true
                      }
                  }
      

      which makes the text selectable, but I would not know how to set the scroll position of the ScrollBar. I tried

      onogChanged: {
             view.ScrollBar.position=1.0
          }
      

      but this would not change the view position.

      So how can this be done?

      O Offline
      O Offline
      ODБOï
      wrote on 21 Aug 2019, 13:19 last edited by
      #2

      @maxwell31 hi,
      i did it once with ListView

      import QtQuick 2.12
      import QtQuick.Window 2.12
      import QtQuick.Controls 2.12
      
      Window {
          visible: true
          width: 640
          height: 480
          title: qsTr("AutoScroll")
      
          ListModel {
              id: myModel
              ListElement { message: "a message..."; severity: 0 }
          }
      
          Component {
              id: myDelegate
              TextInput {
                  selectByMouse: true
                  text: message + ", " + "severity : " + severity
                  color: severity > 5 ? "red" : "black"
              }
          }
      
          ListView {
              id:lst
              height: parent.height*0.8
              width: parent.width/2
              anchors.verticalCenter: parent.verticalCenter
              model: myModel
              delegate: myDelegate
          }
      
          Button{
              property int msgCount: 0
              onMsgCountChanged: lst.positionViewAtEnd()
              anchors.left: lst.right
              text: "add message"
              onClicked: {
                  myModel.append({message : "new message " + msgCount, severity : Math.round(Math.random()*10)})
                  msgCount++
              }
          }
      }
      
      1 Reply Last reply
      3
      • I Offline
        I Offline
        IntruderExcluder
        wrote on 21 Aug 2019, 17:53 last edited by IntruderExcluder
        #3

        You can use flickable attached property of TextArea. When TextArea attached that way to a flickable it can automatiacally scroll to an end when some text appended to a TextArea. Simple example:

        Window {
            visible: true
            width: 640
            height: 480
            title: qsTr("Hello World")
        
            Flickable {
                anchors.fill: parent
                boundsBehavior: Flickable.StopAtBounds
                ScrollBar.vertical: ScrollBar {}
        
                TextArea.flickable: TextArea {
                    id: area
                }
            }
        
            Timer {
                running: true
                interval: 1000
                repeat: true
                property int iteration: 0
        
                onTriggered: area.append("Line %1".arg(iteration++))
            }
        }
        
        1 Reply Last reply
        3
        • M Offline
          M Offline
          maxwell31
          wrote on 22 Aug 2019, 19:07 last edited by
          #4

          Thanks for your suggestions. I know did the solution using TextArea.flickable and it works as it should. It is strange, that it is not working for TextEdit.

          1 Reply Last reply
          0

          1/4

          19 Aug 2019, 05:31

          • Login

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