This is an old revision of the document!
Table of Contents
The Alternative Website
Important Information
The Alternative Website is provided as is and is NOT part of the CumulusMX Distribution package. If you choose to use it you do so at your own risk and no guarantee is given that it will work out if the box with your system although every effort is made to make it do so.
It is designed to offer the same resources as the supplied default public website but with the addition of pre-built templates to enable to you easilly add your own pages. You will need to have some knowledge of html, css and JavaScript coding.
This has been developed as an alternative to the public website provided with CumulusMX. It has been completely remodelled using the same or newer technology as the alternative interface. HTML tables have been completely removed and scripts rewritten to separate data manipulation from those that control the layout of the site.
The colour schemes have also been redeveloped using only nine variations but based on Pantone® colours. There are also fewer schemes available.
I have also taken the opportunity to consolidate the CMX configuration structure so that more of the variables that you may need to edit are in one place.
The latest upgraded alternative to the public website supplied by CumulusMX is now available for download (Updated 11:12 17/09/2025)
Please note*. This version is compatible with build 4121.
It has undergone final checks on my local and public web server and can be seen on my public website at https://ai2weather.uk. For comparison, you can also see the current default public website at the default website
Changed files:
- chartshistoric.html, chartstrends.html & chartsselect.html - modified the script to load the latest versions of the highcharts libraries and modified the associated JavaScripts to correct the x-axis time issue. Tooltips have been redesigned along with how the charst are structured.
- Various other pages have been updated to include data now included in the default public website.
Installing
The site is provided as a zip file which needs to be extracted - I recommend that you do this to somewhere outside the CumulusMX structure so that you do not loose the default public website supplied with CumulusMX.
As I use rPi’s to host my weather station and run other utilities, I extract to a sub-directory in the /var/www/html/. This enables me to fully view the site before making it public on my main site - https://ai2weather.uk/. In order to view the data generated by my weather station, I also have to configure CumulusMX to upload its data files to an appropriate location on my rPi.
If you have a web server installed on your system, you could upload it to a sub-folder for development. You will also need to copy the CumulusMX data files to the web server as well.
Whe. you are confident that it works locally, you can either upload the supplied .zip file to your public site and configure again, or generate your own .zip file from your local system. Remember, as long as you can access your CumulusMX data on your server, you can copy this alternative site anywhere of your server, Just configure it to find the data and it should work.
Configuration
Unlike previous versions of the Alternative Website, this version needs to be configured to access your data and your NOAA reports. This is done in one place - the page-manager.js file.
If you use the default configuration for uploading data from CumulusMX to your website, the default settings should provide access correctly to your data. If you upload your data, or reports elsewhere, then you will need to edit this file to point to the required locations.
You should view the configure page for full details.
Extra Features
There are a number of extra features embedded into the site that will need you to amend the websitedataT.json file on your CumulusMX installation. The file is located in the CumulusMX/web folder.
Lightning Strikes
If you have a lightning strikes sensor then you can add the following webtags.
- Lightning.json
"LightningStrikesToday":"<#LightningStrikesToday>", "LightningDistance":"<#LightningDistance>", "LightningTime":"<#LightningTime format="ddd d MMM yyyy"> <#LightningTime>",
Please note the comma at the end of the last line - it is essential if you insert this code anywhere other than the end. If you do insert it at the end, then you will need to add a comma on the existing last line.
WetBulb readings
Add the following to the websitedataT.json file. The location for either of these additions is not critical.
- wetbulb.json
"wetbulb":"<#wetbulb>",
Again pay attention to commas.
You can click on the tabs in each of these panels to download the contents.
Fonts
To make all the fonts used on the site responsive there sizes are calculated based on the site width from 1200px down to 400px. This is done using a css feature called clamp. In order to do this I use a website Using Clamp which provides an easy way to specify the range of sizes required.
All font sizes are specified in the main.css file - lines 24 to 27 for body fonts and lines 36 to 41 for heading fonts.