Spark AR Native UI Picker

Question

In Documentation page of Native UI Picker it says: "The NativeUI Picker is an interface you can add to effects. It allows people using your effect to choose different options within it by selecting icons. For example the user can tap different icons to change the texture shown in the effect"

I've made several effects with NativeUI texture "switcher", and was trying to implement NativeUI to switch not between textures, but effects (objects) themselves.

For example if I would make a FaceMesh with some texture on it, that would change with a screen tap and a particle system with another texture also with a change when the screen is tapped. How could I switch between those two using NativeUI?

I don't really like my current solution to this because it's not user friendly. I've used PatchEditor and FaceFinder, turning on/off visibility of the faceMesh and Emitter when eyebrows are raised. See the screenshot bellow:

I would really appreciate any suggestions, Thank you!

score 0 · Answer 1 · answered Feb 08 '20 at 02:24

// Load in modules
const NativeUI = require("NativeUI");
const Textures = require("Textures");
const Patches = require("Patches");

export const Diagnostics = require("Diagnostics");

// Create a number
let userNumber = 0;

const texture0 = Textures.get("number1");
const texture1 = Textures.get("number2");
const texture2 = Textures.get("number3");

const index = 0;
const configuration = {
  selectedIndex: index,
  items: [
    { image_texture: texture0 },
    { image_texture: texture1 },
    { image_texture: texture2 }
  ]
};
const picker = NativeUI.picker;
picker.configure(configuration);
picker.visible = true;

picker.selectedIndex.monitor().subscribe(function(index) {
  userNumber = index.newValue;
  // Send the number to the Patch Editor under the name 'userNumber'
  Patches.setScalarValue("userNumber", userNumber);
  // Debugging
  Diagnostics.log("user selection = " + index.newValue);
});

Using NativeUI picker. The code above will output index value as userNumber(scalar) to patch editor.

Examples: If user pick number 1 the output of userNumber will be 0, If user pick number 2 the output of userNumber will be 1, If user pick number 3 the output of userNumber will be 2, etc.

You can use userNumber as switch combine with equal exactly NativeUI Picker as Switch Picture

Spark AR Native UI Picker

1 Answers1