How to use a custom color gadget (jscolor)

[T4r4ntul4]

Hi all,

I was making a GUI until i realised theres no colorgadget...

My question is: How to use a custom color gadget like jscolor?
link: http://jscolor.com/

My attempts end on nothing.

With a webgadget it works as expected, but how to use it wthout a webgadget so i can use it besides the other spiderbasic gadgets?
And if that works, how to give it a X and Y location?

Code: Select all

Procedure GadgetEvents()
  
  Select EventGadget()
      
    ; ------------------------------
    ;Case 1 ; 

    ; ------------------------------
      
  EndSelect

  
EndProcedure


If OpenWindow(0, 0, 0, 450, 550, "", #PB_Window_Background)

  ; text gadgets
  TextGadget(0, 20, 40, 150, 25, "Color", #PB_Text_VerticalCenter)
  
  ;WebGadget(10, 20, 20, 300, 200, "jscolor.html")
  
  ; how to use this without using a webgadget?
  ! <script src="jscolor.js"></script>
  ! Color: <input class="jscolor" value="ab2567">

  CloseGadgetList()
  
  
  ; ------------------------------------------------------------------------------------------------------
  
  BindEvent(#PB_Event_Gadget, @GadgetEvents())
  
  CompilerIf #PB_Compiler_OS <> #PB_OS_Web
    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
  CompilerEndIf
EndIf

[Peter]

this might be a first step:

Code: Select all

#myWindow = 0
#myStringGadget = 0

Procedure Init(Callback)
  ! require(["https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"], function() { v_callback(); } );  
EndProcedure

Procedure Main()
  
  OpenWindow(#myWindow, 0, 0, 322, 205, "", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  StringGadget(#myStringGadget, 10, 10, 300, 20, "")
  
  Protected GID = GadgetID(#myStringGadget)
  
  ! $(v_gid.div).find("input").addClass("jscolor");
  
EndProcedure

Init(@Main())

Greetings ... Peter

[T4r4ntul4]

Nice, thnx! That will do.