Cumulus Wiki

New Default Web Site Information

Revision as of 19:42, 13 March 2021 by NeilThomas (talk | contribs) (→‎Creating New Pages)

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.

You can view a live site using the new templates using live data here. The only page that has been changed is the gauges page and it is hoped that this will soon be part of the default site as well.

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.

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.

Class What it does
w3-hide This is the most useful as it completely removes the element from the display. The space it took up is now available for the following elements
w3-hide-small This does what it says on the tin - it hides an element but only on small screens like mobile phones
w3-hide-medium As for the above class but just for medium screens like tablets
w3-hide-large This hides an element on a large screen

The last three classes can all be used together in any combination. Of course using all three is the same as using just w3-hide.

Page Widths

Some of you feel that the site is not wide enough. This is easy to adjust. There is just one style in the mx-templates styles sheet that controls this called 'site-width'. It's default value is 1140px but you can safely change this to any greater value and it will affect all pages except the graphs pages. This has a locally set style 'graph-width' set to 1250px. Again if this is not wide enough for you make it bigger.

The white panels

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 and top and bottom margin. This is controlled by the w3Pro style sheet - I would not recommend messing with this - it's semi-minified. If you change panel to container you loose the top and bottom margin.
  • 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.

Tips

When using the above classes always start at the heading or paragraph level to see if it does enough. If it doesn't then add it to the div element above and check again. Doing it this way you end up hiding content rather than inadvertently wrecking the structure of the page. A word of advice though, this cannot remove the whole sidebar to give its space to the main body of a page - that requires changes to rows and columns. With creative use of the above classes you can change what is displayed at any screen size. For example, if a table contains a long description such as: 'Highest Temperature Range' that wraps on small screens you can have two (or even three) variations for each screen size.

Make the table cell contain the following:

<span class="w3-hide-small w3-hide-medium">Highest Temperature Range</span><span class="w3-hide-large w3-hide-small">Highest Temp. Range</span><span class="w3-hide-medium w3-hide-large">High Temp Range</span>

It's a lot of content but the page is not uploaded as before so it will have no impact on CumulusMX but will be different on each screen size.

As the new pages are dynamically updated using data tags, it is also possible to put content in more than one place. If you want to have the 'page updated' information at the top of the page and in the footer as well, you can. You can also have it display in one position on large screens and a different position on small screens.

Although the new system looks intimidating it is very much more flexible that the old.

Creating New Pages

The new template is based on the w3schools template. You can read all about this template here: 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: 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'.

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

These can be repeated as often as necessary.

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=7936"