after effects script color fill setvalue

Question

I have the code below and I need to take the color form colorpicker and set it as fill color for my shape.
I can't figure out how to get the value from colorpicker and put it in <==fillGroup.property("Color").setValue(................);==>.

//ADD ELIPSE FUNCTION
//======
function addElipse() {
var project = app.project;
var comp = project.activeItem;

if(comp == null) {
comp = project.items.addComp("CompCreated", 1920, 1080, 1, 30, 30);
}
comp.openInViewer();

var shapeLayer = comp.layers.addShape();
var elipseGroup = shapeLayer.property("Contents").addProperty("ADBE Vector Shape - Ellipse");
elipseGroup.property("Size").setValue([300,300]);
var fillGroup = shapeLayer.property("Contents").addProperty("ADBE Vector Graphic - Fill");
fillGroup.property("Color").setValue(...........................); }
//COLOR PICKER
//======
function colorpicker (result_color) {
var hexToRGB = function(hex) {
var r = hex >> 16;
var g = hex >> 8 & 0xFF;
var b = hex & 0xFF;
return [r, g, b]; };

var color_decimal = $.colorPicker();
if (color_decimal<0) return null; // added this line, to handle the case where the dialog is dismissed (else: errors)
var color_hexadecimal = color_decimal.toString(16);
var color_rgb = hexToRGB(parseInt(color_hexadecimal, 16));
var result_color = [color_rgb[0] / 255, color_rgb[1] / 255, color_rgb[2] / 255];
return result_color;
}

function customDraw()
{ with( this ) {
graphics.drawOSControl();
graphics.rectPath(0,0,size[0],size[1]);
graphics.fillPath(fillBrush);
if( text ) graphics.drawString(text,textPen,(size[0]-graphics.measureString (text,graphics.font,size[0])[0])/2,3,graphics.font);
}}

function onButtonClick(){

var newcolor1 = colorpicker ();
if (newcolor1===null) return; // dialog dismissed
this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, newcolor1);
// no need to call w.update()
// no need to reassign onDraw for the button, it's done already
// call onDraw for the button:
this.notify("onDraw");
}

colorbutton1.onClick = onButtonClick;

//
//======

dialog.show();

Answer 1

I've made a simple sample script with a few more functionalities which, hopefully, will answer your question.

It changes the colour value for all the selected properties.

If the property is animated, it'll add a new keyframe at the current comp time.

If expressions are found, the user will need to confirm the change of the property's value. In this case, chances are the colour will not be changed if it's set by the expression. Only the property value will be different.

If the selected property is not a colour property it will, of course, be skipped.

At the mouseover event, the button's colour will be changed to the first selected property's colour value.

The entire script is wrapped under aecolorpicker so it can be easily extended.

All the colour conversions are made by aecolorpicker.prototype.colorUtils.

It could've been written a bit better, but being only an example it'll do the way it is right now. :)

You can download it from here - AE Colour Picker and copy it into the 'ScriptUI Panels' folder.

A quick preview: AE Colour Picker preview

And here's the complete script:

'use strict';

function aecolorpicker () {}

aecolorpicker.prototype.root = this;

aecolorpicker.prototype.ui = function (thisObj)
{
  var win = {};

  win.pal = thisObj instanceof Panel ? thisObj : new Window('palette', 'AE Colour Picker', undefined, {resizeable: true});

  if (win.pal === null) return win.pal;

  var res = "Group {orientation: 'column', alignment: ['fill', 'fill'], preferredSize: [128, 64], margin: 0, spacing: 0, \
    btnColor: Button {size:[100, 50], alignment: ['fill', 'fill'], properties: {style: 'toolbutton'}}\
  }";

  win.ui = win.pal.add(res);
  win.btnColor = win.ui.btnColor;

  win.pal.layout.layout(true);

  win.pal.onResizing = win.pal.onResize = function ()
  {
    this.layout.resize();
  };

  if (win.pal !== null && win.pal instanceof Window)
  {
    win.pal.show();
  }

  return win;
};

aecolorpicker.prototype.colorUtils = {
  "AdobeRGBA2HEX": function (rgba)
  {
    var pad2 = function (c)
    {
      return c.length == 1 ? '0' + c : '' + c;
    };

    var convertDecimalToHex = function (d)
    {
      return Math.round(parseFloat(d) * 255).toString(16);
    };

    var hex =
    [
      pad2(Math.round(rgba[0] * 255).toString(16)),
      pad2(Math.round(rgba[1] * 255).toString(16)),
      pad2(Math.round(rgba[2] * 255).toString(16))
    ];

    return '#' + hex.join('').toUpperCase();
  },

  "HEX2AdobeRGBA": function (hex)
  {
    if (hex.charAt(0) === '#') hex = hex.substr(1);

    if ((hex.length < 2) || (hex.length > 6)) return null;

    var
    values = hex.split(''),
    r,
    g,
    b;

    if (hex.length === 2)
    {
      r = parseInt(values[0].toString() + values[1].toString(), 16);
      g = r;
      b = r;
    }
    else if (hex.length === 3)
    {
      r = parseInt(values[0].toString() + values[0].toString(), 16);
      g = parseInt(values[1].toString() + values[1].toString(), 16);
      b = parseInt(values[2].toString() + values[2].toString(), 16);
    }
    else if (hex.length === 6)
    {
      r = parseInt(values[0].toString() + values[1].toString(), 16);
      g = parseInt(values[2].toString() + values[3].toString(), 16);
      b = parseInt(values[4].toString() + values[5].toString(), 16);
    }
    else
    {
      return null;
    }

    return [
      r / 255,
      g / 255,
      b / 255,
      1
    ];
  },

  "CP2AdobeRGBA": function (cpdec)
  {
    return [
      (parseInt(cpdec.toString(16), 16) >> 16) / 255,
      (parseInt(cpdec.toString(16), 16) >> 8 & 0xFF) / 255,
      (parseInt(cpdec.toString(16), 16) & 0xFF) / 255,
      1
    ];
  },

  "luminance": function (hex, lum)
  {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];

    lum = lum || 0;

    var result = "#", c, i;

    for (i = 0; i < 3; i++)
    {
      c = parseInt(hex.substr(i * 2, 2), 16);
      c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
      result += ('00' + c).substr(c.length);
    }

    return result;
  }
};

aecolorpicker.prototype.getFirstSelPropColorValue = function ()
{
  if (app.project.activeItem instanceof CompItem)
  {
    var curLayer, curProp;

    if (app.project.activeItem.selectedLayers.length > 0)
    {
      curLayer = app.project.activeItem.selectedLayers[0];

      if (curLayer.selectedProperties.length > 0)
      {
        if (!curLayer.selectedProperties[0].hasOwnProperty('canAddProperty')) curProp = curLayer.selectedProperties[0];
        else if (curLayer.selectedProperties.length > 1) curProp = curLayer.selectedProperties[1];
        else return null;

        /*
        6212 - color propertyType
        6418 - color propertyValueType
        */
        if (curProp.propertyValueType === 6418) return curProp.valueAtTime(app.project.activeItem.time, false);
      }
    }
  }

  return null;
};

aecolorpicker.prototype.setSelPropsColorValue = function (rgba)
{
  if (app.project.activeItem instanceof CompItem)
  {
    var curLayer, curProp;

    for (var p = 0, pLen = app.project.activeItem.selectedLayers.length; p < pLen; p++)
    {
      curLayer = app.project.activeItem.selectedLayers[p];

      for (var i = 0, iLen = curLayer.selectedProperties.length; i < iLen; i++)
      {
        curProp = curLayer.selectedProperties[i];

        if (!curProp.hasOwnProperty('canAddProperty'))
        {
          /*
          6212 - color propertyType
          6418 - color propertyValueType
          */
          if (curProp.propertyValueType === 6418)
          {
            if (curProp.expression.replace(/\s/g, '').length > 0)
            {
              var c = confirm('Expression found!\n\nLayer name: ' + curLayer.name +
              '\nLayer index: ' + curLayer.index +
              String(curProp.parentProperty.isEffect ? '\nEffect: ' : '\nProperty Group: ') + curProp.parentProperty.name +
              String(curProp.parentProperty.isEffect ? '\nEffect Index: ' : '\nProperty Group Index: ') + curProp.parentProperty.propertyIndex +
              '\nProperty: ' + curProp.name +
              '\n\nAre you sure you want to change this color value?');
              if (c)
              {
                if (curProp.numKeys > 0) curProp.setValueAtTime(app.project.activeItem.time, rgba);
                else curProp.setValue(rgba);
              }
            }
            else
            {
              if (curProp.numKeys > 0) curProp.setValueAtTime(app.project.activeItem.time, rgba);
              else curProp.setValue(rgba);
            }
          }
        }
      }
    }
  }
};

aecolorpicker.prototype.run = function()
{
  var
  __self = this,
  ui = __self.ui(__self.root);

  ui.btnColor.helpTip = 'Set the color value of the selected properties.';

  // Set the default button color
  ui.btnColor.fillBrush = ui.btnColor.graphics.newBrush(ui.btnColor.graphics.BrushType.SOLID_COLOR, [0.3, 0.3, 0.3, 1]);

  ui.btnColor.onDraw = function ()
  {
    this.graphics.rectPath(0, 0, this.size[0], this.size[1]);
    this.graphics.fillPath(this.fillBrush);
  };
  ui.btnColor.onClick = function ()
  {
    var userColorAdobeRGBA = __self.colorUtils.CP2AdobeRGBA($.colorPicker());

    this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, userColorAdobeRGBA);
    this.notify("onDraw");
    __self.setSelPropsColorValue(userColorAdobeRGBA);
  };
  ui.btnColor.addEventListener('mouseover', function ()
  {
    var curColor = __self.getFirstSelPropColorValue() || this.fillBrush.color;

    this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, __self.colorUtils.HEX2AdobeRGBA(__self.colorUtils.luminance(__self.colorUtils.AdobeRGBA2HEX(curColor), 0.2)));
    this.notify("onDraw");
  });
  ui.btnColor.addEventListener('mouseout', function ()
  {
    var curColor = __self.getFirstSelPropColorValue() || this.fillBrush.color;

    this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, __self.colorUtils.HEX2AdobeRGBA(__self.colorUtils.luminance(__self.colorUtils.AdobeRGBA2HEX(curColor), -0.2)));
    this.notify("onDraw");
  });
};

var aecp = new aecolorpicker();

aecp.run();