Default Website Development

The default CMX website Development

These section of the Wiki will enable you to get the latest information and resources for the alternative to the default CMX website shipped with version 3.10.x

This page is under development at the moment

Alternative public website

As part of the development process, a new public website template is available which can either sit on top of of totally replace the template supplied with CumulusMX.

This template introduces a number of features and/or improvements.

It is significantly more responsive - adaptable to different viewing devices
All the fonts correctly scale on all browsers

All tables have been removed and replaced with more flexible elements

Panels correctly redistribute themselves on all screens.
Panels can be rearranged with minimal coding skills
Different colour schemes can be applied, again with minimal coding required
It has the facility to specify a separate location for your data files

Installing

Download the current zip file to you local machine and upload it to your web server.

Unzip it in the same location as your existing site - it will not overwrite the existing pages
The new site uses .html pages whereas the existing default site uses .htm

If you visit your site without specifying a page you will be taken to the new template,

Specifying a page such as index.htm will display your old template.

Editing the website menu

The website menu is held in the file my-menu.js. This ensures that it does not conflict with the existing menu.

It is now possible to add dividing bars to sub-menus as well as extra menu items. The menu is shown below:

menuSrc = [
	{title: "Dashboard",    menu: "b",    url: "index.html"},
	{title: "Today",        menu: "b",    url: "today.html"},
	{title: "Yesterday",    menu: "b",    url: "yesterday.html"},
	{title: "Today-Yest",   menu: "b",    url: "todayVyest.html"},
	{title: "Gauges",       menu: "b",    url: "gauges.html"},
	{title: "Records",      menu: "b",    submenu: true,       items: [
		{title: "This Month<i class=\"fa-solid fa-rectangle-list\"></i>",        menu: "b",    url: "recordsthismonth.html"},
		{title: "This Year<i class=\"fa-solid fa-rectangle-list\"></i>",         menu: "b",    url: "recordsthisyear.html"},
		{title: "All Time<i class=\"fa-solid fa-rectangle-list\"></i>",          menu: "b",    url: "recordsalltime.html"},
		{title: "Monthly<i class=\"fa-solid fa-rectangle-list\"></i>",           menu: "b",    url: "recordsmonthly.html"},
		{title: "",					 menu: "b",	   url: "#"},
		{title:	"All records<i class=\"fa-solid fa-rectangle-list\"></i>",		 menu: "b",	   url: "records.html"}
	]},
	{title: "Charts",    menu: "b",    submenu: true,    items: [
		{title: "Trends<i class='fa-solid fa-chart-line'></i>",            menu: "b",    url: "chartstrends.html"},
		{title: "Select-a-graph<i class='fa-solid fa-chart-line'></i>",    menu: "b",    url: "chartsselect.html"},
		{title: "Historic<i class='fa-solid fa-chart-line'></i>",          menu: "b",    url: "chartshistoric.html"}
	]},
	{title: "Reports",   menu: "b",    url: "noaareports.html"},
	{title: "Forum",     menu: "b",    url: "#",    forum: true,    new_window: true},
	{title: "Webcam<i class='fa-solid fa-camera'></i>",    menu: "b",    url: "#",    webcam: true}
];

Things to note

It is possible to use Font-Awsome icons in the menu
You don't need to add sub-menu indicator icons as this is embedded in the code.
You can add menu dividers to the sub-menus by adding an entry as shown below:

{title: "", menu: "b", url: "#"}

It can be placed in both menus, only the full screen menu or the mobile menu as required.

Other changes

The mobile menu now collapses correctly if you select a different sub-menu - you don't have to close a submenu manually before you open another one.

Changing the Theme and Other Settings

This template comes with 33 themes to enable you to personalise the public website. Sixteen of these are light, 16 are dark and one is a high contrast theme. They are all located in the /themes folder.

To change the theme you will need to edit the page-manager.js file located in the 'js folder. The pertinent section is shown below:

let CMXConfig = {
	'Theme': 'Nebulas-Blue',
	'StaticHead': true,
	'StaticFoot': true,
	'Units':	'vh',
	'PaddingTop': 2,
	'PaddingBottom': 1,
	'Seagull': {
		'Animation': '',
		'Duration': 5,
		'OnTop': true
	},
	'Version': 3.0
}

This is located at the start of the file between lines 9 and 22. Do not edit anything else as you will in all likelihood break the site.

Theme

The available themes are:

Arcadia,	Arcadia-Dark,		Cherry-Tomato,	Cherry-Tomato-Dark,
Chili-Oil,	Chili-Oil-Dark,		Crocus-Petal,	Crocus-Petal-Dark,
Cylon-Yellow,	Cylon-Yellow-Dark,	Dark-Grey,	Dark-Grey,
Emporador,	Emporador-Dark,		High-Contrast,
Lime-Punch,	Lime-Punch-Dark,	Marsala,	Marsala-Dark,
Martini-Olive,	Martini-Olive-Dark,	MeerKat,	MeerKat-Dark,
Nebulas-Blue,	Nebulas-Blue-Dark,	Red-Pear,	Red-Pear-Dark,
Russet-Orange,	Russet-Orange-Dark,	Spring-Crocus,	Spring-Crocus-Dark,
Valiant-Poppy,	Valiant-Poppy-Dark

Any of these can be used but be careful not to disrupt the formatting - It must be in quotation marks and the whole entry must be followed by a comma.

Other Settings

Layout

The next FIVE options affect the overall layout of the pages.

Static Header
By default the header will stay at the top of the page when long pages are scrolled.

If you prefer to have it scroll, then set StaticHead: false,
Static Footer
By default the footer will always stay at the bottom of your screen regardless of the length of the page.

If you want it to scroll then set StaticFoot: false,
Units to use for gaps
By default the site uses responsive units to adjust the gap between the header content and footer.
- You can use vh which ties the gap units to a percentage of the screen height
- You can use em which ties the gap to the height of the font (which is responsive), or
- You can use px which is a fixed height based on the resolution of your browser/screen.
Gap between header and page content
Any positive value can be used but if using pixels, it must be an integer.
Gap between page content and footer
As for above.

The Seagull

The seagull is a fixture on your screen. By default it fades in over two seconds. However, you can use a different animation if you prefer. The available animations are:

An Alternative Interface

In addition to the existing Interface site used for managing your weather station, an additional Alternative Interface is also available from the author of the default website.

Details of this can be found here: Alternative Interface.