Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML - Load image source from a text file w/ timer



  • So i have a weather app that reads the icon path from a text file updated from a JS weather script, using a variable to update the qml image...

    when i run it the text part shows the image path, but the image icon does not appear?
    here is the code below, what am i missing

    qml code -
    

    import QtQuick 2.11
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.4

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("FILE I/O TEST")
    color: "steelblue"

    function readIconFile(fileUrl){     // read from text file an icon image path
       var xhr = new XMLHttpRequest;
       var icon0=""
       var icon1="01d.png"
       var icon2="01d.png"
       xhr.open("GET", fileUrl); // set Method and File
       xhr.onreadystatechange = function () {
           if(xhr.readyState === XMLHttpRequest.DONE){ // if request_status == DONE
               var response = xhr.responseText;
    
               type.icon1  = String(response)
               id2.icon2 = String(response)
           }
       }
       xhr.send(); // begin the request
    

    }

    Image {
    id:type
    asynchronous : true
    property string icon1:readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
    // property string icon1:"../icons/50n.png"
    // source:"/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/icons//01n.png"
    // source:"../icons/01n.png" //testing
    source:icon1
    cache: false
    }

    Text { // for testing to display the image path, qmlscene shows the path read from the text file...
    id:id2
    y:80
    property string icon2:readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
    text:icon2
    color:"white"
    font.pointSize: 14
    }

    Timer{
    id: readIcon
    interval: 10000
    running: true
    repeat: true
    onTriggered: readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt");
    }

    }

    // end of qml code //
    

    using qmllivebench i get these warnings

    /run/media/hammer/Data/projects/QML/weather/read.qml:58: Unable to assign [undefined] to QString
    /run/media/hammer/Data/projects/QML/weather/read.qml:69: Unable to assign [undefined] to QString
    /run/media/hammer/Data/projects/QML/weather/read.qml:55: QML Image: Cannot open: file:///run/media/hammer/Data/projects/QML/weather/%2201d.png%22#f0f0f0A

    line 58 is -> property string icon1:readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
    line 69 is -> property string icon2:readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
    line 55 is the Image element

    icon.txt is one line file with the path to the image
    "../icons/04n.png"

    notice the end of the path in the warning, where is it getting #f0f0f0A and it also adds the quote marks...?
    but when i run it the text part shows the image path, but the image icon does not appear?

    what am i missing here?

    thanks


  • Moderators

    hi @mtaylor

    you define a string property here:

    property string icon1:readIconFile(...)

    but readIconFile does not return a string, or any variable at all -> Unable to assign undefined to QString



  • @J-Hilk
    the warning is misleading as this shows the contents of the text file
    id2.icon2 = String(response)
    in

    Text { // for testing to display the image path, qmlscene shows the path read from the text file...
    id:id2
    y:80
    property string icon2:readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
    text:icon2
    color:"white"
    font.pointSize: 14
    }
    

  • Moderators

    @mtaylor
    it's not miss leading, its a clear error.

    You try to property-bind a void function to a string property, and during that function call you assign a value to the same string.

    Thats why you actually see something

    use this:

    Text { // for testing to display the image path, qmlscene shows the path read from the text file...
            id:id2
            y:80
            property string icon2:""
            Component.onCompleted: readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
            text:icon2
            color:"white"
            font.pointSize: 14
        }
    

    same behavior, no errors/warnings



  • @mtaylor said in QML - Load image source from a text file w/ timer:

    Image {
    id:type
    asynchronous : true
    property string icon1:readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
    // property string icon1:"../icons/50n.png"
    // source:"/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/icons//01n.png"
    // source:"../icons/01n.png" //testing
    source:icon1
    cache: false
    }

    ok that got rid of the warnings but the image part does not work?

    Image {
           id:type
           asynchronous : true
          //property string icon1:readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
          property string icon1:"../icons/50n.png"
          // source:"/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/icons//01n.png"
          // source:"../icons/01n.png"
          Component.onCompleted:readIconFile("/home/hammer/.local/share/plasma/look-and-feel/DigiTech/contents/code/icon.txt")
          source:icon1
          cache: false
       }
    

    i have two other functions that read different files and they work fine its only the image part that is not working...


  • Moderators

    @mtaylor
    IIRC Imagecomponents needs the proper file url tag to load a file from an absolute/local path

    -> source: "file:///" + icon1



  • @J-Hilk
    nope added that, still no go...
    QML Image: Cannot open: file:///%22../icons/50n.png%22#f0f0f0A

    why is it adding the quote marks %22 ? and the #f0f0f0A at the end of the path?


  • Moderators

    @mtaylor
    I assume this is due to XMLHttpRequest and the resulting xhr.responseText
    I haven't used that myself, to my experience is limited.

    Seems like String() stringy fies the quotation marks and the last part #f0f0f0Alooks like a (text?)color



  • @J-Hilk
    thanks for the help anyway
    here is the complete file https://github.com/txhammer68/Lockscreen/blob/master/weather/read.qml

    as i said the two other xml functions work fine its just the image part...


Log in to reply