Basics of HTML - rt

Basics of HTML - rt for description in the game Trainz Simulator

There are many ways to write HTML in the description in the Trainz Simulator game, here we will show one of several ways, namely "rt". First, it is important to know the basic properties and types of HTML commands.

Beginning	End	Function
<table>	</table>	Table
<tr>	</tr>	Row
<td>	</td>	Column
<tr bgcolor=#1565DF>	</tr>	Row with HEX background color settings
<td width=70%>	</td>	Column width setting, total must be 100% Example: `<td width=70%>Text</td><td width=30%>Text</td>`
<img src=icon.png width=32height=32>		Image about setting width and height dimensions
<b>	</b>	Bold font
<i>	</i>	Italics
<font size=18 color=#DDE5FA locale='english'	</font>	Setting font dimensions in px, HEX font color and location for which language version it will be displayed (setting the language version of the game) Example: `<font size=18 color=#DDE5FA locale='english'<b>Hello</b></font>`
<a href=http://www.wikiquik.eu tooltip=wikiquik.eu>	</a>	A link to a website or a link to a feature. For example: `<a href=https://alpinetrainz.cz tooltip=Alpinetrainz.cz><img src=icon.png width=30 height=30></a>` `<a href=live://property/light_on_y><img src=misc/lightoff.png width=40 height=40></a>`
<br>		Line indentation Example: `<table><br><img src=icon.png width=70 height=100><br></table>`
valign=center ; valign=left ; valign=right	</td>	Alignment Example: `<td width=20% valign=center>`
<font color=#FFFFFF>	</font>	Font Color (HEX)

First, we create a string table:

C++: String

        //PrintDebug("[GetDescriptionHTML] Building Properties UI...");
        // Common
        string icnAsp = "<img src=icon.png width=704 height=128>";
        string icnResul = "<img src=resul.png width=500 height=317>";
        string icnNum = "<img src=num.png width=400 height=200>";
        string icnOwn = "<a href=https://alpinetrainz.cz tooltip=Alpinetrainz.cz><img src=art/icon/alpinetrainz.png width=350 height=100></a>";


        // Icons

        string icnmain = "<img src=art/com/icnmain.png width=18 height=18>";
        string icndist = "<img src=art/com/icndist.png width=18 height=18>";
        
        // Display Name
        string labelname = "<i>not set (using signal name)</i>";
        string username = GetAsset().GetLocalisedName(); // User Name in EN Language
        string labelOffset = Str.Tokens(offset, ".")[0];
        string MyName = GetName();
        if (displayname != "") labelname = displayname;
        string descname = "Display Name: <a href=live://property/m_username>" + labelname + "</a>";
        string helpLink = "<a href=https://alpinetrainz.cz  tooltip=If_you_don't_know_what_to_do,_try_the_USER_MANUAL> Help me >>> alpinetrainz.cz  <img src=art/com/unknown.png width=16 height=16></a> ";

Display More

Start of HTML table

C++

public string GetDescriptionHTML()
    {

C++: Start HTML

        // Build MAIN Properties Layout
        //PrintDebug("[GetDescriptionHTML] Done. Presenting UI.");
     

        string rt;

Example table:

C++: Example

    rt="<font color=#996666>"; // Font color
    
    rt=rt+ "<table><tr bgcolor=#1565DF><td width=1%></td><td width=99%><img src=logo.png width=128 height=128></td></tr></table>";
    rt=rt+ "<table><tr bgcolor=#1565DF><td width=70%><font size=18 color=#DDE5FA locale='english'<b>Setup</b></font><font size=18 color=#DDE5FA locale='czech'><b>Nastavení</b></font>" + displayname + "</td><td width=20% align=center>" + helpLink + "</td><td width=10% align=center>" + icnBul + "</td></tr></table>";
    rt=rt+ "<table><tr bgcolor=#1565DF><td width=100% valign=center><font size=4 color=#FFFFFF><b>Type: </b></font><font size=6 color=#ffd100><b>" + username + "</b></font><br></td></tr></table>";
    rt=rt+ "<table><br><tr bgcolor=#0c151a><td width=100%><b>Signal function</b></td></tr></table>";
    rt=rt+ "<table><tr bgcolor=#1565DF><td width=15% align=right><b>Main Signal</b></td><td width=35% align=right >" + icnmain + "</td><td width=15% valign=center><b>Speed</b></td><td width=35% valign=center>" + icnspee + "</td></tr></table>";
    rt=rt+ "<table><tr bgcolor=#1565DF><td width=15% align=right ><b>Distance Signal</b></td><td width=35% align=right >" + icndist + "</td><td width=15% valign=center><b>Main Signal</b></td><td width=35% valign=center>" + icnauto + "</td></tr></table>";
    rt=rt+ "<table><tr bgcolor=#1565DF><td width=15% align=right ><b>Signal B</b></td><td width=35% align=right >" + icnshif + "</td><td width=15% valign=center><b></b></td><td width=35% valign=center></td></tr></table>";
    rt=rt+ "<table><br><tr bgcolor=#0c151a><td width=100%><b>Aspects</b></td></tr><br></table>";
    rt=rt+ "<table><br><tr bgcolor=#718579><td width=100%>" + icnAsp + "</td></tr><br></table>";
    rt=rt+ "<table><br><img src=art/asp/seq.png width=704 height=128><br></table>";

Display More

Tables always start with a statement rt=rt+ " and ends ";

The internal command to the string table is: "+ helpLink +"

Termination of the table: rt=rt+ "</table>";

HTML Termination:

affichage();

return "<html><body>" + rt + "</body></html>"; }

When using a link to an image, model or function, it is always a folder stored in a specific model.

Switching function

C++: Switching

    if(num_a==0) {
	           rt = rt + "<a href=live://property/num_a_vol1><img src=art/misc/num/num-vol0.png width=30 height=30></a>";
			   rt = rt + "<a href=live://property/num_a_vol2><img src=art/misc/num/num-volan.png width=30 height=30></a>";
			   }
	if(num_a==1) {
	           rt = rt + "<a href=live://property/num_a_vol1><img src=art/misc/num/num-vol0n.png width=30 height=30></a>";
			   rt = rt + "<a href=live://property/num_a_vol2><img src=art/misc/num/num-vola.png width=30 height=30></a>";
			   }

Comments