PixInsight Forum (historical)

Software Development => PCL and PJSR Development => Topic started by: bitli on 2012 September 02 08:43:36

Title: How to display a large text in a label with scroll bars
Post by: bitli on 2012 September 02 08:43:36

Hello,

I try to display a large styled text in a Label and I would like to have scroll bar and have it reasonably size at opening.

I tried a couple of things, my understanding is that the scrolling is provided by some container (it seems the ScrollBox is really for images).

If somebody has a working example I would be grateful.  So far my code snippet lookes like:

Code: [Select]

function HelpDialog( parentDialog, engine)
{
   this.__base__ = Dialog;
   this.__base__();



   this.windowTitle = "FITSFileManager help";

   this.helpLabel = new Label();
   this.helpLabel.width = 600;
   this.helpLabel.useRichText = true;
   this.helpLabel.wordWrapping = true;
   this.helpLabel.text = HELP_TEXT;
   // this.helpLabel.adjustToContents();
   //this.helpLabel.setVariableSize();
   this.helpLabel.setMinWidth = 800;

   this.sizer = new VerticalSizer();
   this.sizer.margin = 5;
   this.sizer.add(this.helpLabel);
   this.adjustToContents();
   //this.setMinWidth = 800;
   this.setVariableSize();


}
HelpDialog.prototype = new Dialog;

clear skyes
-- bitli

Title: Re: How to display a large text in a label with scroll bars
Post by: Juan Conejero on 2012 September 04 04:05:18

You need a TextBox control instead of a Label. Try this example:

Code: [Select]

#include <pjsr/Sizer.jsh>

var helpText =
  "This is a <b>test</b> help text<br>"
+ "to see if we can<br>"       
+ "<i>display</i> <u>it</u><br>"             
+ "inside a TextBox control<br>"
+ "with<br>"                   
+ "scroll bars<br>"             
+ "and all that stuff.<br>"
+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod "
+ "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, "
+ "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo "
+ "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse "
+ "cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat "
+ "non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod "
+ "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, "
+ "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo "
+ "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse "
+ "cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat "
+ "non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ "<beg>";


function HelpDialog( parentDialog, engine )
{
   this.__base__ = Dialog;
   this.__base__();

   this.windowTitle = "FITSFileManager Help";

   this.helpBox = new TextBox( this );
   this.helpBox.readOnly = true;
   this.helpBox.text = helpText;
   this.helpBox.setMinSize( 600, 200 );

   this.sizer = new HorizontalSizer;
   this.sizer.margin = 6;
   this.sizer.add( this.helpBox );
   this.setVariableSize();
   this.adjustToContents();
}

HelpDialog.prototype = new Dialog;

var d = new HelpDialog;
d.execute();

TextBox is actually a PixInsight console, so you can use the whole formatting capabilities of pcl::Console (http://pixinsight.com/developer/pcl/doc/20120901/html/classpcl_1_1Console.html).

Title: Re: How to display a large text in a label with scroll bars
Post by: bitli on 2012 September 04 08:46:20

Thanks, the scrolling work.  But then I loose the quasi html capabilities of the Label, which seems to work also in the tooltips.
The goal is to display a help page in a script. So maybe I rephrase my questions differently:

Will there be (or is there already) a way to display a page of html (PIDoc generated) from a script (preferably in a modeless dialog) ?

-- bitli

Title: Re: How to display a large text in a label with scroll bars
Post by: Juan Conejero on 2012 September 04 09:16:59

Quote

Will there be (or is there already) a way to display a page of html

Yes. Enclose your HTML code within <html> and </html> tags. For example:

var myHelpText =
   "<html>"
+ "   <ul>"
+ "      <li>First item</li>"
+ "      <li>Second item</li>"
+ "   </ul>"
+ "</html>";
// ...
helpBox.setText( myHelpText );


PixInsight consoles support the whole HTML 4 specification plus a reasonable subset of CSS2. If you generate your help file with the PIDoc compiler, you'll get XHTML 1.0 strict code, and perhaps a TextBox control won't be able to render everything. You'll have to experiment a little and fix things manually.

Title: Re: How to display a large text in a label with scroll bars
Post by: bitli on 2012 September 05 23:01:13

It works well, thanks.
I do not want to abuse, but is there a way to disable rich text processing on a specific control?  I can escape the < etc , but maybe there is just an (undocumented ?) property.
This is not very important, I just did a small script where I can enter text in a TextBox and it copy its on another text box to test the formatting.  When loading a file to the 'raw' edit box, it gets also interpreted unless I escape.
-- bitli

Title: Re: How to display a large text in a label with scroll bars
Post by: Juan Conejero on 2012 September 06 03:12:05

Yes. To disable tags and character entities for a section of text, enclose it with the <raw> and </raw> tags. For example, try this on PixInsight's Process Console:

Code: [Select]

.j console.writeln( "<raw>Use the <cbr> tag (conditional break) to start writing at an empty line.</raw>" );
(the leading dot is to suppress command echo). Now try it without the <raw> tags:

Code: [Select]

.j console.writeln( "Use the <cbr> tag (conditional break) to start writing at an empty line." );
For a complete reference of all console tags, see the documentation for the pcl::Console class (http://pixinsight.com/developer/pcl/doc/20120901/html/classpcl_1_1Console.html).