The forum on this site is closed for new comments and posts. Continue the conversation in the new forum, and learn more here.

Hue slider help

  • The color slider by default can only target a single object. To simultaneously change the colors of multiple entities, you will need a custom script. It will be somewhat similar to what I have here, but with some important changes. Here is some sample code. Usually I would use arrays to input multiple images and materials, but Lens Studio wasn't liking that for whatever reason.

    // -----JS CODE-----
    // @input Component.Image image1
    // @input Component.Image image2
    // @input Asset.Material mat1
    // @input Component.ScriptComponent colorPickerScript

    function handleChange(value) {
    print(value);
    script.image1.mainPass.baseColor = value;
    script.image2.mainPass.baseColor = value;
    script.mat1.mainPass.baseColor = value;
    }
    script.colorPickerScript.api.addCallback('onColorChanged', handleChange);

    And here is an example project: https://1drv.ms/u/s!AgrmjXTXUbfzgthXl1_JmVds6NZtTg?e=xQ6G0w

    I know the flame outline is some sort of custom material, so to adjust the color for that you may need to change a separate value rather than the baseColor. You can hover your mouse over the color name to get the property. So an arbitrary example you may be setting script.mat1.mainPass.flame1Color = value; instead of script.mat1.mainPass.baseColor.

    You'll have to adjust the script inputs so you have the right number of inputs for your lens. When the lens turns on, everything will have their original colors and then once you adjust the slider it will start changing things. You might want to select the color picker script, enable the "Edit Properties" option, and then change the initial value to 1.0 which corresponds to the color white which in turn would make all your starting images/materials not have a tint.

     

    Comment actions Permalink
  • hey modelsbymike3d i changed the script to be like this and it doesnt work. it doesnt change the colors or do anything

    // -----JS CODE-----

    // @input string entity {"widget":"combobox", "values":[{"label":"Image", "value":"image"}, {"label":"Graph Material", "value":"graph"}]}

    // @input Component.Image Hearts

    // @input Component.Image Crown

    // @input Component.EyeColorVisual EyeColor

    // @input Asset.Material Flame

    // @input float initialValue = 0.65

    // @input Component.ScriptComponent colorPickerScript




    function handleChange(value) {

    print(value);

    switch (script.entity) {

    case 'Hearts': {

    script.Hearts.mainPass.baseColor = new vec4(1, 1, 1, value);

    break;

    }




    case 'Crown': {

    script.Crown.mainPass.baseColor = new vec4(1, 1, 1, value);

    break;

    }




    case 'EyeColor': {

    script.EyeColor.mainPass.baseColor = new vec4(1, 1, 1, value);

    break;

    }

    case 'Flame colorMin': {

    var currColor = script.mat.mainPass.colorMin;

    script.mat.mainPass.colorMin = new vec4(currColor.r, currColor.g, currColor.b, value);

    break;

    }

    case 'Flame colorMax': {

    var currColor = script.mat.mainPass.colorMin;

    script.mat.mainPass.colorMax = new vec4(currColor.r, currColor.g, currColor.b, value);

    break;

    }

    default:

    break;

    }

    }




    script.colorPickerScript.api.addCallback('onColorChanged', handleChange);

    handleChange(script.initialValue);

    script.colorPickerScript.api.setSliderValue(script.initialValue);
    Comment actions Permalink
  • No need for the case statements. It'll just be

    script.Hearts.mainPass.baseColor = value;
    script.Crown.mainPass.baseColor = value;
    script.EyeColor.mainPass.baseColor = value;
    script.Flame.mainPass.colorMin = value;
    script.Flame.mainPass.colorMax = value;

    and remove the following lines

    handleChange(script.initialValue);
    script.colorPickerScript.api.setSliderValue(script.initialValue);

    The initial value portion in my original script was meant for when using the slider as a 0-1 scale. It doesn't directly translate to when you are grabbing the color so I removed it.

    Comment actions Permalink
  • i added those becuase i thought maybe it'll make the color work, but neither do

    Comment actions Permalink
  • modelsbymike3d i changed it again from your last post the way you said to, and still nothing. i move the slider and it doesnt do anything

    Comment actions Permalink
  • Can you share the files with me? My email address is my username at gmail.com. It's probably just a small scripting error.

    Comment actions Permalink
  • modelsbymike3d i actually just figured it out! thank you so so much for the help! i couldnt have done it without you!

    Comment actions Permalink
  • Glad to hear! Looks like a cool lens!

    Comment actions Permalink
  • thank you! im gonna add more features and then update it!

    Comment actions Permalink

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!