JavaScript 'Viewer' of Cumulus generated NOAA style reports

apple8 · **Posted:** Fri Mar 23, 2012 12:34 pm

Quote:

It's really not too difficult - honest

Wow I did it

I thought it was going to be beyond me, thanks beteljuice.

radelrama · **Posted:** Sun Apr 01, 2012 12:27 pm

I'm trying to implement history graphs into this nice and simple report solution. To keep it simple I thought of a workaround:

- Script Cumulus to generate monthly history graphs, this every 1st of month just after midnight
- Script Cumulus to generate yearly history graphs, this every 1st of january just after midnight

This would result in one or several image files like Temp_NOAAMO0312.png or Temp_NOAAYR2012.png.

Even though my knowledge of javascript is equal to zero, by playing with noaarep.js I am able to add an image after the report text :clap:

, on line 238:
document.getElementById("theReport").innerHTML = repdat + " <br><img src=prev.png /> "; // o/p the report

How do I get the info month/year, so I could add something like
If month_button pressed Then .innerHTML = repdat + " <br><img src=Temp_NOAAMO" + month_pressed + according_year + ".png /> "
Else .innerHTML = repdat + " <br><img src=Temp_NOAAYR" + year_pressed + ".png /> "

Studying beteljuice's code, but can't figure out... :bash:

beteljuice · **Posted:** Mon Apr 02, 2012 12:33 am

I did say you're on your own with this code :lol:

... but the easiest way is to have a seperate directory (eg. graphs/) with the files names exactly the same as the corresponding reports. - except for the extension type of course !

Again, for completeness and uniformity in html create a new <div id='repGraph'></div> underneath 'theReport' <div> - although you can use the <br /> as you have done.

Then in the script, something like:

Code:

             document.getElementById("theReport").innerHTML = repdat; // o/p the report

             repImageHolder = document.getElementById("repGraph"); // the new graph <div>
             if(repImageHolder){ // if the div exists
                    repImageUrl = url.replace("txt", "png");
                    repImageHolder.innerHTML = "<img src = \"graphs/" +repImageUrl+ "\" />";
             }

       }

NB: No existance check of the graph takes place ! - it could be done but would need extra code to call the Ajax routine yet again in a slightly different way.

The easiest way to handle this is to probably generate a graph every day (just like the month / this year reports) even though it will be incomplete, it will be current and available

radelrama · **Posted:** Tue Apr 03, 2012 12:43 pm

thanks!!!

document.getElementById("theReport").innerHTML = " <br><img src=" + url.replace("txt","png") + " /> " + repdat; // o/p the report

beteljuice · **Posted:** Tue Apr 03, 2012 1:46 pm

You are 'lucky' the lookup routine checks the full file names, else there would be a problem with graph and report names clashing !

Also it's 'handy' that "theReport" <div> wraps and your images are the right size.
You need a <br /> between your image and the report. (Why the initial [space]<br /> ?)

Code:

document.getElementById("theReport").innerHTML = "<img src=" + url.replace("txt","png") + " /><br />" + repdat; // o/p the report

PS. Why is there no location information in your reports ?

radelrama · **Posted:** Tue Apr 03, 2012 1:57 pm

beteljuice wrote:

You need a <br /> between your image and the report. (Why the initial [space]<br /> ?)

You are right, corrected...

beteljuice wrote:

PS. Why is there no location information in your reports ?

Didn't enter it in Cumulus settings, don't want it to be shown...

Just finished the AutoIt3 script which every night after midnight generates
- graph30.png (last 30 days graph)
- NOAAMOmmyyyy.png (last month graph)
- NOAAYRyyyy.png (this year graph)
If anyone's interested in source code, let me know...

roy_fox · **Posted:** Mon Jun 04, 2012 6:44 pm

I have integrated the NOAA reports to my page.
It works fine. http://www.luckscher.de/Wetter/noaa_test.htm

But when I use IE8, then it looks wrong.

Attachment:

NOAA_IE8.JPG

Has anyone a hint, to solve the problem?

Thanks.

mcrossley · **Posted:** Mon Jun 04, 2012 7:22 pm

IE8 (and firefox4) do not fully support the <pre> tag, they do not honour line breaks. You can add word-wrap and wrap options to these browsers respectively, but I think that will just wrap the text at the edge of the iFrame rather than where the line breaks are.

beteljuice · **Posted:** Mon Jun 04, 2012 10:03 pm

Quote:

IE8 (and firefox4) do not fully support the <pre> tag,

I didn't know that ... :roll:

mcrossley · **Posted:** Mon Jun 04, 2012 10:13 pm

Yeah, makes it a bit awkward doesn't it

parse the report and sub <br /> for line breaks ?

Or upgrade to a decent browser :-)

beteljuice · **Posted:** Mon Jun 04, 2012 10:45 pm

It's more devious than that !

If I look at my examples with IE8 the 'rules' are obeyed, but apparently (having done a google and reading M$ support) it's all down to the DOCTYPE declaration as to wether IE8 obeys the <pre> white-space and line return rules.

hystrix · **Posted:** Sun Jul 01, 2012 2:45 pm

radelrama wrote:

Hi beetlejuice and thx a lot for that code!!

I'm using an non-php Webserver and included Cumulus with Steelgauges in my web page since very little time, I have only data for this month...
I was looking for a simple solution to display reports, downloaded thankfully and adapted your files according to your instructions, generated/copied reports month/year.
The reports page loads, counts files correctly, but stays on

"Looking for files reports/NOAAMO0312.txt

Report for ???? ???"

Other users web pages (with the exactly same code) DO display correctly, so shame on me: What am I doing wrong?
Didn't change any code... Tried renaming files for Jan/Feb reports to exist, doesn't change anything.

Well, tried the whole day and humbly asking for help...

Thx 4 help,
Radelrama

I have exactly the same problem. I have created and uploaded NOAA files for 2012, but get exactly the same issue as Radelrama describes above. Can anyone help? The URL to my NOAA page is http://deadwing.webplus.net/DW9194/NOAA-reports.html

Many thanks.

beteljuice · **Posted:** Sun Jul 01, 2012 11:53 pm

For some reason your server returns a code 302 (found / temp redirect) which then for a browser (but not the code) goes to a 404 (file not found).

The 404s are the result of the code looking for all possible files from Jan start year to Dec this year.

Time to get your hands dirty !

Go into the .js file with notepad or similar, go down to

function betelLoader (url, nav, thisnum)

Look for this line:

Code:

if(x.readyState == 4 && x.status == 400) { // file does not exist

and change it to:

Code:

if(x.readyState == 4 && x.status >= 302) { // file does not exist

hystrix · **Posted:** Mon Jul 02, 2012 11:30 am

beteljuice wrote:

For some reason your server returns a code 302 (found / temp redirect) which then for a browser (but not the code) goes to a 404 (file not found).

The 404s are the result of the code looking for all possible files from Jan start year to Dec this year.

Time to get your hands dirty !

Go into the .js file with notepad or similar, go down to

function betelLoader (url, nav, thisnum)

Look for this line:

Code:

if(x.readyState == 4 && x.status == 400) { // file does not exist

and change it to:

Code:

if(x.readyState == 4 && x.status >= 302) { // file does not exist

Many thanks for your quick response. I just changed the noaarep.js file per your instructions, and unfortunately it still does not work

. Any ideas?

UPDATE: By the way - I put in dummy files for August through December and it works OK, so this can be a workaround if I can't get the script working. I have removed them for now, as it would be great if I could get it functioning correctly.

beteljuice · **Posted:** Mon Jul 02, 2012 12:31 pm

I forgot about 304 being a valid entry, but thats not the problem !
The 302 redirects to a 404, but due to the way your server is set-up it is being considered 'cross-domain" so the fetch script folds :bash:

Try this fix instead:

Code:

if((x.readyState == 4 && x.status >= 400) || x.status == 302) { // file does not exist

If that doen't work it needs someone with a better understanding than me of ajax calls I'm afraid :oops:

	It is currently Mon May 20, 2013 7:22 pm
Please click here before posting. Help me to help you!
Useful Links: Cumulus FAQ • Enhancement requests • Wiki (documentation)
Please put your approximate location into your profile
Add your web site to the Cumulus user map
Vantage Pro2 users with firmware 3.00 should upgrade to fw 3.12 and Cumulus 1.9.4
Latest Cumulus release v1.9.3 (build 1059) - Feb 09 2013 Latest Cumulus beta v1.9.4 build 1076 - May 12 2013 --> Latest Cumulus Realtime v1.0.0.5 - Sep 05 2009

Sandaysoft

JavaScript 'Viewer' of Cumulus generated NOAA style reports

Who is online