Customised templates

It is possible to take the standard Cumulus web templates and customise these to your own requirements. A basic understanding of HTML is useful.

How Cumulus uses its templates

Cumulus has a number of template files that it uses if you select to 'Include the standard files' within Internet Configuration:

The template files are stored in the 'web' folder under your Cumulus installation on your PC. They all have a 'T' (for 'template') in their names. As at version 1.9.2 the following exist:

• indexT.htm
• todayT.htm
• yesterdayT.htm
• recordT.htm
• gaugesT.htm
• trendsT.htm

From v.1.9.3 another was added:

• monthlyrecordT.htm

When Cumulus is ready to perform a web site update, it will process each of these files, insert the relevant data from the weather station and create local webpages (optionally with temp suffix) for each. Once completed Cumulus will FTP these up to your web space on the internet. The final filenames on your web site will be as above, without the letter T at the end.

The standard website set up is fully described in Simple_Website_setup.

Changing the templates

You can modify any of the template files mentioned above. For example, you may wish to add a link; remove some information; add a page counter; etc

It is best to close down Cumulus while updating the template files. Use windows Notepad or Notepad++ or another text editor to modify the HTML as necessary.

Typically the templates are modified to include additional weather data, or remove it. This is generally done by adding or removing Cumulus webtags, but you normally have to vary the HTML structure by adding/removing table cell (td) elements and possibly rows (tr). There are two examples below relating to solar and UV sensors. Your weather station might be a sort that can accept Extra Sensors and if so you probably want to add webtags for those.

indexT.htm

Look through the standard file and find the following code segment begining with a comment starting 'Solar data'...

  <!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
  <tr class="td_temperature_data">
    <td>Solar Radiation</td>
    <td><#SolarRad> W/m²</td>
    <td>Evapotranspiration Today</td>
    <td><#ET> <#rainunit></td>
  </tr>
  <!-- End of solar data -->

Delete all of the above code segment if you do not have a solar sensor on your weather station. The <#ET> web tag only applies to Davis weather stations that include a solar sensor, if your solar sensor is another make, you might want to partly or completely change the code to the following so you can see your lux observation (Fine Offset solar measuring models only) and/or your ultraviolet observation instead of, or in addition to, whichever of the original parameters either does not apply, or does still apply:

  <!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
  <tr class="td_temperature_data">
    <td>Sunshine</td>
    <td><#Light> Lux</td>
    <td>UV Index</td>
    <td><#UV></td>
  </tr>
  <!-- End of solar data -->

The standard page does not include any indoor temperature and humidity measurements that your station may offer, if you decide to add these or any other observations, remember you need to add another 'tr' with the appropriate class attribute value, and if you are adding an odd number, then you need to also add an empty pair of cells to keep the same count of cells in every row:

<td colspan="2"></td>

trendsT.htm

Look through the standard file and find the following code segment defining a table...

<table cellpadding="0" cellspacing="0" id="Graph_menu">
  <tr>
    <td colspan="5">Click on a thumbnail to show a large graph in the panel above.</td>
  </tr>
  <tr>
    <td class="td_thumbnails"><a onclick='changeImage("images/wind.png")'><img src="images/windsm.png" alt="Wind Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/temp.png")'><img src="images/tempsm.png" alt="Temperature Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/intemp.png")'><img src="images/intempsm.png" alt="Inside Temperature Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/press.png")'><img src="images/presssm.png" alt="Pressure Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/rain.png")'><img src="images/rainsm.png" alt="Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td>
  </tr>
  <tr>
    <td class="td_thumbnails"><a onclick='changeImage("images/windd.png")'><img src="images/winddsm.png" alt="Wind Direction Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/tempm.png")'><img src="images/tempmsm.png" alt="Temp Min/Max Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/hum.png")'><img src="images/humsm.png" alt="Humidity Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/raint.png")'><img src="images/raintsm.png" alt="Today's Rainfall Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/raind.png")'><img src="images/raindsm.png" alt="Daily Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td>
  </tr>
  <tr>
    <td colspan="5" class="td_navigation_bar">:<a href="index.htm">now</a>::<a href="gauges.htm">gauges</a>::<a href="today.htm">today</a>::<a href="yesterday.htm">yesterday</a>::<a href="thismonth.htm">this month</a>::<a href="thisyear.htm">this year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly records</a>::<a href="trends.htm">trends</a>:<#forum><#webcam></td>
  </tr>
</table>

If you look in 'web\images' sub-folder of where you have installed cumulus.exe, you will see 3 more pairs (solar, UV, and Sunshine) of images not mentioned in above segment. You might want to add 1 or 2 of them taking hints from the revised segment below. Note that in two rows a 'colspan' attribute is used to place one piece of text across the entire row, and the value given to that parameter needs to match the number of 'td' elements in other rows. Also note that because an odd number of thumbnails is included in the table, that one 'td' element is empty. However, in practice your station will not support all 3, so you will need to edit what is shown below to suit your instrumentation.

Also note that FTP will only be applied to those of the 3 extra graphs, you select on the screen (extract) shown here, so they are transferred to your web site.

<table cellpadding="0" cellspacing="0" id="Graph_menu">
  <tr>
    <td colspan="7"> <!-- Note that in this revision the original 5 has been changed to 7 -->

Click on a thumbnail to show a large graph in the panel above.</td>
  </tr>
  <tr>
    <td class="td_thumbnails"><a onclick='changeImage("images/wind.png")'><img src="images/windsm.png" alt="Wind Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/temp.png")'><img src="images/tempsm.png" alt="Temperature Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/intemp.png")'><img src="images/intempsm.png" alt="Inside Temperature Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/press.png")'><img src="images/presssm.png" alt="Pressure Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/rain.png")'><img src="images/rainsm.png" alt="Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td>
	<td class="td_thumbnails"><a onclick='changeImage("images/solar.png")'><img src="images/solarsm.png" alt="Solar Graph Thumbnail" width="150" height="100" border="0" /></a></td> <!-- Only for stations supporting Solar measurement in Watts per square metre -->
	<td class="td_thumbnails"><a onclick='changeImage("images/uv.png")'><img src="images/uvsm.png.png" alt="Ultraviolet Graph Thumbnail" width="150" height="100" border="0" /></a></td> <!-- only for stations supporting UV -->
  </tr>
  <tr>
    <td class="td_thumbnails"><a onclick='changeImage("images/windd.png")'><img src="images/winddsm.png" alt="Wind Direction Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/tempm.png")'><img src="images/tempmsm.png" alt="Temp Min/Max Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/hum.png")'><img src="images/humsm.png" alt="Humidity Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/raint.png")'><img src="images/raintsm.png" alt="Today's Rainfall Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/raind.png")'><img src="images/raindsm.png" alt="Daily Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/sunshine.png")'><img src="images/sunshinesm.png" alt="Sunshine Hours Thumbnail" width="150" height="100" border="0" /></a></td> <!-- only for stations measuring hours of sunshine -->
    <td></td> <!-- This is an empty element to ensure the same number of elements is in all rows with an odd number of thumbnails -->
  </tr>
  <tr>
    <td colspan="7" class="td_navigation_bar"> <!-- Note that in this revision the original 5 has been changed to 7 -->
:<a href="index.htm">now</a>::<a href="gauges.htm">gauges</a>::<a href="today.htm">today</a>::<a href="yesterday.htm">yesterday</a>::<a href="thismonth.htm">this month</a>::<a href="thisyear.htm">this year</a>::<a href="record.htm">records</a>::<a href="monthlyrecord.htm">monthly records</a>::<a href="trends.htm">trends</a>:<#forum><#webcam></td>
  </tr>
</table>

In your implementation, you may only use 1 or 2 of the 3 included here. Also you may want to delete the 'td' elements relating to indoor observations. Just remember to adjust the 'colspan' value and if you have an odd number of thumbnails to make all rows the same number of columns by including the null 'td' element shown in the above example.

Notes of caution

As soon as you edit templates, remember that when you update to a new build of Cumulus you have the option during the install process to decline (unselect box shown in this screen) overwriting existing HTML templates in the 'web' subfolder with the new build's standard templates.

• Remember to edit the xxxT.htm files, (not the xxx.htm files) and to have 'Include Standard Files' ticked (as shown above) on the Files tab of the Internet screen within the 'Configuration' menu.

• Try to use a simple text editor to change the files. Many HTML editors will insert additional code, or break the standard Cumulus 'webtags' by replacing the < or > symbols with character codes. Avoid using Word processors, like Word, to edit these files.

• Keep copies of any xxxT.htm files you modify. It is best to back up the whole Cumulus folder onto a different disc on a regular basis.
• From version 1.8.9 onwards, the Cumulus installer installs the standard templates in a Cumulus subfolder called 'web/originals' so you can refer to them. The installer offers you the option of either replacing all templates in the 'web' folder, or not replacing them, if you update Cumulus or re-install the current version. If you select to install the templates, your changes will be lost as Cumulus will replace those in the 'web' folder with the standard ones.

Creating Your Own Templates

If you are making anything but minor changes to the template, consider creating your own files with different names (in a separate folder), and list these local files for Cumulus to process them.

1. Remember if you are not using the standard files to unselect Include Standard Files (see image at top of page) on the Files tab of the Internet screen within the 'Configuration' menu.
2. List the new template files (text including Cumulus webtags) you have created as Local files:
   • 0 to 9 can be stored in cumulus.ini by placing the path and filename in left hand column on the Files tab of the Internet screen within the 'Configuration' menu. An easy way to achieve this is by using the appropriate Browse... button.
   • Local files 10 upto (from version 1.9.3) 99 have to be manually inserted (or amended) by editing Cumulus.ini#Section:_FTP_Site, using a ExtraLocalNN= line (note NN is any 1 or 2 digit number) and placing the path (remember separator is '/') and filename after the equals sign. An easy way to achieve this is by copying one of the lines with NN set to between '0' and '9', next replacing the numerical digit with the required 2 digit number and then changing the filename as needed.
3. Realtime? column
   • Leave the column unselected for template files 0 to 9 to be processed at the 'Interval' specified in the middle of the Web settings frame on the Sites/Options tab of the Internet screen within the 'Configuration' menu. For NN values '10' upto '99', normal interval processing is achieved by including a ExtraRealtimeNN=0 line.
   • Select the relevant box for processing a file at the 'Realtime interval'. For NN values '10' upto '99', realtime interval processing is achieved by including a ExtraRealtimeNN=1 line, in Cumulus.ini#Section:_FTP_Site.
4. Process? and UTF-8? columns
   • Assuming you have listed template files (text including Cumulus webtags) these need to be processed by Cumulus to create webpages; select 'Process?' column for 0 to 9 on the Files tab of the Internet screen within the 'Configuration' menu; or for 10 upto 99 add ExtraProcessNN=1 in Cumulus.ini#Section:_FTP_Site.
   • From build 1093 (27 April 2014) Cumulus processing of its standard pages creates them in utf-8 character coding by default (UTF8encode=1 is included in Cumulus.ini#Section:_FTP_Site). For customised pages, you need to select the 'UTF-8?' column for 0 to 9 on the Files tab of the Internet screen within the 'Configuration' menu; or for 10 upto 99 add ExtraUTFNN=1 in Cumulus.ini#Section:_FTP_Site.
5. For web pages 0 to 9, select the use Binary mode for FTP column [it is mandatory for image files, but optional on most other files; however its use will ensure accurate transfer if any extended (non-ASCII) character set letters (like accented ones) or symbols (like temperature degree symbol) are used on your customised pages] on the Files tab of the Internet screen within the 'Configuration' menu; this is achieved by including ExtraBinaryNN=1 for NN values '10' upto '99' in Cumulus.ini#Section:_FTP_Site.

Remote filenames

Assuming that your web server is not local, the host, username, password and initial directory are specified on the Sites/Options tab of the Internet screen within the 'Configuration' menu and you list the remote filenames as follows:

• For files 0 to 9 enter the full path (directory and required file name) in the Remote filenames column on the Files tab of the Internet screen within the 'Configuration' menu; for NN values '10' upto '99' this is achieved by including ExtraRemoteNN= with directory and filename after the equals sign in Cumulus.ini#Section:_FTP_Site. (IMPORTANT, as the Cumulus Help screen says the Remote filenames column "does not use the 'ftp directory' setting. You should specify the full path for the file, starting from the point you are at when you log in to your site's FTP server" (remember the separator is '\').)

• Finally, select 'FTP?' column for 0 to 9 or for 10 upto 99 add ExtraFTPNN=1 in Cumulus.ini#Section:_FTP_Site.

If your web server is on the same computer (or local network) as Cumulus, then the instructions for remote files are changed slightly because copying rather than file transfer is used:

• It is rarely needed to specify the host, username, password and initial directory of a local web server on the Sites/Options tab of the Internet screen within the 'Configuration' menu (the exception is if your webpage includes a script requiring loading a local file like 'dayfile.txt' because the security design of some browsers may restrict where files can be loaded from).
• For files 0 to 9 enter the full path (on your computer or network) and required file name (destination for file copy instruction) in the 'Remote filenames' column on the Files tab of the Internet screen within the 'Configuration' menu; for NN values '10' upto '99' this is achieved by including ExtraRemoteNN= with full path and filename after the equals sign in the existing [FTP site] section of cumulus.ini.
• Finally to indicate a 'Copy' instruction is required, unselect both Binary and FTP? columns for 0 to 9; or for 10 upto 99 add ExtraBinaryNN=0 and ExtraFTPNN=0 in the existing Cumulus.ini#Section:_FTP_Site.

If a particular webpage on a local web server includes a script requiring loading a local file like 'dayfile.txt', then just for that webpage enter its remote web file name, and select Binary and File Transfer Process, as per the previous set of instructions. (The remaining pages will be copied across locally using the specified full path without FTP as per instructions directly above).