Customised templates: Difference between revisions

Customised templates: Stage 2 of restructure for utf-8 options
(→‎Customised templates: As consequence of HTML5 and utf-8 change; Restructured whole article)
(Customised templates: Stage 2 of restructure for utf-8 options)
It is possible to take the standard Cumulus web templates and customise these to your own requirements. A basic understanding of HTML is useful.
[[Category:WebTools]]
=The Standard Templates=
=How Cumulus uses its standard templates=
 
Cumulus has a number of template files that it uses if you select to 'Include standard files' within Internet Configuration:
[[File:SimpleInternet-StandardTicks.png]]
|}
 
 
== What is meant by 'Cumulus processes templates' ==
When Cumulus is ready to perform a web site update, it will read each of these template files, and run a process that creates locally web pages (until build 1092 the created pages were in XHTML 1.0 Transitional using charset=iso-8859-1; from build 1093 the created pages are in HTML 5 using charset="UTF-8") by inserting text from the template.
 
 
=Changing the Standard Templates=
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/editing/removing table cell (<td> to </td>) elements and possibly rowsadd/remove a row (<tr class="..."> to </tr>) element.
*You can modify one or more of the template files listed above. For example, you may wish to
**change the wording that appears on the web page by editing it on the template;
**add/remove some Cumulus derived information;
**add a page counter; etc
*Remember to edit the xxxT.htm files, (not the xxx.htm files as they are created by the [[#What is meant by 'Cumulus processes templates' |Cumulus 'process']])
*It is best to close down Cumulus while updating the template files.
*Use windows Notepad or another '''text editor''' tool to modify the HTML as necessary.
**Do not use a word processor as that will introduce unwanted characters;
**Many web page editors (like wordpress) should also be avoided as they can change the page structure and remove the Cumulus web tags;
**Other HTML editors (like [http://notepad-plus.sourceforge.net/uk/site.htm Notepad++], [http://www.htmlkit.com/ HTML kit-292] to cite just two free ones) are just text editors that use colour and other aids to help you identify what you are editing and may make it easier for you.
 
==Editing to create one or more customised templates in the standard web sub-folder==
*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.
*If you edit one or more of the templates, listed in the table above, in the ''cumulus\web'' sub-folder, keeping their original names, this has the advantage that Cumulus will [[#What is meant by 'Cumulus processes templates' |process ]] the customised template as if it is aan unmodified standard one (as described above).
*You just need to have 'Include Standard Files' ticked (as shown above) on the ''Files'' tab of the '''Internet''' screen within the 'Configuration' menu.
[[File:Components_screen.JPG]]*As soon as you edit templates, remember that when you update to a new build of Cumulus (or re-install the current version) the installer offers you the option of either installing the new build's standard 'HTML templates' in the 'cumulus\web' folder (and any updated files in 'Cumulus\webfiles'), or not replacing the current contents of those sub-folders. 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.
=== Coding standard and character encoding for Customised Templates using the same names as Standard Cumulus Templates ===
*If you use a mixture of unmodified standard templates and customised templates with standard names, if a release announcement says there are updated scripts then on an update you will need to accept the templates in the screen above to download those updated versions of scripts used by the standard templates.
[[File:Web settings.JPG]]Your edited template should be written in ''HTML 5'' using ''charset="UTF-8"'' encoding. If it is using one of the standard names in the table above and does not comply with that coding, then you need to unselect the 'UTF-8 encode' selection illustrated here, get to it via '''Configuration''' menu, Internet option, ''Sites/Options'' tab and look for Web Settings frame in top centre.
 
'''If you choose to use third party user customised templates [http://sandaysoft.com/downloads designs from other providers] you need to check if their web page coding starts as HTML5 extract below.''' If it does mention ''charset="UTF-8"'', and uses the name of a standard template and is stored in cumulus\web, then the '''UTF-8 encode''' should be selected as shown in 'Web Settings' frame above. If it uses a standard name and path, but does not mention utf-8, then uncheck the '''UTF-8 encode''' in the frame illustrated. Finally, if it uses a name other than a standard one, treat as [[#Creating or Editing Templates in a Separate Folder]].
 
=== HTML 5 - a very quick quide to structure ===
It is possible to take the standard Cumulus web templates and customise these into totally new ones to your own requirements. A basic understanding of HTML is useful.
A Cumulus template written in HTML 5 requires a simple start to the file:
<pre>
<!DOCTYPE html>
<html lang="en"><!-- modify this if you are not using English language -->
<head>
<meta charset="utf-8"><!-- assigns the English standard subset of characters -->
<meta name="description" content="<#location> weather data">
<meta name="keywords" content="Cumulus, <#location> weather data, weather, data, weather station">
<title><!-- insert here what is to appear in browser tab title --></title>
<link href="weatherstyle.css" rel="stylesheet"> <!-- This line links a stylesheet to the HTML page -->
</head>
<body> <!-- This defines the start of what the browser is to display in its window -->
</pre>
The main part of the page (you can base that on what you can see in the closest standard template to what you are trying to achieve) goes here before this standard finish to a Cumulus style template:
<pre>
<p class="credits"><br />
Page updated <#update><br />
powered by
<a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a>
v<#version> (<#build>)
</p>
</div>
</body>
</html>
</pre>
 
===Updating to a new Cumulus build===
[[File:Components_screen.JPG]]*As soon as you edit templates, remember that when you update to a new build of Cumulus (or re-install the current version) the installer offers you the option of either installing the new build's standard 'HTML templates' in the 'cumulus\web' folder (and any updated files in 'Cumulus\webfiles'), or not replacing the current contents of those sub-folders. If on the installer screen shown you select to install the templates, any changes you made in the web subfolder will be lost as Cumulus will delete everything from the 'cumulus\web' folder before installing the new build's standard 'HTML templates' in that 'cumulus\web' folder.
*If you use a mixture of unmodified standard templates and customised templates with standard names and a release announcement says there are updated scripts, then please do backup your customised templates before running the installer as you will need to accept the new build's standard 'HTML templates' in the 'cumulus\web' folder (by selecting the box in the screen above) to download those updated versions of scripts called from any of the standard template coding you have retained unmodified.
'''Consequently, the recommendation is that for any customised templates, you delete the original template from the web sub-folder (leaving it in the web\originals sub-folder) and put your customised template in a different folder.''' If you do this:
*You reduce the risk of accidental overwriting.
*You can either use a standard template name or you can select a new filename (it is recommended you continue to insert the suffix 'T' to indicate it is a template that needs to be processed by Cumulus).
*You can select your own local folder namepath.
*You do need to definetell Cumulus the local and remote file names you require - as described in [[#Creating_Your_Own_Templates|Creating or Editing Templates in a Separate Folder below]]
 
== Adding/removing Solar table cells for main page and trend graphs ==
Here are two examples 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.
 
=== Simple customisation of indexT.htm ===
The standard file includes a table where for each row (<tr class="..."> to </tr>) there are 4 cells (<td> to </td>) arranged as 2 pairs. The HTML tag <th> that starts the row uses a class to define its look, in the style-sheet linked to the HTML that class will have properties like background colour defined. Each pair of cells consists of a label identifying the observation being reported and a Cumulus web tag representing where the value is to appear.
 
Look through the standard file and find the following code segment containing the definition for one row wrapped by comments mentioning 'Solar data':
=== indexT.htm ===
Look through the standard file and find the following code segment begining with a comment starting 'Solar data'...
<pre>
<!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
<!-- End of solar data -->
</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 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>
<!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
<!-- End of solar data -->
</pre>
 
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:
#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 taking your cue from the solar example here.
#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' start tag with the appropriate class attribute value, and don't forget the end tag.
#Since on this web page there are two pairs of table cells per row, if you really want to add just one pair in a row, 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>
=== Slightly less simple customisation of trendsT.htm ===
Look through the standard file and find the following code segment defining a table...
<pre>
</table>
</pre>
If you look in 'web\images' sub-folder (this path can be changed in [[cumulus.ini]]) 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.
[[File:File_tab.JPG]]On the screen (extract) shown here, you select solar, uv or sunshine to determine which of the 3 extra graphs, are file transferred (or copied) to your web site. Remember, in practice your station will not support all 3, so you will need to edit the changes shown below to suit your instrumentation.
 
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 total number of thumbnails split between an even number of rows, to make all rows the same number of columns by including the null 'td' element shown in the above example.
 
= Creating or Editing Templates in a Separate Folder =
== Coding standard and character set for Customised Templates ==
If you are making anything but minor changes to the template, consider creating your own files with (same or preferably) different names in a separate folder.
 
== What to select on the 'Files' tab of the '''Internet Settings''' screen within the 'Configuration' menu ==
[[File:Web settings.JPG]]Your edited template should be written in HTML 5 using charset="UTF-8". If it is using one of the standard names in the table above and does not comply with that coding, then you need to unselect the utf-8 seelction illustrated here.
In this section, the instruction cover both template files (Cumulus has to be asked to 'process' these) and other files (such as images, web pages without cumulus web tags, log files etc) that are to be file transferred or copied multiple times each day.
 
[[File:Files tab settings.jpg]]
*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.
#''Include Standard Files'' (see top left in this image).
 
#*Remember if you are not using ''any'' of the standard template names in cumulus\web to unselect this setting (as shown in the nearby image).
= Creating Your Own Templates =
#*If one or more of the standard templates is still in cumulus\web, then you want this setting set as per the image at the top of this article.
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.
#''Include Standard Images'', ''Solar'', ''UV'' and ''Sunshine''
#Remember if you are not using the standard files to unselect ''Include Standard Files'' (see image at top of page) on the [[Cumulus_Screenshots#Files_Tab|''Files'' tab]] of the '''Internet''' screen within the 'Configuration' menu.
#* These settings are selected as applicable. The images are needed for the moon, trend graphs and gauges to appear on your web site. The last 3 are set according to customisation described above in [[#Slightly less simple customisation of trendsT.htm]].
#List the new template files (text including Cumulus webtags) you have created as ''Local files'':
#''Local files'': List here the new or edited template files (text including Cumulus webtags) you have created.
#*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.
#*Also list here any non-template files that you want Cumulus to upload (or copy across) at either the normal website updating interval or the realtime updating interval.
#*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.
#*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 as that will ensure the parts of the path have the correct separator.
#*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 for Windows local files the parts of the path are separated by '\') 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.
#''Realtime?'' column
#*Leave the column unselected for template (or other) files 0 to 9 to be processed at the upload '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' (set at the bottom of the web settings frame shown earlier in the article). For NN values '10' upto '99', realtime interval processing is achieved by including a ''ExtraRealtimeNN=1'' line, in [[Cumulus.ini#Section:_FTP_Site]].
#''Process?'' and ''UTF-8?'' columnscolumn
#*AssumingIf the local file you have listedspecifed is a template filesfile (i.e. text including Cumulus webtags) these need to be [[#What is meant by 'Cumulus processes templates' |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]].
#*FromIf buildthe 1093local (27file Aprilyou 2014)have Cumulus processing of its standard pages creates them in ''utf-8'' character coding by default (''UTF8encode=1''specifed is includedany inother [[Cumulus.ini#Section:_FTP_Site]]).type For customisedof pagesfile, youthen needleave tobox selectin the 'UTF-8?'this column for 0 to 9 on the ''Files'' tab of the '''Internet''' screen within the 'Configuration' menu;clear or for 10 upto 99 add ''ExtraUTFNNExtraProcessNN=10'' in [[Cumulus.ini#Section:_FTP_Site]].
#''UTF-8?'' column
#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]].
##If the local file you have specifed is a template file (i.e. text including Cumulus webtags) these need to be [[#What is meant by 'Cumulus processes templates' |processed by Cumulus]] to create webpages and Cumulus therefore needs to be told what encoding you used for the customised template.
##From build 1093 (27 April 2014), 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]].
#*If it is not a template file, the setting here is irrelevent.
#''Binary?'' column
#*For web pages 0 to 9, select this [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' and 'FTP?' columns for remote servers ===
If your web server is on a remote server, then the instructions for remote files require that file transfer is used:
*Sites/Options tab of the '''Internet''' screen within the 'Configuration' menu.
**The host, username, password and initial directory are specified here.
*Files tab of the '''Internet''' screen within the 'Configuration' menu.
*#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 '/' for server paths).)
*#Finally, select 'FTP?' column for 0 to 9 or for 10 upto 99 add ''ExtraFTPNN=1'' in [[Cumulus.ini#Section:_FTP_Site]].
 
=== 'Remote filenames' and 'FTP?' columns for local servers ===
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:
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:
*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 '\').)
*Sites/Options tab of the '''Internet''' screen within the 'Configuration' menu.
**It is rarely needed to specify the host, username, password and initial directory of a local web server on this screen
**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, and if your local server is visible to anyone, you cannot know what browser is being used to view the page.
*Files tab of the '''Internet''' screen within the 'Configuration' menu.
#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]].
 
*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).
5,838

edits