Solved

HTML 5 CANVAS HELP

Posted on 2014-04-25
3
285 Views
Last Modified: 2014-04-29
Hello I got a real tough one. And that is I need to use Canvas to cover a ice hockey rink and display shots and goals usings dots for goal flashing ring can be used I have a colorcheck for each nhl team in the league each ONGOAL has it's unique color as well as x and y coordinates. Each X and Y coordinates get multiplied by 1.75 I need to do the is for HIT ,PENL, GOAL and ONGOAL. iT THOUGHT IT WOULD BE EASIEST IF i JUST FOCUSED ON ongoal. And to add a level of difficulty I have to add gametext as a tooltip for each ONGOAL i DRAW WITH THE CANVAS. I have a web page that progresses from start to finish I have a page that has team colors displayed and canvas positioned over ice rink
here is progress gameplay that starts and stops if Anyone can combine gameplay with drawing dots for shots on goal with tooltip
gameplay
teams colors

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="author" content="Tom Powers">
	<title>Current NHL Play</title>
    <style type="text/css">
    #apDiv1 {
	position: absolute;
	width: 370px;
	height: 164px;
	z-index: 10;
	left: 17px;
	top: 39px;
}
</style>
	<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">
 var xmlPath = '.' //'/xml/nhl/scores/real';
 var xmlGameID ='19059';
 var gameData, playArray, playSeqPos = -1;
var away_id, home_id, myVar;
 $(document).ready(function() {
  $.ajax({
   type: "GET",
   url:  xmlPath + "/" + xmlGameID + ".xml",
   dataType: "xml",
   success: function(data) {
    gameData = $(data);
    playArray = gameData.find('Play');
    playSeqPos = playArray.length;
	 var Play = d.find('Play').first();
	away_id = Play.find('Team[vh="A"]').attr('ID');
			home_id = Play.find('Team[vh="H"]').attr('ID');

            Play.find('Team').each(function(i,Team){
                var team = $(Team);
                //var id = team.attr("ID").toLowerCase();
                var vh = team.attr('vh'); // A or H...
                var sHomeOrAway = vh == 'H' ? 'home' : 'away';
				Colorcheck(sHomeOrAway, team.attr('ID'));
                $('#txt' + sHomeOrAway).html(team.attr('name'));
            });
			 d.find('Team').each(function (i, Team) {
                           
							 if ($(Team).attr('vh') == "H") {
								  var team = $(Team);
                            var id = team.attr("ID").toLowerCase();
                                
                                $('#imghome').attr('src', 'http://powerzsoftware.com/tsn/Logos/' + id + ".png");
                              drawLogo();
                            }

                        });
			setTimeout(showData,20000);
  
   }
  });
 });
 function drawLogo() {
               // context0.clearRect(0, 0, canvas.width, canvas.height);
canvas = document.getElementById('myCanvas');
                context1 = canvas.getContext('2d');
                var imgRedName = "imghome"; 
                var imgRed = document.getElementById(imgRedName);
                var imgRedX = 150;
                var imgRedY = 50;
                context1.drawImage(imgRed, imgRedX, imgRedY, imgRed.width, imgRed.height);
				
            }
 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/nhl/' + 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) {
   //setInterval(showData, 1000);
  }
 }
function getPos(pn) {
    var ret = {};
    ret.x = pn.attr('X') * 1.75 + cnv.width/2;
    ret.y = pn.attr('Y') * 1.75 + cnv.height/2;
    return ret;
}
function getOffsetPos(o) {
    var ret = {x: o.offsetLeft, y: o.offsetTop};
    if (o.offsetParent) {
        var p = getOffsetPos(o.offsetParent);
        ret.x += p.x;
        ret.y += p.y;
    }
    return ret;
}

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

    /*ctx.beginPath();
    ctx.rect(x-5, y-5, 10, 10);
    ctx.fillStyle = 'rgba(80,80,80,1)';
    ctx.fill();*/
}
function getText(pn, sn) {
    return 'Q' + pn.attr('Quarter') + ' time left: ' + pn.attr('TimeLeft') + ', penalty ' + sn.attr('Duration') + ' ' + sn.attr('PONFirstname') + ' ' + sn.attr('PONLastname') + ' (' + sn.attr('Description') + ')';
}
	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'}
		};
            ctx.clearRect(0, 0, cnv.width, cnv.height);
			if (play.attr('PlayType') == 'ONGOAL') {
			subNode = play.find('Penalty');
                    var playPos = getPos(subNode);

                    // save position in array
                    arrLines[arrLines.length] = {x: playPos.x-10, y: playPos.y-10, w: 20, h: 20, t: getText(play, subNode)};

                    ctx.beginPath();
                    
                            ctx.rect(playPos.x-10, playPos.y-10, 20, 20);
                            ctx.fillStyle = 'rgba(0,0,123,.6)';
                       
                        ctx.fill();
                   
                        ctx.stroke();
                    }
                }
                if (subNode) {
                }
            });
            setTimeout(showData, 1000);
        },
        error: function() {
            setTimeout(showData, 3000);
        }
    });
}
			
			}
		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/nhl/' + 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')
		};
	}
	function Colorcheck(sHomeOrAway, teamid) {

var lineColour = -1, fillColour = -1;

if (teamid == "145") { //Anaheim Ducks
		lineColour = 0xFFCC99;
		fillColour = 0x91764C;
	} else if (teamid == "147") { //Atlanta Thrashers
		lineColour = 0x0000FF;
		fillColour = 0x900028;
	} else if (teamid == "121") { //Boston Bruins
		lineColour = 0x000000;
		fillColour = 0xF9B426;
	} else if (teamid == "122") { //Buffalo Sabres
		lineColour = 0x000099;
		fillColour = 0x0E1F44;
	} else if (teamid == "123") { //Calgary Flames
		lineColour = 0x000000;
		if ((away_id == "129") || (home_id == "129")) {
			fillColour = 0xFF9933;
		} else {
			fillColour = 0xE13A3E;
		}
	} else if (teamid == "127") { //Carolina Hurricanes
		lineColour = 0x000000;
		fillColour = 0xD72A32;
	} else if (teamid == "124") { //Chicago Blackhawks
		lineColour = 0x000000;
		fillColour = 0xCC0000;
	} else if (teamid == "136") { //Colorado Avalanche
		lineColour = 0xFF0000;
		fillColour = 0x802939;
	} else if (teamid == "148") { //Columbus Blue Jackets
		lineColour = 0x003366; 
		if ( (away_id == "139") || (home_id == "139") || (away_id == "142") || (home_id == "142") ) {
			fillColour = 0xFF0033;
		} else {
			fillColour = 0x253E67;
		}
	} else if (teamid == "130") { //Dallas Stars
		lineColour = 0x009900;
		fillColour = 0x0A4A3D;
	} else if (teamid == "125") { //Detroit Red Wings
		lineColour = 0xFF0000;
		fillColour = 0xD5252D;
	} else if (teamid == "126") { //Edmonton Oilers
		lineColour = 0x000099;
		fillColour = 0xc5892d;
	} else if (teamid == "146") { //Florida Panthers
		lineColour = 0x000099;
		fillColour = 0xB67b11;
	} else if (teamid == "128") { //Los Angeles Kings
		lineColour = 0x0000FF;
		fillColour = 0x233289;
	} else if (teamid == "149") { //Minnesota Wild
		lineColour = 0x009900;
		fillColour = 0x004033;
	} else if (teamid == "129") { //Motreal Canadiens
		lineColour = 0xFF0000;
		fillColour = 0xB62630;
	} else if (teamid == "150") { //Nashville Predators
		lineColour = 0x000099;
		fillColour = 0x143048;
	} else if (teamid == "131") { //New Jersey Devils
		lineColour = 0xFF0000;
		fillColour = 0xD82D35;
	} else if (teamid == "133") { //New York Rangers
		lineColour = 0x0000FF;
		fillColour = 0x055B8D;
	} else if (teamid == "132") { //New York Islanders
		lineColour = 0x0000FF;
		if ((away_id == "128") || (home_id == "128")) {
			fillColour = 0xFF9933;
		} else {
			fillColour = 0x002843;
		}
	} else if (teamid == "143") { //Ottawa Senators
		lineColour = 0xFF0000;
		if ( (away_id == "146") || (home_id == "146")) {
			fillColour = 0xFF0033;
		} else {
			fillColour = 0xD89D00;
		}

	} else if (teamid == "134") { //Philadelphia Flyers
		lineColour = 0xFF6600;
		if ((away_id == "131") || (home_id == "131")) {
			fillColour = 0x000000;
		} else {
			fillColour = 0xF9773B;
		}
	} else if (teamid == "141") { //Phoenix Coyotes
		lineColour = 0xFF0000;
		if ((away_id == "125") || (home_id == "125")) {
			fillColour = 0XF4E3C7;
		} else {
		fillColour = 0xA51818;
		}
	} else if (teamid == "135") { //Pittsburgh Penguins
		lineColour = 0xFFCC00;
		fillColour = 0x000000;
	} else if (teamid == "142") { //San Jose Sharks
		lineColour = 0x000099;
		fillColour = 0x07515F;
	} else if (teamid == "137") { //St. Louis Blues
		lineColour = 0x3366FF;
		fillColour = 0x004C7D;
	} else if (teamid == "144") { //Tampa Bay Lightning
		lineColour = 0x000099;
		fillColour = 0x003D7D;
	} else if (teamid == "138") { //Toronto Maple Leafs
		lineColour = 0x3366FF;
		fillColour = 0x003559;
	} else if (teamid == "139") { //Vancouver Canucks
		lineColour = 0x000099;
		fillColour = 0x002B3E;
	} else if (teamid == "140") { //Washington Capitals
		lineColour = 0x0000FF;
		if ((away_id == "138") || (home_id == "138")) {
			fillColour = 0xFF0000;
		} else {
			fillColour = 0xD93600;
		}
	} else {
		//do nothing
	}

	if (lineColour == -1 || fillColour == -1) {
		alert('color error!');
	} else {
		$('#' + sHomeOrAway + 'color').css({'background-color': hex2str(fillColour), 'border': 'solid 3px ' + hex2str(lineColour)});
	}
	function hex2str(h) {
	return '#' + ('000000' + h.toString(16)).substr(-6);
}
}
	</script>

	
	
</head>
<body>
<div id="apDiv1" style="left: 11px; width: 348px; top: 29px; height: 165px">
    <canvas id="myCanvas" width="370" height="163" style="border:1px solid #000000;"></canvas>
  </div>
	<table width="100%" border="0">
	  <tr>
	    <td width="24%" style="height: 21px" id="awaycolor"><div id="awaycolor"></div></td>
	    <td width="25%" style="height: 21px"><div id="txtaway">
          <div align="left" id="awayteam">awayteam</div>
        </div></td>
	    <td width="25%" style="height: 21px"><div id="txthome">
          <div align="right" id="hometeam">hometeam</div></td>
	    <td width="26%" style="height: 21px"><div id="homecolor"></div></td>
      </tr>
	  <tr>
	    <td colspan="4"><img src="Images/Rink.png" width="354" height="163" alt=""/>
            <div style="z-index: 20; left: 4px; width: 354px; position: absolute; top: 27px;
                height: 163px">
            </div>
        </td>
      </tr>
	  <tr>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
      </tr>
</table>
	<table width="100%" border="0">
		<tr>
			<td width="24%" class="midcentre" style="text-align: center"><img src="http://sportsnetwork.com/gamecast/nhl/nhl/130.png" id="teamID" width="100%"></td>
			<td width="25%" class="midcenter"><img src="images.sportsnetwork.com/nhl/attherink/players/2867.jpg" id="playerID" width="100%"></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">&nbsp;</p></td>
		</tr>
	</table>

	<table width="100%" border="0">
		<tr>
			<td width="24%"><p class="midcenter"><img src="http://sportsnetwork.com/gamecast/nhl/nhl/400.png" width="100%" 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" width="100%"></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>
<script>
var myVar=setInterval(function(){myTimer()},10000);

function myTimer()
{
showData();

}
  </script>
</body>
</html>

Open in new window

I need to incorporate Colorcheck with fill stroke. Holy Help

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#apDiv1 {
              position: absolute;
              left: 0px;
              top:45px;
              width: 370px;
              height: 164px; /* was 260 */
              z-index: 100;
              /*overflow: visible;*/
            }
</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 myVar;
var xmlPath = '.' //'/xml/nhl/scores/real';
var xmlGameID = '19059';
//var teamid = "", lineColour, fillColour;
var away_id, home_id;
$(document).ready(function(){
    $.ajax({
        type: "GET",
        url:  xmlPath+"/"+xmlGameID+ ".xml",
        dataType: "xml",
        success: function(data) {
            var d = $(data);
            var Play = d.find('Play').first();
            ctx.clearRect(0, 0, cnv.width, cnv.height);
			if (play.attr('PlayType') == 'ONGOAL') {
		//	This is where dot gets painted
			
			}
			// needed separately, before each() loop
			away_id = Play.find('Team[vh="A"]').attr('ID');
			home_id = Play.find('Team[vh="H"]').attr('ID');

            Play.find('Team').each(function(i,Team){
                var team = $(Team);
                //var id = team.attr("ID").toLowerCase();
                var vh = team.attr('vh'); // A or H...
                var sHomeOrAway = vh == 'H' ? 'home' : 'away';
				Colorcheck(sHomeOrAway, team.attr('ID'));
                $('#txt' + sHomeOrAway).html(team.attr('name'));
			   // $('#txt' + sHomeOrAway).find('div').html(team.attr('name'));
            });

           // newestTR = $('#scrolltable tr:first');
          //  newTR = newestTR.html();

           // checkPreviousPlays(d, true);
			//	canvas = document.getElementById('myCanvas');
              //  context1 = canvas.getContext('2d');
			//	context1.globalAlpha = 2.8;
				
				
           // myVar = setInterval(loadData, 2000);

        }
    });
});
function getPos(pn) {
    var ret = {};
    ret.x = pn.attr('X') * 1.75 + cnv.width/2;
    ret.y = pn.attr('Y') * 1.75 + cnv.height/2;
    return ret;
}

function getText(pn, sn) {
    return 'Q' + pn.attr('Quarter') + ' time left: ' + pn.attr('TimeLeft') + ', penalty ' + sn.attr('Duration') + ' ' + sn.attr('PONFirstname') + ' ' + sn.attr('PONLastname') + ' (' + sn.attr('Description') + ')';
}
function Colorcheck(sHomeOrAway, teamid) {

var lineColour = -1, fillColour = -1;

if (teamid == "145") { //Anaheim Ducks
		lineColour = 0xFFCC99;
		fillColour = 0x91764C;
	} else if (teamid == "147") { //Atlanta Thrashers
		lineColour = 0x0000FF;
		fillColour = 0x900028;
	} else if (teamid == "121") { //Boston Bruins
		lineColour = 0x000000;
		fillColour = 0xF9B426;
	} else if (teamid == "122") { //Buffalo Sabres
		lineColour = 0x000099;
		fillColour = 0x0E1F44;
	} else if (teamid == "123") { //Calgary Flames
		lineColour = 0x000000;
		if ((away_id == "129") || (home_id == "129")) {
			fillColour = 0xFF9933;
		} else {
			fillColour = 0xE13A3E;
		}
	} else if (teamid == "127") { //Carolina Hurricanes
		lineColour = 0x000000;
		fillColour = 0xD72A32;
	} else if (teamid == "124") { //Chicago Blackhawks
		lineColour = 0x000000;
		fillColour = 0xCC0000;
	} else if (teamid == "136") { //Colorado Avalanche
		lineColour = 0xFF0000;
		fillColour = 0x802939;
	} else if (teamid == "148") { //Columbus Blue Jackets
		lineColour = 0x003366; 
		if ( (away_id == "139") || (home_id == "139") || (away_id == "142") || (home_id == "142") ) {
			fillColour = 0xFF0033;
		} else {
			fillColour = 0x253E67;
		}
	} else if (teamid == "130") { //Dallas Stars
		lineColour = 0x009900;
		fillColour = 0x0A4A3D;
	} else if (teamid == "125") { //Detroit Red Wings
		lineColour = 0xFF0000;
		fillColour = 0xD5252D;
	} else if (teamid == "126") { //Edmonton Oilers
		lineColour = 0x000099;
		fillColour = 0xc5892d;
	} else if (teamid == "146") { //Florida Panthers
		lineColour = 0x000099;
		fillColour = 0xB67b11;
	} else if (teamid == "128") { //Los Angeles Kings
		lineColour = 0x0000FF;
		fillColour = 0x233289;
	} else if (teamid == "149") { //Minnesota Wild
		lineColour = 0x009900;
		fillColour = 0x004033;
	} else if (teamid == "129") { //Motreal Canadiens
		lineColour = 0xFF0000;
		fillColour = 0xB62630;
	} else if (teamid == "150") { //Nashville Predators
		lineColour = 0x000099;
		fillColour = 0x143048;
	} else if (teamid == "131") { //New Jersey Devils
		lineColour = 0xFF0000;
		fillColour = 0xD82D35;
	} else if (teamid == "133") { //New York Rangers
		lineColour = 0x0000FF;
		fillColour = 0x055B8D;
	} else if (teamid == "132") { //New York Islanders
		lineColour = 0x0000FF;
		if ((away_id == "128") || (home_id == "128")) {
			fillColour = 0xFF9933;
		} else {
			fillColour = 0x002843;
		}
	} else if (teamid == "143") { //Ottawa Senators
		lineColour = 0xFF0000;
		if ( (away_id == "146") || (home_id == "146")) {
			fillColour = 0xFF0033;
		} else {
			fillColour = 0xD89D00;
		}

	} else if (teamid == "134") { //Philadelphia Flyers
		lineColour = 0xFF6600;
		if ((away_id == "131") || (home_id == "131")) {
			fillColour = 0x000000;
		} else {
			fillColour = 0x000000;
		}
	} else if (teamid == "141") { //Phoenix Coyotes
		lineColour = 0xFF0000;
		if ((away_id == "125") || (home_id == "125")) {
			fillColour = 0XF4E3C7;
		} else {
		fillColour = 0xA51818;
		}
	} else if (teamid == "135") { //Pittsburgh Penguins
		lineColour = 0xFFCC00;
		fillColour = 0x000000;
	} else if (teamid == "142") { //San Jose Sharks
		lineColour = 0x000099;
		fillColour = 0x07515F;
	} else if (teamid == "137") { //St. Louis Blues
		lineColour = 0x3366FF;
		fillColour = 0x004C7D;
	} else if (teamid == "144") { //Tampa Bay Lightning
		lineColour = 0x000099;
		fillColour = 0x003D7D;
	} else if (teamid == "138") { //Toronto Maple Leafs
		lineColour = 0x3366FF;
		fillColour = 0x003559;
	} else if (teamid == "139") { //Vancouver Canucks
		lineColour = 0x000099;
		fillColour = 0x002B3E;
	} else if (teamid == "140") { //Washington Capitals
		lineColour = 0x0000FF;
		if ((away_id == "138") || (home_id == "138")) {
			fillColour = 0xFF0000;
		} else {
			fillColour = 0xD93600;
		}
	} else {
		//do nothing
	}

	if (lineColour == -1 || fillColour == -1) {
		alert('color error!');
	} else {
		$('#' + sHomeOrAway + 'color').css({'background-color': hex2str(fillColour), 'border': 'solid 3px ' + hex2str(lineColour)});
	}
}

function hex2str(h) {
	return '#' + ('000000' + h.toString(16)).substr(-6);
}
</SCRIPT>

</head>

<body>
<table width="400" border="0">
  <tr>
    <td width="90" style="height: 14px"><div id="awaycolor">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
    <td width="104" style="height: 14px"><div id="txtaway">
      
      <p>&nbsp;</p>
    </div></td>
    <td width="95" style="height: 14px"><div id="txthome">
      
      <p>&nbsp;</p>
    </div></td>
    <td width="93" style="height: 14px"><div id="homecolor">
      <p>&nbsp;</p>
      <p id="homecolor">&nbsp;</p>
    </div></td>
  </tr>
</table>
<table width="400" border="0">
<tr></tr>
<tr>
  <td style="height: 168px"> <img src="HTTP://SPORTSNETWORK.COM/GAMECAST/NHL/Images/Rink.png" width="354" height="163" alt=""/></td>
  <div id="apDiv1" style="left: 0px; width: 370px; top: 102px; height: 165px">
    <canvas id="myCanvas" width="370" height="163" style="border:1px solid #000000;"></canvas>
  </div>
  
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Open in new window

Holy Help
19059.XML
HOCKEYRINK.HTML
RINKDOTS.HTML
0
Comment
Question by:powerztom
  • 2
3 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40028174
It's not totally clear to me what needs to be done, even though some of it is not new. I think I have some parts you can use, give it a go and let me know if it's close or not.

The javascript code:
<script type="text/javascript">
var myVar;
var xmlPath = '.'; //'/xml/nhl/scores/real';
var xmlGameID = '19059';
var away_id, home_id;

var cnv, ctx, globalColours = {}, globalTooltips = [];

$(document).ready(function(){

    cnv = document.getElementById('myCanvas');
    ctx = cnv.getContext('2d');

    $.ajax({
        type: "GET",
        url:  xmlPath+"/"+xmlGameID+ ".xml",
        dataType: "xml",
        success: function(data) {
            var d = $(data);
            var Play = d.find('Play').first();
            ctx.clearRect(0, 0, cnv.width, cnv.height);
            // needed separately, before each() loop
            away_id = Play.find('Team[vh="A"]').attr('ID');
            home_id = Play.find('Team[vh="H"]').attr('ID');

            Play.find('Team').each(function(i,Team){
                var team = $(Team);
                //var id = team.attr("ID").toLowerCase();
                var vh = team.attr('vh'); // A or H...
                var sHomeOrAway = vh == 'H' ? 'home' : 'away';
                Colorcheck(sHomeOrAway, team.attr('ID'));
                $('#txt' + sHomeOrAway).html(team.attr('name'));
               // $('#txt' + sHomeOrAway).find('div').html(team.attr('name'));
            });

            showGoals(d);
        }
    });

    var checkPos = function(e){
        var offs = $(this).offset();
        var py = e.clientY - offs.top;
        var px = e.clientX - offs.left;
        for (var t = 0; t < globalTooltips.length; t++) {
            var tt = globalTooltips[t];
            if (Math.abs(tt.x - px) <= 5 && Math.abs(tt.y - py) <= 5) {
                $('#tooltip').css( { 'left': (offs.left + tt.x + 15) + 'px', 'top': (offs.top + tt.y - 10) + 'px' } ).html(tt.message).show();
                break;
            }
        }
        if (t == globalTooltips.length) {
            $('#tooltip').hide();
        }
    };

    $('#myCanvas').hover(checkPos, function(){
        $('#tooltip').hide();
    }).on('mousemove', checkPos);
});

function showGoals(d) {
    d.find('Play').each(function(i, playNode){

        var play = $(playNode);

        if (play.attr('PlayType') == 'ONGOAL') {
            var subNode = play.children('OnGoal');
            var x = subNode.attr('X') * 1.75 + cnv.width/2;
            var y = subNode.attr('Y') * 1.75 + cnv.height/2;
            ctx.beginPath();
            ctx.arc(x, y, 10, 10, 0, 2 * Math.PI, true);
            ctx.closePath();
            var teamid = subNode.attr('ShootTeamID');
            ctx.fillStyle = globalColours['fill_' + teamid];
            ctx.fill();
            ctx.lineWidth = 3;
            ctx.strokeStyle = globalColours['line_' + teamid];
            ctx.stroke();

            var newTooltip = {};
            newTooltip.x = x;
            newTooltip.y = y;
            newTooltip.message = play.children('narrative').attr('text');
            globalTooltips[globalTooltips.length] = newTooltip;
        }
    });
}

function Colorcheck(sHomeOrAway, teamid) {

var lineColour = -1, fillColour = -1;

if (teamid == "145") { //Anaheim Ducks
        lineColour = 0xFFCC99;
        fillColour = 0x91764C;
    } else if (teamid == "147") { //Atlanta Thrashers
        lineColour = 0x0000FF;
        fillColour = 0x900028;
    } else if (teamid == "121") { //Boston Bruins
        lineColour = 0x000000;
        fillColour = 0xF9B426;
    } else if (teamid == "122") { //Buffalo Sabres
        lineColour = 0x000099;
        fillColour = 0x0E1F44;
    } else if (teamid == "123") { //Calgary Flames
        lineColour = 0x000000;
        if ((away_id == "129") || (home_id == "129")) {
            fillColour = 0xFF9933;
        } else {
            fillColour = 0xE13A3E;
        }
    } else if (teamid == "127") { //Carolina Hurricanes
        lineColour = 0x000000;
        fillColour = 0xD72A32;
    } else if (teamid == "124") { //Chicago Blackhawks
        lineColour = 0x000000;
        fillColour = 0xCC0000;
    } else if (teamid == "136") { //Colorado Avalanche
        lineColour = 0xFF0000;
        fillColour = 0x802939;
    } else if (teamid == "148") { //Columbus Blue Jackets
        lineColour = 0x003366; 
        if ( (away_id == "139") || (home_id == "139") || (away_id == "142") || (home_id == "142") ) {
            fillColour = 0xFF0033;
        } else {
            fillColour = 0x253E67;
        }
    } else if (teamid == "130") { //Dallas Stars
        lineColour = 0x009900;
        fillColour = 0x0A4A3D;
    } else if (teamid == "125") { //Detroit Red Wings
        lineColour = 0xFF0000;
        fillColour = 0xD5252D;
    } else if (teamid == "126") { //Edmonton Oilers
        lineColour = 0x000099;
        fillColour = 0xc5892d;
    } else if (teamid == "146") { //Florida Panthers
        lineColour = 0x000099;
        fillColour = 0xB67b11;
    } else if (teamid == "128") { //Los Angeles Kings
        lineColour = 0x0000FF;
        fillColour = 0x233289;
    } else if (teamid == "149") { //Minnesota Wild
        lineColour = 0x009900;
        fillColour = 0x004033;
    } else if (teamid == "129") { //Motreal Canadiens
        lineColour = 0xFF0000;
        fillColour = 0xB62630;
    } else if (teamid == "150") { //Nashville Predators
        lineColour = 0x000099;
        fillColour = 0x143048;
    } else if (teamid == "131") { //New Jersey Devils
        lineColour = 0xFF0000;
        fillColour = 0xD82D35;
    } else if (teamid == "133") { //New York Rangers
        lineColour = 0x0000FF;
        fillColour = 0x055B8D;
    } else if (teamid == "132") { //New York Islanders
        lineColour = 0x0000FF;
        if ((away_id == "128") || (home_id == "128")) {
            fillColour = 0xFF9933;
        } else {
            fillColour = 0x002843;
        }
    } else if (teamid == "143") { //Ottawa Senators
        lineColour = 0xFF0000;
        if ( (away_id == "146") || (home_id == "146")) {
            fillColour = 0xFF0033;
        } else {
            fillColour = 0xD89D00;
        }

    } else if (teamid == "134") { //Philadelphia Flyers
        lineColour = 0xFF6600;
        if ((away_id == "131") || (home_id == "131")) {
            fillColour = 0x000000;
        } else {
            fillColour = 0x000000;
        }
    } else if (teamid == "141") { //Phoenix Coyotes
        lineColour = 0xFF0000;
        if ((away_id == "125") || (home_id == "125")) {
            fillColour = 0XF4E3C7;
        } else {
        fillColour = 0xA51818;
        }
    } else if (teamid == "135") { //Pittsburgh Penguins
        lineColour = 0xFFCC00;
        fillColour = 0x000000;
    } else if (teamid == "142") { //San Jose Sharks
        lineColour = 0x000099;
        fillColour = 0x07515F;
    } else if (teamid == "137") { //St. Louis Blues
        lineColour = 0x3366FF;
        fillColour = 0x004C7D;
    } else if (teamid == "144") { //Tampa Bay Lightning
        lineColour = 0x000099;
        fillColour = 0x003D7D;
    } else if (teamid == "138") { //Toronto Maple Leafs
        lineColour = 0x3366FF;
        fillColour = 0x003559;
    } else if (teamid == "139") { //Vancouver Canucks
        lineColour = 0x000099;
        fillColour = 0x002B3E;
    } else if (teamid == "140") { //Washington Capitals
        lineColour = 0x0000FF;
        if ((away_id == "138") || (home_id == "138")) {
            fillColour = 0xFF0000;
        } else {
            fillColour = 0xD93600;
        }
    } else {
        //do nothing
    }

    if (lineColour == -1 || fillColour == -1) {
        alert('color error!');
    } else {
        $('#' + sHomeOrAway + 'color').css({'background-color': hex2str(fillColour), 'border': 'solid 3px ' + hex2str(lineColour)});

        globalColours['line_' + teamid] = hex2str(lineColour);
        globalColours['fill_' + teamid] = hex2str(fillColour);
    }
}

function hex2str(h) {
    return '#' + ('000000' + h.toString(16)).substr(-6);
}
</script>

Open in new window

Note that I removed some functions and added new ones, I also assumed for now it would be ok to draw all circles at once, you may need a timer function again but let's call that step 2 ;-)

I added a tooltip div at the end of the html:
<div id="tooltip"></div>

Open in new window

with the following css in your existing <style> block:
#tooltip {
    position: absolute;
    background-color: yellow;
    border: 1px solid red;
    opacity: 0.8;
    z-index: 999;
}

Open in new window


For me, it looks like this:
capture
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40028224
some issues and remarks:
- the canvas is not positioned very accurately over the rink picture;
- I added some global var's to remember colors and tooltip info;
- be aware that the 1.75 should actually be calculated from the canvas height and width (and/or rink image height/width);
- play with circle radius (now 10) and lineWidth to adjust the appearance of the spots;
0
 

Author Closing Comment

by:powerztom
ID: 40029467
Rob,

Came in and got me started with the work he did. He is very impressive it's like there is nothing that he can't solve. When and I'm serious about this takes on one of my problems I know I'm gonna get a workable solution that me and my brain can't create. Much Thanks. This gives me something to play and start with. I may post a question later but not after trying myself.Thanks Again A+
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 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

21 Experts available now in Live!

Get 1:1 Help Now