5,838
edits
Customised templates: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
→Changing the templates
m (→Creating Your Own Templates: Amend to follow Mark's advice re using 'binary' mode) |
|||
| Line 28: | Line 28: | ||
It is best to close down Cumulus while updating the template files. Use windows Notepad or [http://notepad-plus.sourceforge.net/uk/site.htm Notepad++] or another text editor to modify the HTML as necessary. | It is best to close down Cumulus while updating the template files. Use windows Notepad or [http://notepad-plus.sourceforge.net/uk/site.htm 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 done | 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_Sensor_Files| 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'... | |||
<pre> | <pre> | ||
<!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment --> | <!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment --> | ||
| Line 41: | Line 42: | ||
<!-- End of solar data --> | <!-- End of solar data --> | ||
</pre> | </pre> | ||
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 change the code to the following so you can see your ultraviolet observation: | 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: | ||
<pre> | <pre> | ||
<!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment --> | <!-- 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"> | <tr class="td_temperature_data"> | ||
<td> | <td>Sunshine</td> | ||
<td><# | <td><#Light> Lux</td> | ||
<td>UV Index</td> | <td>UV Index</td> | ||
<td><#UV></td> | <td><#UV></td> | ||
| Line 53: | Line 54: | ||
<!-- End of solar data --> | <!-- End of solar data --> | ||
</pre> | </pre> | ||
[[File: | 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: | ||
<pre> | |||
<td colspan="2"></td> | |||
</pre> | |||
== trendsT.htm == | |||
Look through the standard file and find the following code segment defining a table... | |||
<pre> | |||
<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> | |||
</pre> | |||
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. | |||
[[File:File_tab.JPG]]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. | |||
<pre> | |||
<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> | |||
</pre> | |||
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== | ==Notes of caution== | ||
[[File:Components_screen.JPG]]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. | *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. | ||
| Line 63: | Line 128: | ||
*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. | *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. | *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 = | = 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. | 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. | ||
