Moonglow Technologies

Tutorial: Embedding All Sky Cam Images on Your Website

One of the main reasons for using All Sky Cam Uploader is to make your images available on the internet. This tutorial shows how to upload the images, and how to create web pages that show those images.

In the interest of keeping the code readable, some mandatory or recommended HTML tags have been left out (such as alt, width, and height tags in the <img> code) and it is left to the reader's HTML editor to flesh these out.

Option 1: Images hosted on AllSkyCam.com

Hosting images on AllSkyCam.com is quick and easy, especially if you do not have your own web hosting package. If you already have a website and understand how FTP works, skip down to "Option 2" below.

Configuring All Sky Cam Uploader to upload to AllSkyCam.com
1. Make sure the "Uploads | Enabled" menu option is checked. Make sure your internet connection is working by visiting a website in a web browser.
2. Select the "Uploads | AllSkyCam.com..." menu option.
3. Agree to the terms and conditions (printed in your Uploader user manual) by checking the box.
4. Select an Items setting: Low bandwidth, Normal, or Deluxe, depending on the speed of your internet connection. Then set the Upload Interval as desired and click OK.
Including an all sky image in a web forum signature
Log in to your AllSkyCam.com account and scroll down to see example code. Select the code you wish to use and copy it (Ctrl+C). Then log in to your forum account and look for the signature box. Paste the code in and save the signature.
Add a static image to a website
Log in to your AllSkyCam.com account and click on the "View a list of images hosted" link. Click on the images listed and decide which one you wish to use. Then click on that image and note the http://... address of the image in your web browser's address bar. Paste the following example HTML code into your website, changing the yellowed portion to be the address of the image you've selected:
<img src="http://www.allskycam.com/u/000/latest_full.jpg">

Add a javascript animation to a website
This is a little more involved than a single image, but the animation tells you a lot about whether its getting more or less cloudy. First paste the following code into the <HEAD> section of your HTML web page. You will need to change the yellowed number from 000 to your AllSkyCam.com user number, which can be found by examining the http address of one of your uploaded images (see static image section above).

<script type="text/javascript">

//Declare variables used by all images
var seq=0;
var i=0, j=0;
var num="";
var trail=6; //Set the number of images in the animation.
             //Should be less than or equal to the "trail" setting in ASC Uploader.

//For each animation, declare variables and load names of the image files
//Each animation must have a unique name per page, so change all occurences
// of "full" if you are cloning this to a new animation.
var full_array=new Array();
var full_src=new Array();
for (i=0;i<trail;i++) {
	j=trail-i;
	if(j==1) num="";
	else num = j.toString();
	full_src[i]="http://www.allskycam.com/u/000/latest_full"+num+".jpg"
	full_array[i]=new Image(); //Preload images
	full_array[i].src=full_src[i];
}

var pano_array=new Array();
var pano_src=new Array();
for (i=0;i<trail;i++) {
	j=trail-i;
	if(j==1) num="";
	else num = j.toString();
	pano_src[i]="http://www.allskycam.com/u/000/latest_pano_full"+num+".jpg"
	pano_array[i]=new Image(); //Preload images
	pano_array[i].src=pano_src[i];
}


function startAnimation(w)
{
	//Sets duration each frame is displayed, in milliseconds, and starts animation
	t = setInterval("animate(0)", 500);
}

function animate(w)
{
	if (w == 1) { //Back up button was pressed
		seq=seq-2;
		if(seq<0) seq+=trail;
	}
	if (seq == trail) { //Repeat animation
		seq = 0;
	}

	//Update the images
	document.full.src = full_src[seq];
	document.pano.src = pano_src[seq];

	seq++;
}

startAnimation(0);

</script>

Next, paste the following code in the BODY section of your HTML web page where you would like the images to appear. Again, you'll need to replace the yellow number with your user number. If you don't want stop/start/step buttons to appear, do not paste in the INPUT lines. If you don't want the panorama, don't paste in the last img line.

<INPUT TYPE=BUTTON OnClick="startAnimation(0);" VALUE="Start"> <INPUT TYPE=BUTTON OnClick="clearInterval(t);" VALUE="Stop"> <INPUT TYPE=BUTTON OnClick="clearInterval(t); animate(1);" VALUE="<"> <INPUT TYPE=BUTTON OnClick="clearInterval(t); animate(0);" VALUE=">"> <img src="http://www.allskycam.com/u/000/latest_full.jpg" name="full"> <p> <img src="http://www.allskycam.com/u/000/latest_pano_full.jpg" name="pano">

Option 2: Images hosted on your web site

For more control and features, you can upload images to your own web hosting package. To do this, you'll need the FTP server name of your web server, along with the username and password of your FTP account there. All Sky Cam Uploader has a myriad of features, so the tutorial below is just a jumping off point for what you can do.

Configuring All Sky Cam Uploader to FTP to your server
1. Make sure the "Uploads | Enabled" menu option is checked. Make sure your internet connection is working by visiting a website in a web browser.
2. Select the "Uploads | Custom Upload Tasks..." menu option.
3. Click "New..."
4. Give this upload task a description, like "Full image to example.com"
5. Set the interval (how often to upload a fresh image). 5 or 10 minutes is usually sufficient.
6. Select the image type - let's do "Raw Image" for this example.
7. Set the size to "Full Size" which in this case is 640x480.
8. Set Destination to "FTP upload" and enter the server, username, and password of your FTP account. Do NOT include http:// or ftp:// before the server name.
9. If you would like the image to be deposited in a particular folder on your FTP server, you can type that folder path here.
10. Type the filename of the image as you want it to be on the server. For this example type "latest_full.jpg".
11. Click OK and let the image upload.
Add a static image to your website
Place the following code where you want the image to appear in your HTML web page code. You will need to change the yellow address to point to your web server and file name.
<img src="http://www.example.com/latest_full.jpg">

Add a javascript animation to your website
This is a little more involved than a single image, but the animation tells you a lot about whether its getting more or less cloudy. First, create a custom upload task as described above, but also set the "Trail" parameter to 6.

Then paste the following code into the <HEAD> section of your HTML web page. You will need to change the yellowed address to match that of your web server. Notice how there is no ".jpg" in the yellowed section, since we need to concatenate on the image number to build the animation.

<script type="text/javascript"> //Declare variables used by all images var seq=0; var i=0, j=0; var num=""; var trail=6; //Set the number of images in the animation. //Should be less than or equal to the "trail" setting in ASC Uploader. //For each animation, declare variables and load names of the image files //Each animation must have a unique name per page, so change all occurences // of "full" if you are cloning this to a new animation. var full_array=new Array(); var full_src=new Array(); for (i=0;i<trail;i++) { j=trail-i; if(j==1) num=""; else num = j.toString(); full_src[i]="http://www.example.com/latest_full"+num+".jpg" full_array[i]=new Image(); //Preload images full_array[i].src=full_src[i]; } function startAnimation(w) { //Sets duration each frame is displayed, in milliseconds, and starts animation t = setInterval("animate(0)", 500); } function animate(w) { if (w == 1) { //Back up button was pressed seq=seq-2; if(seq<0) seq+=trail; } if (seq == trail) { //Repeat animation seq = 0; } //Update the images document.full.src = full_src[seq]; seq++; } startAnimation(0); </script>

Next, paste the following code in the BODY section of your HTML web page where you would like the images to appear. Again, you'll need to replace the yellow address with that of your web server. If you don't want stop/start/step buttons to appear, do not paste in the INPUT lines.

<INPUT TYPE=BUTTON OnClick="startAnimation(0);" VALUE="Start"> <INPUT TYPE=BUTTON OnClick="clearInterval(t);" VALUE="Stop"> <INPUT TYPE=BUTTON OnClick="clearInterval(t); animate(1);" VALUE="<"> <INPUT TYPE=BUTTON OnClick="clearInterval(t); animate(0);" VALUE=">"> <img src="http://www.example.com/latest_full.jpg" name="full">

Add a flash animation to a website
Flash animations are highly compressed video files, which can show an entire day's images. As compared to the simple 6 frame javascript animation above, a flash animation will use up much more bandwidth but show a much smoother animation over a much longer time. First you will need to configure All Sky Cam uploader as follows.
1. Go to the "Archive | Settings" dialog and make sure that archive "Raw Frames" is checked. Click OK.
2. Create a custom upload task as in step 1 above, but set the Image Type to "Movie..." and the "Upload Interval" to something like 60 minutes.
3. Click the "Movie Options..." box.
4. For this example, set "Interval" to 5 minutes and "Number of Frames" to 288 (there are 1440 minutes per day, so 1440 / 5 = 288 will show the past 24 hours). The interval should be the same or some multiple of the archive interval.
5. Set "File Format" to Flash (SWF) and "Image Size" to Half, then click OK.
6. Set the FTP server name, username, and password as described in step 1 above. Name the file something like "skycam.swf". Click OK and let the file upload.
Now paste the following code into the body section of your HTML web page. If you are uploading the image to a different folder than where the HTML web page lives, you will need to change the yellow code below to be the full path to the movie file.
<embed src="skycam.swf" width=320 height=240>

Introduction - Astronomy - Weather - Software - Installation - Specifications - How To Buy - Support - Terms