Letscommunicate Interactive Traffic System - Work Log

[~Rob]

Originally Posted by ccsnet

Right - I think the problem lies in calling the main .js. Its refrenced in the header but as its for Opera I guess this is the issue.

"<script type="text/javascript">
app = new watchtheRoad();
</script>"

Line 45 index.html.....

Thats the key line that think is failing to call watchtheroad.js and therefore generating the errors I'm seeing.

Terran

I think it's making a new object called app that is the watchtheroad app. So the problem would be in the creation of it

[ccsnet]

OK - ran a test... I'm wrong... Grrr...

Mailed the authour to ask for permision to use this in a new format as planned.... I'll ask him if I get the OK back.

Got to be some thing I'm missing thats simple.

I've uploaded the origonals if some one wants a look... my head hurts now and its late so I think I need a fresh look tommrrow at it...

http://www.letscommunicate.co.uk/car...atch/watch.zip

Terran

[rustyboxx]

Title sorted :D

[ccsnet]

Ok - While I still dont understand why I'm not seeing it in IE ( and I guess cos its got Opera specifics in it ) I can confirm that now I can see it the .js file is loading ( ie the Loading... Please wait message ). Next - Getting it to collect the data / show it.

I'm pretty sure its some thing easy but having to learn and reverse engineer at the same time takes a while.

Terran

[Enforcer]

Originally Posted by ccsnet

Which Browser ?

Terran

IE6



FireFox just gives me a blank screen

[ccsnet]

OK - Very slow progress is been made.... mainly becauase of the size of what I am looking at.

So far I have identified feeds and code for the following items which some how need to be mashed together in one usable package....

BBC TMC
HA Traffic Data ( New service )
HA Adverage Speed Data ( New service )
HA Motoway Matrix Signs ( New service )
Motoway Cameras ;)
UK Speed Cams
US Traffic ( This was easy at the US have a built in Google function )

I'm also looking at doing this both on an offline later on to provide directions, on screen notifications & voice prompts..... but lets get the basics done first.

Terran

[ccsnet]

Ok - I have the app disected and I think mapped out.

The main reason its not displaying is because of the following setup code in the main .js

This is I think Opera specific and to do with saving the prefrences in the widgets.dat witin the User/Application Data/Opera/Opera directory.

I could do with a second pair of eyes just to confirm this as I have 'wood for the trees' syndrome at the mo.

Thanks

Terran

watchtheRoad = function()
{
	var updateURL = "http://touchthe.net/taxonomy/term/13%2C15/1/feed";
	
	// Local mode flag for testing - update checks won't work on my local network if I also access internet data 
	var localMode = false;
	
	// Timer to reload data every half-hour 
	var reloadDataTimer = null;
	
	// General preference settings
	var face = new Preference("face", "main");
	var mode = new Preference("mode", "ticker");
	var mapPanelShown = new Preference("panelmap", true, "bool");
	
	var skin = new Preference("skin", "plain");
	var opacity = new Preference("opacity", "1.0", "float");
	
	// Specific preference settings
	var regionFeed = new Preference("regionfeed", "http://www.bbc.co.uk/travelnews/tpeg/en/local/rtm/londoncentral_tpeg.xml");
	var homeLat = new Preference("homelat", "51.514934");
	var homeLong = new Preference("homelong", "-0.144657");
	var homeStreet = new Preference("homestreet", "[none]");
	var homeCity = new Preference("homecity", "London");	
	
	var severityThreshold = new Preference("severity", 3, "int");
	var reportTypes = new Preference("alerttypes", "roadworks;accidents;obstructions;conditions;other;");
		
	// Warning pop-up boxes - only alertMessage is currently used 
	var infoMessage = new AlertMessage("infomessage","info","shared/img/biginfo.png");
	var alertMessage = new AlertMessage("alertmessage","alert","shared/img/bigalert.png");
	var warningMessage = new AlertMessage("warningmessage","warning","shared/img/bigwarning.png");
	
	var trafficFeed = new BBCTrafficFeed("bbctraffic");
	var geocoder = new GoogleGeocoder();

	// Create an object to check for updates to the software 
	var updater = new NewsChecker(updateURL, "updates");
	
	if (localMode) updater.enabled.set(false);

	var mainFace = new Face("main");
	var configFace = new Face("config");
	
	var tickerPanel = new Panel("ticker", 30);
	var listPanel = new Panel("list", 120);
	var detailsPanel = new Panel("details", 110);
	var mapPanel = new Panel("map", 200);
	
	var ticker = new Ticker("ticker_container", 3);
	var nextMessageIndex = 0;
	
	var locationSearching = new Throbber("location_searching", "shared/img/loading.png", 6, 8);
	var dataLoading = new Throbber("main_loading", "shared/img/loading.png", 6, 8);
	
	var map = null;
	var reports = {};
	var reportsSorted = [];
	
	var mainBackground = null;
	var configBackground = null;
	
/*******************/

	// Called when DOM has been initialised - set up everything DOM-dependent 
	var init = function()
	{
		infoMessage.init();
		alertMessage.init();
		warningMessage.init();
		
		mainFace.init();
		configFace.init();
		tickerPanel.init();
		listPanel.init();
		detailsPanel.init();
		mapPanel.init();
		ticker.init(getNextMessage);
		
		dataLoading.init();
		locationSearching.init();
		
		attachFaceButtonHandlers();
		
		attachConfigChangeHandlers();
		
		// load preferences 
		face.load();
		mode.load();
		skin.load();
		opacity.load();
		
		mapPanelShown.load();
		regionFeed.load();
		homeLat.load();
		homeLong.load();
		homeStreet.load();
		homeCity.load();
			
		severityThreshold.load();
		reportTypes.load();
		
		// everything is ready, display the widget and starting loading the traffic data 
		
		document.body.style.display = 'block';

[ccsnet]

Can some one help here ? The following sub routines are failing.... the line concerned is marked in bold.... ( var parser = new DOMParser(); & anything marked HTMLElement ).....

BBCTrafficFeed = function(prefsPrefix)
{
	var self = this;
	
	var timer1 = 0;
	var timer2 = 0;
	var timer3 = 0;
	var timer4 = 0;
	var timer5 = 0;
	
	var mungeEntities = /&/gi;
	
	// The Yahoo! YUI AJAX transaction object - we re-use it so we can test if it's still running or not
	
	var transaction = null;
	var parser = new DOMParser();

	// The feed's current status

	self.loaded = false;
	self.needsUpdate = true;
	
	// Initial objects to store the various types of data
	
	self.messages = [];
	

	// Start reloading the data from the AJAX feed
	
	self.reload = function(dataURL, callback)
	{

		// Safety check - if not running as a widget, don't do anything

		{
			// Set feed status to 'not loaded'
			
			self.loaded = false;

			// Push HTTP params onto an array, we can join them into a single string later. This is clearer.
			
			var httpParams = [];
			
			// Use YUI - set our own handlers for success and failure, pass the caller's handlers as an argument

			var yahooCallback = { success: reloadSuccess, failure: reloadFailure, argument: callback };	
			
			// If earlier transaction is in progress, abort it
			
			if (transaction && YAHOO.util.Connect.isCallInProgress(transaction))
			{
				YAHOO.util.Connect.abort(transaction);
			}
			
			// Ensure data isn't cached, or our local time will get out of sync, then make the call
			
			timer1 = new Date().getTime();
			
			YAHOO.util.Connect.initHeader("Cache-Control", "no-cache");
			transaction = YAHOO.util.Connect.asyncRequest('GET', dataURL+"?"+httpParams.join("&"), yahooCallback);
		}
	}

/*************************************************************************************************

License terms as defined in the file license.txt, which MUST be distributed unmodified with this file.

**************************************************************************************************/

/* Miscellaneous shared functions */

/* HTMLElement method additions */

HTMLElement.prototype.removeChildren = function()
{
	while (this.hasChildNodes()) { this.removeChild(this.firstChild); }
	return this;
}

HTMLElement.prototype.addClassName = function (newClass)
{
	var classArray = this.className.split(" ");
	var found = false;
	for (var i=0; i<classArray.length; i++)
	{
		if (classArray[i] == newClass) found = true;
	}
	if (!found)
	{
		classArray.push(newClass);
		this.className = classArray.join(" ");
	}
}

HTMLElement.prototype.removeClassName = function (oldClass)
{
	var classArray = this.className.split(" ");
	for (var i=0; i<classArray.length; i++)
	{
		if (classArray[i] == oldClass) 
		var discard = classArray.splice(i,1);
	}
	this.className = classArray.join(" ");
}

/* Date method additions and other functions */

/* Format a Date object as a string, according to simple substitutions */

Date.prototype.formatTemplate = function(template)
{
	var outString = template;
	outString = outString.replace("{MMM}", ["January","February","March","April","May","June","July","August","September","October","November","December"][this.getMonth()]);
	outString = outString.replace("{MM}", ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][this.getMonth()]);
	outString = outString.replace("{M}", (this.getMonth()+1).toString());
	outString = outString.replace("{DDD}", ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][this.getDay()]);
	outString = outString.replace("{DD}", ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][this.getDay()]);
	outString = outString.replace("{dd}", this.getDate());
	outString = outString.replace("{hh}", this.getHours());
	var tempMins = ("00" + this.getMinutes().toString());
	outString = outString.replace("{mm}", tempMins.substr(tempMins.length-2, 2));
	outString = outString.replace("{yyyy}", this.getFullYear());
	return outString;
}

Terran

[Sama]

ie uses a different DOM parser than the usual. check this code out:

// code for IE
if (window.ActiveXObject){
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(xmltext);
}// code for Mozilla, Firefox, Opera, etc.
else{
var parser=new DOMParser();
var doc=parser.parseFromString(xmltext,"text/xml");
}
// documentElement always represents the root node
var x=doc.getElementsByTagName("marker");
for(var i=0;i<x.length;i++){
var str = "";
for(var j=0;j<4;j++){
str += x[i].childNodes[j].firstChild.nodeValue + " ";
}
document.write(str+"<br>");
}

It's just random bit I picked up, but it seems to point to IE using an ActiveX based DOM

[ccsnet]

Quite possible... its may have some time to do with the Yahoo YUI but this is as far as I got....

Any suggestions on how I can get round it ?

h**p://www.letscommunicate.co.uk/carpc/traffic/102mod/ is where its setup at the mo

Terran

[~Rob]

inside /lib/yui/yahoo.js is this line

{var l=YAHOO.widget.Logger;if(l&&l.log){return l.log(_2,_3,_4);}

I'm not sure what to change it to.

[~Rob]

not to forget the very last line of that file

YAHOO.namespace("util","widget","example");

[ccsnet]

Originally Posted by ~Rob

inside /lib/yui/yahoo.js is this line

{var l=YAHOO.widget.Logger;if(l&&l.log){return l.log(_2,_3,_4);}

I'm not sure what to change it to.

That goes to the bbcfeed.js which collects the data. Down the bottom you'll see the relevant sub routine and it uses the Yahoo API to grab the data and parse it to a useable form.

This app uses Yahoo widgets and APIs to collect data with so external Google API to do geocoding. If I can get to a fax this week I'll send you my written notes.... but if you print out watchtheroad.js and highlight most of the // comment lines you should see each sub routine nicly.

The BBC one been called for grabbing the feed, the geocoding one for the geocode info, the Tpeglookup been the lookup table for the feed to create the main location points & events with the watchtheroad one hanging it all together. Thats a very very rough outline of the scripts.

Terran

[ccsnet]

N00b - found this about DOMparser.....

http://www.w3schools.com/dom/dom_parser.asp

BTLO it ties in the the MS stuff you found.....

Terran

[~Rob]

Just had a look quickly before the Colin McRae demo finishes downloading.

Thanks for linking to that DOM parser. We're going to need it. Have you looked at the data it's using? The index location options go to a bbc page that never changes location. Look here for Norfolk.

So traffic updates are easy to do (well I say easy, It will take me with my current knowledge of manipulating xml documents, that's nil, 3 days to do I'd say) but if you want locations on a map I'll have to look into it.

For the time being I can't see it being hard to make a program that we can embed into RR with a list of traffic incidents in the user selected area. A bit more work might give a way to find incidents based on your current GPS position