console.log() to TextArea

tacdin

Hi, I wrote a code that opens csv files with FileDialog and converts them to JSON. I sum the values I want for each TimeStamp in the CSV file and print them to the console. In the function openFile() you can see the values I send to the console. However, I cannot print the values I have printed on the console to a TextArea or Label. I would be glad if you can help with this.

import QtQuick 2.6
import QtQuick.Dialogs 1.2
import QtQuick.Controls 1.5
import QtQuick 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Demo App")


    function getControl(){
        return {

            data: null,
            getTotalBataryCount:()=>{
                let battery = 0;
                for(let i=0;i<this.data.length;i++){
                    battery += ((this.data[i]["battery0.mahConsumed"]!="--.--")?parseFloat(this.data[i]["battery0.mahConsumed"]):0);
                }
                return battery;
            },
            getAltitudeCountHigh:()=>{
                let amslHigh = 0;
                for(let i=0;i<this.data.length;i++){
                    if((this.data[i]["altitudeAMSL"]>amslHigh)){
                        amslHigh = this.data[i]["altitudeAMSL"];
                    }
                }
                return amslHigh;
            },

            getTotalFlighttime : ()=> {
                let flighttime= 0;
                for(let i=0; i<this.data.length;i++){
                flighttime += ((this.data[i]["flightTime"]!= "00:00:00")?parseFloat(this.data[i]["flightTime"]):0);

                }
                    return flighttime;


            },

        };
    }

    function openFile(fileUrl){
        return new Promise((resolve,reject)=>{
           var parser = [];
           if (fileUrl.toString())
               parser = csvJSON
           if (parser) {
               var request = new XMLHttpRequest()
               request.open('GET', fileUrl)
               request.onreadystatechange = function(event) {
                   if (request.readyState === XMLHttpRequest.DONE) {
                       let controlObject = getControl();
                       controlObject.data = parser(request.responseText);
                            console.log(controlObject.getTotalBataryCount());
                            console.log(controlObject.getAltitudeCountHigh());
                            console.log(controlObject.getTotalFlighttime());
                       resolve(data);
                   }
               }
               request.send()

           }

           reject(false);
        });
    }




    function saveFile(fileUrl, text) {
        var request = new XMLHttpRequest();
        request.open("PUT", fileUrl, false);
        request.send(text);
        return request.status;
    }

    function csvJSON(csvText) {
        let lines = [];
        const linesArray = csvText.split('\n');

        linesArray.forEach((e, any) => {
            const row = e.replace(/[\s]+[,]+|[,]+[\s]+/g, ',').trim();
            lines.push(row);
        });

        lines.splice(lines.length - 1, 1);
        const result = [];
        const headers = lines[0].split(",");

        for (let i = 1; i < lines.length; i++) {

            const obj = {};
            const currentline = lines[i].split(",");

            for (let j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j];
            }
            result.push(obj);


//            result.foreach(item=>{
//                console.log("TimeStamp",item.Timestamp);
//            })
            // This is available in all editors.
        }


        return result;

      }


    FileDialog {
        id: openFileDialog
        nameFilters: [ "All files (*)"]
        onAccepted:  openFile(openFileDialog.fileUrl)

    }

    FileDialog {
        id: saveFileDialog
        selectExisting: false
        nameFilters: ["Text files (*.txt)", "All files (*)"]
        onAccepted: saveFile(saveFileDialog.fileUrl, textEdit.text)
    }

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: openFileDialog.open()
            }
            MenuItem {
                text: qsTr("&Save")
                onTriggered: saveFileDialog.open()
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }



    ColumnLayout {
        visible:true
        spacing: 4

             Rectangle{
             id: flighttimerect
             width: 100
             height:100
             Layout.alignment: Qt.AlignCenter
             color: "grey"
                    TextArea{
                     id: flighttimerect1
                     textColor: "black"
                     text: "deneme"
                    }

             }

             Rectangle {
             id: batteryconsumptrect
             width:100
             height:100
             Layout.alignment: Qt.AlignHCenter
             color: "grey"

                    TextArea{
                    id:batteryconsumptvalue
                    text: "test"
                    }

             }

            Rectangle {
            id: flightdistance
            width:100
            height:100
            Layout.alignment: Qt.AlignCenter
            color: "grey"
                    TextArea{
                    id:distancetext
                    text:  ""
                    }

            }

            Rectangle {
            id: altituderect
            width:100
            height:100
            Layout.alignment: Qt.AlignCenter
            color: "grey"
                        TextArea{
                        id:altitudetext
                        text: ""
                        }

            }


    }


}

Bob64

You need to construct a string containing the information you want (the information you currently output with console.log) and assign to the the TextArea's text property.

What have you tried so far?

tacdin

Even though I created the array, I couldn't access the array elements in Text. @Bob64

Bob64

@tacdin Can you show what you were trying to do?

tacdin

@Bob64

 if (request.readyState === XMLHttpRequest.DONE) {
                       let controlObject = getControl();
                       controlObject.data = parser(request.responseText);
                       let items= []
                       items.push(controlObject.getTotalBataryCount(), controlObject.getAltitudeCountHigh(), controlObject.getTotalFlighttime())
                             console.log("test", items)
                            console.log(controlObject.getTotalBataryCount());
                            console.log(controlObject.getAltitudeCountHigh());
                            console.log(controlObject.getTotalFlighttime());
                       resolve(data);
                   }

Frankly I don't know how to access an array and array elements inside the function for QML object. I would be glad if you taught me this.

Bob64

@tacdin Are you wanting to display the data in some sort of list? You probably need to look at ListView and use the data to populate a ListModel.

tacdin

@Bob64 Yes it can be a list, or it can also be a rectangle (on a textarea) in a columnlayout. My problem is that I don't know how to display the elements in an array defined in the function in the Text area. If I can find an example, I can try from there.

Bob64

@tacdin OK, here's a basic example of ListView and ListModel. Note that I have just copied your layout code for what is shown in the list.

The import version numbers are correct for 5.9.6 which is what I use at the moment. You may want to adjust for more modern Qt versions.

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel {
        id: myModel

        ListElement {
            flightTime: "10.0"
            battConsump: "5"
            dist: "500"
            altitude: "10000"
        }

    }
    
    ListView {
        width: 150
        height: 600

        model: myModel

        delegate: ColumnLayout {
            visible:true
            spacing: 4

            Rectangle{
                id: flighttimerect
                width: 100
                height:100
                Layout.alignment: Qt.AlignCenter
                color: "grey"
                TextArea{
                    id: flighttimerect1
                    color: "black"
                    text: flightTime
                }

            }

            Rectangle {
                id: batteryconsumptrect
                width:100
                height:100
                Layout.alignment: Qt.AlignHCenter
                color: "grey"

                TextArea{
                    id:batteryconsumptvalue
                    text: battConsump
                }
            }

            Rectangle {
                id: flightdistance
                width:100
                height:100
                Layout.alignment: Qt.AlignCenter
                color: "grey"
                TextArea{
                    id:distancetext
                    text:  dist
                }
            }

            Rectangle {
                id: altituderect
                width:100
                height:100
                Layout.alignment: Qt.AlignCenter
                color: "grey"
                TextArea{
                    id:altitudetext
                    text: altitude
                }
            }
        }
    }
}

Here the model just contains one item. If I added another item to the model it would show as another item group in the list view.

This is just a hard-coded model to get going with. I recommend that you use this approach to get started with your UI. You want to separate how you obtain your data from how you display it. The model-view split is a good way to achieve this.

As for tying this to your actual data, as an alternative to hard-coding ListElements in your model, it is possible to programmatically append to a model. So you might declare an empty model and then have a function that pushes data into it:

        ListModel {
            id: myModel
        }
        ....

        function updateModel(controlObject) {
            myModel.append({"flightTime": controlObject.getTotalFlightTime().toString(), 
                            "battConsump": controlObject.getTotalBataryCount().toString(),
                            ...etc
                           })
        }

Note that I store strings in the model itself. You could store the numbers and do the string conversion in your ListModel delegate. It's up to you.

tacdin

@Bob64

Thanks for your suggestion. I think I understand. I tried as you said but got an error. I can't figure out what I missed. Thanks a lot for your help.

import QtQuick 2.6
import QtQuick.Dialogs 1.2
import QtQuick.Controls 1.5
import QtQuick 2.12
import QtQuick.Layouts 1.12


ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Demo App")


    function getControl(){
        return {

            data: null,
            getTotalBataryCount:()=>{
                let battery = 0;
                for(let i=0;i<this.data.length;i++){
                    battery += ((this.data[i]["battery0.mahConsumed"]!="--.--")?parseFloat(this.data[i]["battery0.mahConsumed"]):0);
                }
                return battery;
            },
            getAltitudeCountHigh:()=>{
                let amslHigh = 0;
                for(let i=0;i<this.data.length;i++){
                    if((this.data[i]["altitudeAMSL"]>amslHigh)){
                        amslHigh = this.data[i]["altitudeAMSL"];
                    }
                }
                return amslHigh;
            },

            getTotalFlighttime : ()=> {
                let flighttime= 0;
                for(let i=0; i<this.data.length;i++){
                flighttime += ((this.data[i]["flightTime"]!= "00:00:00")?parseFloat(this.data[i]["flightTime"]):0);

                }
                    return flighttime;


            },

        };
    }

    function openFile(fileUrl, items){
        return new Promise((resolve,reject)=>{
           var parser = [];
           if (fileUrl.toString())
               parser = csvJSON
           if (parser) {
               var request = new XMLHttpRequest()
               request.open('GET', fileUrl)
               request.onreadystatechange = function(event) {
                   if (request.readyState === XMLHttpRequest.DONE) {
                       let controlObject = getControl();
                       controlObject.data = parser(request.responseText);
//                       let items= []
//                       items.push(controlObject.getTotalBataryCount(), controlObject.getAltitudeCountHigh(), controlObject.getTotalFlighttime())
//                             console.log("test", items)

//                            console.log(controlObject.getTotalBataryCount());
//                            console.log(controlObject.getAltitudeCountHigh());
//                            console.log(controlObject.getTotalFlighttime());
                       resolve(data);
                   }

               }
               request.send()

           }

           reject(false);
        });





    }





    ListModel {
            id: myModel
            ListElement {
            flightTime:""
            battConsump:""
            dist:""
            altitude:""

            }

        }

    function updateModel(controlObject) {
        myModel.append({"flightTime": controlObject.getTotalFlightTime().toString(),
                        "battConsump": controlObject.getTotalBataryCount().toString(),

                       })
    }


    ListView {
        width: 150
        height: 600
        anchors.fill: parent
        model: myModel

        delegate: ColumnLayout {
            visible:true
            spacing: 5

            Rectangle{
                id: flighttimerect
                width: 100
                height:100
                Layout.alignment: Qt.AlignCenter
                color: "yellow"
                Label{
                    anchors.centerIn: parent
                    id: flighttimerect1
                    text: flightTime
                    color: "black"
                }

            }

            Rectangle {
                id: batteryconsumptrect
                width:100
                height:100
                Layout.alignment: Qt.AlignHCenter
                color: "yellow"

                Label{
                    anchors.centerIn: parent
                    id:batteryconsumptvalue
                    text: battConsump
                    color: "black"
                }
            }

            Rectangle {
                id: flightdistance
                width:100
                height:100
                Layout.alignment: Qt.AlignCenter
                color: "yellow"
                Label{
                    anchors.centerIn: parent
                    id:distancetext
                    text:  dist
                     color: "black"
                }
            }

            Rectangle {
                id: altituderect
                width:100
                height:100
                Layout.alignment: Qt.AlignCenter
                color: "yellow"
                Label{
                    anchors.centerIn: parent
                    id:altitudetext
                    text: altitude
                     color: "black"
                }
            }
        }
    }




    function saveFile(fileUrl, text) {
        var request = new XMLHttpRequest();
        request.open("PUT", fileUrl, false);
        request.send(text);
        return request.status;
    }

    function csvJSON(csvText) {
        let lines = [];
        const linesArray = csvText.split('\n');

        linesArray.forEach((e, any) => {
            const row = e.replace(/[\s]+[,]+|[,]+[\s]+/g, ',').trim();
            lines.push(row);
        });

        lines.splice(lines.length - 1, 1);
        const result = [];
        const headers = lines[0].split(",");

        for (let i = 1; i < lines.length; i++) {

            const obj = {};
            const currentline = lines[i].split(",");

            for (let j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j];
            }
            result.push(obj);


        }


        return result;

      }




    FileDialog {
        id: openFileDialog
        nameFilters: [ "All files (*)"]
        onAccepted:  openFile(openFileDialog.fileUrl)

    }

    FileDialog {
        id: saveFileDialog
        selectExisting: false
        nameFilters: ["Text files (*.txt)", "All files (*)"]
        onAccepted: saveFile(saveFileDialog.fileUrl, textEdit.text)
    }

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: openFileDialog.open()
            }
            MenuItem {
                text: qsTr("&Save")
                onTriggered: saveFileDialog.open()
            }
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }




}

Bob64

@tacdin what is the error?

In any case, I can't see where you call updateModel. You need to do this from somewhere to populate the model from your data.

tacdin

@Bob64 Sorry, just noticed your answer, sorry for that. I think I solved the problem thanks to your help. However, I ran into other problems. I opened another post for this. Thank you for your help. I can mark this post as solved. :)

New Questions