Little day/night chart

[mcrossley]

I picked this up from WD forum, some people on there were using the old depreciated Google chart API's and PHP to generate a little day/night graphic.

I implemented in JavaScript and used teh Cumulus tags to produce a 'better' one. This shows dawn and dusk twilights in pink as well as full daylight in yellow, and night as midnight blue rather than black. It also keeps the daylight sector centred at 9 O'Clock. Like this...

day_night_chart.png

You can see it on my Index page here.

The code to produce this is:

Code: Select all

On your HTML page add an empty span to hold the image:

<span id="daylightChart" style="width:75px; height:75px; margin: 0px 5px; border:0"></span>


Then add some JavaScript to create the image and add it into the span...

<script>
var dayPct = (+'<#daylength>'.split(':')[0] + '<#daylength>'.split(':')[1] / 60) / 24 * 100;
var duskPct = (+'<#daylightlength>'.split(':')[0] + '<#daylightlength>'.split(':')[1] / 60) / 24 * 100;
duskPct -= dayPct;
var nightPct = 100 - dayPct - duskPct;
duskPct /= 2;
document.getElementById('daylightChart').innerHTML = '<img src="http://chart.apis.google.com/chart?' +
				'chs=75x75' +
				'&chtt=day/night' +
				'&chts=000000,12' +
				'&chma=0,0,0,0' +
				'&chd=t:' + duskPct + ',' + dayPct + ',' + duskPct + ',' + nightPct +
				'&cht=p3' +
				'&chp=' + (Math.PI - (dayPct + duskPct * 2) / 100 * Math.PI) +
				'&chf=bg,s,FFFFFF00' +
				'&chco=F046A1,FFD700,F046A1,303060' +
				'" alt="day/night ratio"/>';

</script>

I haven't actually tested the above (I do it slightly differently on my page), but another way would be to put the JavaScript in-line where you want the image and just do a document.write('<img src="http://chart.apis.google.com/chart?' +
'chs=75x75' +
'&chtt=day/night' +
'&chts=000000,12' +
'&chma=0,0,0,0' +
'&chd=t:' + duskPct + ',' + dayPct + ',' + duskPct + ',' + nightPct +
'&cht=p3' +
'&chp=' + (Math.PI - (dayPct + duskPct * 2) / 100 * Math.PI) +
'&chf=bg,s,FFFFFF00' +
'&chco=F046A1,FFD700,F046A1,303060' +
'" alt="day/night ratio"/>');
instead.

[William Grimsley]

Interesting invention, Mark!

[PaulMy]

HI Mark, and thanks again for your talent and sharing. I have inserted it http://www.komokaweather.com and is there a way to narrow the distance space between the "day/night" heading and the chart? I have enlarged the chart but I don't think the distance ratio in my revision is changed from the space in your original 75x75 size.

Paul

[mcrossley]

No, you cannot position the title. You could omit it and put the text on the page though.

[PaulMy]

OK thanks Mark, that could be my homework of today's lesson.

Paul

[mcrossley]

If you miss the title off, it comes out larger if you make the image wider than it is tall.

[PaulMy]

Thanks again Mark. I started my homework but thrashed away most of the pages , as I got the chart and text showing up all over the place - but a good lesson on the results of placing of text within and outside of <table> and<tbody> tags

It has been a bit of fun, but painstaking - with each little indexT edit, wait or force a Cumulus web update to see the results, try another edit, etc. I tried to run it outside of the Cumulus indexT page so I could use Filezilla to ftp but that didn't work well. I use Notepad++ for all my edits now (put Dreamweaver aside because it is too overwelming) and is there something else that I can do or run to see the affect of an edit change without uploading to my webserver?

Paul

[mcrossley]

Well in Chrome (and Firefox I'm pretty sure) you can edit the HTML on the fly in the dev tools, and disable /create CSS elements etc. The dev tools are very powerful but they take a bit of learning. It is great to be able to see the effects of any changes immediately in the browser though.

The other alternative (probably easier to begin with) is to save a copy of your processed page locally and then edit that and load the locally saved page into your browser. Once you are happy, transfer the changes back into your template file.

[robynfali]

I have that on my watch, would be a good comparison

[beteljuice]

An Alternative
The beteljuice has a great mistrust of (google) APIs and 'the cloud' etc. prefering to have some degree of control over what happens, and also reducing global internet traffic.

So here's a beteljuice plaything (not quite as neatly drawn) and with a different slant (or two) on display.

EDIT: V2.0 Incorporating drawing improvements / suggestions by Mark.
EDIT: V3.0 Incorporating logic fix by Mark Crossley.
EDIT: V3.1 hours markers option added

Midday (Civil) is 'North' and a 24 hour 'clock' hand shows 'now' time.
Midday (Civil) is 'North' and a 24 hour 'clock' hand shows 'now' time with hours markers.
'Heavens' rotate East to West through North with a 'now' marker @ North.

As you can see Civil, Nautical and Astronomical twilights are shown.

Practically everything is configurable and most things can be 'posted' on-the-fly.

You MUST be running PHP 5+
If 'safe_mode' exists it should be "off". (Maybe unimportant following tweaks - unproven)
If you are unsure of the above, unzip and run the following file in your webspace:

fdebug.zip

If it suggests that safe_mode is enabled, check your web space control panel / settings and see if you can turn it "off", else contact your support.
If they say "Oh no can't do that its insecure", tell them its caused so much problems that it is depreciated in ver 5.3 and doesn't even exist in ver 5.4 ! - give them this link: http://uk.php.net/manual/en/features.safe-mode.php

GET / VIEW commented CODE

'Tis a beteljuice throwaway freebie ... enjoy or not as you wish

Edit: Forgot to mention. It's a stand-alone and no weather software is required

Edit: Basic usage ...

Using a txt editor such as Notepad++ change the timezone to YOUR location:

Code: Select all

$time_locale = "Europe/London";  // set your timezone - see: http://php.net/manual/en/timezones.php

If you are not using saratoga / carterlake template(s) you won't have a Settings.php so you need to change the lat / long, this is MY location

Code: Select all

//----------------------------------------------------------------------------\\
// SETTINGS: only customise if you have no "Settings.php"                     \\
//----------------------------------------------------------------------------\\
if (!@(include_once "Settings.php")) {
   $SITE['latitude']      = 52.512; // N+, S-
   $SITE['longitude']      = -2.096; // W-, E+
}
   

To use it in an html page just call it like you would any other graphic.
Using your file name ....

Code: Select all

<img src="heavens.php" alt="day / night chart" title="day / night chart" />

EDIT:
If you really must have a bit of JavaScript to update the image on the page, please be aware that the 'resolution' of the graphic (regardless of size) is 1 degree (values rounded) which equates to 4 minutes.
So it would be pointless to have a refresh rate of less than 2 min.

[gemini06720]

I picked this up from WD forum, some people on there were using the old depreciated Google chart API's and PHP to generate a little day/night graphic.

And, I picked up from you (you code modified to PHP), combined it with the code found/posted in the Weather-Watch forums and came up with this:

[mcrossley]

And, I picked up from you (you code modified to PHP), combined it with the code found/posted in the Weather-Watch forums and came up with this:

That's the way to do it, code sharing helps everyone.

[beteljuice]

Just a thought ...
What happens if daylight is all (today) or dawn > dusk is all (today) ?

[mcrossley]

Just a thought ...
What happens if daylight is all (today)

You get a yellow disk?

or dawn > dusk is all (today) ?

There is no night sector - your version with astronomical twilight will not have any night sector in the UK around mid-summer.

If I'm understanding you right.

[mcrossley]

The beteljuice has a great mistrust of (google) APIs and 'the cloud' etc. prefering to have some degree of control over what happens, and also reducing global internet traffic.

Hi betejuice, I ran into a problem with the script. I do not have a 'Settings.php' file and this fails:

Code: Select all

if ((include_once "Settings.php") == 0) {
   $SITE['latitude' ]      = 52.512; // N+, S-
   $SITE['longitude']      = -2.096; // W-, E+
}

I changed it to

Code: Select all

if (!@(include_once "Settings.php")) {
   $SITE['latitude' ]      = 52.512; // N+, S-
   $SITE['longitude']      = -2.096; // W-, E+
}

and the script now runs

Edit: and shouldn't the output header be

Code: Select all

header('Content-Type: image/png');

My implementation: http://weather.wilmslowastro.com/images/sun_graphic.php