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

[Rohn]

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?

[SGaist]

Hi and welcome to devnet,

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

[KillerSmath]

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

[Rohn]

@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?

[KillerSmath]

@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:

• Text Qml Documentation
• Scrollbar QML Documentation

[Rohn]

thank u for this example

[Rohn]

@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?

[KillerSmath]

@Rohn You can create an animation using Y axis

>> Read More

• Animation QML Documentation
• ScriptAction
• NumberAnimation

[Rohn]

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

[J.Hilk]

@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.

[KillerSmath]

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

[Rohn]

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

[Rohn]

@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

[h00bs]

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.