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

maxwell31

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?

ODБOï

@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++
        }
    }
}

IntruderExcluder

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++))
    }
}

maxwell31

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.