The image received from the remote host after displaying on Fitbit Versa disappears from display

[alden8]

Hello.

I am developing the app on SDK 5.0 and testing it in studio on the device Versa 3 and on the physical device Fitbit Versa. I have a problem on the physical device Fitbit Versa, the image disappears after a few seconds. I will describe in order how the image is received in the app and displayed on the screen (points 1 and 2). The problem on the physical device Fitbit Versa in point 3. The problem of implementing the file presence check function to be able to display debug messages about the presence of a file after some time on the physical device screen of the Fitbit Versa in step 4.

1) I retrieve a file in companion (companion/index.js) from a remote host using fetch. If the file is received, I send a message to app (app/index.js) that the file
received (sendVal(data1)) with the file name

let link = 'direct path to file on web host';
destFileName = "qrcode" +new Date().getTime()+".png";
fetch(link).then(function (response) {
  return response.arrayBuffer();
}).then(data => {
	const myFileInfo = data;
    outbox.enqueue(destFileName, myFileInfo).then(ft => { 
	  let data1 = {
        key: "qr_file",
        newValue: destFileName 
      };
      sendVal(data1);      // sending a message to the app that the file has been received  
  }).catch(err => {
    throw new Error(`Failed to queue '${destFileName}'. Error: ${err}`);
  });
}).catch(err => {
  console.error(`Failure: ${err}`);
});

2) In the app (app/index.js), when I get a message about a new file, I display the file (in resources/index.view <image id="ullo_qr" width="78" height="78" />)

messaging.peerSocket.onmessage = evt => {
   let evtd = JSON.stringify(evt); 
   if (evt.data.key === "qr_file" && evt.data.newValue) { // message from companion that the file has been received
    var value = evt.data.newValue;
     qr_file = value;
     let href = `/private/data/${qr_file}`; // file path
     setTimeout(function(){ // waiting for the received file to be saved in /private/data/ before displaying the file in <image id="ullo_qr"/>
     ullo_qr.image = href; 
     }, 5000);      
     
}
};

If I output the file in <image id="ullo_qr"/> (ullo_qr.image = href) without Timeout 5 second, then in 9 out of 10 cases a 'file not found' error appears in the simulator. probably it takes some time for the 'companion' to save the file in /private/data/. File size is less than 1 Kb, but in about 2 out of 10 cases if Timeout is 3 seconds error 'file not found' appears.

3) When testing this app on a real physical Fitbit Sense device, the image appears on the screen but disappears after a few seconds. In the simulator, the image does not disappear from the screen even after 45 minutes of displaying it using the method described in steps 1 and 2 above.

4) I tried checking for a file by using fs.readFileSync in the checkQRfileExist(file) function, which is run via setInterval every 1 second. But after the first execution of checkQRfileExist(file) there is some bug with setInterval and the function is not executed more than once. Nothing is displayed in the simulator's studio console.

let checkQRfileExistInterval = setInterval(() => {}, 1000);

function checkQRfileExist(file){
let filepath = `/private/data/${file}`;
var utf8_read;
var stats = false;
try {
utf8_read = fs.readFileSync(file, "utf-8");
stats = true;
console.log("file is read: ", file);
} catch(e) {
console.log('error: ', e);
  return false;
}
  
  if(stats){
  clearInterval(checkQRfileExistInterval); 
    console.log("clear checkQRfileExistInterval");
     setTimeout(function(){ 
     ullo_qr.image = filepath; 
     }, 3000);
  }
}

messaging.peerSocket.onmessage = evt => {
   let evtd = JSON.stringify(evt); 
   if (evt.data.key === "qr_file" && evt.data.newValue) { // message from companion that the file has been received
    var value = evt.data.newValue;
     qr_file = value;
     clearInterval(checkQRfileExistInterval);
     checkQRfileExistInterval = setInterval(checkQRfileExist(qr_file), 1000);
     
}
};

Please help with these questions and problems:
- How can I understand the reasons why the image disappears after a few seconds on the physical device Fitbit Versa?
- How can I implement a working version of the file check function (point 4)? Why after the first execution of an interval run function is no longer executed?
- Why is the file not immediately available for output and I have to use Timeout before displaying the image on the screen (points 1 and 2)? What can be an alternative to determine if a file is available in /private/data/ in order to display its image on the screen?

[Gondwana · Accepted solution]

I only skimmed, so some/all thoughts may be irrelevant...

What does .image do? Do you mean .href?

I'm not sure the watch is capable of converting .png files; it usually relies on them being converted into .txi. I'm not exactly sure where that normally occurs. For testing purposes, try with .jpg.

Don't try to get the watch to resize images. If you want to display them at 78x78, only sent it images of that size.

<Image> only changes what it displays if its href changes. If you replace the image with another of the same name, the displayed image won't change.

[alden8]

@Gondwana Thank you. I will try the .txi and .jpg formats with the exact size of 78x78

[alden8]

@Gondwana with the .txi format after encoding png->txi not problem with rendering image