Photoshop Color Picker functionality in UI

[Masood.Ahmad]

Hi,
I'm working on UI, where I want a Photoshop color picker like functionality (see a snapshot from the Photoshop Toolbar). The default color-picker functionality of Photoshop updates the color palette in real time as the user hovers the eye-dropper tool on an image.

The below code rightly opens the color picker and updates the Hex value, but it is not reflecting the selected color in the preview box.  I think the problem is that the color-picker or the color palette is not updating parallelly with the eye-dropper. Neither the palette is taking any color values once the eye-dropper is released.

Can anyone please look into this and fix the behaviour of the 'Pick Color' button and the 'Color Preview' box.

 

// Simplified color picker and preview update script

function showDialog() {
  var dialog = new Window("dialog", "Pick and Preview Color");

  // Function to update the preview panel color
  function updatePreviewColor(previewPanel, color) {
    previewPanel.graphics.backgroundColor = previewPanel.graphics.newBrush(
      previewPanel.graphics.BrushType.SOLID_COLOR,
      [color.red / 255, color.green / 255, color.blue / 255, 1]
    );
    previewPanel.graphics.foregroundColor = previewPanel.graphics.newBrush(
      previewPanel.graphics.BrushType.SOLID_COLOR,
      [color.red / 255, color.green / 255, color.blue / 255, 1]
    );
    previewPanel.notify("onDraw"); // Force the panel to redraw
  }

  // Function to convert RGB values to hex color
  function rgbToHex(r, g, b) {
    return (
      "#" +
      ((1 << 24) + (r << 16) + (g <<  + b).toString(16).slice(1).toUpperCase()
    );
  }

  // Group and elements for color picking
  var colorGroup = dialog.add("group");
  colorGroup.orientation = "row";

  var colorInput = colorGroup.add("edittext", undefined, "#000000");
  colorInput.size = [60, 30];
  colorInput.enabled = false; // Disable until checkbox is selected

  var colorPreview = colorGroup.add("panel", undefined, "");
  colorPreview.size = [60, 30];
  colorPreview.enabled = true; // Enable the panel

  var colorButton = colorGroup.add("button", undefined, "Pick Color");
  colorButton.size = [, 30];

  // Add color picker functionality
  colorButton.onClick = function() {
    var initialColor = app.foregroundColor.rgb; // Store the initial foreground color
    var pickedColor = app.showColorPicker();

    if (pickedColor !== -1) {
      // Wait until the color picker is closed and then get the foreground color
      $.sleep(100); // Add a short delay to ensure the color picker updates
      var color = app.foregroundColor.rgb;
      var hexColor = rgbToHex(color.red, color.green, color.blue);
      colorInput.text = hexColor;
      updatePreviewColor(colorPreview, color);
    } else {
      // Revert to the initial color if the picker is canceled
      app.foregroundColor.rgb = initialColor;
    }
  };

  // Add buttons
  dialog.add("statictext", undefined, " "); // Adding a line gap before buttons

  var buttons = dialog.add("group");
  buttons.alignment = "center"; // Center align the buttons
  buttons.add("button", undefined, "Cancel", { name: "cancel" });
  buttons.add("button", undefined, "OK", { name: "ok" });

  dialog.show();
}

showDialog();

[Masood36901647uwjd]

Can anyone help me on this, please.

[Masood.Ahmad]

Please help me on this, please. I need a Color Picker functionality, just like Photoshop.

[Disposition_Dev]

according to this reference, app.foregroundColor is readonly. it cant be changed via a script. (javascript at least...  CEP may have access to that property). I just checked a different reference guide which says that this property is indeed read/write. my expertise is in illustrator scripting, but im trying to branch out. Ill dig into this and see if i can get some answers for you.

And as for the color not updating in your dialog/panel, i cant know for sure. I would guess that you need to add some kind of update call to the dialog after you change the color. it should just be 

dialog.update();

 but, since you cant change the app.foregroundColor this way, it probably doesnt matter if you can get your dialog displaying properly.

Ill play with some ideas and check back if i can find a way to update the foregroundColor via script.

[Disposition_Dev]

Here you go. This seems to work fine for me. Let me know if you still have issues with it.

function showDialog ()
{
	var dialog = new Window( "dialog", "Pick and Preview Color" );
	var initialColor;

	// Function to update the preview panel color
	function updatePreviewColor ( previewPanel, color )
	{
		previewPanel.graphics.backgroundColor = previewPanel.graphics.newBrush(
			previewPanel.graphics.BrushType.SOLID_COLOR,
			[ color.red / 255, color.green / 255, color.blue / 255, 1 ]
		);
		// previewPanel.graphics.foregroundColor = previewPanel.graphics.newBrush(
		// 	previewPanel.graphics.BrushType.SOLID_COLOR,
		// 	[ color.red / 255, color.green / 255, color.blue / 255, 1 ]
		// );
		// previewPanel.notify( "onDraw" ); // Force the panel to redraw
	}

	// Function to convert RGB values to hex color
	function rgbToHex ( r, g, b )
	{
		return "#" + ( ( 1 << 24 ) + ( r << 16 ) + ( g << + b ).toString( 16 ).slice( 1 ).toUpperCase() );
	}

	// Group and elements for color picking
	var colorGroup = dialog.add( "group" );
	colorGroup.orientation = "row";

	var colorInput = colorGroup.add( "edittext", undefined, "#000000" );
	colorInput.size = [ 60, 30 ];
	colorInput.enabled = false; // Disable until checkbox is selected

	var colorPreview = colorGroup.add( "panel", undefined, "" );
	colorPreview.size = [ 60, 30 ];
	colorPreview.enabled = true; // Enable the panel

	var colorButton = colorGroup.add( "button", undefined, "Pick Color" );
	colorButton.size = [ , 30 ];

	// Add color picker functionality
	colorButton.onClick = function ()
	{
		initialColor = app.foregroundColor.rgb; // Store the initial foreground color
		var pickedColor = app.showColorPicker();

		if ( pickedColor !== -1 )
		{
			// Wait until the color picker is closed and then get the foreground color
			$.sleep( 100 ); // Add a short delay to ensure the color picker updates
			var color = app.foregroundColor.rgb;
			var hexColor = rgbToHex( color.red, color.green, color.blue );
			colorInput.text = hexColor;
			updatePreviewColor( colorPreview, color );
		}
		// else
		// {
		// 	// Revert to the initial color if the picker is canceled
		// 	app.foregroundColor.rgb = initialColor;
		// }
	};

	// Add buttons
	dialog.add( "statictext", undefined, " " ); // Adding a line gap before buttons

	var buttons = dialog.add( "group" );
	buttons.alignment = "center"; // Center align the buttons
	var cancelButton = buttons.add( "button", undefined, "Cancel", { name: "cancel" } );
	var okButton = buttons.add( "button", undefined, "OK", { name: "ok" } );
	cancelButton.onClick = function ()
	{
		app.foregroundColor.rgb = initialColor;
		dialog.close();
	};


	dialog.show();
}

showDialog();