ScriptUI window.minimized = true; on Mac

[Silly-V]

I would like to make custom palettes for Illustrator which have the ability to get out of the way, similar to native palettes.  On Windows, my minimized = true; command works, and the palette shrinks into a tiny bar, which I like.  However, same command on Mac does not do the trick.

#target illustrator
#targetengine main
function myPanel(){
    var arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];


    function paletteWindow(){
        var w = new Window('palette', 'My Panel', undefined, {resizeable: true});
        var g1 = w.add('group');
        var t = g1.add('treeview', undefined, []);   t.size = [200, 450];
        for(var i=0; i<arr.length; i++){
            var item = arr;
            var n = t.add('node', item);
        }
        t.onDoubleClick = function(){
            if(t.selection != null && t.selection.text != ''){
                alert(t.selection.text);
            }
        };


        var btn_min = w.add('button', undefined, 'Minimize');
        btn_min.onClick = function(){
            w.minimized = true;
            w.update();
        }


        w.onResizing = w.onResize = function () {this.layout.resize ();}
        w.onShow = function(){
            w.minimumSize.width = 220;
            w.minimumSize.height = 100;
            t.items[1].expanded = true;
        }
        this.show = function(){w.show();}
    }
    var thisPaletteWindow = new paletteWindow(); // have to call it like this, or it disappears.
    thisPaletteWindow.show();
}


myPanel();

[CarlosCanto]

try adding maximize & minimize creation property buttons to the palette to see if those work.

[Silly-V]

I tried the sizes, which didn't seem to make it work, but I also added a minimizeButton and maximizeButton, hoping to get something working.  What I saw was that buttons were added (This is Mac, CS5)  , the maximize button maximized the window to fill entire screen, but the minimize button was completely disabled.  Then, I consulted Peter Kahrel's ScriptUI guide to notice that we can make a Window() with type 'window' , which gave me the minimize button on the Mac, but it minimizes completely to the dock, instead of my desired effect of minimizing into a little rectangle, and floating up there.

[W_J_T]

Have a look at this thread and example:

Dynamic script UI changes

There are a few others that are relative in the InDeisgn forum also. Hope it helps your efforts.

[CarlosCanto]

look who decided to show up

[W_J_T]

Silly-V,

You don't feel that is a viable option?

Another option is just having the control button(s) at the top of the window and resizing the window.

Of course sadly, nothing is based upon standard UI practices across platforms, but we can only do what the lacking features allow us. More Nopes than Yeps in many cases.

CarlosCanto wrote:  look who decided to show up

Disappointed or Missed me?

[Silly-V]

Both look great, I've just got a busy spell so I haven't gotten to testing and applying this yet.

[W_J_T]

If you like the result of the above basic example screen shots I can post the code.

[Silly-V]

I would love code! Please, post away, it shall be used.

[W_J_T]

I would if I could, but the forum is not allowing me to post it. I have tried multiple times, I hope 10 instances of it wont suddenly appear here, I will try again in the morning.

---------

EDIT: Tried again today, Same thing.

The forum will not allow me to post the code, almost seems like I used something in the code that the forum will not allow? Unless something is still funky with the forum?

---------

EDIT 2: If I edit my post the code shows in the edit content, but not in the actual saved/posted post? How impressive.

[ Time to take another 10 month hiatus?  ]

---------

EDIT 3:

Well anyway its not rocket science, here is a screen shot of the code that makes the result in the two screen shots I posted above. It should give you the basic idea of the simple example, it just uses hard coded numbers.

Sorry the forum is not allowing me to post the actual code, maybe it will show up on its own someday x 20. Is anyone else experiencing issues posting codes?

[Silly-V]

Hmm, I just keep having the problem of the treeview keeping my window at a minimum size of the treeview, which does not get clipped off by the window bounds. I can make it grow bigger than my contents, or shrink to the contents, but never be smaller than the contents. I am on OSX 10.7.5, CS5, I notice my scrollbars are different in appearance to the screenshots you provide, W_J_T.  Did you know it's impossible to 'mention' you?  Because you have underscores in your name which are word-delimiters in the mentioning options?  Anyways, I shall try this on my work CC2014 next.

[W_J_T]

Geez, it still will not let me post this code, absurd.

Anyway, I am using CS5 under 10.6.8. So are you saying you tried my example and it failed for you or it failed when you tried to implement the concept into your script?

As far as mentioning thats interesting, you mean like this -> W_J_T‌ ?

[Silly-V]

Hey, I know what the problem is! Everything you can do, I can't!  Haha, I don't know how you got it work, I had a hard time! Still can't do it.  And, as for my experiment, I just took the sizing method you use to try and change my window in the first example. 

[Silly-V]

Okay, I think I can live with the following workaround:

I can just have me a palette which has a button, the button shows the real palette and closes this one. The real palette has a button that closes that one and shows the tiny one!
Or, there can be a 'toolbar' which can show & hide other bigger palettes.

I made the following though, which uses window closing to get rid of non-visible windows. It is probably possible to do this by messing with the 'visible' property of the windows, and just keep one hidden. Well, with this setup, it's possible to pass in the configuration of the big palette as an object to be stored in the tiny window, and then to resurrect the element states of the big one when it's maximized, including the window's location so that it appears as if they are appearing back in the last place they were closed at. This could be re-purposed to pop up the big palette in the same location of the tiny one, so that they closer mimic the behavior of the native UI panels. This works for me in CC2014, so I may have to use this on a few things.

#target illustrator
#targetengine main
//need main engine here explicitly
function myPanel(){
    var arr = [];
    for(var i=33; i<123; i++){
        arr.push(String.fromCharCode(i)+" ------------------ text line");
    }


    function tinyWindow(storeObj){
        var w = new Window('palette', 'MiniPanel', undefined, {borderless: false}); w.spacing = 0; w.margins = [0,0,0,0];
        w.location = storeObj.tinyWindowLocation;
        var btn = w.add('button', undefined, 'Maximize');
        this.show = function(){w.show();}
        btn.onClick = function(){
            storeObj.tinyWindowLocation = w.bounds;
            var thisPaletteWindow = new paletteWindow(storeObj);
            thisPaletteWindow.show();
            w.close();
        }
    }
    function paletteWindow(setupObj){
        var w = new Window('palette', 'My Panel');
        w.location = setupObj.bigWindowLocation;
        var g1 = w.add('group');
        var t = g1.add('treeview', undefined, []);  t.size = [200, 450];
        for(var i=0; i<arr.length; i++){
            var item = arr;
            var n = t.add('node', item);
        }
        var e = w.add('edittext', undefined, setupObj.edittextContents, {readonly: true}); e.characters = 19;
        t.onDoubleClick = function(){
            if(t.selection != null && t.selection.text != ''){
                e.text = (t.selection.text);
            }
        };


        var btn_min = w.add('button', undefined, 'Minimize'); 
        btn_min.onClick = function(){ 
            var thisTinyWindow = new tinyWindow({edittextContents: e.text, tinyWindowLocation: setupObj.tinyWindowLocation, bigWindowLocation: w.location});
            thisTinyWindow.show();
            w.close();
        } 

        this.show = function(){w.show();}
    }


    var thisTinyWindow = new tinyWindow({edittextContents: '', tinyWindowLocation: [920,514], bigWindowLocation: [860, 350]});
    thisTinyWindow.show();
} 


myPanel();

[W_J_T]

Hmmm... so I guess I am to assume you couldn't get the link above or my example approach working successfully in CC ? If so that's scary, yet unsurprising that they broke certain things?

Silly-V wrote:

it's possible to pass in the configuration of the big palette as an object to be stored in the tiny window, and then to resurrect the element states of the big one when it's maximized, including the window's location so that it appears as if they are appearing back in the last place they were closed at. This could be re-purposed to pop up the big palette in the same location of the tiny one, so that they closer mimic the behavior of the native UI panels.

I am not sure if they are supposed to follow each other, but for me they pop up in different locations, that and they are different widths. I think from a UI standardization standpoint if you are gonna go with this approach they should indeed replace each other in the same location, and retain the same width (even though the height will vary obviously) for some UI congruence.

At least you seemed to like the "fromCharCode" to build an array. 😉

[Silly-V]

Oh I had no idea about that charCode, thanks for the example!

Actually, the minimizing wasn't an issue in CC2014 on Windows, my Mac testing is confined to CS5 on a laptop with 10.7.5 OSX.

So, yea they are different widths so as to try to simulate the native panels when they shrink down to their name and have the arrow. I wonder if I can just draw it now...

As for the location, yea you're right, I'm going to change it up.

[Silly-V · Accepted solution]

Aha- this is something a little bit better.

Also, I guess there's no reason to pass in an object if it can be kept outside the palette functions. Not sure why I even thought that was the way to go?

#target illustrator
#targetengine main


function myPanel(){
    var arr = [];
    for(var i=33; i<123; i++){
        arr.push(String.fromCharCode(i)+" ------------ text line");
    }


    function tinyWindow(storeObj){
        var w = new Window('palette', 'MiniPanel', undefined, {borderless: false, closebutton: false}); w.spacing = 0; w.margins = [0,0,0,0];
        var loc = (SETTINGS.syncLocations) ?  storeObj.bigWindowLocation : storeObj.tinyWindowLocation ;
        w.location = loc;
        var p = w.add('panel'); p.size = [100, 42];
        var btn = p.add('statictext', undefined, 'Maximize');
        this.show = function(){w.show();}
        btn.addEventListener('mousedown' , function(){
            storeObj.tinyWindowLocation = w.bounds;
            var thisPaletteWindow = new paletteWindow(storeObj);
            thisPaletteWindow.show();
            w.close();
        });
    }
    function paletteWindow(setupObj){
        var w = new Window('palette', 'My Panel');
        var loc = (SETTINGS.syncLocations) ?  setupObj.tinyWindowLocation : setupObj.bigWindowLocation;
        w.location = loc;
        var g1 = w.add('group');
        var t = g1.add('treeview', undefined, []);   t.size = [200, 450];
        for(var i=0; i<arr.length; i++){
            var item = arr;
            var n = t.add('node', item);
        }
        var e = w.add('edittext', undefined, setupObj.edittextContents, {readonly: true}); e.characters = 19;
        t.onDoubleClick = function(){
            if(t.selection != null && t.selection.text != ''){
                e.text = (t.selection.text);
            }
        };
        var g2 = w.add('panel', undefined, 'Window Options'); g2.alignChildren = 'left';
        var r1 = g2.add('radiobutton', undefined, 'Minimize in same place.');
        var r2 = g2.add('radiobutton', undefined, 'Minimize in different places.');
        r1.value = SETTINGS.syncLocations;
        r2.value = !r1.value;

        var btn_min = w.add('button', undefined, 'Minimize');  
        btn_min.onClick = function(){
            SETTINGS.syncLocations = r1.value;
            var thisTinyWindow = new tinyWindow({edittextContents: e.text, tinyWindowLocation: setupObj.tinyWindowLocation, bigWindowLocation: w.location});
            thisTinyWindow.show();
            w.close();
        }  

        this.show = function(){w.show();}
    }


    var SETTINGS = {
        syncLocations: true
    };
    var thisTinyWindow = new tinyWindow({edittextContents: '', tinyWindowLocation: [920,514], bigWindowLocation: [860, 350]});
    thisTinyWindow.show();
}  


myPanel();

[W_J_T]

Nice work.

You may consider replacing the "text used as a button" (it's too small of a click area) to an actual button in the tinyWindow. For example:

w.margins = 10
//...
/*
var p = w.add('panel');
p.size = [100, 42];
var btn = p.add('statictext', undefined, 'Maximize');
*/
var btn = w.add("button", undefined, "Maximize");
btn.preferredSize = [200, 42];
//...

Also for further congruency you might also consider having the same spacing margins in the bigger window, as well as matching the button size, etc.

It looks nice and has a fluid transition when everything is matched up between the two.

Again, nice job, impressive.

-----

EDIT: Hi CarlosCanto, good to see you as well. 😉

[Silly-V]

Thank you, yes, the button sounds good! I wish there was a way to create a draggable borderless window to simulate a native panel even better. I didn't see how that's possible though.

[CarlosCanto]

Hi guys, found a way to make borderless windows/palettes draggable, in a true Adobe fashion, it works horribly across Ai versions, CS6 being the worst in my preliminary testing...still it may be useful as is...enjoy!!

#target illustrator
#targetengine main


function demo () {
    var win = new Window ("palette", undefined, undefined, {borderless:true});


    // ***************************
    // CC - add a panel the size of the window, then add all controls to the panel as usual
    // then when the script runs, click and drag anywhere within the Panel

    var p = win.add('panel');
    p.alignment = ['fill', 'fill'];

    win.size = [200,150];
    win.margins = 1;
    win.spacing = 1;

    // ***************************

    // CS6 - didn't work with the panel above, controls must be added to the Window itself
    // CS5 - works OK with or without the Panel
    // Thanks Adobe !!!

    var btnOk = p.add('button', undefined, 'OK');
    var btnCancel = p.add('button', undefined, 'Close');

    btnCancel.onClick = function () {win.close()}

    makeWinDraggable (win); // click and drag on any empty space in the Window (or Panel) to move it around


    win.show();
}


demo();




function makeWinDraggable (w) {
/* //*********************************************
    Pass a window of any kind to be able to click and drag the window around
    CC - didn't work, had to add a panel the size of the window, then add all controls to the panel
    CS6 - didn't work with the panel, add controls to the Window
    CS5 - worked beautifully with or without the panel, all testing done in Windows
    Carlos Canto // 04/12/15
*/ //*********************************************


    var xClient, yClient; // mouse position from left/top window (client is the Panel if added)

    w.drag = false;

    w.addEventListener('mousemove', moveHandler); //calls function when the mouse moves inside the window
    w.addEventListener('mousedown', downHandler); // (eventName, handler, capturePhase);
    w.addEventListener('mouseup', upHandler); // (eventName, handler, capturePhase);

    function moveHandler(e) {
        if (w.drag) {
            w.location = [e.screenX-xClient, e.screenY-yClient]; // screenX/Y, mouse position from Monitor left/top
        }
    }


    function downHandler(e) {
        w.drag = true;
        xClient = e.clientX;
        yClient = e.clientY;
    }


    function upHandler(e) {
        w.drag = false;
    }
}

[Silly-V]

CarlosCanto‌ does it again!

Great work and thanks for taking over where I had lost hope!

[W_J_T]

Sadly this does not work for me at all (dragging) - OSX CS5.

[Silly-V]

Try to drag by the little margin outside of the panel but inside the window! I believe Carlos did not have CS5 on Mac nearby to test with.

[W_J_T]

Thanks, I was misguided thinking the entire panel area was gonna be draggable. Still, pretty nice when used with a bigger margin.

[Silly-V]

Well, Carlos says in comments that some need to have the panel and some don't, so for Mac CS5, you'd just use the window & won't need that panel.