Solved

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

Posted on 2014-03-03
10
173 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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
 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

630 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