HTML asset for sessions tutorial

[pware]

Disclaimer: I am not an expert on creating HTML assets for Trainz. This tutorial was the result of a request for more detailed information and my own need to document the process I had been using since Trainz 2006 to create HTML assets.

The following posts describe just one method of creating HTML assets - using web pages - there are other methods. I have updated the method shown to take advantage of some new features found in Trainz TS12 that were not present (or I was not aware of their presence) in Trainz 2006. These changes make the process much easier.

A second tutorial, on using triggers to create messages, has now been posted at http://forums.auran.com/trainz/showt...ggers-Tutorial but I recommend users read this tutorial first as a necessary primer.

This tutorial concentrates on creating the web pages that will be displayed when a session starts. These usually contain instructions for the users, background information such as the scenario to be played out, schedules that have to be kept, cargoes, destinations etc.

TS12 SP1 HF4: Some changes have been made to the operation of these tools in the latest version of TS12. Most are only minor and a few, as yet unexplored, additional features have been added. Notes have been placed on the posts in this thread where such changes have been made to TS12 by N3V.

T:ANE Update: The good news is that any HTML asset created for TS12 SP1 HF4 that is error free works exactly the same on T:ANE with the added advantage that they have removed that sometimes annoying semi transparent background in the Trainz browser window. It also seems that T:ANE HTML may finally have an anchor tag <a href=...> but it may be limited in its extent. Time and further investigation will tell.

Peter Ware

[pware]

In T:ANE: From the Launcher select Manage Content then click the Developer Menu and select New Content. A New Asset (that is what it will be named) will be created for you but it will not be opened for any editing. You must search for the asset in CM (use search Today and My Content). Open the asset for editing and show in explorer. This is one of many areas where T:ANE is not as easy to use as TS12. Some creators are using TS12 to create new assets, as shown below, and then importing them into T:ANE.

In TS12: Start the TS12 Content Manager program. From the File menu select New Asset. After a short delay a long list of asset types will appear..



..select "Html-Asset" from the list. In the username box enter the name of your new asset - I will use Tutorial as the asset name.



Save (press CTRL-S). At the bottom of the window you will see two error messages..



..both are due to the fact that we have not yet added a thumbnail to the asset. We will do this in a later step. The Content Manager asset window should now look like this..



Commit the asset - select it and press CTRL-M



The name has been changed to Tutorial and the red marker indicates the presence of errors.

[pware]

Open the new asset for editing in explorer - select the asset and press CTRL-Shift-E. This will open the asset from the Trainz database and place its contents into a window for viewing and editing.



The only contents so far will be the config.txt file. Right mouse click on an empty spot in the open window and select New --> Text Document

You should at this point start to think about the name(s) of the web page(s) you will be creating. You can change your mind later but each name change will require data to be edited in at least three different locations.

Rename the new document from new.txt to your selected web page name (in this case tutorial.html). You will get a warning about changing the extension of the filename, click YES.



Right mouse click on your new (and currently empty) web page and select a text editor to edit the document. I use Notepad++, a freeware product from http://notepad-plus-plus.org but you could use the Notepad program that comes with Windows. Avoid using web page authoring programs such as Dreamweaver or even MS Word as they create code that is far too complex for Trainz.

This tutorial is not a primer on the particularly simple version of HTML used by Trainz. Look at http://online.ts2009.com/mediaWiki/i...p5/MiniBrowser for a detailed description of Trainz HTML.

In a nutshell - use the KISS principle - Keep It Simple Stupid.



NOTE: With HTML the syntax, punctuation and spelling in the tags is critical. Many frustrating hours can be wasted due to a simple typing or spelling error.

Save. Close Notepad.

Open the config.txt file (double click - it will open in Windows Notepad).

We will need to add two things - the name of the new web page and fill in the missing details for the thumbnail image.



NOTE: I recently discovered that in TS12 SP1 HF4 (at least) it is not actually necessary to add the file extension ".html" to the filename as shown in the config.txt file. I could have just entered "tutorial" as the name of the web page.

For the thumbnail I have simply added the name of a jpeg file (it does not matter at this stage if the file does not exist) and set its size in pixels. NOTE: The name of the image file MUST be surrounded by quote marks.

The thumbnail image (when you create it and add it to your asset) MUST be exactly 240 pixels wide by 180 pixels tall.

For the web page name I have added a string-table section which lists, in order of appearance, all the web pages that will be a part of this asset.

string-table
{
html-page-0 "tutorial.html"
}

The first page must have the title html-page-0 followed by the filename (surrounded by quote marks) of the actual page. In this case "tutorial.html"

Save. Exit Notepad. Close the open asset window and commit the asset (CTRL-M).

Close the Content Manager program.

[pware]

Open your layout in Surveyor mode (I select the Route, click Sessions then select the session and click Edit Session). From the Main Menu select the drop down option Edit Session.

Under Rules in the Session dialogue box click Add. Locate and select the rule Display HTML Pages. Then click the tick.



Select the newly added Display HTML Pages rule and click Edit.



In the open Properties window click Add Page. This will open a HTML asset selection window.



Scroll down to locate and select your new HTML asset. After selecting the asset and clicking the tick you will be returned to the Properties window. Trainz will assume that the name of your HTML file is "index.html" as shown under the heading HTML File.



Click on the filename (index.html) and type in the correct filename - but DO NOT add the .html extension. So type tutorial instead of tutorial.html.

Alternatively, you can click on the Add All button instead of Add Page to add ALL the HTML pages in the selected asset.

Also set ON the check box Prevent user from exiting browser until all pages viewed.

At the very bottom of the Properties page where it says "Use the page index.html from asset HTML click to select as the hidden button", click on the click to select

Here we will use the buttons already built into one of the HTML assets supplied with Trainz. Scroll down to locate and select HTML for Tutorialz.

The Display HTML Pages properties screen should now look like..



Exit the properties window and return to the Session rules window.

[pware]

Under the rules in the Session dialogue box click Add. Locate and select the rule Set HTML Pages



Select the newly added Set HTML Pages rule and click Edit.



Since there is (so far) only one page, I have set the page controls as shown above.

Next to the selected option button Set the following flags for the page named ...

... I have changed the original name shown (index.html) to tutorial.html (without typing the .html extension) and ticked ON the Hide/close window on 'done' action.

Exit the properties window. Close (with the Tick) the Session Rules window.

Save the session and switch to Driver mode (CTRL-F2).

Your web page should now appear (without any "error beetles").



YES, I cheated! This is not "Hello World" but I wanted to show that a single page can contain a lot of user information - you may not need multiple web pages. If the page is taller than the screen height then Trainz will add a vertical scroll bar.

Clicking the browsers X icon (top right) or the Tick (bottom right) should drop the page to the Trainz Utility bar (or its equivalent), not switch it off. The page can be returned for viewing by selecting the Toggle session instruction option ...



.. in the Additional Tools Menu - the button that looks like it has a pair of tools or simply press the F7 key.

[pware]

In TS12 this is much easier than it was in Trainz 2006 - no need for $0, $1 and $2 placeholders in the HTML code and complicated commands in the config.txt file.

Start the Content Manager program and open your HTML asset for editing in Explorer. Create a new web page and give it a name.



Here I have added a thumbnail image (called tutorial.jpg and it is exactly 240 x 180 pixels) and created a pictures folder for all the images that I will be using in the web pages. You don't need to have a folder for your images but I like to have a tidy root folder.

Open the config.txt file for editing and add a new HTML page entry to the string-table at the bottom.



Note that the second page has the tag html-page-1. A third page would be html-page-2 etc. I do not know if there is an upper limit to the number of pages (how many user instructions do you need?).

Save. Exit Notepad. Close the window and commit the asset.

The two web pages are very basic (as required by Trainz) and have NO links <a href ..> tags built into them. The links between the pages are controlled by the config.txt file (as shown above), the Display HTML Pages properties and Set HTML Pages properties in Trainz itself.

In Surveyor edit the Display HTML Pages rule ...



.. by adding the new page to its list of HTML pages and setting it to the correct filename.

Edit the Show HTML Pages rule ...



.. by selecting the new option Set browser parameters. This is one area that I must admit ignorance - I am not sure what all these options do but this is what works for me.

When displayed in Driver, the page will have Left and/or Right button icons (depending on the number of pages) displayed at the bottom right of the browser window next to the Tick.

THAT'S IT!

[normhart]

Wow, pware, that was perfect timing.

I was just scratching my head trying to figure this out and you hand it to me on a plate.

Thanks so much!

(now for the gimme.)

Could you post a screenie of the text you used for the web page example you used in your second post? I am not up to speed with html but a quick screenie should point me in the right direction. I mainly want to see how you did the bolds, italics, and the picture.

Thanks in advance.

[pware]

Could you post a screenie of the text you used for the web page example you used in your second post? I am not up to speed with html but a quick screenie should point me in the right direction. I mainly want to see how you did the bolds, italics, and the picture.

Bold and italics are dead easy <b>bold</b> and <i>italics</i>. Pictures are the <img src=...> tag.

I have rewritten the HTML code in that section since the original screen dump but here is the current version ...

<html>
<body>

<br>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img src="pictures/youarehere.jpg" width="430" height="270" border="0"></td>
</tr>
</table>
<br>

<font color="#000000" size="4"><b>It is 1964 and the Cornwall Coal Mine is closing.</b> There is a mountain of coal waiting at the screens ready for shipment to the Duncan coal washer and then to customers in Hobart and Launceston. All traffic on the branch line has been allocated to the task of moving the coal and additional signal staff are on duty at signal boxes and at some switch frames along the route.<br><br>

<img src="pictures/tgr_002.jpg" width="280" height="160" border="0"><br><br>

One AI train, the <i>Tasman Limited</i>, is running when this session begins. It will shortly arrive at Conara station and then exit through the Conara North Portal within a few minutes. Additional AI trains will appear hourly on the path between Conara Nth Portal and Conara Sth Portal.<br><br>

Driver <b>Ami</b> is waiting at the Duncan coal washing facility with a rake of empty coal wagons. Driver <b>Adair</b> is waiting in Conara Yard with another rake of empty coal wagons. Other drivers are waiting in locomotives at the nearby Conara depot (driver <b>Eric</b>) and at St Marys depot (driver <b>Bald</b>).<br><br>

etc down to

</body>
</html>

[normhart]

That did it! Thanks again.


Uploaded with ImageShack.us

[pware]

Normhart, that is looking good.

I am puzzled by the little squares appearing in the text - these usually mean the presence of illegal text characters. Some are where apostrophe's would normally be used and others, in the last two paragraphs, are where hyphens or perhaps bullet points would be used. Is your text editor adding strange characters?

[normhart]

Normhart, that is looking good.

I am puzzled by the little squares appearing in the text - these usually mean the presence of illegal text characters. Some are where apostrophe's would normally be used and others, in the last two paragraphs, are where hyphens or perhaps bullet points would be used. Is your text editor adding strange characters?

I used Notepad. I'm not sure what might be causing those.


Uploaded with ImageShack.us

Default font (so far as I know) and WordWrap on. Edit: ANSI coding

BTW hints on changing the background color? These old eyes don't work as well as they used to.



More confusion, I looked at the html version of the above in IE8 and did not see any odd stuff. Also I installed Notepad ++ and looked at it there and again did not see odd stuff???

Edit again: I took the Notepad ++ version and replaced the old version and I still see the blocks.

[normhart]

Meanwhile;


Uploaded with ImageShack.us

Yeah, pictures!

Edit: Hum, I just noticed that the ampersand sign is not showing up either???

[normhart]

Oh, this is interesting.

While the apostrophe in Adair's produces an error block the apostrophes in 'Free roaming view' do not. These are italicized.


huh

Edit: Apparently my issues stem from using ANSI instead of UTF-8, however the ampersand issue remains. Attempts to use the suggested &amp have failed so I'm going to go back to scratch and rewrite the entire thing in Notepad ++.

[pware]

The first point I note is that the "&" character in "V&T" is causing problems - this is why it is missing. In HTML code the "&" character is used to indicate the start of a special character code e.g. "&nbsp;" means "non-breaking space", "&lt;" means "<" (which is a character normally reserved for tags), etc. If you want to use the "&" in a text string such as "V&T" then it should be typed as "V&amp;T" with "&amp;" representing the "&" character in the display text.

The second point is that HTML ignores standard end of line codes (i.e. pressing the return key). To end a line you must use either the <br> (line break) code or the <p> (paragraph code). My preference is to use <br> as it gives you better control by forcing a single end-of-line (use one <br>) or a double end-of-line (use <br><br>). The <p> tag always forces an end-of-line and a blank line. Likewise HTML will ignore more than a single space between words or characters - to force additional space (e.g. tabbing) you must use multiple "&nbsp;" codes.

[pware]

Attempts to use the suggested &amp have failed

Are you using "&amp;" with the trailing semi-colon?