.bounds newline Script UI

[scottm29310603]

I've created an array of buttons.

var b = new Array(); for(var i = 0; i < dataField.length ; i++ ){ if(dataField[i][1].indexOf("DA ") > -1){ b[i] = groupOne.add ('iconbutton', undefined, undefined, {name:'Blue', style: 'toolbutton'}); b[i].bounds = [0,0,30,20]; b[i].fillBrush = b[i].graphics.newBrush(b[i].graphics.BrushType.SOLID_COLOR,dataField[i][0]); b[i].onDraw = customDraw; 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); }} } }

This all works fine.

However. What I want is, when I resize my panel. The buttons to go onto a newline. I know a way to create lines of so many, but it would be nice to have something that automatically creates new lines.

[Mylenium]

That's quite general a limitation of pretty much any Adobe panel. They are state-based, not auto-reflow. Not sure if they'll ever change it.

Mylenium

[scottm29310603]

I'm looking at someone elses script and this is what they use to auto-reflow. I understand so much of it, but I don't know how to get it to work for me with buttons. There's obviously more to the script, but this is the section for relayering.

// Callback function for laying out the buttons in the panel

function swatchYouWant_doResizePanel()

{

var pal = swatchPal;

var btnSize = swatchYouWantData.swatchSize;

var btnOffset = btnSize + 1;

var maxRightEdge = pal.size.width - btnSize;

var leftEdge = 1;

var topEdge = 1;

// Reset the background group container's bounds

pal.btnGroup.bounds = [0, 0, pal.size.width, pal.size.height];

// Reset each button's layer bounds

var newLine = true;

for (var i=0; i<swatchYouWantData.colors.length; i++)

{

pal.swatches[i].bounds = [leftEdge, topEdge, leftEdge+btnSize, topEdge+btnSize];

newLine = false;

leftEdge += btnOffset;

// Create a new row if no more columns available in the current row of buttons

if (leftEdge > maxRightEdge)

{

leftEdge = 1;

topEdge += btnOffset;

newLine = true;

}

}

// The settings and help buttons go into the next "slot"

leftEdge = 1;

if (!newLine)

topEdge += btnOffset;

topEdge += (($.os.indexOf("Windows") != -1) ? 0 : 5);// add 5 more pixels to the gap on Mac (because of its margin when disabled)

btnSize = 30;

pal.settingsBtn.bounds = [leftEdge, topEdge, leftEdge+btnSize, topEdge+20];

leftEdge += btnSize + 1;

if (leftEdge > (pal.size.width - btnSize))

{

leftEdge = 1;

topEdge += 20 + 1;

}

pal.helpBtn.bounds = [leftEdge, topEdge, leftEdge+btnSize, topEdge+20];

}

[scottm29310603]

@Mylenium

Just on the off chance you can help simplify this. Is there a way to do increments. So for every 5 go to the next row?

var b = new Array();
for(var i = 0; i <= numColors; i++ ){ var f = File (File)
if(i <= 6){ b[i] = buttonsRow1a.add ("iconbutton", undefined, f, {style: "toolbutton"}); }
else if(i >= 7 && i <= 13){ b[i] = buttonsRow1b.add ("iconbutton", undefined, f, {style: "toolbutton"}); }
else if (i >= 14 && i <= 20){ b[i] = buttonsRow1c.add ("iconbutton", undefined, f, {style: "toolbutton"}); }
else if(i >= 21 && i <= 27){ b[i] = buttonsRow1d.add ("iconbutton", undefined, f, {style: "toolbutton"}); }
else if(i >= 28 && i <= 34){ b[i] = buttonsRow1e.add ("iconbutton", undefined, f, {style: "toolbutton"}); }
else if(i >= 35 && i <= 41){ b[i] = buttonsRow1f.add ("iconbutton", undefined, f, {style: "toolbutton"}); }
else{ b[i] = buttonsRow1g.add ("iconbutton", undefined, f, {style: "toolbutton"}); }
}

[Tomas Sinkunas · Accepted solution]

Here's a snippet by @zack_lovatt how to implement Responsive UI:

https://bitbucket.org/snippets/zlovatt/XKb7k/extendscript-responsive-layout

[scottm29310603]

I will get around to looking at this.

This looks like the one I was looking at.

I've built a swatch reader, but it put all the buttons in one row. Hence this post and the other post. When you have 15 swatches it becomes a very long row. So I've been testing it out with another plugin of mine where I pull images out of folder and use them as background images for the buttons.

Once I cracked that, was gonna go back to the swatch reader and implement it to that.

But I'll try and understand what Zack has done. I'm guessing it's mostly mathematical and refreshing.

[Tomas Sinkunas]

If the window opens too big, you can always assign a default size for it:

win.preferredSize = [x, y];

[scottm29310603]

That was actually easier than expected. Zack made it very easy to just paste in your buttons and it did the rest for me. As I was reading it, most going over my head, I saw that he built the buttons in a seperate section. So put my code into it and it worked really nicely.

Cheers for sending the link. 

[scottm29310603]

Hey Tomas,

That worked great, not I'm trying to have it refresh

var dataField = new Array();

for (var i=0; i<numColors; i++){
var colorData = data.values[i];
if(colorData.type == "RGB"){
    if(colorData.name.indexOf("DA ") > -1){
    color = [colorData.r, colorData.g, colorData.b, 1];
    dataField[dataField.length] = new Array(color,colorData.name);
    }
    }
}
                
                var b = new Array();    
                for(var i = 0; i < dataField.length ; i++ ){
                b[i] = btnGrp.add('iconbutton', undefined, undefined, {name:'Blue', style: 'toolbutton'});
                b[i].size = [30,this.defaultSize[1]];
                b[i].fillBrush = b[i].graphics.newBrush(b[i].graphics.BrushType.SOLID_COLOR,dataField[i][0]);
                b[i].onDraw = customDraw;
                     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);
               }}
       }

I want to create a dropdown menu, with my brands MA, DA, CA, EVA...etc Now I can call back the dropdown menu, but it goes one of two ways. Either I clear the entire panel, or it does nothing. How can I update the panel and change this part 

if(colorData.name.indexOf("DA ")

I've included the button part, as I assume. I'd need to put this into brackets to refresh.

[jamesVoodooMotion]

The link is down, is this still available anywhere because I'd love to read it, thanks! 🙂