Script ui - Slider issue

[Guest]

hey,

is it possible to make a "slider" that control the active layer opacity?

[Michael_L_Hale · Accepted solution]

Yes, it is possible. It's not a smooth as the GUI slider but is works.

var d= new Window('dialog');
          d.grpOpacity = d.add('group');
          d.grpOpacity.orientation = 'column';
          d.grpOpacity.alignChildren = ['fill','top'];
          d.grpOpacity.grpSlider = d.grpOpacity.add('group');
          d.grpOpacity.grpSlider.spacing = 0;
          d.grpOpacity.grpSlider.orientation = 'column';
          d.grpOpacity.grpSlider.st1 =  d.grpOpacity.grpSlider.add('statictext',undefined,'Opacity');
          d.grpOpacity.grpSlider.st1.alignment = 'left';
          d.grpOpacity.grpSlider.grpSlider = d.grpOpacity.grpSlider.add('group');
          d.grpOpacity.grpSlider.grpSlider.alignChildren = ['left','center'];
          d.grpOpacity.grpSlider.grpSlider.spacing = 0;
          d.slOpacity = d.grpOpacity.grpSlider.grpSlider.add('slider',undefined,0,0,100);
          d.slOpacity.value = app.activeDocument.activeLayer.opacity;
          d.slOpacity.preferredSize.width = 200;
          d.etOpacityValue = d.grpOpacity.grpSlider.grpSlider.add('edittext');
          d.etOpacityValue.text = Math.round(app.activeDocument.activeLayer.opacity);
          d.etOpacityValue.addEventListener ('keydown', InitEditKeyboardHandler );
          d.etOpacityValue.preferredSize.width = 40;
          d.grpOpacity.grpSlider.grpSlider.stUnit = d.grpOpacity.grpSlider.grpSlider.add('statictext',undefined,'%');

          d.grpOpacity.grpSlider.grpSt = d.grpOpacity.grpSlider.add('group');
          d.grpOpacity.grpSlider.grpSt.orientation = 'row';
          d.grpOpacity.grpSlider.grpSt.alignment = 'fill';
          d.grpOpacity.grpSlider.grpSt.spacing = 0;
          d.grpOpacity.grpSlider.grpSt.margins = [5,0,0,0];
          d.grpOpacity.grpSlider.grpSt.grpLeft = d.grpOpacity.grpSlider.grpSt.add('group');
          d.grpOpacity.grpSlider.grpSt.grpLeft.st1 = d.grpOpacity.grpSlider.grpSt.grpLeft.add('statictext',undefined,'0');
          d.grpOpacity.grpSlider.grpSt.grpLeft.st1.alignment = ['left','center'];
          d.grpOpacity.grpSlider.grpSt.grpLeft.st1.preferredSize.width = 150;
          d.grpOpacity.grpSlider.grpSt.grpLeft.st3 = d.grpOpacity.grpSlider.grpSt.grpLeft.add('statictext',undefined,'100');
          d.grpOpacity.grpSlider.grpSt.grpLeft.st3.alignment = ['right','center'];
          d.grpOpacity.grpSlider.grpSt.grpLeft.st3.preferredSize.width = 40;
          
          d.grpButtons = d.add('group');
          d.grpButtons.alignment = "right";
          d.grpButtons.btnCanel = d.grpButtons.add( 'button', undefined, 'Cancel', { name:'cancel' });
          d.grpButtons.btnOK = d.grpButtons.add( 'button', undefined, 'Ok', { name:'ok' });
          
          d.etOpacityValue.onChanging = d.etOpacityValue.onChange = function(){
                                                                                                              var d = FindDialog(this);
                                                                                                              d.slOpacity.value = Number(this.text);
                                                                                                              d.slOpacity.onChange();
                                                                                                              
                                                                                                              }
          d.slOpacity.onChanging  = d.slOpacity.onChange = function(){
                                                                                var d = FindDialog(this);
                                                                                d.etOpacityValue.text = Math.round(this.value);
                                                                           }
       d.slOpacity.onChange = function(){
                                                                                var d = FindDialog(this);
                                                                                app.activeDocument.activeLayer.opacity = Math.round(this.value);
                                                                                app.refresh();
                                                                           }
          
d.show();

function FindDialog( inItem ) {
     var w = inItem;
     while ( 'dialog' != w.type ) {
          if ( undefined == w.parent ) {
               w = null;
               break;
          }
          w = w.parent;
     }
     return w;
};
function InitEditKeyboardHandler (event) {
    try {
        var keyIsOK = KeyIsNumeric(event) ||
                                   KeyIsDelete(event) || 
                                   KeyIsLRArrow(event) ||
                                   KeyIsTabEnterEscape(event);                 
        if (! keyIsOK) {
            event.preventDefault();
            app.beep();
        }
    }
    catch (e) {
    }
};
//    key identifier functions
function KeyIsNumeric ( event ) {
    return   ( event.keyName.match( /[0-9]/) != null ) && ! KeyHasModifier ( event );
}
function KeyIsPeriod ( event ) {
    return  ( event.keyName.match( /Period/) != null ) && ! KeyHasModifier ( event );
}
function KeyIsComma ( event ) {
    return  ( event.keyName.match( /Comma/) != null ) && ! KeyHasModifier ( event );
}
function KeyHasModifier ( event ) {
    return event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
}
function KeyIsDelete (event) {
    //    Shift-delete is ok
    return (event.keyName == 'Backspace') && ! (event.ctrlKey);
}
function KeyIsLRArrow (event) {
    return ((event.keyName == 'Left') || (event.keyName == 'Right')) && ! (event.altKey || event.metaKey);
}
function KeyIsTabEnterEscape (event) {
     return event.keyName == 'Tab' || event.keyName == 'Enter' || event.keyName == 'Escape';
}

[Guest]

thank you very much! works great

[Muppet_Mark-QAl63s]

Mike, I will need to take a look at your example of the keyboard events looks interesting… I have not used any to date…

I put this in a palette for illustrator a couple of weeks back and it amused me the whole day… Small thing n small minds… and all that…

     beGone.onClick = function() {                      // Fadeout locks focus for a short while…                      for (var i = 90; i > 10; i--) {                                $.sleep(10);                palWin.opacity = i/100;                           }                 palWin.close(); // Be gone…      };

I color my palettes based on the app color and set the opacity to 90 just because it looks pretty that way on my mac…

Have you worked out how to or if you can use themes? within UI…

[Guest]

for some reason, when i try to move the slider more then 2 times, the script stop and ESTK highlight line 62 (look at the screenshot).

i can't figure out why..

do you have any idea?

                                                                              "  app.activeDocument.activeLayer.opacity = Math.round(this.value); "

thanks!

[Muppet_Mark-QAl63s]

It did that on me too and I wasn't sure why…

[Paul Riggott]

Works fine with Windows 7 and CS5.

Maybe it's another problem with Macs

[Muppet_Mark-QAl63s]

Oh shush paul… more likely me… May be it needs a vertical slider do that on ya pc…

And this is what we do with Apple stuff when it don't work like it should… Yep throw it down the garden… That will learn it…

[Paul Riggott]

Nice one Mark!

Us poor PC guys have to use summat like...

var w = new Window ("dialog");
var slider = w.add ("scrollbar", undefined, 0, 100);
slider.size = "width: 20, height: 300";
w.show ();

[Muppet_Mark-QAl63s]

Paul, you know I can't test that… I saw in a guide that that was a mac only thing may be I was mislead… Anyhows to the problem…

app.refresh();

Appears to be doing this for me… Take this test that I did… with this commented out runs fine put it in and the line before it kicks out an error? Im not good enough at this stuff to know why that is…? But I do suspect photoshop+mac+scriptUI has issues anyway… That vertical slider for instance works in other targets but NOT in photoshop… Hum… My test… oh and why does my d value not work for 100% got some silly math issue there… Need to look at that…

function layerOpacity() {      var win = new Window('dialog','Adjust Opacity');            win.preferredSize = [250,150];            win.opacity = 0.9;      var red = 0, green = (1/256)*102, blue = (1/256)*153;      win.graphics.backgroundColor = win.graphics.newBrush      (win.graphics.BrushType.SOLID_COLOR,[red, green, blue]);            var grp1 = win.add('group');      grp1.orientation = 'column';            var layop = Math.round(app.activeDocument.activeLayer.opacity);            //var layop = 10; // Just to test against the ESTK engine      var opText = grp1.add('statictext',undefined,'Opacity: '+layop);            opText.graphics.font = ScriptUI.newFont('Helvetica', 'Bold', 12);            opText.graphics.foregroundColor = opText.graphics.newPen      (opText.graphics.PenType.SOLID_COLOR, [1.0, 1.0, 1.0], 1);            var qual = grp1.add('slider',undefined,layop,0,100);      qual.preferredSize = [200,50];            qual.onChanging = function () {                 var d = Math.round(qual.value);                      opText.text = opText.text.replace(/\d*$/,d);                      app.activeDocument.activeLayer.opacity = d;           //app.refresh();                 };            var grp2 = win.add('group');                 grp2.cancelBtn = grp2.add('button',undefined,'Cancel',{name:'cancel'});            grp2.okBtn = grp2.add('button',undefined,'OK',{name:'ok'});                 grp2.okBtn.onClick = function() {                     for (var i = 90; i > 10; i--) {                               $.sleep(5);                win.opacity = i/100;                          }                 win.close(0);      };                 win.center();            win.show(); }; layerOpacity();

[Muppet_Mark-QAl63s]

A vertical slider ran against other app targets… Then same dialog in PS… tut tut…

[Michael_L_Hale]

Mark, FindDialog and the keyboard functions are from an Adobe script. As far as I know there is no easy way to 'skin' or match the app theme with ScriptUI. You have to use the graphics property of the window and controls which it looks like you have done in the script you posted.

app.refresh() may not be needed on all systems. On mine though if it is commented out the document does not show the changes when the slider is moved. It could be that if app.refresh is called again while the last call is still running that throws an error. But again on my system ( windows ) the script doesn't throw an error. It just does not respond while app.refresh is running. Which is why I said it is not as smoth as the GUI version. For me this stutters and skips as I move the slider quickly.

It would be nice to know if there is a problem with app.refresh on Mac when in a dialog widget callback.

[Muppet_Mark-QAl63s]

Mike, If its any help its the line before that locks out… Kicks back about general error and not available with this version of photoshop…

If I move the slider in clear separate moves it appears fine… but make 2 moves too close to each other… then error…

[Michael_L_Hale]

It seems that almost all errors now are general errors and say not available with this version of photoshop. Not as helpful as they were at one time.

And I know it's the line that sets the opacity that throws the error, but only if the next line is app.refresh(); It seems that on some systems the app.refresh call is asynchronous when it should not be.

[Paul Riggott]

It seems as onChanging cannot cope with the changes. Now using onChange seems to work reasonably.

var w = new Window ('dialog','Opacity');
w.pnl1 = w.add('panel', undefined, undefined, {borderStyle:"black"}); 
w.pnl1.orientation='row';
w.grp10 = w.pnl1.add('group');
w.grp10.sb = w.pnl1.add ('scrollbar', undefined, 100, 0,100);
w.grp10.sb.size = "width: 20, height: 300";
w.grp10.st1 = w.grp10.add('statictext',undefined,Math.round(app.activeDocument.activeLayer.opacity));
w.grp10.st1.preferredSize=[50,20];
w.grp10.sb.onChange=function(){
 w.grp10.st1.text= Math.round(w.grp10.sb.value);
 app.activeDocument.activeLayer.opacity=Math.round(w.grp10.sb.value);
 app.refresh();
}
w.add('button',undefined,'Cancel');
w.show ();

[Paul Riggott]

It might be better to use both?

var w = new Window ('dialog','Opacity');
w.pnl1 = w.add('panel', undefined, undefined, {borderStyle:"black"}); 
w.pnl1.orientation='row';
w.grp10 = w.pnl1.add('group');
w.grp10.sb = w.pnl1.add ('scrollbar', undefined, 100, 0,100);
w.grp10.sb.size = "width: 20, height: 300";
w.grp10.st1 = w.grp10.add('statictext',undefined,Math.round(app.activeDocument.activeLayer.opacity));
w.grp10.st1.preferredSize=[50,20];
w.grp10.sb.onChanging=function(){
    w.grp10.st1.text= Math.round(w.grp10.sb.value);
}
w.grp10.sb.onChange=function(){
 app.activeDocument.activeLayer.opacity=Math.round(w.grp10.sb.value);
 app.refresh();
}
w.add('button',undefined,'Cancel');
w.show ();

[Muppet_Mark-QAl63s]

Paul, I tried on.changing() to on.change() before and I get the same result… if too close… error

[Guest]

this slider works great without errors. good job!

but.. can i see the result of the opaciry change in real time?