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 menu.js. An image of this is shown below:

Menu configuration file for NEW CuMX template
Last modified: 2022/07/05 11:39:38
menu.js - typical name, you define the one used in setpagedata.js

It is STRONGLY RECOMMENDED that if you customise this file, you create a new file with a different name, e.g. mymenu.js
and change setpagedata.js to use that file. This will avoid your customisations being accidentally overwritten during upgrades

Properties:
  .title            - This is the text that appears in the menu bar.
  .menu             - can be 'b' (both menus), 'w' (wide menu ONLY), 'n' (narrow [mobile] menu ONLY)
  .new_window:true  - forces the link to open in new browser window
  .url              - This is the address of the page.  if it is to an external page on another site it must include the full url
                      The two entries that are '#' are special and are configured by the website.
  .forum:true       - flags a forum link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
  .webcam:true      - flags a webcam link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden

some text
menuSrc = [
    {title: "Now",         menu: "b",  url: "index.htm"},
    {title: "Today:,       menu: "b",  url: "today.htm"},
    {title: "Yesterday",   menu: "b",  url: "yesterday.htm"},
    {title: "Today-Yest",  menu: "b",  url: "todayyest.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: "monthmlyrecords.htm"},
   ]},
   {title: "Charts",       menu: "b",  submenu: true,   items: [
        {title: "Trends",         menu: "b",   url: "trends.htm"},
        {title: "Select-a-graph", menu: "b",   url: "selectchart.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}
];

If you want to change the language, simply enter translations for the titles only.
If you want to add an entry copy the entry above and edit it as required.
To create a whole new sub-menu, copy and paste either the section that starts with the title: "Records"... or title: "Charts"... and then edit as required.

An Alternative Default Website

Following on from the development of the current default website, the author of the default website has generated an alternative that is more adaptable and responsive.

It is designed to work on all screen sizes while using exactly the same data that is uploaded to the default website.

It allows your data to be sent to its own sub-folder of the site rather than mixing in with the web pages so makes it easier to manage. It comes with a number of themes or colour schemes that you can implement as required.

To find out more please visit the Alternative Public Website page.

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.