Welcome to the Cumulus Support forum.

Latest Cumulus MX release 3.28.5 (build 3282) - 23 February 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Reworked default websites

Other discussion about creating web sites for Cumulus that doesn't have a specific subforum

Moderator: daj

NeilThomas
Posts: 255
Joined: Thu 11 Oct 2012 9:51 am
Weather Station: Davis Vantage Pro2
Operating System: Raspberry Pi 4
Location: Gloucester
Contact:

Re: Reworked default websites

Post by NeilThomas »

Hi all

For those of you that have downloaded the 'All records' addition to the site, there was a mistake in my logic which means that when you select 'This Month', it actually loads records for this month since your records began.

To correct this download this update:
all-records.zip
Enjoy.

Neil
You do not have the required permissions to view the files attached to this post.
Neil Thomas
website: weather.oaktreewebs.co.uk | Davis Vantage Pro II | CumulusMX, Raspberry Pi 4 | MX V4 build 4010
NeilThomas
Posts: 255
Joined: Thu 11 Oct 2012 9:51 am
Weather Station: Davis Vantage Pro2
Operating System: Raspberry Pi 4
Location: Gloucester
Contact:

Re: Reworked default websites

Post by NeilThomas »

flort wrote: Sat 02 Dec 2023 9:22 am Following on from Keith's response, I have reloaded the entire site but am still unable to get the NOAA Reports to display. I have compared my files with Keith's and everything is identical so can't understand why this is happening. I've created a test site at http://flor.byethost24.com/test/index.html.

The noaareports.js file has the path set correctly -

js.jpg

And the reports exist under that path -

report.jpg

Any thoughts?

Regards,
Trevor
Hi Trevor

I have looked at your test site and noted that the issue seems to be in the ws-extra.js file. This is used throughout the site. The issue occurs on line 86 which accesses a web tag LastRainTipISO. This is only used on the index page to add a time to the date of the last rainfall. If this web tag doesn't exist, it returns 'undefined' which you will see on the index page. Can you check your websitedataT.json file in the CumulusMX/web folder to see if the line:

Code: Select all

"LastRainTipISO":"<#LastRainTipISO>",
exists at around line 67. If it doesn't then add it - it should be there as it's included by default.

If you don't want to do that then you can simply delete line 86 from the ws-extra.js file (or edit it to just be empty text - i.e., take out the 'cmxData...' inside the brackets). You have already modified the 'LastRainTip' tag to return the time as well as the data so it is not needed.
Neil Thomas
website: weather.oaktreewebs.co.uk | Davis Vantage Pro II | CumulusMX, Raspberry Pi 4 | MX V4 build 4010
flort
Posts: 209
Joined: Thu 17 Dec 2020 9:06 am
Weather Station: Davis Vantage Vue
Operating System: Raspbian GNU/Linux 10 (buster)
Location: Tin Can Bay, Queensland, Australia
Contact:

Re: Reworked default websites

Post by flort »

Thanks so much Neil. The Reports page is now displaying and the Records This Month is working. I added the additional line into the websitedataT.json file.

Keep up the good work.

Regards,
Trevor
Image
NeilThomas
Posts: 255
Joined: Thu 11 Oct 2012 9:51 am
Weather Station: Davis Vantage Pro2
Operating System: Raspberry Pi 4
Location: Gloucester
Contact:

Re: Reworked default websites

Post by NeilThomas »

flort wrote: Sat 02 Dec 2023 11:41 am Thanks so much Neil. The Reports page is now displaying and the Records This Month is working. I added the additional line into the websitedataT.json file.

Keep up the good work.

Regards,
Trevor
Hi Trevor

You might want to look at your index page as well. This uses the value returned by 'LastRainTip' and it looks like you have modified the format to include the time so my extra <span data-cmxData="LastRainTime"></span> on line 178 is not needed.

Neil
Neil Thomas
website: weather.oaktreewebs.co.uk | Davis Vantage Pro II | CumulusMX, Raspberry Pi 4 | MX V4 build 4010
flort
Posts: 209
Joined: Thu 17 Dec 2020 9:06 am
Weather Station: Davis Vantage Vue
Operating System: Raspbian GNU/Linux 10 (buster)
Location: Tin Can Bay, Queensland, Australia
Contact:

Re: Reworked default websites

Post by flort »

Thanks Neil. This was only a test site as I am in the middle of modifying my actual site using your template as a base. I just created the test one so you could see what was happening with the reports page.

Regards,
Trevor
Image
griffo42
Posts: 221
Joined: Thu 10 Dec 2015 6:41 am
Weather Station: Davis Vantage Pro2
Operating System: Win 11 Home
Location: Brisbane, Queensland, Australia
Contact:

Re: Reworked default websites

Post by griffo42 »

@NeilThomas

Great work. The amended .js file now has the "This Month" area working correctly on my website - URL below.

Since my previous post, I, too, noticed that the "This Month" button was not working correctly but was not able, at the time, to put up a post about that: @Flort to the rescue!

Keep up the great work, Neil!! :D :D :D

@Flort

I hope your probs. are now sorted. :)

Thanks
Keith
Davis Vantage Pro2 Model #6152AU - CumulusMX - Win11 - Saratoga/CUMX Default Scripts
https://www.kstwx.net/index.php
https://www.kstwx.net/cumx/index.html
Image
flort
Posts: 209
Joined: Thu 17 Dec 2020 9:06 am
Weather Station: Davis Vantage Vue
Operating System: Raspbian GNU/Linux 10 (buster)
Location: Tin Can Bay, Queensland, Australia
Contact:

Re: Reworked default websites

Post by flort »

@griffo42

All sorted now thanks to Neil.

@NeilThomas

I've found a couple of errors in the records.js file -

Line 252 references YearAappTempHT but it should be YearAppTempHT

Line 254 references AppTempHD but it should be YearAppTempLD

Line 296 & 297 show -

Code: Select all

$("[data-cmxdata='YearlyRainH']").html(cmxData.YearYearlyRainH);
	$("[data-cmxdata='YearlyRainHT']").html(cmxData.YearYearlyRainHD);
It should be -

Code: Select all

$("[data-cmxdata='MonthlyRainH']").html(cmxData.YearMonthlyRainH);
	$("[data-cmxdata='MonthlyRainHT']").html(cmxData.YearMonthlyRainHD);
Line 343 references MonthAappTempHT but it should be MonthAppTempHT

Line 345 references AppTempHD but it should be MonthAppTempLD

Lines 387 & 388 show -

Code: Select all

$("[data-cmxdata='MonthlyRainH']").html(cmxData.MonthMonthlyRainH);
	$("[data-cmxdata='MonthlyRainHT']").html(cmxData.MonthMonthlyRainHD);
This causes 'undefined' to be displayed as fields are not applicable to current month. I changed mine to -

Code: Select all

$("[data-cmxdata='MonthlyRainH']").html(' ');
	$("[data-cmxdata='MonthlyRainHT']").html(' ');
The other thing I've done is added some extra code to lines in the This Year and This Month sections to improve readability. An example is Line 241 which currently reads -

Code: Select all

$('[data-cmxdata="TempHT"]').html(cmxData.YearTempHT + ' on ' + cmxData.YearTempHD);
I've changed that to -

Code: Select all

$('[data-cmxdata="TempHT"]').html(' at ' + cmxData.YearTempHT + ' on ' + cmxData.YearTempHD);
Otherwise the time was immediately following the value without any separator.

Regards,
Trevor
Image
NeilThomas
Posts: 255
Joined: Thu 11 Oct 2012 9:51 am
Weather Station: Davis Vantage Pro2
Operating System: Raspberry Pi 4
Location: Gloucester
Contact:

Re: Reworked default websites

Post by NeilThomas »

flort wrote: Sun 03 Dec 2023 5:35 am @griffo42

All sorted now thanks to Neil.

@NeilThomas

I've found a couple of errors in the records.js file -

Line 252 references YearAappTempHT but it should be YearAppTempHT

Line 254 references AppTempHD but it should be YearAppTempLD

Line 296 & 297 show -

Code: Select all

$("[data-cmxdata='YearlyRainH']").html(cmxData.YearYearlyRainH);
	$("[data-cmxdata='YearlyRainHT']").html(cmxData.YearYearlyRainHD);
It should be -

Code: Select all

$("[data-cmxdata='MonthlyRainH']").html(cmxData.YearMonthlyRainH);
	$("[data-cmxdata='MonthlyRainHT']").html(cmxData.YearMonthlyRainHD);
Line 343 references MonthAappTempHT but it should be MonthAppTempHT

Line 345 references AppTempHD but it should be MonthAppTempLD

Lines 387 & 388 show -

Code: Select all

$("[data-cmxdata='MonthlyRainH']").html(cmxData.MonthMonthlyRainH);
	$("[data-cmxdata='MonthlyRainHT']").html(cmxData.MonthMonthlyRainHD);
This causes 'undefined' to be displayed as fields are not applicable to current month. I changed mine to -

Code: Select all

$("[data-cmxdata='MonthlyRainH']").html(' ');
	$("[data-cmxdata='MonthlyRainHT']").html(' ');
The other thing I've done is added some extra code to lines in the This Year and This Month sections to improve readability. An example is Line 241 which currently reads -

Code: Select all

$('[data-cmxdata="TempHT"]').html(cmxData.YearTempHT + ' on ' + cmxData.YearTempHD);
I've changed that to -

Code: Select all

$('[data-cmxdata="TempHT"]').html(' at ' + cmxData.YearTempHT + ' on ' + cmxData.YearTempHD);
Otherwise the time was immediately following the value without any separator.

Regards,
Trevor
Thanks for the proof reading - it's always welcome. I did wonder about adding ' at ' to the appropriate lines but didn't to avoid too many lines splitting over to the next but if you use a single column layout this is fine. I have added some extra code that hides the second part of the line completely so that only the heading is displayed. I'll be uploading a revision shortly so you can take a look at what I have done. I wouldn't swap it over as I have not added the ' at ', that you have done.

Neil.
Neil Thomas
website: weather.oaktreewebs.co.uk | Davis Vantage Pro II | CumulusMX, Raspberry Pi 4 | MX V4 build 4010
NeilThomas
Posts: 255
Joined: Thu 11 Oct 2012 9:51 am
Weather Station: Davis Vantage Pro2
Operating System: Raspberry Pi 4
Location: Gloucester
Contact:

Re: Reworked default websites

Post by NeilThomas »

Hi all

Following on from the comments below I have made a number of corrections, some of which had not been spotted. I have also used the opportunity to adjust the buttons, adding a separator between the monthly records and the others. This last edit has been done on the html page while the others are in the JavaScript file. Both are included in the zip file below. I have also included more information in the text file to explain haw to add 'at' to the This Months records to separate them from the date and time. It would be possible to use FontAwsome icons if required!
all-records.zip
Enjoy.

Neil.
You do not have the required permissions to view the files attached to this post.
Neil Thomas
website: weather.oaktreewebs.co.uk | Davis Vantage Pro II | CumulusMX, Raspberry Pi 4 | MX V4 build 4010
griffo42
Posts: 221
Joined: Thu 10 Dec 2015 6:41 am
Weather Station: Davis Vantage Pro2
Operating System: Win 11 Home
Location: Brisbane, Queensland, Australia
Contact:

Re: Reworked default websites

Post by griffo42 »

@NeilThomas

There is an extra "on" in the rainfall area: see below circled in blue.
Screenshot 2023-12-04 092817.png
It looks to me that records.html is in need of an edit to fix.

Keep up the good work. :D :D
You do not have the required permissions to view the files attached to this post.
Keith
Davis Vantage Pro2 Model #6152AU - CumulusMX - Win11 - Saratoga/CUMX Default Scripts
https://www.kstwx.net/index.php
https://www.kstwx.net/cumx/index.html
Image
griffo42
Posts: 221
Joined: Thu 10 Dec 2015 6:41 am
Weather Station: Davis Vantage Pro2
Operating System: Win 11 Home
Location: Brisbane, Queensland, Australia
Contact:

Re: Reworked default websites

Post by griffo42 »

@NeilThomas

Correction to my last post. See also under Temperature & Humidity. ( Marked)
Keith
Davis Vantage Pro2 Model #6152AU - CumulusMX - Win11 - Saratoga/CUMX Default Scripts
https://www.kstwx.net/index.php
https://www.kstwx.net/cumx/index.html
Image
griffo42
Posts: 221
Joined: Thu 10 Dec 2015 6:41 am
Weather Station: Davis Vantage Pro2
Operating System: Win 11 Home
Location: Brisbane, Queensland, Australia
Contact:

Re: Reworked default websites

Post by griffo42 »

@NeilThomas

Correction to my last post. See also under Temperature & Humidity. ( Marked)
Keith
Davis Vantage Pro2 Model #6152AU - CumulusMX - Win11 - Saratoga/CUMX Default Scripts
https://www.kstwx.net/index.php
https://www.kstwx.net/cumx/index.html
Image
flort
Posts: 209
Joined: Thu 17 Dec 2020 9:06 am
Weather Station: Davis Vantage Vue
Operating System: Raspbian GNU/Linux 10 (buster)
Location: Tin Can Bay, Queensland, Australia
Contact:

Re: Reworked default websites

Post by flort »

Hi Neil,

I've finished my website using your new template as a base and am very pleased with the final result.

http://flor.byethost24.com/weather/index.html

Thanks again for all your efforts.

Regards,
Trevor
Image
griffo42
Posts: 221
Joined: Thu 10 Dec 2015 6:41 am
Weather Station: Davis Vantage Pro2
Operating System: Win 11 Home
Location: Brisbane, Queensland, Australia
Contact:

Re: Reworked default websites

Post by griffo42 »

@Flort

I see that you have Met-eye from the BOM on your website. Could you please give me help with getting the weekly Outlook presentation like you have onto my Saratoga based site (kstwx.net/index.php) please? Note that I have a dropdown button for forecasts.

Best wishes,
Keith
Davis Vantage Pro2 Model #6152AU - CumulusMX - Win11 - Saratoga/CUMX Default Scripts
https://www.kstwx.net/index.php
https://www.kstwx.net/cumx/index.html
Image
flort
Posts: 209
Joined: Thu 17 Dec 2020 9:06 am
Weather Station: Davis Vantage Vue
Operating System: Raspbian GNU/Linux 10 (buster)
Location: Tin Can Bay, Queensland, Australia
Contact:

Re: Reworked default websites

Post by flort »

Hi Keith,

I am displaying it in an iframe and the portion of the page displayed is controlled through css.

In my index.html file I add the following in the header:

Code: Select all

<link href="css/bom.css" rel="stylesheet">	<!--	Specific style for BOM radar.	-->
In the body of the file I add the following to display the radar and the forecast in their relevant boxes:

Code: Select all

				<div class="ow-twoCol" style="align-items: flex-start">	<!--	Add style: 'align-items: flex-start / center / flex-end' to have panel height variable	-->
					<div class="ow-card ow-gradientSub ow-animate-fadeIn" style="order:0;">
						<div class="ow-titleBar">
							<h3><a href="http://www.bom.gov.au/products/IDR083.loop.shtml" target="_blank">Gympie Radar</a></h3>
						</div>
						<div class="ow-tableRow" id="container">
							<iframe id="embed" src="http://www.bom.gov.au/products/IDR083.loop.shtml"></iframe>
						</div>
						<div id="container1">
							<iframe id="embed1" src="http://www.bom.gov.au/products/IDR083.loop.shtml"></iframe>
						</div>
					</div>

					<div class="ow-card ow-gradientSub ow-animate-fadeIn" style="order:1;">
						<div class="ow-titleBar">
							<h3><a href="http://www.bom.gov.au/places/qld/tin-can-bay/" target="_blank">Weekly Outlook (bom.gov.au)</a></h3>
						</div>
						<div class="ow-tableRow" id="container2">
							<iframe id="embed2" src="http://www.bom.gov.au/places/qld/tin-can-bay/"></iframe>
						</div>
					</div>
				</div>
You would need to change the IDR reference to display Brisbane's radar. It should be IDR663.loop.shtml. For the forecast your src file should be "http://www.bom.gov.au/places/qld/carina/"

I've attached the css file. For each element you specify a width and height and then use the margin-left and margin-top to determine the point on the webpage where the display starts. One thing to be aware of is that when the BOM puts any messages (such as outages) at the top of their site then it drops everything further down the page and so your display will not be exactly as intended. This returns to normal when they remove the message.

Hope this helps.

Regards,
Trevor
You do not have the required permissions to view the files attached to this post.
Image
Post Reply