Implement toggle switch in Clock Face

[nokotok]

Hi I want to use a toggle in my Clock Face settings and if the toggle is on display an element if its not that hide. Currently I have following code:

settings/index.jsx

       <Toggle
          settingsKey="stepsToggle"
          label="Steps"
        />

app/index.js

if (data.stepsToggle){
    stpValue.style.visibility = "hidden";
  }
else {
    stpValue.style.visibility = "visible";
  }

This properly displays settings and when toggle is switched the stpValue is hidden, but after toggling it back it does not appear. Has anyone had similar problem? If so how did you fix it?

Thanks

[Gondwana · Accepted solution]

Dunno, but try using the 'display' property instead of 'visibility', with values of 'inline' or 'none'.

Just a wild guess...

[EmTe]

Try this mate!

if (data.stepsToggle === "false"){
    stpValue.style.visibility = "hidden";
  }
else {
    stpValue.style.visibility = "visible";
  }

[Dcable]

I'm pretty new to implementing settings pages.  Can anyone help me out with adding a toggle switch.  Here is what I have right now, and I keep getting an error.

app/index.js

import * as messaging from "messaging";
import document from "document";

let myElement = document.getElementById("myElement");
let test = document.getElementById("test");

messaging.peerSocket.onmessage = function(evt) {
  myElement.style.fill = evt.data.value;
  if (data.toggle === "false"){
    test.style.text = "hidden";
  }
else {
    test.style.text = "visible";
  }
}

companion/index.js

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

let KEY_COLOR = "myColor";
let tog = "toggle"

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

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

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");
  }
}

settings/index.js

function Colors(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Color Settings</Text>}>
        <Toggle
          settingsKey="toggle"
          label="Toggle Switch"
        />
        <ColorSelect
          settingsKey="myColor"
          colors={[
            {color: 'tomato'},
            {color: 'sandybrown'},
            {color: 'gold'},
            {color: 'aquamarine'},
            {color: 'deepskyblue'},
            {color: 'plum'}
          ]}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(Colors);

Thank you 🙂

[EmTe]

In your app/index.js, it should be like this:

messaging.peerSocket.onmessage = function(evt) {
  myElement.style.fill = evt.data.myColor.value;
  if (evt.data.toggle === false){
    test.style.visibility = "hidden";
  }
else {
    test.style.visibility = "visible";
  }
}

1) For your fill you didn't reference myColor.

2) Because you were already doing JSON.parse(val) earlier in in your companion, you are no longer treating the toggle as a string and should be treating it as a boolean.

3) In your toggle you didn't reference evt.

4) The style property name for visibility is "style.visibility" and not "style.text".

[Dcable]

That makes more sense.  I'm still having issues getting multiple settings to work together.  I was able to get the toggle switch working without the color picker, i think its something to do with the ".value".  Here is what I have it working with.

messaging.peerSocket.onmessage = function(evt) {
  //myElement.style.fill = evt.data.myColor.value;
  if (evt.data.value === false){
    test.style.visibility = "hidden";
  }
else {
    test.style.visibility = "visible";
  }
}

Thanks for helping me with this.

[Dcable]

Every time I change pages on my watch or switch to another application and then return to the watch-face the settings reset to the original settings but my toggle switch stays in the same position.  Do you know how I get the watch-face to check for this setting every-time it is launched/returned to?

[EmTe]

You should save your settings on the watch using the "file system" API and restore it when the watch face is reloaded.

Look at an example here for saving the settings:

https://github.com/tyuen/THE-watchface/blob/master/app/index.js#L205

[Dcable]

Thanks for that.  I have never used the files system for fibit and am a bit unfamiliar.  This is what I have below.  I'm not using the applySettings function like in the example not sure if that is where my issue lies.

messaging.peerSocket.onmessage = function(evt) {
  fs.writeFileSync("settings2.txt", evt, "cbor");
  if (evt.data.value === false){
    // 12h format
    hours12.style.display = "inline";
    hour24.style.display = "none";
    console.log("12 hour format");
  }
  if (evt.data.value === true) {
    // 24h format
    hours12.style.display = "none";
    hour24.style.display = "inline";  
    console.log("24 hour format");
  }
}
  
//New file saving
function parseFile(name) {
  let obj;
  try{
    obj = fs.readFileSync(name, "cbor");
  }catch (evt){}
  if(name === "settings2.txt"){
    if(obj){
      //applySettings(obj);
      console.log("settings have been saved");
    }
    else{
      peerSocket.onopen = () => {peerSocket.send({getAll:1})};
      console.log("reapply settings");
    }
  }
}
parseFile("settings2.txt");