Default Website Development: Difference between revisions

From Cumulus Wiki
Jump to navigationJump to search
 
(56 intermediate revisions by the same user not shown)
Line 1: Line 1:
==The default CMX website Development==
==The default CMX website Development==


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


===The current default site===
===Alternative public website===
As part of the development process of the CumulusMX Interface, I have generated a new public website (with template pages) as an alternative to the one provided with CumulusMX.
This will always be available to you in the 'websites' folder of your Cumulus MX Installation. However, it is not a published site until you decide to make it so.


This template builds on the development of the AI and introduces a number of features and/or improvements.
To publish the default website you will need a web host and a domain name that you can access.


Full details of the alternative public website, including screenshots can be fond on [https://oaktreewebs.co.uk/wiki/ my wiki] together with comprehensive instructions on how to install, use and modify.
=== Publishing the Default Site ===
To publish the site you need to upload '''ALL''' of the contents of the website folder to a location on your website. Normally this would be to the public_html folder in your control panel for your web host. However, there is nothing to stop you using a sub-folder off the public_html one. If you do this you will need to '''make a note of the folder name''' you use.


Its major change is that all configuration data is held in one place: the CMXConfig object, so you can set the location of your data, your NOAA reports and the menu just by editing one part of one file.
Once you have copied all the above files, you need to configure CumulusMX to upload your data at regular intervals.


The menu has also been enhanced with some additional features while maintaining the single json structure of the original.
==== Configure CumulusMX to upload data ====
This is done on the '''Internet Settings''' Page.
Under the Web/Upload Site' tab check the following:
* Enable Upload Connections
* Select a FTP protocol - Do this in consultation with your web host provider.
* Enter a Host name: - this will usually be your domain name without the http/https prefix.
* FTP and FTPS is usually port 21 but you should select the port in consultation with you web host provider.
* Enter the directory you wish to upload to. This will usually be public_html/ as this is where your pages are. If you have copied your pages to another location then give the path to them.
* Provide a username and password for an account that can FTP to the specified location.*


This site also comes with new themes (unfortunately not compatible with the AI or previous versions) that should be easier to modify for your own needs.
You should not need to change either General or Advanced settings at this stage.


'''Download the [https://www.cumuluswiki.org/images/0/08/PublicWebsite.zip latest version here]''' (Updated: (12:34 3rd Apr 2025) '''W3C Validated code'''.) [This version accommodates HTML formatted NOAA reports and corrects the use of 'on' in all-time reports. Note that if you opt to use these formatted NOAA reports you will need to re-generate '''ALL''' existing reports '''and upload them'''.]
Under the '''Interval Configuration''' tab check the option: 'I wish to use the supplied default web site'.
This should make all the configuration changes needed but it is worth while to check:


'''You can view my site using the new default templates on [https://ai2weather.uk Oaktree Weather ].
Under '''Normal Interval Settings''' make sure that everything is selected and that the interval to use is what you want.
Under '''Real time Interval Settings''' make sure that it is enabled, that the interval in seconds is what you want and that ''''Upload'''' is enabled.


====Amendments since last revision====
Your site should now be functioning. However, you may wish to visit the '''Utilities''' page and initiate an FTP upload of everything.
This is a full rebuild of the site.


===Templates===
==Installing==
Download the current zip file to you local machine and upload it to your web server.
There are currently 3 alternative template frameworks for the site. These all include 4 variations for the main content area of a page; a single column, two column, three column and four columns. These can be used as the framework for existing pages or to add your own content as required. You can choose to use them in any combination or just one - its up to you. All come with a pdf readme file to help you use them but for full information about the available styles visit [https://www.w3schools.com/w3css/default.asp w3Schools].
*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 pages,
*;Specifying a page such as index.htm will display your old template pages.


*: Please clear your browser cache before viewing.
The available frameworks are:
* A lefthand sidebar with the main panel on the right. Download at [https://cumuluswiki.org/images/7/75/LeftSBTemplates.zip Left-handed sidebar template]. Updated: 24th June 2023
* A righthand sidebar with the man panel on the left. Download at [Https://cumuluswiki.org/images/6/67/RightSBTemplates.zip Right-handed sidebar templates]. This is similar to the default site but the sidebar starts higher up the screen. Updated 24th June 2023
* A set with no sidebar - just the main content area. Download at [Https://cumuluswiki.org/images/2/2a/NoSBTemplates.zip No sidebar templates]. The single column version gauges page is set wider than other pages. Updated: 24th June 2023


====Additional/Alternative Pages====
===Your Own Pages===
'''As with previous releases, the public website template also includes a template page'''.
=====Gauges=====
We also have an alternative to the default gauges.htm page. This does away with the sidebar and places the gauges in fixed width panels that automatically reposition themselves as the page width is changed. The gauges are also able to be placed in any order without resorting to cut-n-paste. Just add/change a number to their order style and its done.


The template.html page is provided to make it easier for you to add your own pages while retaining the look and feel of the website. The template page is called '''template.html'''.
This can be downloaded from [Https://cumuluswiki.org/Downloads/NewGauges.zip Gauges Page]. Updated: 11 March 2021


<big>Editing</big>
=====NOAA Reports=====
The template page shows all the different column layouts that are available. These are:
This is now included in the standard default website. It enables any of your NOAA reports to be loaded into the page using Ajax calls so no page refresh is needed. Updated: 16 June 2021.
ax-column1, ax-column2, ax-column3, ax-column4, ax-column5 and ax-column6


: These will always try to display the indicated number of columns but as the screen becomes small will automatically collapse into fewer columns as appropriate.
===Complete ready to run alternative website pack===
:; If there are more panels than columns they will gracefully split onto additional rows while retaining their column settings.
We now have a complete [[ResponsiveSite.zip | alternative 'website']] ready for use. It is very similar to the current supplied website but with the following changes:
:; Rows with fewer panels than columns will either stretch the remaining panels across the full width or distribute them centrally - this can be controlled by you.


For full details visit [https://oaktreewebs.co.uk/wiki/ my wiki].
* There are two (2) gauges pages - gauges.htm and gaugesII.htm. They are both full width. The first removes the radio buttons from all gauges making is easy to see all gauges without scrolling. The options are provided in a dropdown page menu along with units. The second shows individual gauges in panels with their radio buttons.
* There is also a 'today v yesterday' page (todayYest.htm), for those that want to be able to compare readings.
* The layout of the sidebar is slightly different - it starts at the top of the right hand panel.
The menu has NOT been included in the zip and consequently you will need to adjust it to use the chosen pages listed above.
The zip file does contain the three css stylesheets; colours.css, mx-templates.css and gauges.css which will need to be copied to the correct location on your waebserver.


==Editing the website menu==
'''Please backup your site before uploading and extracting this alternative website'''


Please refer to my [https://oaktreewebs.co.uk/wiki/ wiki] for full details of the menu and how to edit it.
===Colour Themes===
The website and templates use colour themes to make it easier to change the colour throughout the site. By downloading the colour theme pack, you can simply rename the chosen colour as 'colours.css' and it will be applied throughout your site. All colour themes have now been updated to use ''css variables'' for the available theme colours. This makes it much easier to add your theme colours to your custom pages, or style sheets. It is also possible to apply theme colours to the gauges tooltips in this way.


==Changing the Theme and Other Settings==
For example, to add a coloured border to an element you can add the style like so:
<nowiki><span style="border-color: var(--d2);">**</span></nowiki> or <nowiki><span style="w3-theme-d2-bdr w3-border">**</span></nowiki>.


Please refer to my [https://oaktreewebs.co.uk/wiki/ wiki] for full information on configuring and setting up the alternative website.
Visit the new '''[https://weather.oaktreewebs.co.uk/ATThemes.htm Theme Viewer]''' to preview any of these themes on a basic template page. You can download individual themes directly from that page. Alternatively you can download all themes (plus a 'readme.txt' file explaining the styles) [[File:ColourSchemes.zip | here]]
.

Additional themes have now been added. The download includes a reworked default 'colours.css' stylesheet to also use css variables and a ReadMe file to explain the styles used.

The current list is:
{| class="wikitable"
|-
! Theme !! Theme !! Theme !! Theme !! Theme !! Theme
|-
| AlmondBuff || AlmostMauve || Arcadia || BasicGrey || CherryTomato || ChiliOil
|-
| colours || CrocusPetal || CylonYellow || Emporador || GreyBlue (new) || GreyGreen (new)
|-
| GreyRed (new) || HarbourMist || Limelight || LimePunch || Marsala || MartiniOlive
|-
| MeerKat || NebulasBlue || QuietGrey || ReadPear || RussetOrange || SailorBlue
|-
| SargassoSea || SlateGrey || SpringCrocus || Tofu || Ultraviolet || ValiantPoppy
|-
| WarmSand || - || - || - || - || -
|}

Use this link [https://cumuluswiki.org/images/4/43/ColourSchemes.zip Additional colour schemes] to down load the schemes. Updated: 24th Jun 2023.

===An Alternate Default Website===
====Available 30th November 2023====
As an alternative to the supplied website, you can now download a reworked alternative [https://www.cumuluswiki.org/images/4/4c/DefaultWebSiteV3.zip Alternative Default Site]. (Updated 12:36 22nd November 2023).

This update almost completely uses flex boxes instead of tables and is very flexible to change. Just change the order style number to re-arrange the panes on the screen without any copy-n-paste required.

'''Important Note''' the system is configured to collect data from a sub-folder called 'data'. You need to edit the ws-extra.js file variable 'dataPath' on line 13. It should either be empty or contain a valid folder name followed by '/' to access your data. The gauges.js file has also been configured to use this variable.

To change the them you need to edit the 'page-manager.js file.
The object 'CMXConfig' holds all the options available. Full details are included in the readme.txt file included in the zip.

To see it in action visit: [https://weather.oaktreewebs.co.uk Oaktree Weather]

===An Alternative Interface===
A new addition to the existing Interface site used for managing your weather station is now available. You can find out about it here: [[Alternative_Interface|Alternative Interface]].

Latest revision as of 11:34, 3 April 2025

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 CumulusMX public website.

Alternative public website

As part of the development process of the CumulusMX Interface, I have generated a new public website (with template pages) as an alternative to the one provided with CumulusMX.

This template builds on the development of the AI and introduces a number of features and/or improvements.

Full details of the alternative public website, including screenshots can be fond on my wiki together with comprehensive instructions on how to install, use and modify.

Its major change is that all configuration data is held in one place: the CMXConfig object, so you can set the location of your data, your NOAA reports and the menu just by editing one part of one file.

The menu has also been enhanced with some additional features while maintaining the single json structure of the original.

This site also comes with new themes (unfortunately not compatible with the AI or previous versions) that should be easier to modify for your own needs. 

Download the latest version here (Updated:  (12:34 3rd Apr 2025) W3C Validated code.) [This version accommodates HTML formatted NOAA reports and corrects the use of 'on' in all-time reports.  Note that if you opt to use these formatted NOAA reports you will need to re-generate ALL existing reports and upload them.]

You can view my site using the new default templates on Oaktree Weather .

Amendments since last revision

This is a full rebuild of the site.

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 pages,
    Specifying a page such as index.htm will display your old template pages.
  • Please clear your browser cache before viewing.

Your Own Pages

As with previous releases, the public website template also includes a template page.

The template.html page is provided to make it easier for you to add your own pages while retaining the look and feel of the website. The template page is called template.html.

Editing The template page shows all the different column layouts that are available. These are: 

ax-column1, ax-column2, ax-column3, ax-column4, ax-column5 and ax-column6
These will always try to display the indicated number of columns but as the screen becomes small will automatically collapse into fewer columns as appropriate.
If there are more panels than columns they will gracefully split onto additional rows while retaining their column settings.
Rows with fewer panels than columns will either stretch the remaining panels across the full width or distribute them centrally - this can be controlled by you.

For full details visit my wiki.

Editing the website menu

Please refer to my wiki for full details of the menu and how to edit it.

Changing the Theme and Other Settings

Please refer to my wiki for full information on configuring and setting up the alternative website.

Retrieved from "https://www.cumuluswiki.org/index.php?title=Default_Website_Development&oldid=12029"