Reports

The reports in OOTP are fully customizable because they are based on templates. The template file names have the extension .tpl. They are simple text files that contain HTML text and tokens. OOTP reads the templates, replaces the tokens with values and writes the resulting HTML code into HTML files. These HTML files are the reports which OOTP displays in-game and which can be used for a league web site. Reports are saved in sub folders of the /news/html folder of your league.

By default, OOTP loads the template files from the folder /templates. But you can create league specific templates easily. Just create a sub folder /templates inside your league folder and copy all .tpl files into this folder. Restart OOTP and it will use the league specific files!

If you want to make changes and test them, you need to watch a few things.

OOTP caches templates

If you make changes to the text file on disk and load the report in OOTP, you will probably not see the changes. To disable caching, edit the /config/app.cfg file and set the following attributes to "1":
- cache_templates (disables caching)
- compress_html (makes it easier to read the resulting HTML code)
- debug_templates (adds the names of the templates to the HTML code)
- trace_mode (the ootp_trace.txt file contains some important info about report creation)

Speed-up report creation: table rows

If an element has a border, OOTP will create a GUI element to "display" it. If you have a table with 100 rows and 12 columns and the td tag has the border attribute set, this will create 1,200 additional GUI elements to display the row lines. This will make reports slow. So we're using a kludge here: if a "th" or "td" tag has a top or a bottom border and a parent tag "tr", then OOTP will copy the border settings to the "tr" tag and remove the settings from the "th" or "td" tag. So we'll have a long line for the whole row. Obviously you cannot have a border on single cells in a row now. But we do not need that in OOTP reports so we decided to implement this "hack". You can see the number of "border scripts" that OOTP creates for a report in the ootp_trace.txt file.

Speed-up report creation: backgrounds

If a table cell has a background color, OOTP will create a GUI element for this cell. This will obviously produce an enormous amount of elements for a big table which will make OOTP slow. But it will not create the GUI element if the parent element has the same color. So it's very important to set the background color of the table to the same color as most of the cells use. You can see the number of "panel scripts" that OOTP creates for a report in the ootp_trace.txt file.

OOTP ignores certain parts of the reports

Inside the game, the report headers and footers will not be displayed. We added commentary code to the templates like

<!-- OOTP IGNORE START COACH HEADER -->
and
<!-- OOTP IGNORE END COACH HEADER -->

OOTP's in-game browser will ignore everything between OOTP IGNORE START and OOTP IGNORE END. The external browsers will not ignore these sections and will display them.

External browsers ignore certain parts of the reports

Sometimes you may want to add HTML code to the reports which should only be displayed inside OOTP. You can do this by using <--x and x-->

For example the following title string will not be displayed in external browsers, but you will see it in OOTP's in-game browser:

<td><--x BASIC BATTING STATS x--></td>

Special table features

Tables can now contain table header cells "th", additionally to table cells "td".

Cascading Style Sheets (CSS)

You can define style sheets in the CSS file or in the HTML page's "style" section this way:

tag /* style will be used for all HTML elements <tag> */
tag.class /* style will be used for all HTML elements <tag class="class"> */
.class /* style will be used for all HTML elements class="class" */
.class tag /* style will be used for all HTML elements <tag> that are successors of HTML elements with class="class" */


- Style sheets will now be "added" to each other. If multiple CSS style sheets match an HTML element, they will all be used for this element.

- you can use multiple style classes for an HTML element like this: <td class="first second third">

Examples:

<style>

body,td { font-family:verdana; font-size:13px; background-color:#FFFFFF; color:#000000; }

table.stats { background-color:#F1EDE2; }
.stats tr { background-color:#F9F8F4; }
.stats td { border-bottom:1px solid #F1EDE2; color:#095E83; }
.stats th { border-bottom:1px solid #F1EDE2; color:#222222; background-color:#D6C8B4; font-weight:bold; }

.dl { padding-left:4px; text-align:left; }
.dr { padding-right:4px; text-align:right; }
.dc { text-align:center; }
.highlight { font-weight:bold; color:#881111; }

.footer { color:#FF0000; font-size:10px; }

</style>

(...)

<div style="margin-bottom:12px;">A stats table:</div>
<table class="stats" cellspacing="0" cellpadding="1">
<tr>
<th class="dl">Team</th>
<th class="dc">WINS</th>
<th class="dc">LOSSES</th>
<th class="dr">PCT</th>
</tr>
<tr>
<td class="dl">Dallas</td>
<td class="dc">17</td>
<td class="dc">18</td>
<td class="dr highlight" style="font-size:20px;">.486</td>
</tr>
<tr>
<td class="dl">Los Angeles</td>
<td class="dc">14</td>
<td class="dc">21</td>
<td class="dr">.400</td>
</tr>
</table>
<br>
<br>
<span class="footer">Copyright 2011</span>

The last cell in the second row of the table, which contains the value ".486", uses the following styles:

The "body,td" style will be used because it's a "td" element.
The background color of the "table.stats" style, but it's overwritten by the background color of the ".stats tr". The ".stats tr" style will be used for all "tr" elements inside another element with class="stats".
The ".stats td" style will be used because it's a "td" element inside another element with class="stats".
The styles "dr" and "highlight" will be used because they are assigned via the "class" attribute.
And finally the "style" settings will be used.

OOTP will ignore CSS classes starting with "ext_". For example the class ext_bg will be ignored by OOTP. But it will be used by external browsers.

Previous page: Sound
Next page: About Comma-Separated Files