Open/close panes in PJSR dialog?

[mschuster]

Those open/close panes with the double arrow icons (in ImageIntegration's dialog for example), are they possible in a PJSR dialog? I can find neither examples nor documentation for this. I've got a big dialog planned that needs the space.
Thanks,
Mike

[Juan Conejero]

I have written a small script that demonstrates how this can be done with PJSR:

Code: [Select]

#include <pjsr/ButtonCodes.jsh>
#include <pjsr/Color.jsh>
#include <pjsr/DataType.jsh>
#include <pjsr/FocusStyle.jsh>
#include <pjsr/Sizer.jsh>
#include <pjsr/TextAlign.jsh>

#define contract_icon   new Bitmap( ":/images/icons/contract_v.png" )
#define expand_icon     new Bitmap( ":/images/icons/expand_v.png" )

function SectionBar( parent )
{
   this.__base__ = Control;
   if ( parent )
      this.__base__( parent );
   else
      this.__base__();

   this.section = null;

#ifgteq __PI_BUILD__ 854
   var bgColor = Settings.readGlobal( "InterfaceWindow/SectionBarColor", DataType_UInt32 );
   var fgColor = Settings.readGlobal( "InterfaceWindow/SectionBarTextColor", DataType_UInt32 );
#else
   // PJSR access to global settings is broken in PI 1.7
   var bgColor = Color.rgbaColor( 192, 192, 168, 255 );
   var fgColor = Color.rgbaColor(   0,   0, 255, 255 );
#endif

   this.backgroundColor = bgColor;
   this.focusStyle = FocusStyle_NoFocus;

   this.label = new Label( this );
   this.label.textAlignment = TextAlign_Left|TextAlign_VertCenter;
   this.label.styleSheet =
      "QLabel { color: " + Color.rgbColorToHexString( fgColor ) + "; " +
               "background: " + Color.rgbColorToHexString( bgColor ) + "; }" +
      "QLabel:disabled { color: gray; }";

   this.button = new ToolButton( this );
   this.button.icon = contract_icon;
   this.button.setFixedSize( 17, 17 );
   this.button.focusStyle = FocusStyle_NoFocus;
   this.button.onClick = function()
   {
      this.parent.toggleSection();
   };

   var hSizer = new HorizontalSizer;
   hSizer.addSpacing( 4 );
   hSizer.add( this.label );
   hSizer.addStretch();
   hSizer.add( this.button );
   hSizer.addSpacing( 4 );

   this.sizer = new VerticalSizer;
   this.sizer.addSpacing( 1 );
   this.sizer.add( hSizer );
   this.sizer.addSpacing( 1 );

   this.adjustToContents();
   this.setFixedHeight();

   this.onMousePress = function( x, y, button, buttonState, modifiers )
   {
      if ( button == MouseButton_Left )
         this.button.onClick();
   };

   this.onShow = function()
   {
      this.updateIcon();
   };

   this.toggleSection = function()
   {
      if ( this.section )
      {
         this.setFixedWidth();

         if ( this.section.visible )
            this.section.hide();
         else
            this.section.show();

         this.updateIcon();
         this.dialog.adjustToContents();
         this.setVariableWidth();
      }
   };

   this.updateIcon = function()
   {
      if ( this.section )
         if ( this.section.visible )
            this.button.icon = contract_icon;
         else
            this.button.icon = expand_icon;
   };

   // Public interface

   this.setTitle = function( title )
   {
      this.label.text = title;
   };

   this.setSection = function( section )
   {
      this.section = section;
      this.updateIcon();
   };
}

SectionBar.prototype = new Control;

function MyDialog()
{
   this.__base__ = Dialog;
   this.__base__();

   this.box1 = new TextBox( this );
   this.box1.setMinSize( 500, 200 );

   this.bar1 = new SectionBar( this );
   this.bar1.setTitle( "Section #1" );
   this.bar1.setSection( this.box1 );

   this.box2 = new TextBox( this );
   this.box2.setMinSize( 500, 200 );
   this.box2.hide();

   this.bar2 = new SectionBar( this );
   this.bar2.setTitle( "Section #2" );
   this.bar2.setSection( this.box2 );

   this.sizer = new VerticalSizer;
   this.sizer.margin = 6;
   this.sizer.spacing = 6;
   this.sizer.add( this.bar1 );
   this.sizer.add( this.box1 );
   this.sizer.add( this.bar2 );
   this.sizer.add( this.box2 );

   this.adjustToContents();

   this.windowTitle = "Testing SectionBar";
}

MyDialog.prototype = new Dialog;

var dialog = new MyDialog();
dialog.execute();

The SectionBar object tries to emulate its PCL counterpart. The JavaScript version above lacks some PCL features, as the title checkbox (but this would be easy to implement) and has some flickering problems (which pcl::SectionBar prevents completely with special aliased controls). It does provide the basic functionality that you are looking for, though. Let me know if it's useful for you.

[mschuster]

Thank you a lot Juan this is useful. As a quick test I replaced the TextBox with a Control whose sizer contains multiple, specialized Controls. This works well and the flicker is a minor issue.

Mike

[mschuster]

Hi Juan,

Thanks again for this code, it is working well on Win7, but I do want to report a problem on Mac. I know you are busy, treat this as low priority.

My script has multiple sections, some relatively large in height. When opening them on Win7, the height of the dialog increase, sometimes placing the bottom of the dialog off beyond the bottom of the screen. This is OK.

On Mac things are different. The dialog is not increased in height beyond some limit above the bottom of the screen. This results in either squished layout of sections, or overlapping sections. The later happens when I use setFixedHeight on sections in an attempt to work around the former squishing.

When this squishing or overlapping occurs, it is possible to manually "fix" the problem by starting to drag the bottom of the dialog downward. As soon as you start this drag the bottom of the dialog jumps downward resulting in a proper layout.

My guess is the Mac there is some addition logic (not on Win7) that constrains dialog height when adjustToContents() is called.

Attached are screen shots showing the problem. The first looks fine before I open another section. The second shows the result of this opening, with the overlapping sections.

Also, not visible in these screen shots is another minor problem. On Mac the section open/close icons sometimes get stuck in their "depressed" state after the mouse pointer moves off them. This does not seem to happen on Win7.

Thanks,
Mike

Link to screen shots (endor seems to be down now):

https://dl.dropbox.com/u/109232477/sections.zip

[bitli]

I also used the same mechanism but slightly adapted in FITSFileManger, but I have no Mac to test if it has the same problem, in case you want to check if the problem is systematic.
-- bitli

[mschuster]

bitli,

How do I try FITSFileManager?

I did find a workaround. First, dialog height needs to be smaller than screen height when the dialog is initially shown, otherwise things get squished initially. Second, replace the call to this.dialog.adjustToContents() in the function toggleSection in SectionBar with this code. The code constrains height appropriately, does the adjustToContents and then releases the constraint. Note if your dialog has other code that manages height, then this patch might interfere.

Update: I improved the patch slightly.

Mike

Code: [Select]

         this.updateIcon();

         // workaround for Mac dialog layout issue
         var isFixedHeight = this.dialog.isFixedHeight;
         var sectionHeight = this.section.height + this.dialog.sizer.spacing;
         this.dialog.setMinHeight(
            this.dialog.height + (this.section.visible ? sectionHeight : -sectionHeight)
         );

         this.dialog.adjustToContents();

         // workaround for Mac dialog layout issue
         if (isFixedHeight) {
            this.dialog.setFixedHeight();
         }

         this.setVariableWidth();


[bitli]

Thanks.
I have attached the development version of the script (combined in one file), I have added your workaround. It does not make any difference on Windows, as far as I can tell.
If you ever have time to launch it and click on one of the section bar to know if it works on Mac, it would be nice. No hurry.
-- bitli

[mschuster]

Thank you bitli, I will try your script.

Further testing on both platforms as exposed other issues. Dialog width can sometimes be reduced on section show/hide on Windows. The height of variable height sections that have been expanded can sometimes be reduced on section show/hide on Windows.

This patch fixes most of these problems. On launch on Mac large dialogs still get squished or overlapped. Also in certain cases variable height sections that have been enlarged get their minHeights enlarged.

Is there a way in PSJR to get a list or array of a Control's children? I might try further patching if this were available.

Mike

Code: [Select]

   this.toggleSection = function() {
      if (this.section != null) {
         // workaround for dialog width layout issue
         // without this patch dialog width may be reduced on section show/hide
         var isFixedWidth = this.dialog.isFixedWidth;
         this.dialog.setFixedWidth();

         this.setFixedWidth();

         if (this.section.visible) {
            this.section.hide();
         }
         else {
            this.section.show();
         }

         this.updateIcon();

         // workaround for dialog height layout issue
         // without this patch on MacOSX section children may be squished or overlapped on section show/hide
         // without this patch section children height (if variable) may be reduced on section show/hide
         // children minHeight (if variable) may be modified by this patch (this is an unwanted side effect)
         var isFixedHeight = this.dialog.isFixedHeight;
         var sectionHeight = this.section.height + this.dialog.sizer.spacing;
         this.dialog.setMinHeight(
            this.dialog.height + (this.section.visible ? sectionHeight : -sectionHeight)
         );

         this.dialog.adjustToContents();

         // workaround for dialog height layout issue
         if (isFixedHeight) {
            this.dialog.setFixedHeight();
         }

         this.setVariableWidth();

         // workaround for dialog width layout issue
         if (!isFixedWidth) {
            this.dialog.setVariableWidth();
         }
      }
   };


[mschuster]

Hi bitli,

In your script, my patch does not work well enough to solve the layout problems. On my 1440x900 laptop, sections are clipped and overlapped. Also icon controls are misplaced.

I think my patch solves a few problems but clearly by no means all, and all my attempts at further improvements have failed. I suggest removing the patch and waiting for Juan to resolve the issues.

Thanks,
Mike

[bitli]

Any chance this will be solved by PI 1.8 ?
It seems the problem occurs also on Fedora (I am in the process of validating this), but it works well on Windows 7 64 bits.
-- bitli

[mschuster]

For me there are many problems on both Win and Mac with open/close sections. Variable height sections are especially troublesome.
Mike

[bitli]

Hmmm, I had problem with variable heights sections, but with fixed heights it works very well here.
Unfortunately other users had problems on other OS with the very same script (tool tip all over the place and windows overlapping).  Maybe there is another variable here, like screen size too small for the default sizre or whatever.
It is practically impossible to debug the problem as I cannot reproduce it.

I am afraid that I will have to redesign all my UI as it will not fit well in a big window. A couple of week-ends lost.  It is snowing, anyhow.

-- bitli

[mschuster]

Yes small screen size causes overlapping and/or squished sections, especially on mac but also on win. Horizontal dialog resizing also exposes trouble.
Mike