Use of Native UI picker to toggle between languages in bilingual filter in Spark AR Studio

Question

I am trying to make a "name place animal thing" game in Spark AR, but i want to use Native UI picker, to provide the game in 2 languages. I used two planes on a face tracker. The first (Main), is the "intro screen", and the second (Letters), is the one with the animated letter sequence which stops to a random number after x seconds. The idea is, if possible, when the user is using the picker, to switch the Materials in the planes, from the English ones to the ones in the second language.

Here is a screenshot of my Spark AR project: https://snipboard.io/FtOS9W.jpg

And my script so far is:

    const NativeUI = require('NativeUI');
    const Textures = require('Textures');
    const Materials = require('Materials');


Promise.all([
    Textures.findFirst('britishIcon'),
    Textures.findFirst('grIcon'),
    Materials.findFirst('GreekAlphabet'),
    Materials.findFirst('GreekMain'),
    Materials.findFirst('EnglishAlphabet'),
    Materials.findFirst('EnglishMain')

]).then(onReady);
function onReady(assets) {
    const texture0 = assets[0];
    const texture1 = assets[1];
    const picker = NativeUI.picker;
    const index = 0;
    const selection = 0;
    const configuration = {

      selectedIndex: index,

      items: [
        {image_texture: texture0},
        {image_texture: texture1}
      ]

    };

    picker.configure(configuration);
    picker.visible = true;

    picker.selectedIndex.monitor().subscribe(function(index) {
        Materials.inputs.setScalar('selection', index.newValue);
    });
}

Answer 1

The easiest solution is to change the materials of the planes

1. Plug in the Scene module to get the planes

2. Add planes request to Promie code block

3. Using NativeUI to change the materials of the planes depending on the selected language

const NativeUI = require('NativeUI');
const Textures = require('Textures');
const Materials = require('Materials');
const Scene = require('Scene')

Promise.all([
    Textures.findFirst('britishIcon'),
    Textures.findFirst('grIcon'),
    Materials.findFirst('GreekAlphabet'),
    Materials.findFirst('GreekMain'),
    Materials.findFirst('EnglishAlphabet'),
    Materials.findFirst('EnglishMain'),
    Scene.root.findFirst('Main'),
    Scene.root.findFirst('Letters')

]).then(onReady);
function onReady(assets) {
    const texture0 = assets[0];
    const texture1 = assets[1];
    const picker = NativeUI.picker;
    const index = 0;
    const selection = 0;
    const configuration = {

      selectedIndex: index,

      items: [
        {image_texture: texture0},
        {image_texture: texture1}
      ]

    };

    const mainPlane = assets[6];
    const lettersPlane = assets[7];

    picker.configure(configuration);
    picker.visible = true;

    picker.selectedIndex.monitor({fireOnInitialValue:true}).subscribe(function(index) {
        if(index.newValue == 0 /*English*/)
        {
            mainPlane.material = assets[5];
            lettersPlane.material = assets[4];
        }
        else if (index.newValue == 1 /*Greek*/)
        {
            mainPlane.material = assets[3];
            lettersPlane.material = assets[2];
        }
    });
}