Hide Settings Options Not Supported by Versa Lite

[jomis003]

I am looking for a way to adjust my settings/index.jsx file to accommodate the Versa Lite.

In the current file, I have a text element and two toggle elements which titles the Elevation setting and the toggles assist in changing the colors of the elements. 

Is there a way to detect the Versa Lite and then hide these settings? I am currently checking for the Versa Lite and hiding the screen elements on the watch face but the customer can still see and make a selection within the settings, even though it is not applied.  

Here is the block of code that needs to be hidden: 

    <Text bold align="center">Elevation/Floors Climbed Statistic Colors</Text>
      <Toggle
        settingsKey="colorFloorsToggle"
        label="Show the icon color palette?"
      />      
      { JSON.parse(props.settings.colorFloorsToggle || 'false') && 
        <ColorSelect settingsKey="colorFloors" 
          colors={colorSet} 
        /> 
      }
      { JSON.parse(props.settings.colorFloorsToggle || 'false') &&         
        <Button
          list
          label="Reset Elevation/Floors Climbed Icon Color"
          onClick={() => clearFloors()}
        />
      }       
      <Toggle
        settingsKey="colorFloorsTextToggle"
        label="Show the icon text color palette?"
      />      
      { JSON.parse(props.settings.colorFloorsTextToggle || 'false') && 
        <ColorSelect settingsKey="colorFloorsText" 
          colors={colorSet} 
        /> 
      }
      { JSON.parse(props.settings.colorFloorsTextToggle || 'false') &&         
        <Button
          list
          label="Reset Elevation/Floors Climbed Text Color"
          onClick={() => clearFloorsText()}
        />
      }

Any help is appreciated.

[LeiChat]

Hi Jomis

You're probably aware of how to detect for elevation gain support on the device. If not that's in the SDK3.1 blog post on dev.fitbit.com

You cannot detect for capabilities in the companion so the advice is to send a message from the device to the companion.

Personally, I have taken the unrecommended approach of just switching based on the device name which is available in the companion.

import { device } from "peer";
import { settingsStorage } from "settings";
switch (device.modelName){
  case "Ionic":
  case "Versa":
    settingsStorage.setItem("hasElevationGain", true);    
    break;
  case "Versa Lite":
    settingsStorage.setItem("hasElevationGain", false);    
    break;
  default:
    settingsStorage.setItem("hasElevationGain", false);
    break;
}

Then in the Settings index.jsx you can use the settings property to change the settings UI.

let hasElevationGain = (settings.hasElevationGain === undefined ? false : JSON.parse(settings.hasElevationGain));

and something like this...

{ hasElevationGain && <Toggle settingsKey="toggle1" label="Something" /> }

I'm not very familiar with React yet but I'd hope there's a way to show/hide your entire code block.

[Olbia]

I'm a bit of a novice, but I got around it (with help from this forum) by reading the model name, and then using 2 slightly different settings options for the 2 Versa Models - 1 without the floors settings.

********* to have separate Versa Lite Settings SDK3.1 ********

************** in companion-settings *************

import { device } from "peer";

settingsStorage.setItem("deviceName", device.modelName);

****In settings *****

let versaModel = props.settingsStorage.getItem("deviceName");
console.log("name " + versaModel);

**** then later, to test repeat entire return section with new settings options *****

if (versaModel == "Versa")

return (

put all the Versa settings here
}

else

return (
put all the versa Lite settings here
}

NOTE: They can still share functions and options such as the color palette.

******* replace the relevant part. e.g. replace options file with options2, and duplicate the options function with the relevant changes - usually replacing floors with calories or similar, or removing floors *********

Hope this helps - it works for me (so far)

[jomis003]

Thanks for this - it "almost" worked. 

The issue is that when the clock face is installed, the initial device model is not passed from the companion and set to where the Settings can read it. 

In the screen shot, you can see the lines I am loading from your post. The companion is setting the device name to Ionic, and is passed to the clock face.

Then Settings is trying to set the model by the deviceName, however it is coming in as undefined.

Then I have an if statement that says if the deviceModel is Versa or Ionic return those settings else return the versa lite settings. 

As you can see because it's undefined, it is using the versa Lite settings.

If I build it a second time, the deviceModel is already set so it uses the Ionic settings then. 

There needs to be a way to set the deviceModel and then set it so the Settings file then reads what was set by the companion on first installation.

[Olbia]

I'm not sure why it's not working for you (but as I've said, I'm really a novice), but perhaps you are accessing the settings before initialising the companion-settings? I had this issue on one of my early attempts, but can't recall the exact circumstances.

Try setting the storage-item first thing after importing the device info in the companion, and then make sure you read it first thing in settings:

*****  In the companion****

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

import { device } from "peer";

settingsStorage.setItem("deviceName", device.modelName);

******  In the settings ******

function mySettings(props) {
const { settings, settingsStorage } = props;

let versaModel = props.settingsStorage.getItem("deviceName");
console.log("Device model name: " + versaModel);

This seems to work for me - sorry I'm not much more help.