5,838
edits
Customised templates: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
no edit summary
m (→Simple customisation of indexT.htm: Corrected incorrect row opening reference) |
No edit summary |
||
|
=Customisation Introduction=
= HTML 5 - a very quick guide to structure =▼
Steve Loft once described the web pages he provides with Cumulus with these words: "They exist because they're our web pages, and they're really only included with Cumulus as examples of how the web tags work. It never occurred to me that most people would simply use the supplied examples instead of creating their own pages!"
For many people, however, a big attraction of Cumulus is that you can install it and immediently get some web pages that allow you to see so many more statistics than are available on a typical weather station console. If you have on-line web space you can see those pages on any of your devices wherever you are, and the pages can be seen by other people without you having to know how to write web page code. The standard web pages that come with Cumulus are written as templates, they are page designs that have in effect place-holders where processing (this is explained below) by Cumulus adds the relevant statistics and then creates a web page that is uploaded to your web server. Because the standard web pages have to work with several different weather station types, you may find some of the items shown cannot be updated with your own weather station. Much of this article will help you to customise these templates, when you do want to be more adventuous and tailor the web pages to match your weather station and fit in with your own needs.
This article is being written as a compromise, it tries to help those who know nothing about web pages and want to learn the bits relevent to redesigning Cumulus web pages (instead of learning everthing about HTML, CSS, and the various script languages), but it also wants to help those who do have coding knowledge to understand how to apply such knowledge to the Cumulus context. So don't worry if there are parts of this article too difficult for you, hopefully some of the examples will help you.
Actually, what you see in a browser as a web page tends to involve more than one file. A web-page written to a standard called 'HTML5' defines structure and content, but the style and look will be read from a separate file called a cascading style sheet. That approach allows several web pages to have a common look and makes it easy to change the look of all pages on a web site. More than one style sheet might be invoked, sometimes to allow the web page to be responsive and adjust to the device it is being viewed on, and sometimes just because some styling may not be applicable to more than one web page. Some web pages may require a script to run allowing information (tables or graphs) on that web page to be updated with current statistics. The scope of this article is to focus on the HTML file (so its content will be explained next), as that defines the content and puts it into a structure. However, if you are after a change in the look or want a more significant change to the content, you may need to edit some of the other files, and this article will only give a few pointers.
▲== HTML 5 - a very quick guide 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.
<body> <!-- This defines the start of what the browser is to display in its window -->
</pre>
The comments <code><!-- a comment goes here --></code> are place holders explaining the above code.
You will see that the Cascading Style Sheet for Cumulus "weatherstyle.css" is linked to the HTML in the 10th line of the above code example. There is more information about stylesheets in a separate article [[Stylesheets]] in this Wiki.
=== Structure that browser displays ===
The main part of the page (you can base
=== Standard Finish ===
All your templates could have this standard finish if you have created a Cumulus style template so need to acknowledge the software that will process the template (creating the web page):
</pre>
=The Standard Templates=▼
== What is meant by 'Cumulus processes templates' ==
#When Cumulus is ready to perform a web site update, it will read each template file:▼
#*If ''Include Standard Files'' is selected it processes all the standard files (those listed in table
#** Up to version 1.9.3 - If a template listed above does not exist, will create an empty output file.▼
#** In version 1.9.4 (from build 1061) - Don't try to process a standard template file if it's been deleted.▼
#*If ''Include Standard Files'' is not selected, then only the files explicitly listed with ''Process?'' selected are processed.▼
#*Regardless of that setting, the Cumulus component will process those listed in [[Cumulus.ini#Section:_FTP_Site]] as local files
[[File:badge v1.png]] In Cumulus 1, only the first 10 of a possible maximum of 100 files appear on 'Files' tab in internet settings screen reached from configuration menu. The others can only be edited (with Cumulus stopped) by editing the Cumulus.ini file (see the information later in this article)
[[File:Badge vMx.png]] In Cumulus MX, the configuration screen for the internet files will step through all the possible 100 slots (what you select or input there is covered later in this article).
#Processing means:▼
#*Where it finds a [[Webtags|web tag]] it will remove that tag and -▼
#**either insert the relevant observations from the weather station,▼
#**or insert derived values calculated by Cumulus, ▼
#**or insert time-stamps (formatted by default or [[Webtags#Time.2FDate_.27format.27_Parameter|how you specify]]),▼
#**or insert [[Webtags#Miscellaneous|miscellaneous]] values.▼
#*Otherwise text and code as defined by the template is copied into the output file. <br/><br/>▼
#The result of that process is the creation of local output pages:▼
#*Typically the output is a HTML web page;▼
#** but it is also possible to process scripts with cumulus web tags, and produce an output file in JavaScript or PHP Hypertext pre-processor (e.g. [[Php_webtags|this file]]) code;▼
#**(you can even, inefficiently, process Cascade Styling Sheets if you want to put web tags in them, but more usually the HTML template can include a web tag in the href property value that selects the required pre-loaded CSS).▼
#*(until build 1092 any created web pages were in XHTML 1.0 Transitional using charset=iso-8859-1; from build 1093 normal created web pages are by default - see below for how to change this - in HTML 5 using charset="UTF-8") ▼
#*The file name that Cumulus uses for the created local output page depends on the original template: ▼
#**If template is being processed by "Include Standard Files", the
#**If template is listed
#Cumulus will FTP these up to your web space on the internet. If you have asked it to use ''Rename'' on the remote file, a temporary name is created with the suffix 'tmp' added to the final file name as shown in diagram here. The final file names on your web site will be:▼
#*for templates being processed by ''Include Standard Files'', final file name is as
#*for customised templates (what the chart labels as ''Extra files''), final file name is the name
=Cumulus Web Templates=
The standard website set up, with several other files, is fully described in [[Simple_Website_setup]], look there for details of all the different files needed on your web site.▼
▲==The Standard Templates for Cumulus 1==
[[Category:WebTips]]
[[File:badge v1.png]] Cumulus 1 has a number of template files that it uses if you select to 'Include standard files' within Internet Configuration:
[[File:SimpleInternet-StandardTicks.png]]
Cumulus 1 generates some graphics used for the moon image on index.htm web page, for some of the images on the the gauges.htm web page, and the graphs that appear on the trends.htm web page.
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:
|}
==Standard
[[File:Badge vMx.png]] The standard template files are found in CumulusMX\webfiles folder. Although the templates appear to be the same as Cumulus 1, those for gauges and trends are different. In Cumulus MX script files supply the data that will be used to show on the gauges web page and for the web server to draw the trend graphs, Cumulus MX does not generate any new graphics for each upload.
▲#When Cumulus is ready to perform a web site update, it will read each template file:
▲#*If ''Include Standard Files'' is selected it processes all the standard files (those listed in table above). How the (built in, third party) component which handles the processing of the template file copes with a missing input file depends on the version:
▲#** Up to version 1.9.3 - If a template listed above does not exist, will create an empty output file.
▲#** In version 1.9.4 (from build 1061) - Don't try to process a standard template file if it's been deleted.
▲#*If ''Include Standard Files'' is not selected, then only the files explicitly listed with ''Process?'' selected are processed.
▲#*Regardless of that setting, the Cumulus component will process those listed in [[Cumulus.ini#Section:_FTP_Site]] as local files (the first 10 appear on 'Files' tab in internet settings screen reached from configuration menu) that also have ''Process?'' selected (set to 1 in Cumulus.ini#Section:_FTP_Site). [[File:Cumulus FTP Process.png |right]]
▲#Processing means:
▲#*Where it finds a [[Webtags|web tag]] it will remove that tag and -
▲#**either insert the relevant observations from the weather station,
▲#**or insert derived values calculated by Cumulus,
▲#**or insert time-stamps (formatted by default or [[Webtags#Time.2FDate_.27format.27_Parameter|how you specify]]),
▲#**or insert [[Webtags#Miscellaneous|miscellaneous]] values.
▲#*Otherwise text and code as defined by the template is copied into the output file. <br/><br/>
▲#The result of that process is the creation of local output pages:
▲#*Typically the output is a HTML web page;
▲#** but it is also possible to process scripts with cumulus web tags, and produce an output file in JavaScript or PHP Hypertext pre-processor (e.g. [[Php_webtags|this file]]) code;
▲#**(you can even, inefficiently, process Cascade Styling Sheets if you want to put web tags in them, but more usually the HTML template can include a web tag in the href property value that selects the required pre-loaded CSS).
▲#*(until build 1092 any created web pages were in XHTML 1.0 Transitional using charset=iso-8859-1; from build 1093 normal created web pages are by default - see below for how to change this - in HTML 5 using charset="UTF-8")
▲#*The file name that Cumulus uses for the created local output page depends on the original template:
▲#**If template is being processed by "Include Standard Files", the created output page is the same name without a T,
▲#**If template is listed on the ''Files'' tab (or in cumulus.ini FTP section) as a local file then the created web page has 'tmp' suffixed to the extension. This copes with customised templates that do not use the 'T' convention. <br/><br/>
▲#Cumulus will FTP these up to your web space on the internet. If you have asked it to use ''Rename'' on the remote file, a temporary name is created with the suffix 'tmp' added to the final file name as shown in diagram here. The final file names on your web site will be:
▲#*for templates being processed by ''Include Standard Files'', final file name is as in table above without the letter T;
▲#*for customised templates (what the chart labels as ''Extra files''), final file name is the name you specify for the remote file name on the ''Files' tab (or in [[Cumulus.ini#Section:_FTP_Site]]).
▲The standard website set up, with several other files, is fully described in [[Simple_Website_setup]].
==Changing the Standard Templates==
If all you want to do is change the look of the web pages, then it is the CSS that needs to be changed, just changing the background picture is explained in [[FAQ#How_do_I_replace_the_.27bird.27_image_on_my_website.3F|this FAQ]], . If you don't like your text being converted to lower case see [[FAQ#I.27m_using_the_supplied_web_pages.2C_and_get_lower_case_in_places_where_I_want_upper_case|this FAQ]]. If you want a more extensive change to the look, you might want to consider a third-party template, see downloads page or the support forum, as a starting point. If those don't suit you, you will need to learn about coding CSS (basically you specify selectors and for each selector you can specify a list of property names and their values), as the selectors available in CSS are really very clever now there is an awful lot you can do just using CSS, but it is too complicated to cover here.
*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;
*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.
*
**
**Do not use a 'word processor' as that will introduce unwanted characters;
**
▲**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.
=== Templates in cumulus\web\originals sub-folder ===
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. '''Do not edit these.'''
===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.
*Alternatively, if it is a template containing web tags but uses a name other than a standard one, treat as [[#Creating or Editing Templates in a Separate Folder]].
On a standard Cumulus page there are some HTML headings and then a HTML table ending with a way to select another Cumulus page (a set of 'anchor' links). If you are modifying standard Cumulus templates or adding extra pages of your own to those existing, then you will need to modify the navigation links on all pages, so a page can access any other page. The support forum can be searched to see what problems others have encountered when doing this.
If you add extra items, the links may be too wide to fit within the screen, rectify this by adding a space between a pair of colons where you want to allow the browser to move to a new line (or defining two table rows each with half the anchor links). Alternatively, introduce drop-down selections where links are grouped into categories, too complicated to explain here, but examples appear in the support forum and are explained elsewhere on the web.
[[File:Components_screen.JPG|right]]
</pre>
Cumulus standard web pages use "<td>"...</td> tag pair for table cells containing labels, but you could use "<th>" as shown in above example, the advantage of that is you can add a reference to that tag in the CSS to change the look of label cells whilst keeping a different look for value cells. See [[Stylesheets|styling page]] for more information.
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:
</tr>
</pre>
Again, you can change the look of such empty cells,
Similarly you can add any other observations, remember you need to add another 'tr' start tag with the appropriate class attribute value, then 4 table cells, and don't forget any of the end tags (it may seem to work without end tags, but that forces the browser at display time to decide for itself where to end each cell, potentially confusing the structure).
== Adding/removing Solar table cells for main page and trend graphs ==
Below are some examples relating to solar and UV sensors.
=== Simple customisation of indexT.htm ===
{{Version badge 1}} {{Version badge Mx}}
How to Customise your indexT.htm is described here, but the FAQ referenced just above repeats an excerpt from that and also covers todayT.htm and yesterdayT.htm.
</pre>
=== Slightly less simple customisation of trendsT.htm (Cumulus 1 only) ===
{{Version badge 1}}
The standard template plots temperature range and rainfall on a day by day basis for the '''Daily Chart period''' as set on ''Display'' settings screen from '''Configuration menu''', but all the other graphs plot points at 10 minutes interval for thumbnails and 1 minute interval for the large graph (assuming you have left Cumulus running) for the '''Detailed Chart Period''' set in the same place.
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:badge v1.png]] The pictures of the settings screen are taken from Cumulus 1, but although the settings screen in Cumulus MX has a different look, it is populated with the same content.
[[File:Files tab settings.jpg|right]]
#''Include Standard Files'' (see top left in this image).
| |||
