Cumulus Support

A BESPOKE VERSION OF THE 'trendsT.htm' TEMPLATE - It contains everything in the standard version 1.9.4 utf-8 template, but it adds a further plot that is drawn using the highcharts script library based on recent history tags that report readings for temperature, rainfall and pressure at hourly intervals for the last week.

This new topic carries on from https://cumulus.hosiene.co.uk/viewtopic.php?f=18&t=12284. Not all the information that was in that topic has been repeated here. All references to times below for postings in that thread quote UTC. That old thread was getting quite long!

I have started a new topic to launch version 4 of my code in the hope that the new subject title will be easier to find for everyone. Version 4 is designed to work 'out of the box', all you need to add is the various script libraries. This is explained below, but you need to decide whether to download copies onto your web site (and use the 'src' properties I quote in the zipped file) or to use one of the CDN servers (for jQuery change 'src' properties to point to Google CDN, Microsoft CDN, CDNJS CDN, or jsDelivr CDN e.g. src="//code.jquery.com/jquery-2.1.1.min.js" and for highcharts set src=code.highcharts.com/highcharts.js). Obviously, I cannot please everyone, so you may wish to change some of the text I have included, change colours, or whatever; but I hope the comments I have included will help you see where to make such changes.

PRE-REQUISITES FOR INSTALLING THIS WEB PAGE
1 - Cumulus software build 1089 (released 7 August 2014) or later is needed to provide the Cumulus web tags required by this template.
2 - The template provided in this package needs to be processed by Cumulus, it can either be treated as producing a standard Cumulus page uploaded at the standard interval onto a remote server or it could be treated as an extra template file in a different folder that is processed onto a local server together with the standard Cumulus graphs and other pages (by making changes on the 'Files' tab of the 'Internet' options assessed from the 'Configuration' menu).
3 - Although modern browsers will say the way I use 'AJAX' to obtain the update time of the large Cumulus graph is deprecated, the AJAX routine I use can cope with Microsoft's non-standard browsers back as far as IE6. I mostly use Firefox, but I did not wish to force that on those who use this web page. I used a book as a different inspiration for my code snippet, but in https://cumulus.hosiene.co.uk/viewtopic.php?f=19&t=8493 27 Oct 2012 00:53 entry, a similar approach is proposed that excludes the Microsoft specific coding I put in.
4 - Two jQuery libraries are required (see http://jquery.com/download/) :
4.1 - 'jquery-1.9.1.js' is needed to allow the page to be viewed on the obsolete versions (up to version 10) of Internet Explorer that some users of obsolete versions of Windows might choose to use. They probably have other problems, but are used to what they have and do not know what they are missing without using a modern browser.
4.2 - 'jquery-2.1.1.js' is at the time of writing the standard version of jQuery and has been used for all my testing, it ensures that my coding can work on all modern browsers (including it is claimed IE11, but I have not tested this).
5 - 'highcharts.js' (http://www.highcharts.com/download)is needed for the new script to run, I upgraded to version 4.0.3 (I previously used version 4.0.0) specially for this experiment. The reference to a source of 'highcharts-exporting.js' is not actually needed to produce the graph, it simply makes it easy to print any Highcharts graph that is produced and to convert it into an image file as requested at the start of the development, by adding a menu accessed by a 3 line symbol at the top right of the chart. The zipped folder attached includes a few screen-shots, other screen shots (of earlier versions) can be seen in https://cumulus.hosiene.co.uk/viewtopic.php?f=18&t=12284. The earlier versions were downloaded 12 times I believe.
I will point out here that one of the screen shots shows the existing Cumulus 'daily range' graphs, one shows the existing Cumulus 'observations at every minute' plot, one shows my experiment at using day names on the x-axis (with a somewhat complicated additional function) and the last shows the version I am releasing with a day count on the x-axis. Don't worry about my test data, it is of low quality.

BACKGROUND TO THIS EXPERIMENTAL PROJECT
'tempe' from Finland said he found ' detailed chart period' and 'daily chart period' as two periods for which Cumulus would automatically draw trend graphs.

He requested trends for other periods like '12 hours, one day, week, month, 3 months etc.'

Steve Loft drew his attention to the recent and historic graphs on 'http://weather.wilmslowastro.com/graphs_recent.php' and
'http://weather.wilmslowastro.com/graphs_historic.php'.

'tempe' replied that his server did not support php, but he would consider generating plots locally with a script and then uploading the resulting images to his web site. "I dont need realtime or interactive graphs, just pictures of charts would be awesome."

'sfws' proposed a script using 'highcharts' library that would take hourly samples from the Cumulus 'recent history' tags that would allow
up to 7 days (168 hours).

'water01' showed an interest in proposed scripts based on taking samples from dayfile.txt.

DEVELOPMENT NOTES
A large number of issues were raised by attempting to develop a script that could be added to the standard Cumulus trends web page and would
work for anybody:
1) The 'no_commas' version of the 'recent history' tags needed to be used because places like Finland use commas to separate integer and
decimal parts whilst script restricts commas to being used to separate elements in an array and similar syntax siturations.
2) The script that uses the Highcharts Application programming interface (api) could be in a separate file, so it has been carefully written so
all the Cumulus web tags are converted into script variables that can be referenced by the plotting script. However, to make installation on the
web easier, this script is currently included at the end of the template so it becomes part of the HTML web page.
3) The script uses auto-scaling for the y-axis, and although that normally results in the axis being divided into 5, the script allows the
3 y-axis to be divided independently.
4) The tooltip and x-axis labels are generated by functions so they can make use of information that originates from Cumulus tags, and divide the x-axis into days, but it had cope with all possible starting times within a day.
5) The script assumes that the arrays represent observations at hourly intervals, but it had to work for periods from 12 hours to 168 hours. Therefore it includes coding to check the length of one of the arrays and therefore adjusts the heading to reflect that actual array length.

(To change to a different interval between elements in the array requires someone to make manual changes to many places in the coding).

6) The script needed to allow the user to zoom into a shorter period of time, and quickly return to full period.
7) The script needed to cope with both the case when Cumulus is running continuously and when it has recently been restarted and has read some of the old data from the station logger.
8) The script was designed to plot temperature, rainfall, and pressure on a single graph to simplify coding considerably compared to the
complex Mark Crossley scripts used at 'wilmslowastro' that cope with multiple periods and all the different data. The script does however
have a number of booleans that could be fairly easily edited to remove a particular plot or tailor the plots in other ways.
9) The arrays containing the recent history tags needed to be on a Cumulus template; to make life easier it was decided that one of the
existing templates 'trendsT.htm' would be modified so none of the other templates needed any changes.
10) For ease of testing, the released version of the code assumes that the various script libraries (jQuery, Highcharts) are loaded as local
copies, this also keeps control of which versions of the libraries are used, but the relvant 'src' properties can be edited to load the libraries from other servers. An example of loading such libraries from other servers is included in the previous postings at 04 Aug 2014 13:18 in 'https://cumulus.hosiene.co.uk/viewtopic.php?f=18&t=12284'.
11) To meet the requirements expressed by 'tempe', the script libraries and the modified 'trend.htm' web pages could be loaded on a local server
and the highcharts export library could be used to generate images that could be subsequently transferred to a remote server.
12) Earlier releases of the code had a few problems with locations of brackets and commas, but it is now written so the arrays start with 'h=1' (i.e. observations just one hour ago), but the graph is plotted with the oldest (typically 7 days ago) plotted points on the left and the start of the array (1 hour ago) plotted on the right.
13) The opportunity of editing 'trendsT.htm' has been taken to make some changes to the text on the page (and consequently minor changes to
sequences) so now the sampling interval and period covered for all the plots is shown. In addition, with different parts of the page being updated at different times, the various update times are now explicitly stated.

With thanks to 'Duke' for giving me encouragement as I identified the bugs, and struggled to resolve them; to 'tempe' for making the original request, for setting me the challenge that turned out to be more difficult than I expected and for spotting all the errors that crept into my coding; also to Ron ( 'nitrx') who set me thinking more deeply about the errors I made and has provided an on-line demonstration at http://apeldoorn.tk/weer/trends.htm.

As always much gratitude to Steve Loft who has written the software that drives this page. In particular his changes in his latest build 1098
have benefitted this code considerably. See https://cumulus.hosiene.co.uk/viewtopic.php?f=4&t=12307 and build 1098 entry in https://cumulus.hosiene.co.uk/viewtopic.php?f=2&t=10777.

EDIT - Since I originally posted this contribution, I have edited the bit in blue about changing 'src' near the beginning to make it clearer.

Great job 'sfws' thanks for this and a good description I just have to do some translations and link changes but it works fine ! Steve thanks for the graphperiod tag

Ron

Hi Ron
I'm not intending to change it now, but viewing my code on your site shows I have made one small mistake. I should have included text that says "Thumbnails directly below show trends for the last <#graphperiod> hours; &nbsp;based on sampling every 10 minutes." but I wrongly said every minute, that period is only true for the large graph loaded by clicking the thumbnails below my text.

The final version 4 of this code can be seen in operation on the Trendgrafieken ('Trends' for those who want it in English) page of Ron's website at http://apeldoorn.tk/weer/index.htm. I am no good at languages, so I am not translating all the words on the template.

However Ron ('Nitrx') has done the translation before see http://wiki.sandaysoft.com/a/Nederlandse_%28Dutch%29 with contributions by 'beteljuice'. As thanks for Ron's help earlier in this thread, I have tried to merge the old and new.

If you look at the attachment you will see I got stuck because I cannot match the Dutch to my English where I have changed the text. The language also still needs changing within the two functions for tooltips and x-axis labelling, but that should be easy for you to do.
I had intended to post the following anyway, your posting here just distracted me for a bit!
I also have not tested this version, but it should work okay because I have effectively matched all that I have changed to the original.

nitrx wrote: I just have to do some... link changes but it works fine !

In the previous thread I said

The links in my posted zip are the same as original Cumulus template, I actually don't know why they have come out wrong for you.

I now understand about the link changes, for example you have 'today' and 'yesterday' appearing on the same web page (I have 'today', 'yesterday' and 'a year ago' on the same page, but that is experimental and not online).
I have not adjusted the links in this posted version, but I am sure it is quick and easy for you to do so.

Once again thank you Ron for your help.

sfws wrote:Hi Ron
I'm not intending to change it now, but viewing my code on your site shows I have made one small mistake. I should have included text that says "Thumbnails directly below show trends for the last <#graphperiod> hours; &nbsp;based on sampling every 10 minutes." but I wrongly said every minute, that period is only true for the large graph loaded by clicking the thumbnails below my text.

Hmm those graphs are sampled by Cumulus every minute (as far I know) but uploaded evry 10 minutes I think your text is correct.

The final version 4 of this code can be seen in operation on the Trendgrafieken ('Trends' for those who want it in English) page of Ron's website at http://apeldoorn.tk/weer/index.htm. I am no good at languages, so I am not translating all the words on the template.

Concerning the translation thats a very old one (the legend colors are now taken from cumulus.ini) I make a new one asap and will try to use 24 hours notation (AM / PM is not used over here anyway thanks for the template I think it will be easier to work this out.

An ofcourse the links are easy to modify

Ron

Dutch version of trendsT.htm , the extended trends.htm for the standard Cumulus template with Highcharts graphs included without using of PHP made by 'swfs'
minor change is the time format , instead of am/pm the 24 hours notation is used.

The zip file contains a readme.txt with some instructions.Notice this template works only with Cumulus build 1098 version 1.9.4 or above https://cumulus.hosiene.co.uk/viewtopic.php?f=2&t=10777

Nederlandse versie van trendsT.htm dit is de uitgebeide versie voor de standaard Cumulus template met inbegrip van Highchart zonder het gebruik van PHP gemaakt door 'swfs'
er is een kleine wijziging in de Nederlandse versie wordt het 24 uur formaat gehanteerd in plaats van AM/PM. Let op het template werkt alleen met Cumulus 1098 versie 1.9.4 or above https://cumulus.hosiene.co.uk/viewtopic.php?f=2&t=10777

Het zipbestand bevat een leesmij.txt met instructies.

sample / voorbeeld http://apeldoorn.tk/weer/trends.htm

Ron

Anyway I think the new trendpages don't work correct in chrome the cumulusgraphs are cached by the browser so I've to do a manual refresh which is very annoing , I don't know how this works out with other browsers ...

IE 11 has an "always refresh from server" option, doesn't Chrome?

water01 wrote:IE 11 has an "always refresh from server" option, doesn't Chrome?

I dont think so , I've googled about the issue but all sulition are schift/cotrol/f5 this isn't visitor friendly The refresh button works too

nitrx wrote:the cumulusgraphs are cached

1. The thumbnails even in the standard trendsT.htm will not be updated without a reload of the page.

2. The Highcharts graph depends on the Cumulus recent history tags, those are only updated by a reload of the page. I did briefly investigate having one page as a template with just the variables on it, and another page with the graphs, so clicking on the latter re-read information from the latest update of the former, but that was too complicated for this context.

3. The large Cumulus graph is updated by the function changeImage(im). That adds a querystring (i.e. a question mark followed by some new characters) to the file name for the required large image ensuring that its url is seen as different to the one in the cache. I have a whole set of images on my PC proving this works in Firefox with my new code. The other browsers I can test with are Safari and Opera, I stopped testing with Chrome probably about a year ago because it seemed to work like other modern browsers. I stopped using IE because each version behaves differently, and which version people use depends on their operating system version, so I needed to test with a whole series of versions but I was limited by my own (then) Windows Vista.

Ron, try changing into to see if Chrome accepts that. With that version if 'update tijd niet beschikbaar' it will use the cache.
Another option is but that will only make a difference if Chrome does not support 'Math.random()'.

Incidentally, I added the update times to each of 1,2, 3, above to make sure it was obvious to all users whether updated images were available without reloading the page. Obviously if Cumulus is stopped, even reloading the page will not produce updated images.

nitrx wrote:

sfws wrote:Hi Ron
I'm not intending to change it now, but viewing my code on your site shows I have made one small mistake. I should have included text that says "Thumbnails directly below show trends for the last <#graphperiod> hours; &nbsp;based on sampling every 10 minutes." but I wrongly said every minute, that period is only true for the large graph loaded by clicking the thumbnails below my text.

Hmm those graphs are sampled by Cumulus every minute (as far I know) but uploaded evry 10 minutes I think your text is correct.

Sorry, this was perhaps me expressing myself badly in English.
The thumbnails in all but the left hand column of the table, show points plotted for observations at 10 minute intervals for the 'Detailed Chart Period' set on the 'Display' setting screen accessed from the configuration menu (reported by web tag <#graphperiod>). The update interval (webtag <#interval>) is unrelated to this, it indicates the time to pass before a fresh large image becomes available (and should be able to be displayed without re-loading the page). The large graphs associated with those thumbnails show the same parameters as the thumbnails, but the points are plotted for observations every minute (unless Cumulus has been recently re-started so logger interval derived information is all that is available).

sfws thanks for the tips (caching of the thumbs is not an issue they are barely readable, I'll try your suggestions tommorow and let you know.
Ron

Great it seams to be a 'feature' of the chromebrowser not to clear the cache https://productforums.google.com/forum/ ... R-6YAkcASQ anyway noy for the visitors with less knowledge of browserbehavior. The only way to prevent caching is to generate a page wit a random string behind the url something like http://apeldoorn.tk/weer/trends.htm?12:49 I give up.

(It seems that google wants to look the browser faster )

nitrx wrote:(It seems that google wants to look the browser faster )

And from these stats, it appears to be working. Look at the stats for Firefox and Chrome for the past few years...

I am surprised, I was under the impression that Firefox was the browser of choice for developers...

Indeed I'm also surprised that IE has shrinked so much (mostly included by Windows)

These are my tot 5 browserstats starting may 2013


ChromeChrome 3752
Internet ExplorerInternet Explorer 2883
SafariSafari 2627
FirefoxFirefox 1202
Mobile SafariMobile Safari 346

Anyway I see a trend the use of mobile browsers is rapidly increasing ergo ios/apple android ,wphone

This minor update adds an extra CSS file to alter the look of the button and specify the width for the highchart. I deliberately have kept the standard weatherstyle.css unchanged. The parts of the script requiring cumulus web tags remain embedded in the HTML so Cumulus can 'process' those tags, but all the rest of the script is now in a separate file (as was the original I developed, but previously I copied that external file into the HTML for a simpler version to put on forum) that you need to manually file transfer to your website (as the HTML is currently coded, such scripts go in same place as the processed HTML) in accordance with the recommendations.

The thumbnails cells included in the template here include 3 solar ones, so I have included relevant images in the zip that you also need to file transfer manually to your existing 'images' folder to test this version if you do not have all that information available from your weather station and Cumulus regularly updating those images. I have added comments to explain the code better, including which HTML table row to delete if you do not have any solar sensors (and which bit of the code counts the number of thumbnails).

In this slightly revised version I have improved the labelling terminology for the update time, plot timespan, and plotting point interval, and now the highchart graph appears in place of a Cumulus large graph, so you should have less need to scroll up/down whatever device you use to see the trends.htm page. The latest build of Cumulus is needed to provide all the Cumulus web tags used by this page. The functionality is the same as previous version, all I have done is make cosmetic changes to improve the user interface (e.g. removing the 'both', 'cumulus', 'highcharts' buttons; and changing long flowing text into a bullet like summary for clarity).
EDITs - first remove original, 2nd replace with correct files in zip and third remove zip
My testing set-up is slightly different to this version I am sharing, but I'm too busy to find time to test two versions, and I have had to rely on the accuracy of my editing my elaborate testing version into this operational version without repeating all the tests on the version for sharing. Please see the earliest posting in this topic to see if that answers any other questions you may have. I have retained some of my diagnostic code (all the extra information associated with graphs and the use of a border to show thumbnail that has been clicked), but the commented code should make it easy for you to find any other statements that you want to remove, although I have tried to make this look as neat as possible in the version I have included in the zip folder.

Hi what about the script a the bottom ?
Ron