Web site rework

[stevew]

Thought it was time to put some of the simple ideas and available tech to work on my own Cumulus web site. Ive now got the site updating nicely using the ajax cumulus update. Done a little CSS tweaking. Added some of the data from other Cumulus pages to the main page. Replaced the standard moon phase graphic as I hated the old one (sorry). Implemented jpgraph which is hooked into the section headings and added in lightbox support for charts from meteorologica.

Without Cumulus providing its data feed, web tag technology and the standard Cumulus web pages to use as a base this would have been a weeks or more of work rather than an evening.

[stevew]

A question I forgot to ask in my post.

In order to implement a different moon phase graphic Ive got a bunch of images name with file names the same as the <#moonphase> tag, then I have

Code: Select all

<td rowspan=3><IMG src="images/<#moonphase>.png" alt="Moon" width="64" height="64" hspace="10" align="left" border="0"></td>

In my index template, so each time it gets rendered and sent up by Cumulus the image used is based on the moon phase text.

This isn't dynamic like the rest of the site, in other words the javascript that does all of the value updates (smb_ajax.js) isn't handling this. For the moon phase its no biggy as its doesn't change very dynamically from minute to minute but if the phase text did change the image would not, I would like to resolve that.

But how would I implement the change driven in the same way as the text values change, IOW the image is driven by the same change mechanism as the other updates. Fixing it for the moon phase then opens the door to drive other images into the content too.

I think I'm just missing the 'idea or concept' here so any pointers would be welcome, I seem to have got my head stuck trying to find way to do it

[daj]

Hi Steve

nice adaptation -- I particularly like the moon phase icon which is far clearer

I'm not sure I understand this...

but if the phase text did change the image would not...

Surely only Cumulus is changing the moon phase wording, and therefore will also change the tag and subsequently the image when the page is loaded. Ok, if someone was sitting looking at a page as the moon entered a new phase it would not change, but I honestly doubt visitor spend too long on a site (how many sites do you spend more than 20/30 seconds on one page)?

well done

[beteljuice]

... Fixing it for the moon phase then opens the door to drive other images into the content too ..

Doesn't the smb implementation of AJAX already handle graphics (rising, falling, wind direction, etc.) ?

Put your reasoning / definitions in the AJAX 'loop' to rewrite the content of a named element.

Here's an old experiment - all ajax and DHTML driving images dynamically.

http://www.dickie.webfusion.co.uk/betel ... l_big.html

[stevew]

Thanks David, you're right about the need for 'real time' when it comes to moonphase, hence my current method, but solving the problem would then allow the solution to be used for other real time graphic updates, for example a graphic of the forecast or gauges.

Beteljuice, if it does handle it I have yet to find how or find an example. If can find how to have it modify the src attribute of an IMG tag from within the smb_ajax that would do the trick I think. Otherwise its going to be putting my own additional code in the loop as you suggest

[beteljuice]

By giving the <img an 'id' and 'name' you could modify it's src attribute, but it would be easier to "go with the flow".

Have a <div id="moon_pic>here goes the moon pic</div>

In the ajax loop do your reasoning, check that the div actually exists, contruct the html contents of the <div> and do

documemt.getElementById('moon_pic').innerHTML = "<img src ... etc. etc. />";

[stevew]

Well I don't think my solution will win any prizes for elegance but for now it will do, when I get to better understand the way smb_ajax does its thing the elegant solution may present itself.

For now I've added the following to

Code: Select all

function set_ajax_obs()

Just after

Code: Select all

ajx.innerHTML=val + unt; // and write the xml element into the document

and its picks off

Code: Select all

    <td rowspan=3><span class="ajax" id="moonphaseimage"><IMG src="images/<#moonphase>.png" alt="Moon" width="64" height="64" hspace="10" align="left" border="0"></span></td>

in my indexT.htm

Code: Select all

switch(val)
					{
					case "Waxing Gibbous":
						document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';
					break;
					case "Full moon":
						document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';		
					break;
					case "New moon":
						document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';		
					break;
					case "Waning Gibbous":
						document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';		
					break;
					case "Waxing Cresent":
						document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';		
					break;
					case "Waning Cresent":
						document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';		
					break;
					case "First Quarter":
						document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';		
					break;
					case "Last Quarter":
						document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';		
					break;
					}

My images for the 8 moon phases are named as per the moon phase text and in the images sub directory

Next up is to add a graphic (in a similar way) for the forecast then to code a 'current conditions' and graphic

[daj]

I'm not sure you really need the switch command at all. Surely you could simply...

Code: Select all

 document.getElementById('moonphaseimage').innerHTML='<IMG src="images/' + val + '.png" <id="moonphaseimage" alt="Moon" width="64" height="64" hspace="10" align="left" border="0">';      

As there is no difference in any of the case's -- you have already set 'val' so no need to check it every time surely?

[stevew]

that would try to update the image with any change to 'val' so it would try to change the image when the temp changed for example, some if/switch was needed to choose when val was relevant to the moon - like I said, its not elegant

[GraemeT]

Here's how I've done it using php:

Code: Select all

<td width="10%" rowspan="3" align="center"><?php echo '<img src="../images/moon/' . rawurlencode($moonphase) . '.png" alt="" width="60" height="60" />' ?></td>
more html...

[beteljuice]

See: http://php.net/manual/en/function.urlencode.php

[GraemeT]

Thanks Beteljuice,


Trying to stick with the 'KISS' principle using this

Code: Select all

<td width="20%" rowspan="3" align="center"><?php echo '<img src="images/moon/' . rawurlencode($moonphase) . '.png" />'; echo '<br />'; echo $moonphase ?></td>

...note to self - investigate and learn a few built-in PHP functions and what they do!


Cheers,