Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

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

    QML and Qt Quick
    5
    14
    13150
    Loading More Posts
    • 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.
    • R
      Rohn last edited by 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?

      1 Reply Last reply Reply Quote 0
      • SGaist
        SGaist Lifetime Qt Champion last edited by

        Hi and welcome to devnet,

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

        Interested in AI ? www.idiap.ch
        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

        1 Reply Last reply Reply Quote 0
        • KillerSmath
          KillerSmath last edited by

          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

          @Computer Science Student - Brazil
          Web Developer and Researcher
          “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

          R 1 Reply Last reply Reply Quote 0
          • R
            Rohn @KillerSmath last edited by

            @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 1 Reply Last reply Reply Quote 0
            • KillerSmath
              KillerSmath @Rohn last edited by 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

              @Computer Science Student - Brazil
              Web Developer and Researcher
              “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

              R 1 Reply Last reply Reply Quote 4
              • R
                Rohn last edited by

                thank u for this example

                1 Reply Last reply Reply Quote 0
                • R
                  Rohn @KillerSmath last edited by

                  @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 1 Reply Last reply Reply Quote 0
                  • KillerSmath
                    KillerSmath @Rohn last edited by KillerSmath

                    @Rohn You can create an animation using Y axis

                    >> Read More

                    • Animation QML Documentation
                    • ScriptAction
                    • NumberAnimation

                    @Computer Science Student - Brazil
                    Web Developer and Researcher
                    “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

                    R 1 Reply Last reply Reply Quote 2
                    • R
                      Rohn @KillerSmath last edited by

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

                      J.Hilk 1 Reply Last reply Reply Quote 0
                      • J.Hilk
                        J.Hilk Moderators @Rohn last edited by

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

                        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct

                        Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


                        Q: What's that?
                        A: It's blue light.
                        Q: What does it do?
                        A: It turns blue.

                        R 1 Reply Last reply Reply Quote 0
                        • KillerSmath
                          KillerSmath last edited by

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

                          @Computer Science Student - Brazil
                          Web Developer and Researcher
                          “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

                          R 1 Reply Last reply Reply Quote 0
                          • R
                            Rohn @J.Hilk last edited by

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

                            1 Reply Last reply Reply Quote 0
                            • R
                              Rohn @KillerSmath last edited by

                              @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

                              1 Reply Last reply Reply Quote 0
                              • H
                                h00bs last edited by

                                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.

                                Developer at Felgo - https://felgo.com/qt

                                Develop mobile Apps for iOS & Android with Qt
                                Develop Games with Qt

                                Felgo is an official Qt Technology Partner

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post