How to integrate jscolor with playcanvas?

Help & Support
1

I want to integrate jscolor with pc, it works outside pc I checked but when I imported the jscolor.js then I dont see this library is working because the input acts like input not color picker
so the script order wrong or what?
I tried also from cdnjs in external scripts in settings

2

If you are adding the input color element using a script, then you need to manually install jscolor on that element.

Check the jscolor docs on this:

https://jscolor.com/docs/#doc-install-include-jscolor

jscolor.install();

Or manually create a JSColor instance:

var myPicker = new JSColor(<targetElement>, <options>)
2 Likes
3

JSColor also sets up events on document load to initialize. So either you have to add the library to load before/after engine so it’s included in the document before it finishes loading.

Or manually call jscolor.init() at runtime.

Example: https://playcanvas.com/editor/scene/1096298

2 Likes
4

I get this:

Color picker already installed on this element

class PickerFramebuffer extends pc.ScriptType{

    initialize(){
        this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onSelect, this);
        this.picker = new pc.Picker(this.app, 1024, 1024);

        this.container = pc.app.root.children[0].script.ui.element;
        const jscolor = new JSColor(this.container);

    }
5

Are you trying to create a JSColor on the same element more than once?

6

ok I try to init the jscolor outside of framebuffer picker