5,838
edits
New Default Web Site Information: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
m
→The New Default Web Site in v3.10: add note about needing to use defaults
NeilThomas (talk | contribs) |
m (→The New Default Web Site in v3.10: add note about needing to use defaults) |
||
| (13 intermediate revisions by 3 users not shown) | |||
|
== 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 ===
# The web site is now "data driven". The old template had the all the data except for the graphs embedded within every page. This meant that every page was processed by Cumulus and uploaded to your web site at every update. The new template pages only have to be uploaded once, they then populate their data from a single JSON data file that Cumulus uploads at each update. This is much more efficient both in terms of bandwidth used and time taken.
You can view a live site using the new templates using live data [https://weather.oaktreewebs.co.uk here]. The only page that has been changed is the gauges page and
=== 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 ===
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.
== Editing the Template Files ==
=== 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.
You will find
Here is the full menu...
<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...
<nowiki>
{title: "Now", menu: "b", url: "index.htm"},</nowiki>
Where:
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>
{title: "Custom", menu: "b", url: "custom.htm"},</nowiki>
So it becomes...
<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>
Where I have inserted the new
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===
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.
If you look at any of these panels you will see that they all have the following styles: w3-panel, w3-card and w3-theme-white.
* w3-panel gives it its left and right padding
* w3-card gives the panel the border shadow. If you don't like this simply remove this class. Personally I just put an 'X' at the end of the style - 'w3-cardX, which means it is ignored. This allows me to easily change my mind.
* Finally the w3-theme-white gives the panel its background and foreground colour. You have 10 variations on this; 'w3-theme-l1' to 'w3-theme-d5' as well as w3-theme, w3-theme-light and w3-theme-dark.
== Creating New Pages ==
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.
=== Blank Template Pages ===
The are a number of blank page templates available for download. You can find them here: [//{{SERVERNAME}}/Downloads/WebTemplatesCurrent-v1.zip Blank page templates v1]
You can delete the sidebar if it is not required and say you just want a single column of information. This won't make the main page area expand into the sidebar area. To do this I recommend you take a look at the existing chart pages - these all use an expanded single column layout. (If you don't want it expanded, just change all divs that have the class 'graph-width' to 'site-width'.
A new complete set of templates in three variations will be published Tues 9th March. These are as follows:
* A set of four templates; 1, 2, 3 and 4 column with a sidebar on the left.
* A set of four templates; 1, 2, 3 and 4 column with NO sidebar
* A set of four templates; 1, 2, 3 and 4 column with the sidebar on the right. (These are slightly different as the sidebar content starts at the top of the page.
If you wish to view them before downloading, they can be viewed at [https://weather.oaktreewebs.co.uk here]
These templates also demonstrate the various colour themes that are also available to download. It is hoped by the end of the month to have at least one of these available as a complete alternative package. If these's one template style that is preferred, I'll focus on that one.
=== Adding Data from the websitedata.json File ===
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...
== FAQ ==
==== 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 <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.
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+ ====
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 [[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.
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 ====
| |||
