Oaktree Weather Systems

My Wiki

User Tools

Site Tools

You are here: start » wiki » aw » altwebsite
wiki:aw:altwebsite

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
wiki:aw:altwebsite [2025/10/03 14:54] – [Configuration] Neilwiki:aw:altwebsite [2025/10/25 17:08] (current) – [Version 5] Neil
Line 1: Line 1:
-~~NOCACHE~~ +~~NOTOC~~ 
-====== The Alternative Website ====== +====== The Alternative Public Website ====== 
- +===== Version 5 =====
-<WRAP round important 80%> +
-===== 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 easily add your own pages.  You will need to have some knowledge of html, css and JavaScript coding.  +
-</WRAP> +
- +
-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<sup>(r)</sup> 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. +
- +
-<WRAP nicebox teal> +
-<WRAP round download right 40%> +
-The latest upgraded alternative to the public website supplied by CumulusMX is now available for {{ :wiki:aw:publicwebsite.zip |download}} (Updated **11:12 17/09/2025**) +
- +
-**Please note***.  This version is compatible with build 4121. +
-</WRAP> +
-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 [[https://ai2weather.uk/default/| 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. +
- +
-</WRAP> +
-<WRAP hide>+
 <WRAP nicebox green> <WRAP nicebox green>
 <WRAP round download right 40%> <WRAP round download right 40%>
-Version 5.0.0 can be downloaded from here. +{{ :wiki:aw:publicwebsitev5.zip |Version 5 b:005}} can be downloaded from here. (Updated 25/10/2025).
-</WRAP> +
-=== New version 5.0.0 === +
-Version 5.0.0 of the "Alternative Public Website" introduces a various menu placements, revised colour themes and the use of css grids where appropriate.  It supports users own logos and banner background image.  There has also been a number of changes to the background processing of charts and other features.+
 </WRAP> </WRAP>
 +=== Version 5 ===
 +Version 5 of the "Alternative Public Website" introduces alternative **menu placements**, **revised** colour themes and the use of css grids where appropriate.  It supports users **own logos**((**Even no logo** if you prefer.)) and supports a banner **background image**.  There has also been a number of changes to the background processing of charts and other features.  You can alter the **Dashboard** page //Information Text// by editing the file **index-info.html** file. 
 +++++ V5 b:005 Changes |
 +**Fixed**<wrap indent>Corrected the build number.</wrap>
 +=== Note===
 +The only file that has changed is **page-control.js** so you only need to replace this one file.
 +++++
 </WRAP> </WRAP>
 +
 ===== Installing ===== ===== 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.+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.  By default, it extracts to a folder **apw**.
  
-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 home system, you could upload it there for development.  You will also need to copy the CumulusMX data files to the web server as well.
  
-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 ===== ===== Configuration =====
-Like previous versions of the Alternative Public Website, it needs to be configured to access your data and your NOAA reports.  This is done in one place - the <color #80f>**page-manager.js**</color> file.+Like previous versions of the Alternative Public Website, it needs to be configured to access your data and your NOAA reports.  This is done in one place - the <color #80f>**page-control.js**</color> 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. 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.
  
-<WRAP center round info 60% aligncentre>+<wrap center round info 60% aligncentre>
 **You should view the **[[wiki:aw:configure|configure]]** page for full details.** **You should view the **[[wiki:aw:configure|configure]]** page for full details.**
-</WRAP>+</wrap> 
 + 
 +==== Extra Data Features ==== 
 +There are a number of data items provided by CumulusMX that can be displayed on the Dashboard.  However, these need to be included in the <color blue>**websitedataT.json**</color> file on your CumulusMX installation.  The file is located in the <color teal>**CumulusMX/web**</color> folder.  The location of these extra snippets is unimportant.  You can click on the tabs in each of these panels to download the contents.
  
-==== Extra Features ==== 
-There are a number of extra features embedded into the site that will need you to amend the <color blue>**websitedataT.json**</color> file on your CumulusMX installation.  The file is located in the <color teal>**CumulusMX/web**</color> folder. 
 <WRAP group> <WRAP group>
 <WRAP half column> <WRAP half column>
Line 66: Line 42:
 "LightningTime":"<#LightningTime format="ddd d MMM yyyy"> <#LightningTime>", "LightningTime":"<#LightningTime format="ddd d MMM yyyy"> <#LightningTime>",
 </code> </code>
-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. 
 </WRAP> </WRAP>
 <WRAP half column> <WRAP half column>
Line 74: Line 49:
 "wetbulb":"<#wetbulb>", "wetbulb":"<#wetbulb>",
 </code> </code>
-Again pay attention to commas. 
- 
-You can click on the tabs in each of these panels to download the contents. 
 </WRAP> </WRAP>
 </WRAP> </WRAP>
 +If using either of these extras, you do need to pay particular attention to line endings.  If added at the end you will need to add a comma to the last line of the existing file. 
 ==== Fonts ==== ==== 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 [[https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjQwMHB4IiwibWF4V2lkdGgiOiIxMjAwcHgiLCJtaW5Gb250U2l6ZSI6IjI2cHgiLCJtYXhGb250U2l6ZSI6IjMycHgifQ%3D%3D| Using Clamp]] which provides an easy way to specify the range of sizes required. 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 [[https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjQwMHB4IiwibWF4V2lkdGgiOiIxMjAwcHgiLCJtaW5Gb250U2l6ZSI6IjI2cHgiLCJtYXhGb250U2l6ZSI6IjMycHgifQ%3D%3D| 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.+The base font size is specified in the **main.css** file on line 54.  All other fonts are based as a percentage of this size.
  
wiki/aw/altwebsite.1759503243.txt.gz · Last modified: by Neil