{
   "ancestor_list" : [],
   "description" : "See https://sccode.org/1-5fa . Hue slider now updated when changing saturation. Strange bug causing the sliders colors to vary when window is resized, please comment if you figure out how to fix it...",
   "author" : "Dindoléon",
   "name" : "Color Picker, pretty version",
   "id" : "1-5fd",
   "is_private" : null,
   "code" : "(\r\n\r\nvar win = Window( \"Color Picker\", Rect( 0, 300, 600, 300 ) );\r\n\r\nvar picker1;\r\nvar picker2;\r\nvar picker3;\r\n\r\n~get_color_picker = {\r\n\r\n\tvar color = Color( 1, 0, 0 );\r\n\tvar hsv = [ 0, 1, 1 ];\r\n\r\n\tvar color_picker_view = UserView(); // Main View\r\n\r\n\tvar h_slider = UserView();\r\n\tvar h_slider_position = 0;\r\n\r\n\tvar sv_slider = UserView();\r\n\r\n\tvar helper = UserView();\r\n\r\n\tvar binded_function = nil;\r\n\r\n\tvar margin; // Slider half dead zone\r\n\r\n\t// HSV to Color function\r\n\tvar hsv_to_color = { | hsv |\r\n\r\n\t\tvar color = Color( 0, 0, 0 );\r\n\r\n\t\tvar h = hsv[0];\r\n\t\tvar s = hsv[1];\r\n\t\tvar v = hsv[2];\r\n\r\n\t\tvar c = s * v;\r\n\t\tvar x = c * ( 1 - ( ( h/60.0 )%2.0 -1 ).abs );\r\n\t\tvar m = v - c;\r\n\r\n\t\tif( ( h >= 0 ) && ( h < 60 ), {\r\n\t\t\tcolor.red = c;\r\n\t\t\tcolor.green = x;\r\n\t\t\tcolor.blue = 0;\r\n\t\t} );\r\n\r\n\t\tif( ( h >= 60 ) && ( h < 120 ), {\r\n\t\t\tcolor.red = x;\r\n\t\t\tcolor.green = c;\r\n\t\t\tcolor.blue = 0;\r\n\t\t} );\r\n\r\n\t\tif( ( h >= 120 ) && ( h < 180 ), {\r\n\t\t\tcolor.red = 0;\r\n\t\t\tcolor.green = c;\r\n\t\t\tcolor.blue = x;\r\n\t\t} );\r\n\r\n\t\tif( ( h >= 180 ) && ( h < 240 ), {\r\n\t\t\tcolor.red = 0;\r\n\t\t\tcolor.green = x;\r\n\t\t\tcolor.blue = c;\r\n\t\t} );\r\n\r\n\t\tif( ( h >= 240 ) && ( h < 300 ), {\r\n\t\t\tcolor.red = x;\r\n\t\t\tcolor.green = 0;\r\n\t\t\tcolor.blue = c;\r\n\t\t} );\r\n\r\n\t\tif( ( h >= 300 ) && ( h < 360 ), {\r\n\t\t\tcolor.red = c;\r\n\t\t\tcolor.green = 0;\r\n\t\t\tcolor.blue = x;\r\n\t\t} );\r\n\r\n\t\tcolor.red = color.red + m;\r\n\t\tcolor.green = color.green + m;\r\n\t\tcolor.blue = color.blue + m;\r\n\r\n\t\tcolor;\r\n\t};\r\n\r\n\t// Resizing adjustments\r\n\tcolor_picker_view.onResize = { | view |\r\n\t\tmargin = ( view.bounds.width * 0.05 );\r\n\t\th_slider.refresh;\r\n\t\tsv_slider.refresh;\r\n\t};\r\n\r\n\t// Hue Slider setup\r\n\th_slider.background_( Color.black );\r\n\th_slider.drawFunc_( { | view |\r\n\t\tPen.width = 1;\r\n\t\t( view.bounds.height - ( margin * 2 ) ).do( { | index |\r\n\t\t\tPen.strokeColor_(\r\n\t\t\t\thsv_to_color.value(\r\n\t\t\t\t\t[\r\n\t\t\t\t\t\tindex.linlin(\r\n\t\t\t\t\t\t\t0,\r\n\t\t\t\t\t\t\t( view.bounds.height - ( margin * 2 ) ),\r\n\t\t\t\t\t\t\t0,\r\n\t\t\t\t\t\t\t360\r\n\t\t\t\t\t\t),\r\n\t\t\t\t\t\thsv[1],\r\n\t\t\t\t\t\thsv[2]\r\n\t\t\t\t\t];\r\n\t\t\t\t);\r\n\t\t\t);\r\n\r\n\t\t\tPen.moveTo( Point( margin, index + margin ) );\r\n\t\t\tPen.lineTo( Point( view.bounds.width - margin, index + margin ) );\r\n\t\t\tPen.stroke;\r\n\t\t} );\r\n\r\n\t\tPen.addRect(\r\n\t\t\tRect(\r\n\t\t\t\tmargin / 2,\r\n\t\t\t\tmargin / 2 + ( view.bounds.height - ( margin * 2 ) * h_slider_position ) + margin,\r\n\t\t\t\tview.bounds.width - margin,\r\n\t\t\t\tmargin\r\n\t\t\t)\r\n\t\t);\r\n\t\tPen.fillAxialGradient(\r\n\t\t\tPoint( 0, margin / 2 + ( view.bounds.height - ( margin * 2 ) * h_slider_position ) + margin ),\r\n\t\t\tPoint( 0, margin / 2 + ( view.bounds.height - ( margin * 2 ) * h_slider_position ) + ( margin * 2 ) ),\r\n\t\t\tColor( 0, 0, 0, 1 ),\r\n\t\t\tColor( 0, 0, 0, 0 )\r\n\t\t);\r\n\r\n\t\tPen.addRect(\r\n\t\t\tRect(\r\n\t\t\t\tmargin / 2,\r\n\t\t\t\tmargin / 2 + ( view.bounds.height - ( margin * 2 ) * h_slider_position ) - margin,\r\n\t\t\t\tview.bounds.width - margin,\r\n\t\t\t\tmargin\r\n\t\t\t)\r\n\t\t);\r\n\t\tPen.fillAxialGradient(\r\n\t\t\tPoint( 0, margin / 2 + ( view.bounds.height - ( margin * 2 ) * h_slider_position ) - margin ),\r\n\t\t\tPoint( 0, margin / 2 + ( view.bounds.height - ( margin * 2 ) * h_slider_position ) ),\r\n\t\t\tColor( 0, 0, 0, 0 ),\r\n\t\t\tColor( 0, 0, 0, 1 )\r\n\t\t);\r\n\r\n\t\tPen.fillColor_( color );\r\n\t\tPen.fillRect(\r\n\t\t\tRect(\r\n\t\t\t\tmargin / 2,\r\n\t\t\t\tmargin / 2 + ( view.bounds.height - ( margin * 2 ) * h_slider_position ),\r\n\t\t\t\tview.bounds.width - margin,\r\n\t\t\t\tmargin\r\n\t\t\t)\r\n\t\t)\r\n\t} );\r\n\r\n\th_slider.mouseDownAction_( { | view, x, y |\r\n\t\tif( y >= margin, {\r\n\t\t\tif( y <= ( view.bounds.height - margin ), {\r\n\t\t\t\th_slider_position = y.linlin( margin, view.bounds.height - margin, 0, 1 );\r\n\t\t\t\ty = y.linlin( margin, view.bounds.height - margin, 0, 360 );\r\n\t\t\t\thsv[0] = y;\r\n\t\t\t\tcolor = hsv_to_color.value( hsv );\r\n\t\t\t\tif( binded_function != nil, { binded_function.value( color ) } );\r\n\t\t\t\th_slider.refresh;\r\n\t\t\t\thelper.refresh;\r\n\t\t\t\tsv_slider.refresh;\r\n\t\t\t} )\r\n\t\t} )\r\n\t} );\r\n\th_slider.mouseMoveAction_( h_slider.mouseDownAction );\r\n\r\n\t// Saturation Slider setup\r\n\tsv_slider.background_( Color.black );\r\n\tsv_slider.drawFunc_( { | view |\r\n\r\n\t\t( view.bounds.width - ( margin * 2 ) ).do( { | index_x |\r\n\t\t\tPen.addRect(\r\n\t\t\t\tRect(\r\n\t\t\t\t\tmargin + index_x,\r\n\t\t\t\t\tmargin,\r\n\t\t\t\t\t1,\r\n\t\t\t\t\tview.bounds.height - ( margin * 2 )\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t\tPen.fillAxialGradient(\r\n\t\t\t\tPoint( 0, margin ),\r\n\t\t\t\tPoint( 0, view.bounds.height - ( margin * 2 ) ),\r\n\t\t\t\tColor.black,\r\n\t\t\t\thsv_to_color.value(\r\n\t\t\t\t\t[\r\n\t\t\t\t\t\thsv[0],\r\n\t\t\t\t\t\tindex_x.linlin( 0, view.bounds.width, 0, 1 ),\r\n\t\t\t\t\t\t1\r\n\t\t\t\t\t]\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t} );\r\n\r\n\t\tPen.addWedge(\r\n\t\t\tPoint(\r\n\t\t\t\tview.bounds.width - ( margin * 2 ) * hsv[1] + margin,\r\n\t\t\t\tview.bounds.height - ( margin * 2 ) * hsv[2] + margin,\r\n\t\t\t),\r\n\t\t\tmargin * 2,\r\n\t\t\t0,\r\n\t\t\t360\r\n\t\t);\r\n\t\tPen.fillRadialGradient(\r\n\t\t\tPoint(\r\n\t\t\t\tview.bounds.width - ( margin * 2 ) * hsv[1] + margin,\r\n\t\t\t\tview.bounds.height - ( margin * 2 ) * hsv[2] + margin,\r\n\t\t\t),\r\n\t\t\tPoint(\r\n\t\t\t\tview.bounds.width - ( margin * 2 ) * hsv[1] + margin,\r\n\t\t\t\tview.bounds.height - ( margin * 2 ) * hsv[2] + margin,\r\n\t\t\t),\r\n\t\t\tmargin,\r\n\t\t\tmargin * 1.5,\r\n\t\t\tColor( 0, 0, 0, 1 ),\r\n\t\t\tColor( 0, 0, 0, 0 )\r\n\t\t);\r\n\r\n\t\tPen.fillColor_( color );\r\n\t\tPen.addWedge(\r\n\t\t\tPoint(\r\n\t\t\t\tview.bounds.width - ( margin * 2 ) * hsv[1] + margin,\r\n\t\t\t\tview.bounds.height - ( margin * 2 ) * hsv[2] + margin,\r\n\t\t\t),\r\n\t\t\tmargin,\r\n\t\t\t0,\r\n\t\t\t360\r\n\t\t);\r\n\t\tPen.fill;\r\n\t} );\r\n\r\n\tsv_slider.mouseDownAction_( { | view, x, y |\r\n\r\n\t\tcase\r\n\t\t{ x < margin } { hsv[1] = 0 }\r\n\t\t{ x > ( view.bounds.width + margin ) } { hsv[1] = 1 }\r\n\t\t{ ( ( x >= margin ) && ( x <= ( view.bounds.width - margin ) ) ) } {\r\n\t\t\thsv[1] = x.linlin( margin, view.bounds.width - margin, 0, 1 );\r\n\t\t};\r\n\r\n\t\tcase\r\n\t\t{ y < margin } { hsv[2] = 0 }\r\n\t\t{ y > ( view.bounds.height + margin ) } { hsv[2] = 1 }\r\n\t\t{ ( ( y >= margin ) && ( y <= ( view.bounds.height - margin ) ) ) } {\r\n\t\t\thsv[2] = y.linlin( margin, view.bounds.height - margin, 0, 1 );\r\n\t\t};\r\n\r\n\t\tcolor = hsv_to_color.value( hsv );\r\n\t\tif( binded_function != nil, { binded_function.value( color ) } );\r\n\t\thelper.refresh;\r\n\t\tsv_slider.refresh;\r\n\t\th_slider.refresh;\r\n\t} );\r\n\tsv_slider.mouseMoveAction_( sv_slider.mouseDownAction );\r\n\r\n\thelper.drawFunc_( { | view |\r\n\t\tPen.fillColor_( color );\r\n\t\tPen.fillRect(\r\n\t\t\tRect(\r\n\t\t\t\t0,\r\n\t\t\t\t0,\r\n\t\t\t\tview.bounds.width,\r\n\t\t\t\tview.bounds.height\r\n\t\t\t)\r\n\t\t)\r\n\t} );\r\n\r\n\t// Background Color\r\n\tcolor_picker_view.background_( Color.black );\r\n\tcolor_picker_view.layout_(\r\n\t\tVLayout(\r\n\t\t\t[ helper, stretch:1 ],\r\n\t\t\t[ HLayout(\r\n\t\t\t\t[ h_slider, stretch: 1 ],\r\n\t\t\t\t[ sv_slider, stretch: 2 ]\r\n\t\t\t), stretch:2 ]\r\n\t\t);\r\n\t);\r\n\r\n\tcolor_picker_view.addUniqueMethod( \\bindFunction, { | object, function | binded_function = function } );\r\n\r\n\tcolor_picker_view\r\n};\r\n\r\npicker1 = ~get_color_picker.value();\r\npicker2 = ~get_color_picker.value();\r\npicker3 = ~get_color_picker.value();\r\n\r\nwin.layout_( HLayout( picker1, picker2, picker3 ) );\r\nwin.background_( Color( 0.2, 0.2, 0.2 ) );\r\nwin.front\r\n\r\n)",
   "labels" : [
      "gui",
      "tool",
      "hsv"
   ]
}