{"name":"CT HTML","title":"CT HTML","type":"topic","url":"https://community.bistudio.com/wiki/CT_HTML","revid":342149,"updated":"2023-07-09T12:26:45Z","aliases":[],"markdown":"### Introduction\n\nThe HTML control is well known as the \"notebook\" in the Map-View of the game. It can display a text over more pages and can inherit links to other, own defined sections. It has some simple formatting possibilities. It also can display images.\n\n#### Related commands & functions\n\n- Commands: General\n- Commands: UI Eventhandlers\n- Commands: HTML\n\n#### Related User Interface Eventhandlers\n\n- Events: General\n\n### Alphabetical Order\n\n> [!NOTE]\n> TokenNames common to most controls, such as x, y, w, h, text, idc... can be found **here**.\n\n> [!WARNING]\n> Not all of the listed attributes might have an effect nor might the list be complete. All attributes were gathered with [this](https://github.com/7erra/BIKI.VR/blob/master/fnc/generateCTPage.sqf) config crawler.\n\n```cpp\n#define CT_HTML 9\n```\n\n#### C\n\n##### colorBold\n\n**Type:** Array\n\n**Description:** Color of **bold** text (between <b> and tags).\n\n```cpp\ncolorBold[] = {1,1,1,1};\n```\n\n##### colorLink\n\n**Type:** Array\n\n**Description:** Text color of links (between <a href=\"#Sectionname> and </a>).\n\n```cpp\ncolorLink[] = {1,1,1,1};\n```\n\n##### colorLinkActive\n\n**Type:** Array\n\n**Description:** Text color of the active link (normaly the fist on in page).\n\n```cpp\ncolorLinkActive[] = {1,1,1,1};\n```\n\n##### colorPicture\n\n**Type:** Array\n\n**Description:** Color of transparent part of image.\n\n```cpp\ncolorPicture[] = {1,1,1,1};\n```\n\n##### colorPictureBorder\n\n**Type:** Array\n\n**Description:** Color of the borader arround image.\n\n```cpp\ncolorPictureBorder[] = {0,0,0,0};\n```\n\n##### colorPictureLink\n\n**Type:** Array\n\n**Description:** Color of transparent part of image within links\n\n```cpp\ncolorPictureLink[] = {1,1,1,1};\n```\n\n##### colorPictureSelected\n\n**Type:** Array\n\n**Description:** Color of transparent part of image within active links.\n\n```cpp\ncolorPictureSelected[] = {1,1,1,1};\n```\n\n##### cycleAllLinks\n\n**Type:** Number\n\n**Description:** n/a\n\n```cpp\ncycleAllLinks = 0;\n```\n\n##### cycleLinks\n\n**Type:** Number\n\n**Description:** n/a\n\n```cpp\ncycleLinks = 0;\n```\n\n#### F\n\n##### filename\n\n**Type:** String\n\n**Description:** The html file to load into the control at startup\n\n```cpp\nfilename = \"a3\\ui_f\\data\\html\\RscFeedback.html\";\n```\n\n#### H\n\n##### H1\n\n**Type:** Class\n\n**Description:** Header settings. Classes H1 to H6 as well as P are available.\n\n| Properties of subclass (H1-H6,P) |  |  |\n|---|---|---|\n| Name | Type | Remark |\n| **font** | string | font to use for default text |\n| **fontBold** | string | font to use within bold tags |\n| **sizeEx** | Float | font size |\n\n```cpp\nclass H1\n{\n    font = \"RobotoCondensed\";\n    fontBold = \"RobotoCondensedBold\";\n    sizeEx = \"(            (            (            ((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 1.2)\";\n};\n```\n\n#### N\n\n##### nextPage\n\n**Type:** String\n\n**Description:** Filename of image which is used as right arrow.\n\n```cpp\nnextPage = \"\\A3\\ui_f\\data\\gui\\rsccommon\\rschtml\\arrow_right_ca.paa\";\n```\n\n#### P\n\n##### P\n\n**Type:** Class\n\n**Description:** See #H1.\n\n```cpp\nclass P\n{\n    font = \"RobotoCondensed\";\n    fontBold = \"RobotoCondensedBold\";\n    sizeEx = \"(            (            (            ((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 1)\";\n    align = \"left\";\n};\n```\n\n##### prevPage\n\n**Type:** String\n\n**Description:** Filename of image which is used as left arrow.\n\n```cpp\nprevPage = \"\\A3\\ui_f\\data\\gui\\rsccommon\\rschtml\\arrow_left_ca.paa\";\n```\n\n### Default Classes\n\n> [!NOTE]\n> **Arma 3:** **AddOns:** Classes need to be initialised first with `class SomeClass;`\n>\n> ---\n>\n> **Missions:** Since Arma 3 v2.02 one can use `import SomeClass;` to initialise a class (see the import keyword).\n>\n> In older versions, use `\"Default\" call BIS_fnc_exportGUIBaseClasses;` and paste the result into the description.ext.\n\n#### RscExample\n\n```cpp\nclass RscHTML\n{\n    deletable = 0;\n    fade = 0;\n    access = 0;\n    type = CT_HTML;\n    idc = -1;\n    style = ST_LEFT;\n    filename = \"\";\n    colorBackground[] = {0,0,0,0};\n    colorText[] = {1,1,1,1};\n    colorBold[] = {1,1,1,1};\n    colorLink[] = {1,1,1,0.75};\n    colorLinkActive[] = {1,1,1,1};\n    colorPicture[] = {1,1,1,1};\n    colorPictureLink[] = {1,1,1,1};\n    colorPictureSelected[] = {1,1,1,1};\n    colorPictureBorder[] = {0,0,0,0};\n    tooltipColorText[] = {1,1,1,1};\n    tooltipColorBox[] = {1,1,1,1};\n    tooltipColorShade[] = {0,0,0,0.65};\n    class H1\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_LARGE;\n        align = \"left\";\n    };\n    class H2\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"right\";\n    };\n    class H3\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    class H4\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    class H5\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    class H6\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    class P\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    x = 0;\n    y = 0;\n    w = 0.1;\n    h = 0.1;\n    sizeEx = GUI_TEXT_SIZE_MEDIUM;\n    prevPage = \"\\A3\\ui_f\\data\\gui\\rsccommon\\rschtml\\arrow_left_ca.paa\";\n    nextPage = \"\\A3\\ui_f\\data\\gui\\rsccommon\\rschtml\\arrow_right_ca.paa\";\n    shadow = 2;\n};\n```\n\n### Other Examples\n\n#### Scripted Example\n\n1. Open Eden Editor\n1. Save the mission\n1. Create the file test.html in the mission folder and copy the html code from this page in it (see below)\n1. Open the Arma 3: Debug Console and execute the sqf code\n\n##### SQF Code\n\n```sqf\ndisableSerialization;\n\nprivate _display = findDisplay 313 createDisplay \"RscDisplayEmpty\";\n\nprivate _ctrlGroup = _display ctrlCreate [\"RscControlsGroup\", -1];\nprivate _ctrlHTML = _display ctrlCreate [\"RscHTML\", -1, _ctrlGroup];\n\n_ctrlGroup ctrlSetPosition [0,safeZoneY + 0.01,1,safeZoneH - 0.02];\n_ctrlGroup ctrlCommit 0;\n\n_ctrlHTML ctrlSetPosition [0,0,0.98,2];\n_ctrlHTML ctrlSetBackgroundColor [0,0,0,1];\n_ctrlHTML ctrlCommit 0;\n_ctrlHTML htmlLoad \"test.html\"\n```\n\n##### test.html\n\n```html\n<html>\n    <head>\n        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n        <title>PageTitle</title>\n    </head>\n    <body>\n        <h1><a name=\"FirstSection\">First Section</a></h1>\n        <p>This is the text to display in this section. You can write a lot of text here.</p>\n        <br>\n        <h1><a name=\"Alignment\">Alignment</a></h1>\n        <p>Text can be aligned left, center or right</p>\n        <br>\n        <p align=\"left\"><a name=\"left\">Left</a></p>\n        <p align=\"center\"><a name=\"center\">Center</a></p>\n        <p align=\"right\">Right</p>\n        <h1><a name=\"Font Sizes\">Font Sizes</a></h1>\n        <p>Out of the box the CT_HTML offers seven font sizes. These can be changed in the controls config.</p>\n        <p>P (default)</p>\n        <h1>H1</h1>\n        <h2>H2</h2>\n        <h3>H3</h3>\n        <h4>H4</h4>\n        <h5>H5</h5>\n        <h6>H6</h6>\n        <br>\n        <h1><a name=\"Links\">Links</a></h1>\n        <p>It is possible to link to sections or websites.</p>\n        <p><a href=\"#FirstSection\">A link to the first section.</a></p>\n        <p><a href=\"https://community.bistudio.com/wiki/HTML_File_Format\">A link to the BIKI.</a></p>\n        <br>\n        <h1><a name=\"Images\">Images</a></h1>\n        <p>Images can also be displayed</p>\n        <p align=\"center\"><img src=\"\\a3\\ui_f_curator\\data\\logos\\arma3_curator_logo_ca.paa\" height=\"100\" width=\"100\"></p>\n        <h1><a name=\"TextFormatting\">Text Formatting</a></h1>\n        <p>Text can also be <b>bold</b>. The color and font used for this can be defined in config.</p>\n    </body>\n</html>\n```","sections":[{"heading":"Introduction","level":3,"markdown":"The HTML control is well known as the \"notebook\" in the Map-View of the game. It can display a text over more pages and can inherit links to other, own defined sections. It has some simple formatting possibilities. It also can display images."},{"heading":"Related commands & functions","level":4,"markdown":"- Commands: General\n- Commands: UI Eventhandlers\n- Commands: HTML"},{"heading":"Related User Interface Eventhandlers","level":4,"markdown":"- Events: General"},{"heading":"Alphabetical Order","level":3,"markdown":"> [!NOTE]\n> TokenNames common to most controls, such as x, y, w, h, text, idc... can be found **here**.\n\n> [!WARNING]\n> Not all of the listed attributes might have an effect nor might the list be complete. All attributes were gathered with [this](https://github.com/7erra/BIKI.VR/blob/master/fnc/generateCTPage.sqf) config crawler.\n\n```cpp\n#define CT_HTML 9\n```"},{"heading":"C","level":4,"markdown":""},{"heading":"colorBold","level":5,"markdown":"**Type:** Array\n\n**Description:** Color of **bold** text (between <b> and tags).\n\n```cpp\ncolorBold[] = {1,1,1,1};\n```"},{"heading":"colorLink","level":5,"markdown":"**Type:** Array\n\n**Description:** Text color of links (between <a href=\"#Sectionname> and </a>).\n\n```cpp\ncolorLink[] = {1,1,1,1};\n```"},{"heading":"colorLinkActive","level":5,"markdown":"**Type:** Array\n\n**Description:** Text color of the active link (normaly the fist on in page).\n\n```cpp\ncolorLinkActive[] = {1,1,1,1};\n```"},{"heading":"colorPicture","level":5,"markdown":"**Type:** Array\n\n**Description:** Color of transparent part of image.\n\n```cpp\ncolorPicture[] = {1,1,1,1};\n```"},{"heading":"colorPictureBorder","level":5,"markdown":"**Type:** Array\n\n**Description:** Color of the borader arround image.\n\n```cpp\ncolorPictureBorder[] = {0,0,0,0};\n```"},{"heading":"colorPictureLink","level":5,"markdown":"**Type:** Array\n\n**Description:** Color of transparent part of image within links\n\n```cpp\ncolorPictureLink[] = {1,1,1,1};\n```"},{"heading":"colorPictureSelected","level":5,"markdown":"**Type:** Array\n\n**Description:** Color of transparent part of image within active links.\n\n```cpp\ncolorPictureSelected[] = {1,1,1,1};\n```"},{"heading":"cycleAllLinks","level":5,"markdown":"**Type:** Number\n\n**Description:** n/a\n\n```cpp\ncycleAllLinks = 0;\n```"},{"heading":"cycleLinks","level":5,"markdown":"**Type:** Number\n\n**Description:** n/a\n\n```cpp\ncycleLinks = 0;\n```"},{"heading":"F","level":4,"markdown":""},{"heading":"filename","level":5,"markdown":"**Type:** String\n\n**Description:** The html file to load into the control at startup\n\n```cpp\nfilename = \"a3\\ui_f\\data\\html\\RscFeedback.html\";\n```"},{"heading":"H","level":4,"markdown":""},{"heading":"H1","level":5,"markdown":"**Type:** Class\n\n**Description:** Header settings. Classes H1 to H6 as well as P are available.\n\n| Properties of subclass (H1-H6,P) |  |  |\n|---|---|---|\n| Name | Type | Remark |\n| **font** | string | font to use for default text |\n| **fontBold** | string | font to use within bold tags |\n| **sizeEx** | Float | font size |\n\n```cpp\nclass H1\n{\n    font = \"RobotoCondensed\";\n    fontBold = \"RobotoCondensedBold\";\n    sizeEx = \"(            (            (            ((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 1.2)\";\n};\n```"},{"heading":"N","level":4,"markdown":""},{"heading":"nextPage","level":5,"markdown":"**Type:** String\n\n**Description:** Filename of image which is used as right arrow.\n\n```cpp\nnextPage = \"\\A3\\ui_f\\data\\gui\\rsccommon\\rschtml\\arrow_right_ca.paa\";\n```"},{"heading":"P","level":4,"markdown":""},{"heading":"P","level":5,"markdown":"**Type:** Class\n\n**Description:** See #H1.\n\n```cpp\nclass P\n{\n    font = \"RobotoCondensed\";\n    fontBold = \"RobotoCondensedBold\";\n    sizeEx = \"(            (            (            ((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 1)\";\n    align = \"left\";\n};\n```"},{"heading":"prevPage","level":5,"markdown":"**Type:** String\n\n**Description:** Filename of image which is used as left arrow.\n\n```cpp\nprevPage = \"\\A3\\ui_f\\data\\gui\\rsccommon\\rschtml\\arrow_left_ca.paa\";\n```"},{"heading":"Default Classes","level":3,"markdown":"> [!NOTE]\n> **Arma 3:** **AddOns:** Classes need to be initialised first with `class SomeClass;`\n>\n> ---\n>\n> **Missions:** Since Arma 3 v2.02 one can use `import SomeClass;` to initialise a class (see the import keyword).\n>\n> In older versions, use `\"Default\" call BIS_fnc_exportGUIBaseClasses;` and paste the result into the description.ext."},{"heading":"RscExample","level":4,"markdown":"```cpp\nclass RscHTML\n{\n    deletable = 0;\n    fade = 0;\n    access = 0;\n    type = CT_HTML;\n    idc = -1;\n    style = ST_LEFT;\n    filename = \"\";\n    colorBackground[] = {0,0,0,0};\n    colorText[] = {1,1,1,1};\n    colorBold[] = {1,1,1,1};\n    colorLink[] = {1,1,1,0.75};\n    colorLinkActive[] = {1,1,1,1};\n    colorPicture[] = {1,1,1,1};\n    colorPictureLink[] = {1,1,1,1};\n    colorPictureSelected[] = {1,1,1,1};\n    colorPictureBorder[] = {0,0,0,0};\n    tooltipColorText[] = {1,1,1,1};\n    tooltipColorBox[] = {1,1,1,1};\n    tooltipColorShade[] = {0,0,0,0.65};\n    class H1\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_LARGE;\n        align = \"left\";\n    };\n    class H2\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"right\";\n    };\n    class H3\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    class H4\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    class H5\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    class H6\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    class P\n    {\n        font = \"RobotoCondensed\";\n        fontBold = \"RobotoCondensedBold\";\n        sizeEx = GUI_TEXT_SIZE_MEDIUM;\n        align = \"left\";\n    };\n    x = 0;\n    y = 0;\n    w = 0.1;\n    h = 0.1;\n    sizeEx = GUI_TEXT_SIZE_MEDIUM;\n    prevPage = \"\\A3\\ui_f\\data\\gui\\rsccommon\\rschtml\\arrow_left_ca.paa\";\n    nextPage = \"\\A3\\ui_f\\data\\gui\\rsccommon\\rschtml\\arrow_right_ca.paa\";\n    shadow = 2;\n};\n```"},{"heading":"Other Examples","level":3,"markdown":""},{"heading":"Scripted Example","level":4,"markdown":"1. Open Eden Editor\n1. Save the mission\n1. Create the file test.html in the mission folder and copy the html code from this page in it (see below)\n1. Open the Arma 3: Debug Console and execute the sqf code"},{"heading":"SQF Code","level":5,"markdown":"```sqf\ndisableSerialization;\n\nprivate _display = findDisplay 313 createDisplay \"RscDisplayEmpty\";\n\nprivate _ctrlGroup = _display ctrlCreate [\"RscControlsGroup\", -1];\nprivate _ctrlHTML = _display ctrlCreate [\"RscHTML\", -1, _ctrlGroup];\n\n_ctrlGroup ctrlSetPosition [0,safeZoneY + 0.01,1,safeZoneH - 0.02];\n_ctrlGroup ctrlCommit 0;\n\n_ctrlHTML ctrlSetPosition [0,0,0.98,2];\n_ctrlHTML ctrlSetBackgroundColor [0,0,0,1];\n_ctrlHTML ctrlCommit 0;\n_ctrlHTML htmlLoad \"test.html\"\n```"},{"heading":"test.html","level":5,"markdown":"```html\n<html>\n    <head>\n        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n        <title>PageTitle</title>\n    </head>\n    <body>\n        <h1><a name=\"FirstSection\">First Section</a></h1>\n        <p>This is the text to display in this section. You can write a lot of text here.</p>\n        <br>\n        <h1><a name=\"Alignment\">Alignment</a></h1>\n        <p>Text can be aligned left, center or right</p>\n        <br>\n        <p align=\"left\"><a name=\"left\">Left</a></p>\n        <p align=\"center\"><a name=\"center\">Center</a></p>\n        <p align=\"right\">Right</p>\n        <h1><a name=\"Font Sizes\">Font Sizes</a></h1>\n        <p>Out of the box the CT_HTML offers seven font sizes. These can be changed in the controls config.</p>\n        <p>P (default)</p>\n        <h1>H1</h1>\n        <h2>H2</h2>\n        <h3>H3</h3>\n        <h4>H4</h4>\n        <h5>H5</h5>\n        <h6>H6</h6>\n        <br>\n        <h1><a name=\"Links\">Links</a></h1>\n        <p>It is possible to link to sections or websites.</p>\n        <p><a href=\"#FirstSection\">A link to the first section.</a></p>\n        <p><a href=\"https://community.bistudio.com/wiki/HTML_File_Format\">A link to the BIKI.</a></p>\n        <br>\n        <h1><a name=\"Images\">Images</a></h1>\n        <p>Images can also be displayed</p>\n        <p align=\"center\"><img src=\"\\a3\\ui_f_curator\\data\\logos\\arma3_curator_logo_ca.paa\" height=\"100\" width=\"100\"></p>\n        <h1><a name=\"TextFormatting\">Text Formatting</a></h1>\n        <p>Text can also be <b>bold</b>. The color and font used for this can be defined in config.</p>\n    </body>\n</html>\n```"}],"categories":["Control Types"],"groups":["GUI"]}