Reading text file in qml file and display it in the scrolling manner for some time



  • 1. How to read the text file in qml file?
    2.How to display auto scrolling text file for some time using timer on the window after launching application?


  • Lifetime Qt Champion

    Hi and welcome to devnet,

    1. First hit of google search gives this nice example
    2. This marquee example looks like a good start.


  • 1. I think you can read a text file in a qml file of 2 ways:

    • 1.1. Creating a Custom Cpp Class and expose it to qml app using QmlRegisterType.
    • 1.2. Using XMLHttpRequest API in a javascript function.
     function readTextFile(fileUrl){
        var xhr = new XMLHttpRequest;
        xhr.open("GET", fileUrl); // set Method and File
        xhr.onreadystatechange = function () {
            if(xhr.readyState === XMLHttpRequest.DONE){ // if request_status == DONE
                var response = xhr.responseText;
    
                console.log(response);
               // Your Code
            }
        }
        xhr.send(); // begin the request
    }
    

    2. I don't understand exactly what you wanna do, can you rephrase ?

    Read more:
    http://doc.qt.io/qt-5/qtqml-cppintegration-definetypes.html
    https://stackoverflow.com/questions/8894531/reading-a-line-from-a-txt-or-csv-file-in-qml-qt-quick



  • @KillerSmath I want to read a text file into qml file ......And want to display that text file on window in auto scrolling manner after launching the application launch .....Is there anyway to implement such layout?



  • @Rohn said in Reading text file in qml file and display it in the scrolling manner for some time:

    @KillerSmath I want to read a text file into qml file ......And want to display that text file on window in auto scrolling manner after launching the application launch .....Is there anyway to implement such layout?

    You can use TextArea element from Qt to set a scrollable area or you can implement a element for yourself.
    Below is an example using Qt 5.11

    >> main.qml

    import QtQuick 2.11
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.4
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Marquee Example")
        color: "steelblue"
    
        function readTextFile(fileUrl){
           var xhr = new XMLHttpRequest;
           xhr.open("GET", fileUrl); // set Method and File
           xhr.onreadystatechange = function () {
               if(xhr.readyState === XMLHttpRequest.DONE){ // if request_status == DONE
                   var response = xhr.responseText;
    
                   scrollableBox.text = response
               }
           }
           xhr.send(); // begin the request
       }
    
        ScrollableBox{
            id: scrollableBox
            width: 150
            height: 50
            anchors.centerIn: parent
        }
    
        Button{
            id: readButton
            width: 150
            height: 35
            anchors.top: scrollableBox.bottom
            anchors.topMargin: 5
            anchors.horizontalCenter: parent.horizontalCenter
    
            text: "Read File"
            font.pixelSize: 12
    
            background: Rectangle{
                width: readButton.width
                height: readButton.height
                color: readButton.hovered ? "darkgreen" : "lightgreen"
                radius: 5
            }
    
            onClicked: {scrollableBox.text = ""; readStarter.running = true}
        }
    
        Timer{
            id: readStarter
            interval: 1000
            running: false
            repeat:  false
            onTriggered: readTextFile("file.txt");
        }
    }
    

    >> ScrollableBox.qml

    import QtQuick 2.11
    import QtQuick.Controls 2.4
    
    Rectangle {
        id: scrollableBox
        clip: true
        border.color: "black"
    
        property alias text: content.text // expose text element for external acess
    
        Text {
            id: content
            anchors.left: scrollableBox.left
            anchors.right: scrollableBox.right
            leftPadding: 5
            rightPadding: 12
            topPadding: 3
            bottomPadding: 3
            wrapMode: Text.WrapAnywhere
        }
    
        ScrollBar {
            id: verticalBar
            hoverEnabled: true
            active: hovered || pressed  // just visible when hovered or pressed
            orientation: Qt.Vertical // Vertical
            size: scrollableBox.height / content.implicitHeight // Set Size using implicitHeight of text
            anchors.top: scrollableBox.top
            anchors.right: scrollableBox.right
            anchors.bottom: scrollableBox.bottom
            onPositionChanged: {content.y = -position * content.implicitHeight} // get new position from ScrollBar because ImplicitHeight is not setted in content Inicialization
    
        }
    }
    

    >> file.txt - phase of random site

    he value pi has always been with us. It's a magic number hidden in every circle. If I were to personify Pi, he would be an immortal being, because that's how long this ratio has been with us. If I were to call him by his original name, I would need to be immortal myself to say it just once, because even a giga-zillion digits would not suffice to complete his name. But luckily, he has a nickname: Pi.
    

    >>resource.qrc

    <RCC>
        <qresource prefix="/">
            <file>main.qml</file>
            <file>ScrollableBox.qml</file>
            <file>file.txt</file>
        </qresource>
    </RCC>
    

    References:



  • thank u for this example



  • @KillerSmath Actually I want to auto scroll the text file very smoothly like movie title scrolling . After scrolling the text file up to the end .....application will close automatically.....How to do it?



  • @Rohn You can create an animation using Y axis

    >> Read More



  • @KillerSmath Can you explain it with previous example you have given



  • @Rohn
    To be honest, @KillerSmath has already given you way more than one can expect and what you would need to make this. Any more and he might just as well write the program for you.

    You haven't even posted what you tried yourself so far, told us what is working and where there are issues or something along those lines.

    Why don't you try to combine his/her previous example with the information you'll find in the linked Animation QML Documentation and come back, if you should have problems doing that.

    I'm sure we can help you than further and more.



  • @Rohn
    Below is a simple example of an animation in a rectangle

    Rectangle{
       id: rect
       width: 150
       height: 50
     
       NumberAnimation on y {
          from: 0
          to: 200
          duration: 5000
       } 
    }
    


  • @J.Hilk Yup he has given more than my expectation.



  • @KillerSmath Thank you very much......how to change the direction of animation....Is there anyway to do this?....Didn't find anything in documentation .......Like scrolling text from up to down continuous



  • There is also built-in file I/O available for QML with the V-Play SDK FileUtils. It works cross-platform on desktop, iOS and Android. More info and examples are also in the latest blog post.

    An example would look like this:

    var document = fileUtils.readFile("subfolder/file.txt")
    

    You can also use the FileUtils to open other file types, like PDFs.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.