Changing background image within settings API

[CESAOCRA]

Hello,

So I have this code within my settings index.jsx which lists the background image options that are selectable. I am struggling to make it functional. When an option is selected at the moment nothing happens. What additional code do I need to include for this?

import img1 from './Fitbit Versa (Classic Digital)-01.png';
import img2 from './Fitbit Versa (Classic Digital)-02.png';

const myIcon = [img1, img2];

return (
      <Page>
        <Section title={<Text bold align="center">Product Status</Text>}>
          <Text align="center">{`${kpayStatusMessage}`}</Text>
          { endTrialVisible && <Toggle settingsKey="kpayPurchase" label="End Trial Now" /> }  
        </Section>
        
        { /*put your own config sections below this line*/ }

          <Section>
          <Select
            label={<Text bold align="center">Select Background Image Colour</Text>}
            
            settingsKey="myBackground"
              options={[
              {name: "Blue", value: 0},
              {name: "White", value: 1}
            ]}
            
           
            renderItem={
              (option) =>
                <TextImageRow
                  label={option.name}
                  icon={myIcon[option.value]}
                />
            }       
       />
      </Section>

      </Page>);

I am still very new at this and have been learning through trial and error. I am a designer more than a coder. So would really appreciate the assistance.

Thanks

[Gondwana]

Do you have companion code that catches changes to myBackground and sends them to the watch, and code on the watch that catches those messages/files and changes the SVG?

[CESAOCRA]

Not currently. I was unsure how to go about this. Is there an example of this somewhere that may help me?

[Gondwana]

Probably here. You'll need to adapt heavily.

[CESAOCRA]

I have tried to find something which I can adapt but I can't seem to find anything that has similar functionality.

Although this might be because I lack the understanding to adapt the code enough to get it to function the way I require.

This is what I have tried to put together using the guides. Am I along the right lines at all?

app

let background = document.getElementById("background");

messaging.peerSocket.addEventListener("message", (evt) => {
  if (evt && evt.data && evt.data.key === "myBackground") {
    background.href = evt.data.value;
  }
});

companion

// Settings have been changed
settingsStorage.addEventListener("change", (evt) => {
  sendValue(evt.key, evt.newValue);
});

// Settings were changed while the companion was not running
if (companion.launchReasons.settingsChanged) {
  // Send the value of the setting
  sendValue(myBackground, settingsStorage.getItem(myBackground));
}

function sendValue(key, val) {
  if (val) {
    sendSettingData({
      key: key,
      value: JSON.parse(val)
    });
  }
}
function sendSettingData(data) {
  // If we have a MessageSocket, send the data to the device
  if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
    messaging.peerSocket.send(data);
  } else {
    console.log("No peerSocket connection");
  }
}

index.view

<image id="background" class="background" x="0" y="0" width="100%" height="100%" href="Fitbit Versa (Classic Digital)-01.png" />

settings

import img1 from './Fitbit Versa (Classic Digital)-01.png';
import img2 from './Fitbit Versa (Classic Digital)-02.png';

const myIcon = [img1, img2];

<Section>
          <Select
            label={<Text bold align="center">Select Background Image Colour</Text>}
            
            settingsKey="myBackground"
              options={[
              {name: "Blue", value: 0},
              {name: "White", value: 1}
            ]}
            
           
            renderItem={
              (option) =>
                <TextImageRow
                  label={option.name}
                  icon={myIcon[option.value]}
                />
            }       
       />
      </Section>

[Gondwana]

I think that's got to be very close. Assuming you're not seeing any errors, I'd urge you to sprinkle your code with console.log(...) lines so you can see if the message is being sent and received, and see the value of variables.

I worry that the message data may be 0 or 1, since those are the setting values. Assigning background.href to those values isn't what you want. It would be easily fixed, but before attempting to do so, use console.log() to see if this guess is on the right track.

[CESAOCRA]

I receive these two errors in the console when running the simulator.

[20:03:17]Error 2 Invalid path './resources/.png'

[20:03:18]ReferenceError: companion is not defined

• ? at companion/index.js:16,5

[CESAOCRA]

[Gondwana]

I'd start at the start. Why is your companion/index.js trying to access a variable called 'companion'?

[MarioDings]

I see "import img1 from...." in settings/index.jsx.

Wher do you think the image is going to be seen?

[CESAOCRA]

img1 in the settings/index.jsx will be displayed within the settings as the icon which is used to identify which background image to change to.

This all displays correctly in the setting area. I just haven't figured out how to get functionality to work so that when to option is selected the background is changed to what is selected.