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

[mtaylor]

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

[J.Hilk]

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

[mtaylor]

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

[J.Hilk]

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

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

[J.Hilk]

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

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

[mtaylor]

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

[J.Hilk]

@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

[mtaylor]

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