Topic: How I Did An Austin Traffic Cam Widget...

I have been hacking (more like flailing wildly) the sample cam widget to create an Austin Tx Traffic Cam widget.  While the first one I did worked on one of the tours (as TXDOT calls it) I decided to get more involved in activescript.  So I added buttons on the left and right side of the screen to move through the tours and then fancied it up by displaying the title of the tours as on the TXDOT web site.

Here is the code for those interesested.  As usual its a mess...

url = "http://ausits.dot.state.tx.us/snapshots/aus-cam";// link to the cam feed
delay = 1000;// one second refresh rate

_global.tourNo = 2;
_global.tour = new Array();
tour[0] = "tour!";
tour[1] = "US 183 Tour - between McNeil Road and Loop 1 (MoPac)";
tour[2] = "Loop 1 Tour - between Loop 360 North and Lake Austin Boulevard";
tour[3] = "Loop 1 Tour - between Town Lake and Barton Creek";
tour[4] = "US 290 Tour - between Banister to Congress";
tour[5] = "US 183 Tour - between Loop 1 (MoPac) and IH 35";
tour[6] = "IH 35 Tour - between 51st Street and Braker Lane";
tour[7] = "IH 35 near 6th Street";

//-----------------------------------
//
// this handles simple JPEG-based webcams
//
// set 'url' to URL of JPEG image feed
// set 'delay' to frame rate in ms (best to avoid faster than 1s)
// create library item with linkage "proxy" to hold image
//
// Note that the site hosting the cam must allow Flash access
// from arbitrary domains, typically by using a "crossdomain.xml" file
//
// This movie also counts on the images being exactly 320x240 - you may bee to get fancier
// if they're not.
//
//-----------------------------------
//
// The strategy here is to have three "proxy" movie clips that
// each load and rotate to front.  If you have just one clip, then
// it will go blank during the load.  Having three also allows
// some latency in the response for the image load.
//
createEmptyMovieClip("image0",0);// create some initial empty images
createEmptyMovieClip("image1",1);
createEmptyMovieClip("image2",2);

index = 0;
//
// onEnterFrame-based loading
//
// We aren't using setInterval/clearInterval to avoid
// potential memory/timer leaks in the Flash player
//
then = 0;// long, long ago....
this.onEnterFrame = function() {
    now = (new Date()).getTime();// get current time in ms from the epoch
    if (now-then>delay) {// enough time elapsed since last image loaded?
        doLoadImage();// yup, load image
        then = now;// and reset the last load time
    }
};

//
// rotate the images, load the next one
//
function doLoadImage() {
    var name0 = 'image'+(index%3);
    var name1 = 'image'+((index+1)%3);
    var name2 = 'image'+((index+2)%3);
    var m0 = eval(name0);
    var m1 = eval(name1);
    var m2 = eval(name2);
    _level0.infoField._visible = true;
    _level0.infoField.text = _global.tourNo+" "+_global.tour[_global.tourNo];
    m0.swapDepths(0);// rotate the clips
    m1.swapDepths(1);
    m2.removeMovieClip();// throw away the oldest one
    createEmptyMovieClip(name2,2);// make a new one
    m2 = eval(name2);
    m2.loadMovie(url+"0"+_global.tourNo+".jpg"+"?"+Math.random());// load image into it
    index = (index+1)%3;
}

Re: How I Did An Austin Traffic Cam Widget...

Doc -

Thanks for the sample. I'd love to get this working in FlashDevelop.

I can't see the code that actually displays the image. Does m2.LoadImage do the displaying, or does it simply load up the correct JPG?

Re: How I Did An Austin Traffic Cam Widget...

johnk wrote:

Doc -

Thanks for the sample. I'd love to get this working in FlashDevelop.

I can't see the code that actually displays the image. Does m2.LoadImage do the displaying, or does it simply load up the correct JPG?

the loadMovie() function gets it and causes it to be displayed, within the layering context

Re: How I Did An Austin Traffic Cam Widget...

Wow - it works! That's wonderful! Free Chumby development is for real! :-)

Re: How I Did An Austin Traffic Cam Widget...

Johnk, did you use flashdevelop to compile this code?

Send me the flashdevelop project file, and I'll post to the wiki.

Re: How I Did An Austin Traffic Cam Widget...

As proof of concept, I wrote a simple version that just loads an image from Flickr and displays it. I used the template that you so kindly created, and dropped in the source:


/*
* Simple Chumby Application
*/
class ChumbyApp
{
    var url = "http://farm3.static.flickr.com/2287/208 … 767f_m.jpg";
   
    private var parent:MovieClip;

   
    function ChumbyApp(mc:MovieClip)
    {
        // save reference to main movieclip
        this.parent = mc;
       
        mc.loadMovie(url);
       
    }
   

   
    static function main(mc:MovieClip)
    {
        var app = new ChumbyApp(mc);
    }
}

Re: How I Did An Austin Traffic Cam Widget...

I was hoping I could use:

mc.MoveTo(10,10);
mc.LineTo(100,100);

and so on to draw some graphics, but I haven't quite got that to work.

Is it possible to embed graphics locally into the project as well?

Re: How I Did An Austin Traffic Cam Widget...

I take that back.. I've got line-drawing and so forth working too :-)

Re: How I Did An Austin Traffic Cam Widget...

Thanks for your work on that johnk.

I've documented my results of your efforts:

http://wiki.chumby.com/mediawiki/index. … lop/WebCam

Working great!

Re: How I Did An Austin Traffic Cam Widget...

For me this has been one of the most frustrating part of the widget development... not enough samples for us non flash programers!  Thanks for sharing