PickerHandler

PickerHandler is a wrapper of NativeUI.picker in Spark AR. Please note that this tool is Script Only. Although there is a sample project show how to use this tool with Patch Editor, this libaray is not Patch friendly.

Install

Import

0. Download PickerHandler (Right click and Save as)

1. Drap/Import them to Assets caetgory in Spark AR.

2. Use require to import this module at the top of your script.

   const Picker = require('./PickerHandler');
      
   // Your script...

3. You can also Click Here to Download Sample Projects.

npm

0. Add package with yarn or npm

   yarn add sparkar-picker-handler

   or

   npm i sparkar-picker-handler

1. Use require to import this module

   const Picker = require('sparkar-picker-handler');
   // Your script...

Usage

// Picker.configUsingPattern('img_picker_*').then(subscribeFunctions);
// Picker.configUsingNames(['img_picker_0', 'img_picker_1']).then(subscribeFunctions);
Picker.configUsingDafault().then(subscribeFunctions);

function subscribeFunctions() {
    Picker.subscribeKeywords('0', () => Diagnostics.log('select img_picker_0'));
    Picker.subscribeKeywords('1', () => Diagnostics.log('select img_picker_1'));

    Picker.subscribeIndex(0, () => Diagnostics.log('select picker index 0'));
    Picker.subscribeIndex(1, () => Diagnostics.log('select picker index 1'));

    Picker.subscribeKeywords('picker', ind => Diagnostics.log(`cur: ${ind.newValue}`));
}

Default configure

You need to call the config function manually. For very basic useage, you can just call configUsingDefault().

Picker.configUsingDafault()

And then set the "DEFAULT" field in PickerHandler.js

//–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– DEFAULT
const initalIndex = 0;
const texturesName = [
    'img_picker_0',
    'img_picker_1',
];

//––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

Manually configure

First, set the picker visible manually.

Picker.setVisible(true);

You can config picker with array of names or name pattern.

Picker.configUsingNames(['img_picker_red', 'img_picker_black'], 0);
// or
Picker.configUsingPattern('img_picker_*', 0)

Since configUsingPattern() will get picker images in random order, you can pass your prefer sort function.

const mySort = (n1, n2) => n1.substring('pic_'.length) - n2.substring('pic_'.length);

Picker.configUsingPattern('pic_*', 0, mySort);

Subscribe Functions

You can then subscribe your selected function after configuring the picker.

Picker.configUsingDefault().then(() => {
    Picker.subscribeIndex(1, () => Diagnostics.log('index is 1'));
    Picker.subscribeKeywords('red', () => Diagnostics.log("texture name includes 'red'"));
});

Other Functions

unsubscribeAll(): Unsubscribe all selceted function.

setIndex(): Set PickerHandler to desired index.

setVisible(): Set PickerHandler to desired index.

Donations

If this is useful for you, please consider a donation🙏🏼. One-time donations can be made with PayPal.