Hi everyone!
Now I decided to port some of my apps as clock face or as application. This exercise force me to discover some of the Fitbit API. And I had to fight with th eImage . So I wanted to share with what I discovered.
1) Requirements
2) The code
to download the image from internet i use obviously the fecth function. As I download several images in an application i use it as a function. But I use fectch in which i Manage the Header . as I am a Lazy Person I copy pasted a Header from Mozilla My Header is an example: feel free to modify it regarding your needs
var my/Headers = new Headers({
« Accept » : « */* »,
« Accept-Encoding » : « gzip, deflate »,
« Accept-Language »: »fr »,
// »Content-Type » : « application/json »,
« User-Agent » : « Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) FitbitOSSimulator/0.8.2 Chrome/66.0.3359.181 Electron/3.0.2 Safari/537.36 »
});
var myInit = { method: ‘GET’,
headers: myHeaders
};
Now In my function I download my png picture and then I convert it either in jpg or in txi if you wonder that the differences are you can read this article
function save( filename,srcImage)
{// Destination filename
let destFilename = filename+ ».png »// Fetch the image from the internet
fetch(srcImage,myInit).then(response => response.arrayBuffer())
.then(buffer => Image.from(buffer, « image/png »))
.then(image =>
image.export(« image/jpeg », {
// image.export(« image/vnd.fitbit.txi »,{
background: « #FFFFFF »,
quality: _quality //only in case of jpeg. to be removed for .txi
})
)
.then(buffer => outbox.enqueue(`${nomfichier}.jpg`, buffer))}
now I have to warn. TXI file works only if you do not try to resize it. If you try to resize it in your svg, if will fail. If you develop for Ionic, use the lowest quality of jpg image if it is a big one. Or it will take more than 5 second to be displayed. and at last, do not rely on simulator: always test on physical device before publishing or you may be surprised.
Obviously I remove the part in which we transfer the saved file to device but youwill find it easily!
Enjoy and do not hesitate to leave remarks!!