Default Website Development: Difference between revisions
From Cumulus Wiki
Jump to navigationJump to search
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) m (→Installing) |
||
| (66 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 alternative to the default |
These section of the Wiki will enable you to get the latest information and resources for the alternative to the default CumulusMX public website. |
||
'''This page is under development at the moment''' |
|||
===Alternative public website=== |
===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. |
|||
Please note. This is NOT part of the CumulusMX Distribution package and is provided only for those interested in having a public site that uses similar structures to the Alternative Interface. |
|||
Although it should function at the date of release, no guarantees are given that it will continue to do so with subsequent releases of CumulusMX. Users should take time to investigate how it reacts and uses the library and data files uploaded by CumulusMX so that you are able to do some troubleshooting for yourself. |
|||
This template 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 |
|||
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. |
|||
==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== |
==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. |
|||
==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. |
|||
| ⚫ | |||
==An Alternative Interface== |
|||
==Changing the Theme and Other Settings== |
|||
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. |
|||
Please refer to my [https://oaktreewebs.co.uk/wiki/ wiki] for full information on configuring and setting up the alternative website. |
|||
Details of this can be found here: [[Alternative_Interface|Alternative Interface]]. |
|||
Latest revision as of 09:52, 26 October 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
Please visit the Alternative Public Website
Please note. This is NOT part of the CumulusMX Distribution package and is provided only for those interested in having a public site that uses similar structures to the Alternative Interface.
Although it should function at the date of release, no guarantees are given that it will continue to do so with subsequent releases of CumulusMX. Users should take time to investigate how it reacts and uses the library and data files uploaded by CumulusMX so that you are able to do some troubleshooting for yourself.
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.
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.
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.
