Having trouble displaying .jpeg Background for Ionic 348x250 and Versa 300x300.

[diana1d1]

Can't seem to make the .jpeg background I am using display/compatible for the Ionic and Versa.

I read the SDK guide, but am still running into issues.

Both jpegs are in my resources folder called, background~300x300.jpg and background~348x250.jpg

I am getting the following errors,

[2:27:00 PM]Error 60 Invalid path '/Applications/Fitbit OS Simulator.app/Contents/Resources/static/devicesim/mac/higgs.app/Contents/./resou

[2:32:54 PM]Error: Cannot find module 'device'

• t.default at sim-file:/bootstrap:16,44081
• ? at companion.js:2,7

Can you look at my code and let me know what I am doing wrong?

There might be a background color, over it but I am having a difficult time figuring this out.

[diana1d1]

https://github.com/DianaDAchille/animalwatchpractice

[JonFitbit]

The first line of your companion.js needs to be removed.

Then in your index.gui, you just need to replace this:

  <image href="background~384x250.jpg"/>
  <image href="background~300x300.jpg"/>

with

<image href="background.jpg" />

The build process will rename your files so they are only included on the relevant device. So the Ionic build will contain background~348x250.jpg renamed to background.jpg

I hope that helps.

[diana1d1]

Thanks Jon. I made these changes, however am still getting an error while using the Ionic simulator.

[5:45:51 PM]Error 60 Invalid path '/Applications/Fitbit OS Simulator.app/Contents/Resources/static/devicesim/mac/higgs.app/Contents/./resou

[5:45:51 PM]Error: Cannot find module 'device'

• t.default at sim-file:/bootstrap:16,44081
• ? at companion.js:2,7

[JonFitbit]

Sorry, i just realised you're using device code in the companion.

The first 3 lines need to be replaced with this, the peer api for the companion.

import { device } from "peer";
if (!device.screen) device.screen = { width: 348, height: 250 };
console.log(`Dimensions: $‌{device.screen.width}x$‌{device.screen.height}`); 

[diana1d1]

Hi John,

Thanks for all your help with this.

Errors are gone, but the background images still do not appear on the screen.

(Just showing a black background)

[JonFitbit · Accepted solution]

So close!

Your Ionic background image filename is wrong, it needs to be:

background~348x250.jpg

[diana1d1]

Perfect. Thank you for your quick reply John. Fixed!