5,838
edits
NeilThomas (talk | contribs) |
m (→The New Default Web Site in v3.10: add note about needing to use defaults) |
||
(8 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
== The New Default Web Site in v3.10 == | == The New Default Web Site in v3.10 == | ||
Please note that for this suite to work, every configurable setting in any way related to web sites, must be set to defaults (unless there are no defaults, e.g. passwords). Most, but not all, these defaults are set correctly when you go to '''Settings menu''' → ''Internet settings'' → '''web/FTP settings''' and then select '''I want to use the supplied default web site'''. However, there are other settings elsewhere, (e.g. '''Settings menu''' → ''NOAA settings'' → '''Output files''' and '''Settings menu''' → ''NOAA settings'' → '''FTP options''') that must also be kept at defaults. Quoted setting navigation paths are correct for 3.10.x releases, but might change in future. | |||
=== Changes to the Cumulus MX default web site in v3.10 === | === Changes to the Cumulus MX default web site in v3.10 === | ||
Line 13: | Line 15: | ||
=== Installing the new template for new users === | === Installing the new template for new users === | ||
The installation process for the new template is exactly the same as the old one. | |||
You just copy the entire contents of the '''/webfiles''' folder from the distribution zip to the root folder (or a sub-folder of your choice if you also have non-weather content) of your web server. | |||
=== Migrating from the old template === | === Migrating from the old template === | ||
Essentially the same as installing the new template for new users. I recommend deleting the current contents of your web site (it would be prudent to make a backup first), then uploading the contents of the new /webfiles folder. | |||
As housekeeping, you will also need to clear out your existing Cumulus MX local /web folder and replace it with the contents of the distribution zip /web folder. | Essentially the same as installing the new template for new users. I recommend deleting the current contents of your web site (it would be prudent to make a backup first), then uploading the contents of the new '''/webfiles''' folder. | ||
As housekeeping, you will also need to clear out your ''existing'' Cumulus MX local '''/web''' folder and replace it with the contents of the ''distribution zip'' '''/web''' folder. | |||
After migrating it is best to flush the browser cache for your web site before loading it again. | After migrating it is best to flush the browser cache for your web site before loading it again. | ||
== Editing the Template Files == | == Editing the Template Files == | ||
=== Adding new pages to the new site menus === | === Adding new pages to the new site menus === | ||
Unlike the old site where you had the edit the menu on every existing page in order to add a new one, the new site has the menus defined once. | Unlike the old site where you had the edit the menu on every existing page in order to add a new one, the new site has the menus defined once. | ||
You will find | You will find it in the /js/menu.js file defined as a single object. | ||
Here is the full menu... | Here is the full menu... | ||
<nowiki> | <nowiki> | ||
menuSrc = [ | |||
{title: "Now", menu: "b", url: "index.htm"}, | |||
{title: "Today", menu: "b", url: "today.htm"}, | |||
{title: "Yesterday", menu: "b", url: "yesterday.htm"}, | |||
{title: "Gauges", menu: "b", url: "gauges.htm"}, | |||
{title: "Records", menu: "b", submenu: true, items: [ | |||
{title: "This Month", menu: "b", url: "thismonth.htm"}, | |||
{title: "This Year", menu: "b", url: "thisyear.htm"}, | |||
{title: "All Time", menu: "b", url: "record.htm"}, | |||
{title: "Monthly", menu: "b", url: "monthlyrecord.htm"} | |||
]}, | |||
{title: "Charts", menu: "b", submenu: true, items: [ | |||
{title: "Trends", menu: "b", url: "trends.htm"}, | |||
{title: "Select-a-graph", menu: "b", url: "selectachart.htm"}, | |||
{title: "Historic", menu: "b", url: "historic.htm"} | |||
]}, | |||
{title: "Reports", menu: "b", url: "noaareport.htm"}, | |||
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true}, | |||
{title: "Webcam", menu: "b", url: "#", webcam: true} | |||
]; | |||
</nowiki> | |||
You can see each page is defined in this format... | You can see each page is defined in this format... | ||
<nowiki> | <nowiki> | ||
{title: "Now", menu: "b", url: "index.htm"},</nowiki> | |||
Where: | |||
You can just add to this | title = the text that appears on the menu | ||
menu = b - appears on both the full and mobile menus, w - show on full (wide) menu only, n - show on mobile (narrow) menu only | |||
You can just add new items to this object, and the new menu item will then appear on every page. So to add a Custom page add this... | |||
<nowiki> | <nowiki> | ||
{title: "Custom", menu: "b", url: "custom.htm"},</nowiki> | |||
</nowiki> | |||
So it becomes... | So it becomes... | ||
<nowiki> | <nowiki> | ||
{title: "Now", menu: "b", url: "index.htm"}, | |||
{title: "Today", menu: "b", url: "today.htm"}, | |||
{title: "Custom", menu: "b", url: "custom.htm"}, | |||
{title: "Yesterday", menu: "b", url: "yesterday.htm"}, | |||
{title: "Gauges", menu: "b", url: "gauges.htm"}, | |||
{title: "Records", menu: "b", submenu: true, items: [ | |||
{title: "This Month", menu: "b", url: "thismonth.htm"}, | |||
{title: "This Year", menu: "b", url: "thisyear.htm"}, | |||
{title: "All Time", menu: "b", url: "record.htm"}, | |||
{title: "Monthly", menu: "b", url: "monthlyrecord.htm"} | |||
]}, | |||
{title: "Charts", menu: "b", submenu: true, items: [ | |||
{title: "Trends", menu: "b", url: "trends.htm"}, | |||
{title: "Select-a-graph", menu: "b", url: "selectachart.htm"}, | |||
{title: "Historic", menu: "b", url: "historic.htm"} | |||
]}, | |||
{title: "Reports", menu: "b", url: "noaareport.htm"}, | |||
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true}, | |||
{title: "Webcam", menu: "b", url: "#", webcam: true} | |||
</nowiki> | </nowiki> | ||
Where I have inserted the new | Where I have inserted the new Custom page between "Now" and "Yesterday" | ||
Submenus can also be defined, they use the property "submenu: true", and then have an array of submenu items (defined as above) added to the "items: []" array. | |||
You will also find an example extended menu called "menuSample.js" in the webfiles/js folder. | |||
Note: the forum and webcam menu items only have special properties "forum" and "webcam", these are used by the main page code to determine if these menu items should be displayed or not. | |||
=== Making changes to the pages=== | === Making changes to the pages=== | ||
Although looking at the new template pages makes the idea of editing them daunting, it really is not that hard. There are just a few classes that are really useful. | Although looking at the new template pages makes the idea of editing them daunting, it really is not that hard. There are just a few classes that are really useful. | ||
Line 131: | Line 140: | ||
The new template is based on the w3schools template. You can read all about this template here: [https://www.w3schools.com/html/html_responsive.asp HTML Responsive Web Design]. | The new template is based on the w3schools template. You can read all about this template here: [https://www.w3schools.com/html/html_responsive.asp HTML Responsive Web Design]. | ||
You should also visit the page [Default_Website_Development|Default Website Development] for up to date resources and information about developments that we are making to the default system. | You should also visit the page [[Default_Website_Development|Default Website Development]] for up to date resources and information about developments that we are making to the default system. | ||
=== Blank Template Pages === | === Blank Template Pages === | ||
Line 152: | Line 161: | ||
=== Adding Data from the websitedata.json File === | === Adding Data from the websitedata.json File === | ||
If you wish to insert data from the websitedata.json file, then all you need to do is add a <nowiki><span></nowiki> element with the "data-cmxdata" attribute set to the data item you wish to display. | |||
If you wish to insert data from the [[WebsitedataT.json|websitedata.json]] file, then all you need to do is add a <nowiki><span></nowiki> element with the "data-cmxdata" attribute set to the data item you wish to display. | |||
For example to add the current temperature and unit to your page, you would add the following spans... | For example to add the current temperature and unit to your page, you would add the following spans... | ||
Line 163: | Line 173: | ||
== FAQ == | == FAQ == | ||
==== I want to keep the old web site look and feel, but also update to MX v3.10+ ==== | ==== I want to keep the old web site look and feel, but also update to MX v3.10+ ==== | ||
Well, good news (for now). The distribution zip file contains a folder named /webfiles-legacy. | |||
Well, good news (for now). The distribution zip file contains a folder named <code>/webfiles-legacy</code>. | |||
This folder contains a "new" version of the original web site that uses the same data-driven approach of the new template. So you can enjoy the efficiency of the new single data file upload with the old look and feel. | This folder contains a "new" version of the original web site that uses the same data-driven approach of the new template. So you can enjoy the efficiency of the new single data file upload with the old look and feel. | ||
Be aware though that these legacy files will no longer be maintained or updated, and at some stage will be removed from the distribution file. | Be aware though that these legacy files will no longer be maintained or updated, and at some stage will be removed from the distribution file. | ||
==== I want to keep the old web site completely, but also update to MX v3.10+ ==== | ==== I want to keep the old web site completely, but also update to MX v3.10+ ==== | ||
It that case you will have to keep the indexT.htm, gaugesT.htm etc. files from a previous release and make sure they are still in your local /web folder. | It that case you will have to keep the ''indexT.htm'', ''gaugesT.htm'', etc. files from a previous release, and make sure they are still in your local /web folder. | ||
Then you will have to add every web page template file (indexT.htm, gaugesT.htm etc) to your Cumulus MX Extra Files list; the remote filenames should all drop the 'T' - indexT.htm becomes index.htm. Ensure you tick process, FTP and add your web site FTP folder in remote files. | Then you will have to add every web page template file (indexT.htm, gaugesT.htm etc) to your Cumulus MX [[MX_Administrative_Interface#Extra_Web_Files|Extra Files]] list; the remote filenames should all drop the 'T' - indexT.htm becomes index.htm. Ensure you tick '''process''', ''FTP'' and add '''your web site FTP folder''' in remote files. | ||
==== I want to customise/localise the data Cumulus MX uploads in the JSON data file ==== | |||
The uploaded data file is created from a [[Cumulus_template_file|template]] file called [[WebsitedataT.json|/web/websitedataT.json]] using web tags. | |||
The uploaded data file is created from a template file /web/websitedataT.json using web tags. | |||
It is ''not recommended'' to edit supplied <code>/web/websitedataT.json</code> file directly, you risk losing any changes you make with every update. | |||
You can create a copy of this file, in a new folder with a slightly modified file-name, and customise the tags as you wish. | |||
Then add the path to your new template JSON file to the Cumulus [[MX_Administrative_Interface#Extra_Web_Files|Extra Files]] list, with process and FTP enabled, for the remote filename use the default '''websitedata.json''' (so that the template scripts will pick it up without alteration). | |||
You also need to change the '''Internet Settings > Interval''' file list to not process, nor upload, the standard ''websitedata.json'' file. | |||
==== I want to change the colour theme ==== | ==== I want to change the colour theme ==== |
edits