|
==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 CMXCumulusMX public website shipped with version 3.10.x
===Alternative public website===
As part of the development process, aof newthe publicCumulusMX websiteInterface, templateI ishave availablegenerated whicha cannew eitherpublic sitwebsite on(with toptemplate ofpages) ofas totallyan replacealternative to the templateone suppliedprovided 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 [https://oaktreewebs.co.uk/wiki/ my wiki] together with comprehensive instructions on how to install, use and modify.
*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
* Sub-menus can now have dividers to separate sections as required
* The mobile menu now closes sub-menus automatically when you select another sub-menu.
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.
'''Download the [https://www.cumuluswiki.org/images/0/08/PublicWebsite.zip latest version here]''' (Updated: 21/03/2024)
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 [https://www.cumuluswiki.org/images/0/08/PublicWebsite.zip latest version here]''' (Updated: (12:15 1st Apr 2025)) [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 [https://ai2weather.uk Oaktree Weather ].
====Amendments since last revision====
This is a full rebuild of the site.
==Installing==
*;Specifying a page such as index.htm will display your old template pages.
*: Please clear your browser cache before viewing.
===Changing where you data is found===
This applies to the data used for your pages, the data used for the charts and the data used by the gauges. It does '''not''' affect your moon image or your NOAA reports.
* You will obviously need to create the required folder on your web host system.
* You need to configure CumulusMX to upload to that folder.
*: This is done on the '''Internet Settings ~ Web/Upload Site''' options under ''Remote FTP Directory''.
:; You should check that the data is being uploaded to the correct location and adjust your settings if not.
* You then need to edit the '''ws-extra.js''' file.
*: The variable on line 13 is used to point to your data so it should be the name of the folder created above with a trailing forward slash.
*;; Please note that it should be empty if your data is uploaded to the normal location.
===Your Own Pages===
<big>Editing</big>
The template page shows all the different column layouts that are available. These are:
owax-oneColcolumn1, owax-TwoColcolumn2, owax-ThreeColcolumn3, owax-FourColcolumn4, owax-FiveCol column5 and owax-SixColcolumn6
: 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 centreeither panelsstretch upthe toremaining panels across the statedfull width or distribute them centrally - this can be numbercontrolled ofby columnyou.
For full details visit [https://oaktreewebs.co.uk/wiki/ my wiki].
==Editing the website menu==
Please refer to my [https://oaktreewebs.co.uk/wiki/ wiki] for full details of the menu and how to edit it.
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:
<nowiki>
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}
];
</nowiki>
'''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==
Please refer to my [https://oaktreewebs.co.uk/wiki/ wiki] for full information on configuring and setting up the alternative website.
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:
<nowiki>
let CMXConfig = {
'Theme': 'Nebulas-Blue',
'StaticHead': true,
'StaticFoot': true,
'Units': 'vh',
'PaddingTop': 2,
'PaddingBottom': 1,
'Seagull': {
'Animation': '',
'Duration': 5,
'OnTop': true
},
'Version': 3.0
}</nowiki>
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:
<nowiki>
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</nowiki>
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:
* Float down - the seagull will fall from the top of the screen and grow as it does so until it sits on the footer.
*: Set ''''Animation'''': 'FloatDownLeft',
* Slide across screen - the seagull will slide in for the side of the screen along the footer.
*: Set ''''Animation'''': 'slideLeft',
* Appear - the default animation.
*: Set ''''Animation'''': 'appearLeft',
** If you set this animation then you can also adjust the default animation speed to zero to stop the animation completely.
* Duration - this adjusts the time taken for the animation in seconds. Decimal numbers are allowed.
* Stay on Top - The seagull can be made to stay on top of your page content or hide behind it. This only applies if the screen is narrower than apron 1200px.
==Changing other features==
In order to change other features you will need to edit the html of the pages. As this is a more involved task it is covered on a second page.
To learn about editing the html please visit: [[Editing website pages]]
| 