Connect UI Slider to Hair color?

Answered
  • Bit of a hacky way to do it:

    First need to add the ui, the hair color template already uses an ortho cam so u can put it under there. Tip: Resize it in the 3D scene to resize everything easily, position in 2D.

     

     

    Next make a new script, add it to its own object and put it at the top of the scene so it exists before the color picker script. We will call this script from the color picker.

     

     

    Now click on the UI Color Picker object. 

    Look for the script component and check Edit Event Callbacks.

    Choose callback type custom function.

    Add your custom script we made to the custom function script input.

    Add an on color changed value which will be the function name to call, you can make it anything but make sure it matches the script. I chose to use onColorChange.

     

     

    Now double click your custom script in resources and open up the script editor.

    First we need to add an input to access our hair controller script.

    use //@input Component.ScriptComponent hairController

    next we need to make the script function for the UI color picker to call.

    Using the name from earlier it should be script.api.onColorChange = function(color){}

    then inside this we need to change it to use rgb only to make it easier later on.

    We added a color parameter in the last step so we will access that and create a new variable called rgb set to a vec3 and pull out the rgb values from color.

    var rgb =  new vec3(color.x, color.y, color.z)

    Now we need to connect it to the hair controller.

    We will use script api and our imported hairController script to do this.

    Use script.hairController.api.setColor1(rgb) to call a setColor1 function in the hair controller's script api and use the rgb value we made as the input.

    Full script for the custom:

    //@input Component.ScriptComponent hairController

    script.api.onColorChange = function(color){

    var rgb = new vec3(color.x, color.y, color.z)

    script.hairController.api.setColor1(rgb)

    }

     

    Now connect your hair controller script to this script, by selecting your custom script in the object panel and adding the hair controller script to the input on the script component.

    You may notice we still get errors, this is because the setColor1 function does not yet exist, we need to make it. So find the HairColorController script in resources and double click it to open it in the script editor.

     

     

    In the screenshot you can see I added a custom function at the top of the script, it's easiest to add it there.

    We are making an api method called setColor1 which our custom script calls and inputs a color to. 

    That looks like script.api.setColor1 = function(color){}

    inside this we are hijacking the script.colorVal1 variable and the colorVal1 variable, really you could skip the first var update and just directly update colorVal1 but this is a nicer way.

    Update script.colorVal1 to the color from our custom script  with script.colorVal1 = color

    then we need to update the colorVal1 variable again so do colorVal1 = script.colorVal1

    then to actually apply this update we will call the enable function again using enable()

    it should be working now. Color 2 is updated the same way just need to find the variables and change them with another function or the same if you want the colors to be the same. Though you don't need to use 2 colors.

    Note, the colors shown on the hair controller script are now irrelevant but we just keep them in case we wanna go back in the future.

    Full code to add to HairColorController script:

    script.api.setColor1 = function(color){

        script.colorVal1 = color

        colorVal1 = script.colorVal1

        enable()

    }

    Make sure to save the scripts if you see they don't do anything, check this video for help with script usage:

    https://www.youtube.com/watch?v=fRDOTia_F1Q

     

    References/Further Reading:

    https://lensstudio.snapchat.com/guides/scripting/helper-scripts/user-interface/

    https://lensstudio.snapchat.com/guides/scripting/scripting-overview/

    https://lensstudio.snapchat.com/templates/face/hair-color/

    https://lensstudio.snapchat.com/api/classes/vec3/

     

    Comment actions Permalink
  • I didnt know that it was that complex 😳

    But thank you so much! I will try it now :D

     

    Cheers,

    SirQu3ntin

     

    Comment actions Permalink
  • Brandon / Apoc Hey brandon!

    Very clear explanation, thanks!
    But after editing all the scrips etc, my colour slider does'nt move anymore

    I followed every step, my logger says:

    I'm a huge coding amateur, it's a school assessment so im desperate haha.

    Comment actions Permalink
  • It also didn't work for me. I tried everything for hours. I finally moved the "Custom Script" down and it worked.

    I still get the message: "[UI/Resources/Scripts/UIPanel.js:590] Cannot find the onColorChange function in the assigned Script Component!"

    But at least it is working (changing my hair color). 

    Maybe someone will find a solution. I want to learn haha! 

    Have a great day!

    Comment actions Permalink
  • Hi all! From the guide above it seems like the order of scene objects in the objects panel should be next

    1. Hair Color Provider
    2. Hair Color Controller (uses script above)
    3. Your Custom script (uses hair controller)
    4. Then UI widgets - sliders scripts (use Custom script) 

     

    Comment actions Permalink
Have a comment?

Please sign in to leave a comment.

We're here to help! We just need a little bit of information...

What system are you using?

Have you downloaded the latest version of Lens Studio?

Please download the latest version of Lens Studio. If you still run into this issue, please come back and report it!

Is this issue causing Lens Studio to crash?

What system do you run Lens Studio on?

Version

Graphics

Follow the next steps to help us solve your issue:

  • Copy and paste this text into your TerminalCommand Window
    open ~/Library/Preferences/Snap/Lens\ Studio/ %LOCALAPPDATA%\Snap\Lens Studio Copy Text
  • Press ReturnEnter to run the command. The Lens Studio folder will automatically open
  • Prepare to upload your files: zip the "Log" Folder by right-clicking and choosing "compress."
    Locate the Log.txt file right above it.

    Attach a screenshot of the issue:

Name:

Email:

What is this most relevant to?

Please enter a brief description of your issue:

Thanks for submitting this issue.

Unfortunately, it's likely due to the operating system or hardware you're using – since they don't meet the system requirements for Lens Studio.

Still, we hear you loud and clear, and are logging the issue in case there's ever a workaround we can provide!

Minimum Requirements

Operating System: Windows 10 (64 bit); MacOS 10.11+

Hardware: Minimum of Intel Core i3 2.5Ghz or AMD Phenom II 2.6Ghz with 4 GB RAM; Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 or better; screen resolution of 1280x768 or higher

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!

Keep an eye out for a followup email from us. We may have a couple more questions for you, or we might already have a solution to offer.

Happy creating!