adamplouff/scriptui-battlestyle

Button options for ScriptUI, namely high high-density/retina icon buttons from vector.

scriptui-battlestyle's Issues

SVG icon is not resized on palette resize

I don't know if this one is possible but um here it goes.
I want to resize the icon whenever the user expands the palette window

RadioButton Behavior

Hello there!

I'm your customer on the RubberHose. In fact you inspired me to create my own tools. So I am studying After Effects scripts.

I work on retina display, and the only great script interface that I use is the RubberHose one. I try to work with images and scripts but it's terrible.

When I found the BattleStyle. O.M.G.!! Thank you for that. It's amazing.

Right now in working on figure a way to add a new state to the button, and make them work as radio buttons too.

Here is what I was done adapting your script. Let me know what you think.

var w = new Window("palette", "Create Text Animations",);
w.orientation = "column";
w.alignChildren = ['fill', 'center'];

/**************************************************************************
* Miscellaneous **********************************************************
**************************************************************************/

/** convert a #ff00ff color string to a normalized RGBA color array
@parem {hexString} - string - hex string
*/
function hexToArray(hexString) {
  var hexColor = hexString.replace('#', '');
  var r = parseInt(hexColor.slice(0, 2), 16) / 255;
  var g = parseInt(hexColor.slice(2, 4), 16) / 255;
  var b = parseInt(hexColor.slice(4, 6), 16) / 255;
  return [r, g, b, 1];
}

/**************************************************************************
* Text Button ************************************************************
**************************************************************************/
function txtDraw() {
  this.graphics.drawOSControl();
  this.graphics.rectPath(2, 2, this.size[0]-4, this.size[1]-4);
  this.graphics.fillPath(this.fillBrush);
  this.graphics.strokePath(this.strokeBrush);
  if (this.text) {
    this.graphics.drawString(
      this.text,
      this.textPen,
      (this.size[0] - this.graphics.measureString(this.text, this.graphics.font, this.size[0])[0]) / 2,
      (this.size[1] - this.graphics.measureString(this.text, this.graphics.font, this.size[0])[1]) / 1.75,
      this.graphics.font);
    }
  }

  function buttonColorText(parentObj, buttonText, staticColor, hoverColor, strokeColor, ) {
    var btn = parentObj.add('button', undefined, '', {name: 'ok'});    // add a basic button to style
    btn.fillBrush = btn.graphics.newBrush(btn.graphics.BrushType.SOLID_COLOR, hexToArray(staticColor));
    btn.strokeBrush = btn.graphics.newPen(btn.graphics.PenType.SOLID_COLOR, hexToArray(staticColor), 2);
    btn.text = buttonText.toUpperCase() + "\v";
    btn.textPen = btn.graphics.newPen(btn.graphics.PenType.SOLID_COLOR, hexToArray('#ffffff'), 1);
    btn.value = false;
    btn.onDraw = txtDraw;

    if (hoverColor) {
      try {
      btn.addEventListener("mouseover", function() {
        if (btn.value) {
          updateTextButtonOnHover(this, buttonText, hoverColor, "#FFFFFF", strokeColor);
        }
        else {
          updateTextButtonOnHover(this, buttonText, hoverColor, "#FFFFFF", hoverColor);
        }
      });
      btn.addEventListener("mouseout", function() {
        if (btn.value) {
          updateTextButtonOnHover(this, buttonText, staticColor, "#FFFFFF", strokeColor);
        }
        else {
          updateTextButtonOnHover(this, buttonText, staticColor, "#FFFFFF", staticColor);
        }
      });
      btn.onClick = function() {
        if (!btn.value){
          for (i = 0; i < this.parent.children.length; i++){
            myB = this.parent.children[i];
            myB.value = false;
            updateTextButtonOnHover(myB, myB.text, staticColor, "#FFFFFF", staticColor);
          }

          updateTextButtonOnHover(this, buttonText, hoverColor, "#FFFFFF", strokeColor);
          this.value = true;
        }
      };
      } catch (err) {
      // fail silently
      }
    }

    return btn;
  }

  function updateTextButtonOnHover(btn, buttonText, backgroundColor, textColor, strokeColor) {
    btn.fillBrush = btn.graphics.newBrush(btn.graphics.BrushType.SOLID_COLOR, hexToArray(backgroundColor));
    btn.strokeBrush = btn.graphics.newPen(btn.graphics.PenType.SOLID_COLOR, hexToArray(strokeColor), 2);
    btn.text = buttonText.toUpperCase() + "\v";
    btn.textPen = btn.graphics.newPen(btn.graphics.PenType.SOLID_COLOR, hexToArray(textColor), 1);
    btn.onDraw = txtDraw;

    return btn;
  }

  var a = buttonColorText(w, "01!", "#546E7A", "#55869d", "#5AECFF", 2);
  a.value = true;
  updateTextButtonOnHover(a, a.text, "#55869d", "#FFFFFF", "#5AECFF")

  var b = buttonColorText(w, "02!", "#546E7A", "#55869d", "#5AECFF", 2);
  var c = buttonColorText(w, "03!", "#546E7A", "#55869d", "#5AECFF", 2);


  w.show();

Again, thanks for your amazing work.

All the best,

Jack.

transform svg path to polygon

this tools so cool. I make a tools ,can transform a svg path to polygon string。

https://www.nangonghan.com/path2polygon/

Images for README