Issues trying to use Settings

[WauloK]

I used the sample code on the website to try and change colours on an element for a test.

I got the following error:

[07:05:21]TypeError: Cannot read property 'key' of undefined
settings.settingsStorage.onchange at app://companion/index.js:71
[07:05:21]Error: Java exception was raised during method invocation

It caused the bug where stock Fitbit apps lose their icons. So, now I'm reinstalling the firmware.  I've changed it to just an App instead of a Clockface until I fix it.

My companion code:

import { settingsStorage } from "settings";
import * as messaging from "messaging";
import { me } from "companion";

let KEY_COLOUR = "bgColour";

// ------ Settings section ------
// Settings have been changed
settingsStorage.onchange = function(evt) {
  sendValue(evt.data.key, evt.data.newValue);
}

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

function sendValue(key, val) {
  if (val) {
    sendSettingData({
      key: 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");
  }
}

My settings.js code:

import { settingsStorage } from "settings";
import * as messaging from "messaging";
import document from "document";

// Get the value of the setting
let myElement = document.getElementById("bgColour");

messaging.peerSocket.onmessage = function(evt) {
  myElement.style.fill = evt.data.myColor;
}

 Settings index.jsx:

function Colours(props) {
  return (
    <Page>
<Section
  <ColorSelect
          settingsKey="bgColour"
          colors={[
            {color: 'white'},
            {color: 'sandybrown'},
            {color: 'gold'},
            {color: 'aquamarine'},
            {color: 'deepskyblue'},
            {color: 'plum'}
          ]}
        />
</Section>
    </Page>
  );
}

registerSettingsPage(Colours);

[JonFitbit · Accepted solution]

Try changing this:

settingsStorage.onchange = function(evt) {
  sendValue(evt.data.key, evt.data.newValue);
}

to

settingsStorage.onchange = function(evt) {
  sendValue(evt.key, evt.newValue);
}

[WauloK]

Any ideas why this never excutes, please?

messaging.peerSocket.onmessage = function(evt) {
  console.log("setting to "+evt.bgColour);
  myElement.style.fill = evt.bgColour;
}

Also tried:

messaging.peerSocket.onmessage = function(evt) {
  console.log("setting to "+evt.data.bgColour);
  myElement.style.fill = evt.data.bgColour;
}

I don't get an error about peer socket connections so I figure it's sending the command successfully but the onmessage never happens. TIA.

[WauloK]

Figured it out! Rookie mistake.

I had two of these, one for weather responses and one in settings response. Can only have one in the app, so I added evt.data.name="settings" and evt.data.name="weather" and check which one is communicating with the watch app, then call the relevant function 🙂

messaging.peerSocket.onmessage = function(evt) {