JavaScript 'Viewer' of Cumulus generated NOAA style reports

[apple8]

The view menu in Cumulus is where the items are that you need to use to create the NOAA reports

After losing a few hours I would say that the buttons are not showing on my netbook as in this post https://cumulus.hosiene.co.uk/viewtopic.php?f=4&t=6471. Can't see an easy way around it..... unless I copy all the Cumulus data files to another PC, install Cumulus, make up the NOAA files and copy them back and upload.

[steve]

After losing a few hours I would say that the buttons are not showing on my netbook as in this post https://cumulus.hosiene.co.uk/viewtopic.php?f=4&t=6471.

But, as I said in that thread, I reduced the default height of the NOAA windows; they're now 480 pixels high. What is your screen resolution?

Edit: I see from your web site that you are still using build 1022. I reduced the height of the windows in build 1024.

[apple8]

I see from your web site that you are still using build 1022

Thanks, that got it. Downloaded latest version, all good.

[apple8]

wait until you have made your 'themed' page

I think that is my next challenge. ie adding it to the Cumulus menu?

[beteljuice]

wait until you have made your 'themed' page

I think that is my next challenge. ie adding it to the Cumulus menu?

That - plus modifying / creating a page that matches the rest of your site.

See the (correct) PHP page / Intermediate level, It's really not too difficult - honest
https://cumulus.hosiene.co.uk/viewtopic.php?f=14&t=5754

[apple8]

It's really not too difficult - honest

Wow I did it

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

[radelrama]

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 , 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...

[beteljuice]

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

... 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: Select all

             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]

thanks!!!

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

[beteljuice]

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: Select all

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]

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

You are right, corrected...

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]

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.

NOAA_IE8.JPG

Has anyone a hint, to solve the problem?

Thanks.

[mcrossley]

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]

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

I didn't know that ...

[mcrossley]

Yeah, makes it a bit awkward doesn't it parse the report and sub <br /> for line breaks ?

Or upgrade to a decent browser