III. UI Visibility

In order to hide certain elements from the interface, you can use the files in instruction directory. Find the concept for which you would like to implement hiding logic and simply modify the following value in your concept's JSON file:

"display" : {
    "<property-name>" : "<other-property>=='<value>'",
}

Using this logic, you can hide certain elements from the interface if the value of another property is equal to a specific value, <property-name> is only visible if <other-property> is set to <value>. This is useful for example when you want to hide more advanced settings or allow for different parameters depending on what option they choose.

This is especially useful when you join it with defining dropdown lists - the values you list there can affect how other elements are displayed, thus creating a more dynamic and engaging experience. It is also considerate of user to not overwhelm them with too many options at once.

info

It is important to remember, that it has to be a property that is already defined in this concept's JSON file.

{
  "$type": "instruction",
  "$author": "Andrei",
  "locale": "en_US",
  "instructions": {
    "engine": "Text to speech engine to be used",
    "volume": "Sound volume",
    "rate": "Speech rate",
    "language": "The language to read the text in",
    "slow": "Reads text more slowly"
  },
  "display": {
    "volume": "engine=='pyttsx3'",
    "rate": "engine=='pyttsx3'",
    "language": "engine=='gTTS'",
    "slow": "engine=='gTTS'"
  }
}