Cumulus Wiki

New Default Web Site Information

Revision as of 16:33, 26 February 2021 by Mcrossley (talk | contribs)

The New Default Web Site in v3.10

Changes to the Cumulus MX default web site in v3.10

Starting with Cumulus MX v3.10.0 the standard default web site supplied in the distribution file is changing. The new template was created by a forum member Neil Thomas and he kindly gave permission for it distributed with MX. You can see a demonstration version of the new template (with live data) here: https://weather.oaktreewebs.co.uk/index.htm

There are two main changes you need to be aware of:

  1. The template for the pages has been replaced with a new more modern and responsive version. This affects the look of the pages.
  2. 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.

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 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 them (one for large screens, one for mobile) in the /js/setpagedata.js file defined as two long strings. Here is the full menu... 

let menu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>' +
	'<a href="gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>' +
	'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
	'<a href="yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>' +
	'<a href="thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>' +
	'<a href="thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>' +
	'<a href="record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Records</a>' +
	'<a href="monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Monthly Records</a>' +
	'<div class="w3-dropdown-hover">' +
		'<button class="w3-btn w3-theme-hvr  at-slim w3-hide-medium w3-hide-small">Charts</button>' +
		'<div class="w3-dropdown-content w3-bar-block w3-theme">' +
			'<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>' +
			'<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>' +
			'<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>' +
		'</div>' +
	'</div>' +
	'<a href="https://cumulus.hosiene.co.uk/index.php" data-cmx-forumlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide" target="_blank">Forum</a>' +
	'<a href="#" data-cmx-webcamlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide webcamlink">Webcam</a>' +
	'<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">☰</button>';

You can see each page is defined in this format... 

	'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +

You can just add to this string variable, and the new menu item will then appear on every page. So to add a NOAA page add this... 

	'<a href="noaa.php" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">NOAA Reports</a>' +

So it becomes... 

let menu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>' +
	'<a href="gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>' +
	'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
	'<a href="yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>' +
	'<a href="thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>' +
	'<a href="thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>' +
	'<a href="noaa.php" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">NOAA Reports</a>' +
	'<a href="record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Records</a>' +
	'<a href="monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Monthly Records</a>' +
	'<div class="w3-dropdown-hover">' +
		'<button class="w3-btn w3-theme-hvr  at-slim w3-hide-medium w3-hide-small">Charts</button>' +
		'<div class="w3-dropdown-content w3-bar-block w3-theme">' +
			'<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>' +
			'<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>' +
			'<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>' +
		'</div>' +
	'</div>' +
	'<a href="https://cumulus.hosiene.co.uk/index.php" data-cmx-forumlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide" target="_blank">Forum</a>' +
	'<a href="#" data-cmx-webcamlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide webcamlink">Webcam</a>' +
	'<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">☰</button>';

Where I have inserted the new NOAA page between "This Year" and "Records"

You will need to do a similar thing for the mobile menu, which begins... 

let mobileMenu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim">Now</a>' +

Note that because the mobile menu is separate from the full screen menu, you can make the menu entries a little more descriptive if you wish.


Creating New Pages

The new template is based on the w3schools template. You can read all about this template here: HTML Responsive Web Design

Blank Template Pages

The are a number of blank page templates available for download. You can find them here: Blank page templates v1

The zip file currently contains three versions of page: 1 column plus sidebar, 2 column plus sidebar and 3 column plus sidebar. You can use whichever is most appropriate to the data you wish to display.

The templates are commented with information about where to place your headings and data etc.

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'.


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 <span> 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... 

<span data-cmxdata="temp"></span> <span data-cmxdata="tempunit"></span>

Where "temp" and "tempunit" are the names of the values to be displayed from the websitedata.json file.


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 /webfiles-legacy. 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 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 template file /web/websitedataT.json using web tags.

You can create a copy of this file and customise the tags as you wish.

Then add your new template JSON file to the Cumulus 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 or upload the standard websitedata.json file.

It is not recommended to edit supplied /web/websitedataT.json file directly, you risk losing any changes you make with every update.

I want to change the colour theme

The site uses a separate stylesheet - colours.css, for all the colours used in the site. This comes with three variations of the blue used.

All colours start with 'w3-theme' followed by either '-l1' to '-l5', '-d1' to '-d5', '-light' or '-dark'. There are a few extras but more on those later. The l stands for light, the d for dark.

At the moment the main body uses 'w3-theme-light' giving a pale blue background and dark blue text. Replacing 'w3-theme-light' with 'w3-theme-dark' throughout the page switches these. You will need to do this on all pages.


A number of pre-created alternative colour styles have been created, they can be downloaded from here: Alternative Styles v1

To implement a new colour style, just follow these steps

  1. Upload the style file (eg ChiliOil.css) to your /css folder.
  2. Rename the original /css/colours.css file to /css/colours.css.original
  3. Rename the new style file (eg ChiliOil.css) to /css/colours.css


If you want to use your own colours, you can use the theme generator at w3schools.com. There you can select any base colour and it will generate an almost complete set of styles for you. Copy this to the BOTTOM of the existing colours.css file and make sure that all the style names I have used are available in your new colour theme.

There are notes in the stylesheet to help.

Please make sure that you don't replace the existing styles, at least until you have checked that everything is OK. By leaving the existing styles in place, anything that you miss will still get coloured.

If you create your own style you may want to share it via the forum.

Retrieved from "https://www.cumuluswiki.org/index.php?title=New_Default_Web_Site_Information&oldid=7876"