Author Topic: How to display a large text in a label with scroll bars (Read 7332 times)

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

Juan Conejero · « **Reply #1 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.

bitli · « **Reply #2 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

Juan Conejero · « **Reply #3 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.

bitli · « **Reply #4 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

Juan Conejero · « **Reply #5 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.

This forum is closed since 5 March 2020

PixInsight Forum is now available at:

https://pixinsight.com/forum/

News:

Author Topic: How to display a large text in a label with scroll bars (Read 7332 times)

bitli

How to display a large text in a label with scroll bars

Juan Conejero

Re: How to display a large text in a label with scroll bars

bitli

Re: How to display a large text in a label with scroll bars

Juan Conejero

Re: How to display a large text in a label with scroll bars

bitli

Re: How to display a large text in a label with scroll bars

Juan Conejero

Re: How to display a large text in a label with scroll bars