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 missingqml code -
import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.4Window {
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#f0f0f0Aline 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 elementicon.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
-
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 missingqml code -
import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.4Window {
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#f0f0f0Aline 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 elementicon.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
-
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)
inText { // 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
the warning is misleading as this shows the contents of the text file
id2.icon2 = String(response)
inText { // 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 }
@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...
-
@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...
-
@mtaylor
IIRCImage
components 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#f0f0f0Awhy is it adding the quote marks %22 ? and the #f0f0f0A at the end of the path?
@mtaylor
I assume this is due toXMLHttpRequest
and the resultingxhr.responseText
I haven't used that myself, to my experience is limited.Seems like String() stringy fies the quotation marks and the last part
#f0f0f0A
looks like a (text?)color -
@mtaylor
I assume this is due toXMLHttpRequest
and the resultingxhr.responseText
I haven't used that myself, to my experience is limited.Seems like String() stringy fies the quotation marks and the last part
#f0f0f0A
looks 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.qmlas i said the two other xml functions work fine its just the image part...