Solved

Start at beginning inside xml file and increment every 5 seconds to next play.

Posted on 2014-03-03
10
167 Views
Last Modified: 2014-03-07
I want to every 5 seconds move to next seq number which is a new play and display that play on screen the teamlogo, headshot, timeleft, playtype and play description. So it will cycle through the 1st period and then the 2nd period and then the 3rd period. this code here grabs the last play but I need it to go to the first then manuever IT'S WAY TO END.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="author" content="Tom Powers">
	<title>Current NHL Play</title>
	<link rel="stylesheet" href="css/jquery-ui-1.8.9.customver1.css">
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
	xmlPath = '.' ;
	xmlGameID ='18627';
		
	$(document).ready(function() {
		$.ajax({
			type: "GET",
			url:  xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml",
			success: function(data) {
				gameData = $(data);
				play = gameData.find('Play');
				quarter = play.attr("Quarter");
				$('#p').html("Period " + quarter);
				$('Team', gameData).each(function(i, Team) {
					team = $(Team);
					id = team.attr("ID").toLowerCase();
					vh = team.attr('vh');
					sHomeOrAway = (vh == 'A') ? 'away':'home';
		
					$('#img' + sHomeOrAway).attr('src', 'http://sportsnetwork.com/gamecast/nhl/logos/' + id + '.png');
					$('#' + sHomeOrAway + 'teamscore').html(team.find('Linescore').attr('Score'));
				});
				
				playInfo = getPlayInfo(play);
				
				$('#teamID').attr('src', playInfo.teamImg);
				$('#playerID').attr('src', playInfo.playerImg);
				$('#playtype').html(playInfo.playType);
				$('#timeleft').html(playInfo.playTime);
				$('#txtgameplay').html(playInfo.playNarr);
			}
		});
	});
		
	function getPlayInfo(play) {
		teamID, playerID;
		playTypes = {
			"GOAL": {subnode: 'Goal', teamidnode: 'ScoreTeamID', playeridnode: 'ScoreID'},
			"MISSED": {subnode: 'Missed', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
			"BLOCKED": {subnode: 'Blocked', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
			"ONGOAL": {subnode: 'OnGoal', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
			"HIT": {subnode: 'Hit', teamidnode: 'HitTeamID', playeridnode: 'HitID'},
			"PENL": {subnode: 'Penalty', teamidnode: 'PONTeamID', playeridnode: 'PONID'}
		};
			
		if ( playInfo = $(playTypes).attr( play.attr('PlayType') ) ) {
			teamID = play.find( playInfo.subnode ).attr( playInfo.teamidnode );
			playerID = play.find( playInfo.subnode ).attr( playInfo.playeridnode );
		}
			
		return {
			'teamImg'	: (teamID) ? 'http://sportsnetwork.com/gamecast/nhl/logos/' + teamID + '.png': 'http://powerzsoftware.com/tsn/IMAGES/NHLLOGOX.png',
			'playerImg'	: (playerID) ? 'http://images.sportsnetwork.com/nhl/attherink/players/' + playerID + '.jpg' : 'http://powerzsoftware.com/tsn/IMAGES/sKATE.png',
			'playType'	: play.attr('PlayType'),
			'playTime'  : play.attr('TimeLeft'),
			'playNarr'	: play.find('narrative').attr('text')
		};
	}
	</script>

	<style type="text/css" media="screen">
		.midcenter { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 36px; font-weight: bold; text-align: center; vertical-align: middle; }
		.small { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; }
	</style>
</head>
<body>
		
	<table width="100%" border="0">
		<tr>
			<td width="24%" class="midcentre" style="text-align: center"><img src="http://sportsnetwork.com/gamecast/nhl/130.png" id="teamID" height="50" width="50"></td>
			<td width="25%" class="midcenter"><img src="images.sportsnetwork.com/nhl/attherink/players/2867.jpg" id="playerID" height="75" width="50"></td>
			<td width="25%" class="small " id="playtype">&nbsp;</td>
			<td width="26%" class="small" id="timeleft">&nbsp;</td>
		</tr>
	</table>
		
	<table width="100%" border="0">
		<tr>
			<td><p class="small " id="txtgameplay" style="font-size: 12px; font-family: 'Palatino Linotype'">&nbsp;</p></td>
		</tr>
	</table>
	
	<table width="100%" border="0">
		<tr>
			<td width="24%"><p class="midcenter"><img src="http://sportsnetwork.com/gamecast/nhl/Logos/400.png" width="50" height="50" id="imgaway"></p></td>
			<td width="25%" class="midcenter" id="awayteamscore">0</td>
			<td width="25%" class="midcenter" id="hometeamscore">0</td>
			<td width="26%" class="midcenter"><img src="http://sportsnetwork.com/gamecast/nhl/136.png" id="imghome" height="50" width="50"></td>
		</tr>
	</table>
	
	<table width="100%" border="0">
		<tr>
			<td class="GCPBP" id="period"><div align="center" id="p" style="text-align: center" class="GCPBP">PERIOD #</div></td>
		</tr>
	</table>

</body>
</html>

Open in new window

currentplay3.html
18627.XML
0
Comment
Question by:powerztom
  • 5
  • 5
10 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39912639
Here's a start. I kept the rest of the code the same, not sure what all of it does. You probably need a way to refresh the xml file but it's not clear to me from your question if and how you need that tied in to showing the data from the different Play nodes. Like continuously or when all nodes have been processed.
	var xmlPath = '.' ;
	var xmlGameID ='18627';

	var gameData, playArray, playSeqPos = -1;
		
	$(document).ready(function() {
		$.ajax({
			type: "GET",
			url:  xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml",
			success: function(data) {
				gameData = $(data);
				playArray = gameData.find('Play');
				playSeqPos = playArray.length;
				showData();
			}
		});
	});

	function showData() {
		playSeqPos--;
		play = $(playArray[playSeqPos]);
		quarter = play.attr("Quarter");
		$('#p').html("Period " + quarter);
		$('Team', gameData).each(function(i, Team) {
			team = $(Team);
			id = team.attr("ID").toLowerCase();
			vh = team.attr('vh');
			sHomeOrAway = (vh == 'A') ? 'away':'home';

			$('#img' + sHomeOrAway).attr('src', 'http://sportsnetwork.com/gamecast/nhl/logos/' + id + '.png');
			$('#' + sHomeOrAway + 'teamscore').html(team.find('Linescore').attr('Score'));
		});
		
		playInfo = getPlayInfo(play);
		
		$('#teamID').attr('src', playInfo.teamImg);
		$('#playerID').attr('src', playInfo.playerImg);
		$('#playtype').html(playInfo.playType);
		$('#timeleft').html(playInfo.playTime);
		$('#txtgameplay').html(playInfo.playNarr);

		if (playSeqPos > 0) {
			setTimeout(showData, 1000);
		}
	}

Open in new window

0
 

Author Comment

by:powerztom
ID: 39912662
just need it to go to currnet play if a viewer tunes in middleway through the game AI think the code is like this

I think it's

lastSeq = 1 * d.find('Play').last().attr('Seq');
                            if (lastSeq > counterSeq) {
                                counterSeq++; // skip missing Seq
                            }


but here is entoire code incase I'm wrong remember this is football code not hockey I know I don't have to tell you that but I did to aviod any confusion.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>The sports Network</title>
    <style type="text/css">
            .formatcell {
              text-align: center;
              vertical-align: top;
            }
            .textbox {
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              font-size: x-small;
              color: #000;
              background-color: #FC6;
            }
            #awayendzone {
              position: absolute;
              width: 60px;
              height: 252px;
              z-index: 1;
              left: 48px;
              top: 23px;
            }
            #apDiv1 {
              position: absolute;
              width: 60px;
              height: 252px;
              z-index: 2;
              left: 708px;
              top: 23px;
            }
            .textbox2 {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 14px;
              font-weight: bold;
              color: #000;
              text-align: center;
              vertical-align: top;
            }

            #apDiv2 {
              position: absolute;
              left: 110px;
              top: 21px;
              width: 600px;
              height: 255px; /* was 260 */
              z-index: 10;
              /*overflow: visible;*/
            }
            #apDiv3 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 20;
              /*overflow: visible;*/
              left: 110px;
              top: 21px;
            }
            #apDiv4 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 130;
              left: 110px;
              top: 21px;
            }
            #apDiv5 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 40;
              left: 110px;
              top: 21px;
            }
            #apDiv6 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 45;
              left: 110px;
              top: 21px;
            }
            #apDiv7 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 50;
              left: 110px;
              top: 21px;
            }
            #apDiv8 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 55;
              left: 110px;
              top: 21px;
            }
            #apDiv9 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 60;
              left: 110px;
              top: 21px;
            }
            #apDiv10 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 70;
              left: 110px;
              top: 21px;
            }
            #apDiv11 {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 180;
              left: 110px;
              top: 21px;
            }
            #overlay {
              position: absolute;
              width: 600px;
              height: 255px;
              z-index: 502;
              left: 110px;
              top: 21px;
            }
            #tooltip {
              position: absolute;
              display: none;
              width: 300px;
              height: 50px;
              z-index: 501;
              color: red;
              font-size: 10pt;
              background-color: #FFFF99;
              border: 1px solid red;
              opacity: 0.8;
            }

        </style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            var xmlPath = '/xml/nba/scores/real';
	 var xmlGameID = "ab-3145_119.xml";  // game id only, _counter.xml will be added in the ajax call
            var counterXml = 0;
            var counterSeq = 1; // 1 = start from the beginning (full match replay), use -1 to start at end (then it will also search for start of last drive automatically now)
            var xmlGameDrive = 3145;
            var myVar, myVar1, canvas, context0, context1, context2, context3, context4, context5, context6, context7, context8, context9;
            var colors = ['green', 'yellow', 'orange', 'blue', 'red'];
            var TeamIDH = 0;
            var TeamIDA = 0;
            var yrd = 0;
            var FinalYard,PossID,PossIDbak,FinalField,ResultingToGo,ResultingDown,InitialToGo,PlayFlag,PlayType,OffID,ScoringPlay; 
            var a;
            var rev;
            var x;
            var five = 5;
            var six = 6;
            var sixty = 60;
            var fifty = 50;
            var threeh = 300;
            var c;
            var b;
            var d;
            var e;
            var f;
            var g;
            var h;
            var i;
            var z;
            var countertop = 125;
            var newdrive;
           
            var Drawline;
            var Result;
            var lastSeq;
            var BallYrd;
            var TotalYards;
            var InitialField;
            var absTop = 10;
            var absBottom = 250;
            var lineTop = absTop;
            var lineHeight = 10;
            var lineDisplacement = lineHeight;
            var lineColor = 'black';
            var teamNames = {
                "079": "GIANTS",
                "068": "LIONS",
                "084": "49ERS",
                "063": "BEARS",
                "083": "CHARGERS",
                "085": "SEAHAWKS",
                "088": "REDSKINS",
                "061": "FALCONS",
                "062": "BILLS",
                "064": "BENGALS",
                "065": "RAVENS",
                "066": "COWBOYS",
                "067": "BRONCOS",
                "069": "PACKERS",
                "070": "TITANS",
                "071": "COLTS",
                "072": "CHIEFS",
                "073": "RAIDERS",
                "074": "RAMS",
                "075": "DOLPHINS",
                "076": "VIKINGS",
                "077": "PATRIOTS",
                "078": "SAINTS",
                "080": "JETS",
                "081": "EAGLES",
                "082": "STEELERS",
                "086": "CARDINALS",
                "087": "BUCS",
                "089": "PANTHERS",
                "090": "JAGUARS",
                "120": "BROWNS",
                "151": "TEXANS",
                "685": "A-F-C",
                "686": "N-F-C"
            };
 var QueryString = function () {
	var query_string = {};
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
		var pair = vars[i].split("=");
		// If first entry with this name
		if (typeof query_string[pair[0]] === "undefined") {
			query_string[pair[0]] = pair[1];
		// If second entry with this name
		} else if (typeof query_string[pair[0]] === "string") {
			var arr = [ query_string[pair[0]], pair[1] ];
			query_string[pair[0]] = arr;
		// If third or later entry with this name
		} else {
			query_string[pair[0]].push(pair[1]);
		}
	} 
	return query_string;
} ();
            // global now
            var msg;
            var arrLines = []; // remember lines for current DRIVE

            $(document).ready(function () {
				var xmlPath = "." //'/xml/nfl/scores/real';
				 var xmlGameID = "ab-3145_119";  
                $.ajax({
                    type: "GET",
                    url: xmlPath + "/" + xmlGameID + ".xml",
                    dataType: "xml",
                    success: function (data) {
                        var d = $(data);
                        d.find('Team').each(function (i, Team) {
                            var team = $(Team);
                            var id = team.attr("ID").toLowerCase();
                            var teamname = team.attr("name");
                            var homeOrAway = team.attr("vh");
                            var selector1 = (homeOrAway == "A") ? '#Visitor' : '#Hometeam';
                            var selector2 = (homeOrAway == "A") ? '#VTeamname' : '#HTeamName';

                            //$(selector1).html(teamname);
                            // $(selector2).html(teamNames[id]);
                            if ($(Team).attr('vh') == "A") {
                                $('#imgawayEZ').attr('src', 'http://images.sportsnetwork.com/nfl/atthegridiron/end_zone2/' + $(Team).attr('ID') + "_away.jpg");
                                $('#away').attr('src', 'http://dev.sportsnetwork.com/aspdata/nfl2/' + $(Team).attr('ID') + ".png");
                                TeamIDA = $(Team).attr('ID');
                                $('#TeamIDA').html(TeamIDA);

                                // $('#VRd').show()
                                // $('#VRtg').show()

                            }
                            if ($(Team).attr('vh') == "H") {
                                $('#imghomeEZ').attr('src', 'http://images.sportsnetwork.com/nfl/atthegridiron/end_zone2/' + $(Team).attr('ID') + "_home.jpg");
                                $('#home').attr('src', 'http://dev.sportsnetwork.com/aspdata/nfl2/' + $(Team).attr('ID') + ".png");
                                TeamIDH = $(Team).attr('ID');
                                $('#TeamIDH').html(TeamIDH);
                            }

                        });
                    }
                });

                canvas = document.getElementById('myCanvas');
                context0 = canvas.getContext('2d');
                //context1 = canvas.getContext('2d');
                canvas = document.getElementById('Lines');

                context1 = canvas.getContext('2d');
                canvas = document.getElementById('Logos');
                context2 = canvas.getContext('2d');
                //context2.globalAlpha = 0.8;
                canvas = document.getElementById('LossYards');
                context3 = canvas.getContext('2d');
                canvas = document.getElementById('OFFP');
                context4 = canvas.getContext('2d');
                canvas = document.getElementById('DEFP');
                context5 = canvas.getContext('2d');
                canvas = document.getElementById('DrawPass');
                context6 = canvas.getContext('2d');
                canvas = document.getElementById('DrawRush');
                context7 = canvas.getContext('2d');
                canvas = document.getElementById('Box');
                context8 = canvas.getContext('2d');
                canvas = document.getElementById('Text');
                context9 = canvas.getContext('2d');

                document.getElementById('overlay').onmousemove = checkLines;

                myVar = setInterval(gettext, 10000);

                
            });

            function drawLogo() {
                context2.clearRect(0, 0, canvas.width, canvas.height);

                var imgRedName = "away"; // start with the away
                if (PossID == TeamIDH) imgRedName = "home"; // do if test to change to home

                var imgRed = document.getElementById(imgRedName);
                var imgRedX = z - imgRed.width / 2;
                var imgRedY = (canvas.height - imgRed.height) / 2;
                context2.drawImage(imgRed, imgRedX, imgRedY, imgRed.width, imgRed.height);
            }

            function gettext() {
                var xmlPath = "." //'/xml/nfl/scores/real';
	 //var xmlGameID = QueryString.gameID;  
                $.ajax({
                    type: "GET",
                    url: xmlPath + "/" + xmlGameDrive + '_DRIVE.xml',
                    dataType: "xml",
                    success: function (data, textStatus, jqXHR) {

                        var d = $(data);

                        // do not comment out the if to skip missing Seq numbers, this is done in the else part of the " if (PlaySeq.length > 0) "
                        if (counterSeq == -1) { // init to last Seq in file
                            lastSeq = 1 * d.find('Play').last().attr('Seq');
                            if (lastSeq > counterSeq) {
                                counterSeq = lastSeq; // skip to end
                            }
							//ClearValues();
							//ClearDrive();
                            // find start of current DRIVE based on PossID
							var playNodes = d.find('Play');
							for (var intCounter = playNodes.length - 2; intCounter >= 0; intCounter--) {
								var tempSeq = $(playNodes[intCounter]).attr('Seq');
								if (tempSeq < counterSeq) {
									if ($(playNodes[intCounter]).attr('PossID') == $(playNodes[intCounter+1]).attr('PossID')) {
										counterSeq = tempSeq;
									} else {
										//PlaySeq = d.find('Play[Seq="' + counterSeq + '"]');
										break;
									}
								}
							}
                        }

                        msg = "";
                        //var PlaySeq = $(Play).attr('Seq');
                        var PlaySeq = d.find('Play[Seq="' + counterSeq + '"]');
                        if (PlaySeq.length > 0) {
                            PossIDbak = PossID;
                            PossID = PlaySeq.attr('PossID');

                            // find start of current DRIVE based on PossID
                            /*if (counterInit) {
                                counterInit = false;
                                var playNodes = d.find('Play');
                                for (var intCounter = playNodes.length - 2; intCounter >= 0; intCounter--) {
                                    var tempSeq = $(playNodes[intCounter]).attr('Seq');
                                    if (tempSeq < counterSeq) {
                                        if ($(playNodes[intCounter]).attr('PossID') == PossID) {
                                            counterSeq = tempSeq;
                                        } else {
											PlaySeq = d.find('Play[Seq="' + counterSeq + '"]');
                                            break;
                                        }
                                    }
                                }
                            }*/

                            msg = $(PlaySeq).find('narrative').attr('text');
                            $('#txtNarrative').val(msg);
                            context8.clearRect(0, 0, canvas.width, canvas.height);
                            context9.clearRect(0, 0, canvas.width, canvas.height);
                            // var rev = Math.random() > .5;
                            //  rev = PossID == TeamIDH; 
                            PlayFlag = PlaySeq.attr('PlayFlag');
                            InitialToGo = parseInt(PlaySeq.attr('InitialToGo'))
                            InitialDown = parseInt(PlaySeq.attr('InitialDown'));
                            ResultingDown = parseInt(PlaySeq.attr('ResultingDown'));
                            BallYrd = parseInt(PlaySeq.attr('BallYrd'));
                            FinalYard = parseInt(PlaySeq.attr('FinalYard'));
                            TotalYards = parseInt(PlaySeq.attr('TotalYards'));
                            PlayType = PlaySeq.attr('PlayType');
                            ResultingToGo = parseInt(PlaySeq.attr('ResultingToGo'));
                            InitialField = PlaySeq.attr('InitialField');
                            FinalField = PlaySeq.attr('FinalField');
                            //context0.clearRect(0, 0, canvas.width, canvas.height);
                            //context2.clearRect(0, 0, canvas.width, canvas.height);
                            if (PossID != PossIDbak) {
                                ClearDrive();
                               // ClearValues();
                            }
                            if (FinalField == TeamIDH) {
                                //ClearDrive();
                                HomeSide();
                            }
                            if (FinalField == TeamIDA) {
                                //ClearDrive();
                                AwaySide();
                            }

                          //  $('#dbgatt').html(
                            //    'PlayFlag = ' + PlayFlag + '<br>' +
                            //    'InitialToGo = ' + InitialToGo + '<br>' +

                           ///     'InitialDown = ' + InitialDown + '<br>' +
                            //    'ResultingDown = ' + ResultingDown + '<br>' +
                            //    'BallYrd = ' + BallYrd + '<br>' +
                            //    'FinalYard = ' + FinalYard + '<br>' +
                            //    'TotalYards = ' + TotalYards + '<br>' +
                             //   'PlayType = ' + PlayType + '<br>' +
                             //   'ResultingToGo = ' + ResultingToGo + '<br>' +
                            //    'InitialField = ' + InitialField + '<br>' +
                            //    'FinalField = ' + FinalField + '<br>'
                         //   );


                           counterSeq++;
                        } else {
                            lastSeq = 1 * d.find('Play').last().attr('Seq');
                            if (lastSeq > counterSeq) {
                                counterSeq++; // skip missing Seq
                            }
                        }


                    },
                    error: function () {
                        //counterXml = -1;
                    }
                });
            }

            function ClearDrive() {
                context3.clearRect(0, 0, canvas.width, canvas.height);
                context7.clearRect(0, 0, canvas.width, canvas.height);
                context6.clearRect(0, 0, canvas.width, canvas.height);
                context4.clearRect(0, 0, canvas.width, canvas.height);
                context5.clearRect(0, 0, canvas.width, canvas.height);
                lineTop = absTop;
                lineDisplacement = lineHeight;

                arrLines.length = 0; // clear array
                $('#tooltip').hide();
            }

            function drawHorLine(ctx, col, x1, x2) {

                ctx.save(); // save state before translate
                ctx.translate(0.5, 0.5); // avoid anti-aliasing (blurry rect)
                ctx.beginPath(); // very important, otherwise it just keeps adding shapes to the current path and redrawing all the previous lines!
                //ctx.moveTo(x1, lineTop);
                //ctx.lineTo(x2, lineTop);
                //ctx.lineWidth = lineHeight;
                //ctx.lineCap = "flat"; // "round";
                //ctx.stroke();
                ctx.rect(x1, lineTop, x2-x1, lineHeight);
                ctx.fillStyle = col;
                ctx.fill();
                ctx.lineWidth = 1;
                ctx.strokeStyle = lineColor;
                ctx.stroke();
                ctx.restore(); // reset translate()

                // save line position in array
                arrLines[arrLines.length] = {x:x1+110, y:lineTop+20, w:x2-x1, h:lineHeight, t:msg}; // add offsets x/y for comparison to mouse position later

                var lineTopNew = lineTop + lineDisplacement;
                if (lineTopNew > absTop && lineTopNew < absBottom){
                    lineTop = lineTopNew;
                } else {
                    lineDisplacement = -lineDisplacement;
                    lineTop += lineDisplacement
                }
            		context0.beginPath();
                    context0.moveTo(x, 250);
                    context0.lineTo(x, 5);
                    context0.lineWidth = 5;
                    context0.lineCap = "round";
                    // set line color
                    context0.strokeStyle = "#FFFF00";
                    context0.stroke();
			
			
			}

            function checkLines(e) {
                e = e || window.event;
                for (var intCounterLines = 0; intCounterLines < arrLines.length; intCounterLines++) {
                    if (((arrLines[intCounterLines].w > 0 && arrLines[intCounterLines].x <= e.clientX && arrLines[intCounterLines].x + arrLines[intCounterLines].w >=  e.clientX) ||
                         (arrLines[intCounterLines].w < 0 && arrLines[intCounterLines].x >=  e.clientX && arrLines[intCounterLines].x + arrLines[intCounterLines].w <= e.clientX)) &&
                          arrLines[intCounterLines].y <= e.clientY && arrLines[intCounterLines].y + arrLines[intCounterLines].h > e.clientY) {
                        $('#tooltip').css( { 'left': e.clientX, 'top': e.clientY } ).html(arrLines[intCounterLines].t).show();
                        return;
                    }
                }
                $('#tooltip').hide();
            }

            function ClearValues() {
                Drawline = "";
                Totalyards ="";
                Result = ""
            }

            function DrawLinesAway() {
               // ClearValues();
                //ClearDrive();  
                Drawline = TotalYards * six;

                if (TotalYards > Drawline && PlayFlag == "7") { // Loss of Yardage
                    //Drawline = z + Drawline;
                 Result = z - Drawline;
                    drawHorLine(context3, "#FF0000", z, Result);
                }
                
                else if (PlayFlag == "2" && PlayType == "COMPLETE") { //Passing Play
                    Result = z - Drawline;

                    drawHorLine(context6, "#FFFF00", z, Result);
                }
                else if (PlayFlag == "2" && PlayType == "SACK") { //Sack Loss of Yards
                    Result = z - Drawline;

                    drawHorLine(context3, "#FFA500", z, Result);
                }
                
         
                else if (TotalYards < 0 && PlayFlag == "1") { //Loss of Rush Yards Check
                    Result = z - Drawline;

                    drawHorLine(context3, "#FFA500", z, Result);
                } 
                else if (PlayFlag == "1") { //Rush Play
                    Result = z - Drawline;

                    drawHorLine(context7, "#32CD32", z, Result);
                }
                else if (TotalYards > 0 && PlayFlag == "7") { // Defensive Penalty
                    Result = z - Drawline;

                    drawHorLine(context4, "#4169E1", z, Result);
                }

            }

            function DrawLinesHome() {
               // ClearValues();
                //ClearDrive();  
                Drawline = TotalYards * six;

                if (TotalYards > Drawline && PlayFlag == "7") { // Loss of Yardage
                    //Drawline = z + Drawline;
                    Result = z + Drawline;
                    drawHorLine(context3, "#FF0000", z, Result);
                }
                else if (PlayFlag == "1") { // Rush Play
                    Result = z + Drawline;

                    drawHorLine(context7, "#32CD32", z, Result);
                }
                 else if (PlayFlag == "2" && PlayType == "COMPLETE") { //Passing Play
                    Result = z + Drawline;

                    drawHorLine(context6, "#FFFF00", z, Result);
                }
                else if (PlayFlag == "2" && PlayType == "SACK") { //Sack Loss of Yards
                    Result = z + Drawline;

                    drawHorLine(context3, "#FFA500", z, Result);
                }
                else if (TotalYards < 0 && PlayFlag == "2" || PlayFlag == "1") { //Loss of yardage check
                    Result = z + Drawline;

                    drawHorLine(context3, "#FFA500", z, Result);
                } else if (TotalYards > 0 && PlayFlag == "7") { // Defensive Penalty
                    Result = z + Drawline;

                    drawHorLine(context4, "#4169E1", z, Result);
                }

            }

            function HomeSide() {

                a = fifty - FinalYard;
                b = fifty + a;
                c = threeh * b;
                z = c / fifty;
                drawLogo();
                //DrawLines();
                //x = z - sixty;

                lineColor = 'white';
                if (ResultingDown == 1 && PossID == TeamIDA) {

                    x = z + sixty;
                    //drawLogo();
                 //   DrawLinesAway();
                }
                else if (ResultingDown == 1 && PossID == TeamIDH) {

                    x = z - sixty;
                    //drawLogo();
                 //   DrawLinesHome();
                }

                lineColor = 'blue';
                if (PossID == TeamIDH) {
                    context0.clearRect(0, 0, canvas.width, canvas.height);
                    context1.clearRect(0, 0, canvas.width, canvas.height);

                    //  var fdm1 = FinalYard + ResultingToGo;
                    //  var fdm = fdm1 + fifty;
                    //  var fdm = fdm * sixty;

                    

                    context1.beginPath();
                    context1.moveTo(z, 250);
                    context1.lineTo(z, 5);
                    context1.lineWidth = 5;
                    context1.lineCap = "round";
                    //  set line color
                    context1.strokeStyle = "#F6092C";
                    context1.stroke();

                    //drawLogo();
                
                    DrawLinesHome();
					context0.beginPath();
                    context0.moveTo(x, 250);
                    context0.lineTo(x, 5);
                    context0.lineWidth = 5;
                    context0.lineCap = "round";
                    // set line color
                    context0.strokeStyle = "#FFFF00";
                    context0.stroke();
                } else if (PossID == TeamIDA) {
                    context0.clearRect(0, 0, canvas.width, canvas.height);
                    context1.clearRect(0, 0, canvas.width, canvas.height);

                    //  var fdm1 = FinalYard + ResultingToGo;
                    //  var fdm = fdm1 + fifty;
                    //  var fdm = fdm * sixty;

                    

                    context1.beginPath();
                    context1.moveTo(z, 250);
                    context1.lineTo(z, 5);
                    context1.lineWidth = 5;
                    context1.lineCap = "round";
                    //  set line color
                    context1.strokeStyle = "#F6092C";
                    context1.stroke();

                    //drawLogo();
                
                    DrawLinesAway();
					context0.beginPath();
                    context0.moveTo(x, 250);
                    context0.lineTo(x, 5);
                    context0.lineWidth = 5;
                    context0.lineCap = "round";
                    // set line color
                    context0.strokeStyle = "#FFFF00";
                    context0.stroke();
                }
                lineColor = 'black';
            }
            function AwaySide() {

                d = threeh * FinalYard;
                z = d / fifty;

                    drawLogo();

                //if( InitialDown != 1 && PossID == TeamIDH) {  
                //firstdownmarker2();
                //}
                lineColor = 'yellow';
                if (ResultingDown == 1 && PossID == TeamIDA) {
                    x = z + sixty;
                    //drawLogo();
                  //  DrawLinesAway();
                }
                else if (ResultingDown == 1 && PossID == TeamIDH) {
                    x = z - sixty;
                    //drawLogo();
                 //   DrawLinesHome();
                }

                lineColor = 'orange';
                if (PossID == TeamIDH) {
                    context0.clearRect(0, 0, canvas.width, canvas.height);
                    context1.clearRect(0, 0, canvas.width, canvas.height);

                    context0.beginPath();
                    context0.moveTo(x, 250);
                    context0.lineTo(x, 5);
                    context0.lineWidth = 5;
                    context0.lineCap = "round";
                    // set line color
                    context0.strokeStyle = "#FFFF00";
                    context0.stroke();

                    context1.beginPath();
                    context1.moveTo(z, 250);
                    context1.lineTo(z, 5);
                    context1.lineWidth = 5;
                    context1.lineCap = "round";
                    // set line color
                    context1.strokeStyle = "#F6092C";
                    context1.stroke();

                    //drawLogo();

                    DrawLinesHome();
                } else if (PossID == TeamIDA) {
                    context0.clearRect(0, 0, canvas.width, canvas.height);
                    context1.clearRect(0, 0, canvas.width, canvas.height);

                    context0.beginPath();
                    context0.moveTo(x, 250);
                    context0.lineTo(x, 5);
                    context0.lineWidth = 5;
                    context0.lineCap = "round";
                    // set line color
                    context0.strokeStyle = "#FFFF00";
                    context0.stroke();

                    context1.beginPath();
                    context1.moveTo(z, 250);
                    context1.lineTo(z, 5);
                    context1.lineWidth = 5;
                    context1.lineCap = "round";
                    // set line color
                    context1.strokeStyle = "#F6092C";
                    context1.stroke();

                    //drawLogo();

                    DrawLinesAway();
                }
                lineColor = 'black';
            }
            //if( InitialDown != 1 && PossID == TeamIDH) {  
            //firstdownmarker2();
            //}

        </script>
    </head>
<body>
        <table style="width: 800px; border: 0">
            <tr>
                <td>
                    <img alt="" src="http://dev.sportsnetwork.com/aspdata/nfl2/Field.fw.png" width="800" height="315" id="imgField">
                    <div id="awayendzone"><img alt="" src="http://dev.sportsnetwork.com/aspdata/nfl2/Blank.gif" width="60" height="252" id="imgawayEZ"></div>
                    <div id="apDiv1"><img alt="" src="http://dev.sportsnetwork.com/aspdata/nfl2/Blank.gif" width="60" height="252" id="imghomeEZ"></div>
                </td>
          </tr>
            <tr>
                <td class="formatcell" style="background-color: #000000;">
                    <p><textarea name="txtNarrative" cols="100" rows="3" class="textbox2 textbox" id="txtNarrative"></textarea></p>
                    <p>&nbsp;</p>
                </td>
            </tr>
            <tr>
                <td class="formatcell" style="background-color: #FFFFFF;"><img alt="" src="http://dev.sportsnetwork.com/aspdata/nfl2/088.png" width="47" height="43" id="away"><span id="TeamIDA">TeamIDA</span></td>
            </tr>
            <tr>
                <td class="formatcell" style="background-color: #FFFFFF;"><img alt="" src="http://dev.sportsnetwork.com/aspdata/nfl2/068.png" width="56" height="42" id="home"><span id="TeamIDH">TeamIDH</span></td>
            </tr>
        </table>
        <div id="apDiv2"><canvas id="myCanvas" width="600" height="255"></canvas></div>
        <div id="apDiv3"><canvas id="Lines" width="600" height="255"></canvas></div>
        <div id="apDiv4"><canvas id="Logos" width="600" height="255"></canvas></div>
        <div id="apDiv5"><canvas id="LossYards" width="600" height="255"></canvas></div>
        <div id="apDiv6"><canvas id="OFFP" width="600" height="255"></canvas></div>
        <div id="apDiv7"><canvas id="DEFP" width="600" height="255"></canvas></div>
        <div id="apDiv8"><canvas id="DrawPass" width="600" height="255"></canvas></div>
        <div id="apDiv9"><canvas id="DrawRush" width="600" height="255"></canvas></div>
        <div id="apDiv10"><canvas id="Box" width="600" height="255"></canvas></div>
<div id="apDiv11"><canvas id="Text" width="600" height="255"></canvas></div>
        <div id="tooltip"></div>
        <div id="overlay"></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:powerztom
ID: 39912683
All I can tell you is adding
<script>
var myVar=setInterval(function(){myTimer()},10000);

function myTimer()
{
showData();

}
  </script>
instead of setTimeOut updates display now I just need it to jump to last seq only if viewer tunes in I need the incrementing to happen like it does maybe I'm seeing a novice solution. But that's what I need.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39912685
Ooh, that brings back memories ;-)

I was trying another way but I'll have a look at it, let me see what I can come up with.
0
 

Author Comment

by:powerztom
ID: 39912697
You wrote alot of magical code for me
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39912712
I think it needs to be a bit different here because new Play nodes get added before the existing ones (under PreviousPlays) and the newest is always at the very top (before PreviousPlays). I'll try to figure it out...
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39912798
Have a look at this. I did use setTimeout rather than setInterval because it's not always calling the same function anymore...
    var xmlPath = '.' ;
    var xmlGameID ='18627';

    var gameData, playArray, playSeqPos = -1, currentSeq = -1;
        
    $(document).ready(function() {
        loadData();
    });

    function loadData() {
        $.ajax({
            type: "GET",
            url:  xmlPath + "/" + xmlGameID + ".xml",
            dataType: "xml",
            success: function(data) {
                gameData = $(data);
                playArray = gameData.find('Play');
                //playSeqPos = playArray.length;
                if (currentSeq == -1) { // first time
                    currentSeq = $(playArray[0]).attr('Seq');
                    playSeqPos = 1; // show current only
                } else {
                    playSeqPos = $(playArray).index(gameData.find('Play[Seq="' + currentSeq + '"]'));
                }
                showData();
            }
        });
    }

    function showData() {
        if (playSeqPos > 0) {
            playSeqPos--;
            play = $(playArray[playSeqPos]);
            currentSeq = play.attr('Seq');
            quarter = play.attr("Quarter");
            $('#p').html("Period " + quarter);
            $('Team', gameData).each(function(i, Team) {
                team = $(Team);
                id = team.attr("ID").toLowerCase();
                vh = team.attr('vh');
                sHomeOrAway = (vh == 'A') ? 'away':'home';

                $('#img' + sHomeOrAway).attr('src', 'http://sportsnetwork.com/gamecast/nhl/logos/' + id + '.png');
                $('#' + sHomeOrAway + 'teamscore').html(team.find('Linescore').attr('Score'));
            });
            
            playInfo = getPlayInfo(play);
            
            $('#teamID').attr('src', playInfo.teamImg);
            $('#playerID').attr('src', playInfo.playerImg);
            $('#playtype').html(playInfo.playType);
            $('#timeleft').html(playInfo.playTime);
            $('#txtgameplay').html(playInfo.playNarr);

            setTimeout(showData, 1000);
        } else {
            loadData();
        }
    }

Open in new window

0
 

Author Comment

by:powerztom
ID: 39912845
i'll try tonight on a live NHL Game. Is this the finished version?
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39912946
Yeah, should be. I tried it out by 'doctoring' a version of the xml file as I imagine it would look like a couple versions before the one you posted. Then after saving as that version again it picked up the rest of the data so it looks good to me.
0
 

Author Closing Comment

by:powerztom
ID: 39913045
Rob created a solution to my problem. I appreciate Him as a EE Guy Expert Exchange needs more guys like him. Happy with answer I got.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
HTML 5 video and audio or Flash 1 31
XSL - change date format 3 29
jQuery value within div undefined 3 22
Bootstrap 3 icons 3 15
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now