Default Website Development: Difference between revisions

From Cumulus Wiki
Jump to navigationJump to search
 
(54 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 CMX website shipped with version 3.10.x


===The current default site===
===Alternative public website===
This will always be available to you in the 'websites' folder of your Cumulus MX Installation. If you wish to undo any of the changes that downloads from this page generate then simply re-copy the websites folder to your web host.
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.


===Templates===
This template introduces a number of features and/or improvements.
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].


The available frameworks are:
*It is significantly more responsive - adaptable to different viewing devices
* A lefthand sidebar with the main panel on the right. Download at [https://cumuluswiki.org/images/7/75/LeftSBTemplates.zip Left-handed sidebar template]. These can be viewed at [https://weather.oaktreewebs.co.uk/ATL-1c.htm OaktreeWebs Weather]. Updated: 16 June 2021
*;All the fonts correctly scale on all browsers
* 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. Again, these can be viewed at [https://weather.oaktreewebs.co.uk/ATR-1c.htm OaktreeWebs Weather]. Updated 15 June 2021.
*;All tables have been removed and replaced with more flexible elements
* A set with no sidebar - just the main content area. Download at [Https://cumuluswiki.org/images/2/2a/NoSBTemplates.zip No sidebar templates]. View at [https://weather.oaktreewebs.co.uk/ATN-1c.htm OaktreeWebs Weather]. The single column version is set to gauge width (wider than other pages). Updated: 16 June 2021
*;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 includes a high contrast theme as well.
*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.


====Additional/Alternative Pages====
* If you are a new station, only available months on your monthly and all records pages will be accessible - the buttons will be removed.
=====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 property and its done.


This can be downloaded from [Https://cumuluswiki.org/Downloads/NewGauges.zip Gauges Page]. Updated: 11 March 2021
'''Download the [https://www.cumuluswiki.org/images/0/08/PublicWebsite.zip latest version here]''' (Updated: Friday 22/03/2024)


=====NOAA Reports=====
'''You can view my site using the new default templates on [https://oaktreewebs.co.uk Oaktree Weather ].
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.


===Complete ready to run alternative website pack===
==Installing==
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:
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.


* 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.
*: Please clear your browser cache before viewing.  
* 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.


'''Please backup your site before uploading and extracting this alternative website'''
===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.


===Colour Themes===
* You will obviously need to create the required folder on your web host system.
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.
* 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.


For example, to add a coloured border to an element you can add the style like so:
===Your Own Pages===
<nowiki><span style="border-color: var(--d2);"></span></nowiki> or <nowiki><span style="w3-theme-d2-bdr w3-border">##</span></nowiki>.
'''As with previous releases, the public website template also includes a template page'''.


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 this 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'''.


You will also find that additional themes have now been added. The download includes a reworked default 'colours.css' stylesheet to also use css variables.  
<big>Editing</big>
The template page shows all the different column layouts that are available. These are:
ow-oneCol,  ow-TwoCol,  ow-ThreeCol,  ow-FourCol,  ow-FiveCol    and ow-SixCol


The current list is:
: 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.
{| class="wikitable"
:; 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 centre panels up to the stated number of column.
! Theme !! Description !! Theme !! Description
|-
| '''AlmondBuff''' || A brownish theme. || '''AlmostMauve''' || Mauve like in colour!
|-
| '''Arcadia''' || Almost a bottle green! || '''CherryTomato''' || A muted red based on #e94b3c.
|-
| '''ChilliOil''' || A reddy brown based on #944743. || '''ChilliPepper''' || NEW: A Rusty red colour.
|-
| '''CoconutMilk''' || A slightly sandy milky colour! || '''CrocusPetal''' || A very purple/mauve like theme.
|-
| '''CylonYellow''' || More of a light brown colour. || '''Emporador''' || A mid misty brown based colour.
|-
| '''HarbourMist''' || A warm grey based on #b4b7ba. || ''Limelight''' || A very bright yellow!
|-
| '''LimePunch''' || This is a greener yellow than Limelight. || '''Marsala''' || NEW: A slightly orange muted red.
|-
| '''MartiniOlive''' || A very dark grey brown. || '''MeerKat''' || A turquoise blue green.
|-
| '''NebulasBlue''' || Almost a royal blue. || '''QuietGrey''' || A slightly cooler grey based on #bcbcbe.
|-
| '''RedPear''' || A variation between CherryTomato and ChiliOil based on #bcbcbe. || '''RussetOrange''' || A reddy orange based on #bcbcbe.
|-
| '''SailorBlue''' || A strong dark blue ||  ||
|-
| '''SargassoSea''' || An even stronger dark blue than SailorBlue || '''SlateGrey''' || NEW Darker than the other greys.
|-
| '''SpringCrocus''' || A muted purple theme based on #bc70a4. || '''Tofu''' || A colour often found in nappies.
|-
| '''UltraViolet''' || Theme based on purple / violet || '''ValiantPoppy''' || Another theme based on purple / violet
|-
| '''WarmSand''' || The lighter colours are sandy coloured while the darker range have a distinct orange tinge. ||  ||
|}


Use this link [https://cumuluswiki.org/images/4/43/ColourSchemes.zip Additional colour schemes] to down load the schemesPlease note ALL are now included in the download packYou can view them in action at [https://weather.oaktreewebs.co.uk/ATThemes.htm Theme Viewer] page.  Updated: 4th Sept 2021.
==Editing the website menu==
 
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==
 
This template comes with 33 themes to enable you to personalise the public websiteSixteen 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 pagesAs this is a more involved task it is covered on a second page.
 
To learn about editing the html please visit: [[Editing website pages]]

Latest revision as of 09:38, 24 March 2024

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 CMX website shipped with version 3.10.x

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.

This template introduces a number of features and/or improvements.

  • 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 includes a high contrast theme as well.
  • 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.
  • If you are a new station, only available months on your monthly and all records pages will be accessible - the buttons will be removed.
Download the latest version here (Updated: Friday 22/03/2024)

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

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.

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

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:

ow-oneCol,   ow-TwoCol,   ow-ThreeCol,   ow-FourCol,  ow-FiveCol    and ow-SixCol
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 centre panels up to the stated number of column.

Editing the website menu

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:

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}
];

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

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:

let CMXConfig = {
	'Theme': 'Nebulas-Blue',
	'StaticHead': true,
	'StaticFoot': true,
	'Units':	'vh',
	'PaddingTop': 2,
	'PaddingBottom': 1,
	'Seagull': {
		'Animation': '',
		'Duration': 5,
		'OnTop': true
	},
	'Version': 3.0
}

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:

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

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