Changing Background of Clock Face with phone (Companion / Settings)

[astrorookie]

I'm super stuck on how to make settings changeable via mobile!

This is my code so far:

app/index.js and companion/index.js

const defaultBG = "ggreen.png";
const myclockbg = document.getElementById("myclockbg");

const letterBG = "ACFish.png";
const myletter = document.getElementById("myletter");

// Message is received
messaging.peerSocket.onmessage = evt => {
if (evt.data.key === "changeDefaultBG"){
//change grass bg
defaultBG = JSON.parse(evt.data.newValue).values[0].name;
console.log('default bg: ' + defaultBG);

if(defaultBG == 'Spring and Summer'){
background.href = "ggreen.png";
}
else if(defaultBG == 'Autumn'){
background.href = "gautumn.png";
}
else if(defaultBG == 'Winter'){
background.href = "gwinter.png";
}
else background.href = "ggreen.png";
}
}

if (evt.data.key === "changeletterBG"){
//change the letter background.
defaultletterBG = JSON.parse(evt.data.newValue).values[0].name;
console.log('default letter bg: ' + defaultletterBG);

if(defaultBG == 'Fish'){
background.href = "ACFish.png";
}
else if(defaultBG == 'Ribbon'){
background.href = "ACRibbon.png";
}
else if(defaultBG == 'Cloud'){
background.href = "ACCloud.png";
}
else if(defaultBG == 'Cherry Blossom'){
background.href = "ACCherry.png";
}
else background.href = "ACFish.png";
}
}
// Message socket opens
messaging.peerSocket.onopen = () => {
console.log("App Socket Open");
};

// Message socket closes
messaging.peerSocket.onclose = () => {
console.log("App Socket Closed");
};

settings.index.js

import Green from '../resources/ggreen.png';
import Autumn from '../resources/gautumn.png';
import Winter from '../resources/gwinter.png';

import Fish from '../resources/ACFish.png';
import Ribbon from '../resources/ACRibbon.png';
import Cloud from '../resources/ACCloud.png';
import Cherry from '../resources/ACCherry.png';

const defaultBGImages = [Green, Autumn, Winter];
const defaulyLetterImages = [Fish, Ribbon, Cloud, Cherry];

function mySettings(props) {
return (
<Page>
<Section
<Select
label="Default background"
settingsKey="changeDefaultBG"
options={[
{name: "Spring and Summer", value: 0},
{name: "Autumn", value: 1},
{name : "Winter", value: 2},

]}
renderItem={
(option) =>
<TextImageRow
label={option.name}
icon={defaultImages[option.value]}
/>
}



</Section>
<Section
title={<Text bold align="center">Stats page Settings</Text>}>

<Select
label="Letter Style"
settingsKey="changemyletter"
options={[
{name: "Fish", value: 0},
{name: "Ribbon", value: 1},
{name : "Cloud", value: 2},
{name : "Cherry", value: 3}
]}
renderItem={
(option) =>
<TextImageRow
label={option.name}
icon={letterImages[option.value]}
/>
}
/>
</Section>
</Page>
);
}

registerSettingsPage(mySettings);

It just says build failed! I also have no idea what to put in index.gui, I currently have

<image href="gwinter.png"/>
<image href="ACRibbon.png"/>

which obviously would not change with the settings as they are static. Would I have

<image href="DefaultBG" />

<image href="LetterBG"/>

Any help would be much appreciated! Thank you 🙂

[Gondwana]

There should be more error info than just 'build failed'. That could help. Also, you'll need more than that to have a valid .gui file.

[astrorookie]

don't worry I've got more than that for my .GUI file! I'll have a look at the notes for the build failure — from what I remember, it said the error was in app/index.js

[astrorookie]

This is my build error:

TS1128: Declaration or statement expected.

Error: Failed to compile /project/app/index.js

Details: id: /project/app/index.js hook: transform code: PLUGIN_ERROR watchFiles: /project/app/index.js

[Gondwana · Accepted solution]

Have you declared all variables, such as defaultletterBG and background?

The error message should provide a line number (which is sometimes a bit wrong).

[astrorookie]

It didn't give me a line number, but I fixed it!!

What I want to do is have an option in the settings to change the background based on three options.

I now have it so I can open the settings and pick between the three options, but it doesn't actually change anything.
In the mean time, it now only shows one screen, with none of the date and time stuff I had working before. 

I haven't changed any of the code for the time variables, and the only thing I have changed in index.gui is

<image href="ACclock.png"/> <- this, which was just a reference to one image, to:

<image id="imageBackground" />  <-which should now change due to my settings.

Honestly I am just totally lost on what needs to go in the companion, I can't find anything that uses the settings <select> function and then has code in a companion.

[astrorookie]

it doesn't give me an error message at all now! 😅

[astrorookie]

Okay so where I'm at so far:

My code works fine on the simulator and my fitbit before I create a settings and companion folder/index. It has two screens, shows the time and date and heartrate etc.

Then I create a settings index, and a companion index. I made a menu for the settings, I add some copy-and-pasted stuff into the companion. In my app/index.js I add a messaging bit to get the info from the settings changed on phone.

When I then sideload that onto my fitbit, it builds fine. The setting options come up on my phone. HOWEVER, the time, date, second page, heart rate and steps all vanishes... AND the settings donj't actually change anything.

I am just confused as to how it stops the time from appearing honestly. I didn't change any of the time settings in style or index.gui :s