Page tree
Skip to end of metadata
Go to start of metadata

Introduction

The HTML control is well known as the "Notebook", available in VBS's map view. It can display a text over several pages, and can contain separate sections that can be linked together. It has some simple formatting possibilities (based on HTML), and can display images.

Usage

The control loads all its content from an external file (either via the control's 'filename' property, or via the htmlLoad command).
The format of the loaded file is described in the HTML file article.
If an HTML control is ctrlSetPosition, the content is not re-flowed automatically, and must be reloaded via htmlLoad to fill the control's new size.

Related commands: Interactions - User Dialogs - HTML

Properties

Only properties unique to this control type are listed. For general properties, see the Properties page.
If a property doesn't have a default value, then it must be defined explicitly.

Properties
NameTypeDefaultRemarkScript
typeInteger-must be 9 (or CT_HTML, if using constants)-
filenameString-The HTML file to load at display when the control is first shown.
It can either be a relative path (pointing to the mission folder), or an absolute one.
htmlLoad
colorBackgroundColor-Background color of control.ctrlSetBackgroundColor
colorBoldColor-Color of bold text (between <b> and </b> tags). Applies to every font style.-
colorLinkColor-Text color of links. Applied to text between <a href="#Sectionname> and </a> tags.-
colorLinkActiveColor-Text color of currently active link (the one that will be jumped to, when pressing the spacebar).-
colorPictureColor-Color of the transparent part of image. If there are no transparent parts (e.g. in photos), then a tint will be applied to the whole picture, so it is best to use a neutral white {1,1,1,1} in those situations.-
colorPictureBorderColor-Color of the border around image. Non-functional.-
colorPictureLinkColor-Color of transparent part of image, if the image is a link. See the note for 'colorPicture', when dealing with photos.-
colorPictureSelectedColor-Color of transparent part of image if it is the currently active links.-
colorTextColor-Color for default text.ctrlSetTextColor
prevPageString-Texture to be used as left arrow, to go back one page. (Non-functional in V3.x)-
nextPageString-Texture to be used as right arrow, to go forward one page. (Non-functional in V3.x)-
enableScrollingBoolean0If a vertical scrollbar HScrollbar or VScrollbar is defined, then it will be displayed (even if content is smaller than the control and doesn't require scrolling). V2.15+-
Properties of subclasses H1-H6 & P.
Be aware that text is NOT re-flowed if a font style is changed via script, which could lead to cut off or overlapping text!
NameTypeDefaultRemarkScript
fontString-Font to use for default text.ctrlSetFontH1, Interactions - User Dialogs - HTML
fontBoldString-Font to use within bold tags.ctrlSetFontH1B, Interactions - User Dialogs - HTML
sizeExFloat-Font size.ctrlSetFontHeightH1, Interactions - User Dialogs - HTML

Example

Will generate the pages shown at the top of this article.
The complete demo mission can be downloaded from here.

Open with createDialog "Dlg"

description.exttest.html
class Dlg {
  idd = 20000;
  movingEnable = 1;
  
  class Controls {
    class HTML {
      type = 9;
      style = 0;
      idc = 20000;
      
      x = 0.18; y = 0.2;
      w = 0.64; h = 0.5;
      
      colorText[] = {0, 0, 0, 1};       
      colorBold[] = {.64, .16, .16, 1}; 
      colorLink[] = {0, .54, .54, 1};   
      colorLinkActive[] = {0, 0, 1, 1}; 
      colorBackground[] = {.8,.8,.8,.7};
    
      colorPicture[] = {1, 1, 1, 1};              
      colorPictureBorder[] = {1, 0, 0, 1};        
      colorPictureLink[] = {1, 1, 1, 1};          
      colorPictureSelected[] = {.52, .80, .97, 1};
    
      prevPage = "\ca\ui\data\arrow_left_ca.paa";
      nextPage = "\ca\ui\data\arrow_right_ca.paa";
       
      class H1 {
        font = "TahomaB";
        fontBold = "TahomaB";
        sizeEx = 0.032;
      };
      class H2 {
        font = "TahomaB";
        fontBold = "TahomaB";
        sizeEx = 0.030;
      };
      class H3 {
        font = "TahomaB";
        fontBold = "TahomaB";
        sizeEx = 0.028;
      };
      class H4 {
        font = "TahomaB";
        fontBold = "TahomaB";
        sizeEx = 0.026;
      };
      class H5 {
        font = "NewsGothicCn";
        fontBold = "NewsGothicB";
        sizeEx = 0.022;
      };
      class H6 {
        font = "LucidaConsoleB";
        fontBold = "LucidaConsoleB";
        sizeEx = 0.020;
      };
      class P {
        font = "TahomaB";
        fontBold = "TahomaB";
        sizeEx = 0.022;
      };
    
      filename = "test.html";
    };
  }; 
};
<html>
<body>
<!-- First section shown -->
<h1 align="center"><a name="page1">Page 1</a></h1>
<p>
<br>
Different font tags can be used in this control, 
to adjust the look of the text: 
<H1> to <H9> & <P><br>
Each of these tags can have a unique size, 
as well as two fonts faces defined: 
one for the standard, and one for the bold text.<br>
Text enclosed in <b><b>...</b></b> tags 
will use the alternative font definition,
as well as be displayed in a unique color 
(which is the same for every font style).<br>
</p>
<p>
Font styles cannot be nested, 
i.e. it is not possible to have a different font 
within a paragraph, as in the following example: 
<p>Normal text, <H5>different font</H5>, 
more normal text</p>.<br>
Only bold tags can be used to highlight sections within 
a paragraph (as every font style closing tag, 
e.g. </H5>, will also always generate a line break).<br>
</p>

<h1>H1: Headline 1, <b>Headline 1, bold</b></h1>
<h2>H2: Headline 2, <b>Headline 2, bold</b></h2>
<h3>H3: Headline 3, <b>Headline 3, bold</b></h3>
<h4>H4: Headline 4, <b>Headline 4, bold</b></h4>
<h5>H5: Narrow Text, <b>Narrow Text, bold</b></h5>
<h6>H6: Monospaced, <b>Monospaced, bold</b></h6>
<p>P: Paragraph Text, <b>Paragraph Text, bold</b></p>

<p align="right"><a href="#page2">Page 2</a></p>
<hr>

<!-- Second section -->
<h1 align="center"><a name="page2">Page 2</a></h1>
<p>
<br>
The control can contain different sections, 
to which <a href="#page1">links</a> can be created 
(like the two pages in this example). 
The color of these links (currently blue) can be customized.<br>
<br>
Text can be aligned in different ways, 
by using the "align" property within a font tag:<br>
</p>
<h5 align="right"><p align="right">right-aligned text</p><br></h5>
<h5 align="center"><p align="center">centered text</p><br></h5>
<p align="center">
<br>
Images can be shown (as JPG or PAA, and at any size), 
via the <img> tag.<br>
They can even be links to other sections, 
like the two examples below:<br>
<p align="center">
<a href="#pic1">
<img src="pic1.paa" height="70" width="70"></a>   
<a href="#pic2"><img src="pic2.jpg" height="70" width="70"></a>
</p>
<hr>
...