gridinfo/gridinfo.html - prjxray - Git at Google

 <html><head>
 <title>Project X-Ray Grid Viewer</title>

 <!-- https://github.com/ariutta/svg-pan-zoom -->
 <script src="svg-pan-zoom.js"></script>

 <script><!--

 var device = "xc7a50tfgg484-1";

 var database;
 var cfgcols = { };
 var numrows = 1;
 var numcols = 1;
 var marker;

 var hide_props = [
 	"ALTERNATE_SITE_TYPES",
 	"CLASS",
 	"FIRST_SITE_ID",
 	"GRID_POINT_X",
 	"GRID_POINT_Y",
 	"INDEX",
 	"IS_BONDED",
 	"IS_CENTER_TILE",
 	"IS_CLOCK_BUFFER",
 	"IS_CLOCK_PAD",
 	"IS_DCM_TILE",
 	"IS_GLOBAL_CLOCK_BUFFER",
 	"IS_GLOBAL_CLOCK_PAD",
 	"IS_GT_CLOCK_SITE_TILE",
 	"IS_GT_SITE_TILE",
 	"IS_PAD",
 	"IS_REGIONAL_CLOCK_BUFFER",
 	"IS_REGIONAL_CLOCK_PAD",
 	"IS_RESERVED",
 	"IS_TEST",
 	"IS_USED",
 	"MANUAL_ROUTING",
 	"PROHIBIT",
 	"PROHIBIT_FROM_PERSIST",
 	"SITE_PIPS",
 	"SLR_REGION_ID",
 	"TILE_PATTERN_IDX",
 	"TILE_TYPE_INDEX",
 	"TILE_X",
 	"TILE_Y",
 	"TYPE"
 ];

 function getJSON(url, callback) {
 	var xhr = new XMLHttpRequest();
 	xhr.open('GET', url, true);
 	xhr.responseType = 'json';
 	xhr.onload = function() {
 		var status = xhr.status;
 		if (status == 200) {
 			console.log("Finished downloading JSON file " + url + ".");
 			callback(xhr.response);
 		} else {
 			console.log("Failed to download JSON file " + url + ". Status: " + status);
 			window.alert("Failed to download JSON file " + url + ". Status: " + status);
 		}
 	};
 	console.log("Downloading JSON file " + url + ".");
 	xhr.send();
 };

 function getBaseURL() {
 	var loc = window.location.toString().split("/");
 	loc[loc.length-1] = "";
 	return loc.join("/");
 }

 function tileInfo(tile) {
 	var props = database["tiles"][tile]["props"];
 	var row = +props["ROW"];
 	var col = +props["COLUMN"];

 	var html_text = "<h3>Tile: " + tile + "</h3>\n";

 	html_text += "<table>\n";
 	for (var p in props) {
 		if (hide_props.indexOf(p) >= 0) continue;
 		html_text += "<tr><td>" + p + "</td><td>" + props[p] + "</td></tr>\n";
 	}
 	html_text += "</table>\n";

 	if ("cfgcol" in database["tiles"][tile]) {
 		props = database["tiles"][tile]["cfgcol"]

 		html_text += "<h3>Configuration Column</h3>\n";
 		html_text += "<table>\n";
 		for (var p in props) {
 			if (hide_props.indexOf(p) >= 0) continue;
 			html_text += "<tr><td>" + p + "</td><td>" + props[p] + "</td></tr>\n";
 		}
 		html_text += "</table>\n";
 	}

 	for (var site_idx in database["tiles"][tile]["sites"]) {
 		var site = database["tiles"][tile]["sites"][site_idx];
 		props = database["sites"][site]["props"];

 		html_text += "<h3>Site: " + tile + "</h3>\n";

 		if ("bit" in database["sites"][site])
 			html_text += '<div style="margin-bottom: 1em">' + database["sites"][site]["bit"] + "</div>\n";

 		html_text += "<table>\n";
 		for (var p in props) {
 			if (hide_props.indexOf(p) >= 0) continue;
 			html_text += "<tr><td>" + p + "</td><td>" + props[p] + "</td></tr>\n";
 		}
 		html_text += "</table>\n";
 	}

 	var infos = document.getElementById("infos");
 	infos.innerHTML = html_text;

 	marker.setAttribute("cx", 5 + 10 * col);
 	marker.setAttribute("cy", 5 + 10 * row);
 	marker.setAttribute("style", "fill: none; stroke: Black;");
 }

 function createSvgTile(tile) {
 	var props = database["tiles"][tile]["props"];
 	var row = +props["ROW"];
 	var col = +props["COLUMN"];

 	if (row >= numrows) numrows = row + 1;
 	if (col >= numcols) numcols = col + 1;

 	var color = "Gray";

 	if (props["TYPE"].startsWith("CLBLM_")) color = "Khaki";
 	if (props["TYPE"].startsWith("CLBLL_")) color = "Gold";
 	if (props["TYPE"].startsWith("BRAM_")) color = "Red";
 	if (props["TYPE"].startsWith("DSP_")) color = "Tomato";
 	if (props["TYPE"].startsWith("PCIE_")) color = "Green";

 	if (props["TYPE"] == "INT_L") color = "SteelBlue";
 	if (props["TYPE"] == "INT_R") color = "SteelBlue";
 	if (props["TYPE"].startsWith("INT_INTERFACE_")) color = "RoyalBlue";
 	if (props["TYPE"].startsWith("BRAM_INT_INTERFACE_")) color = "RoyalBlue";
 	if (props["TYPE"].startsWith("INT_FEEDTHRU_")) color = "SkyBlue";

 	if (props["TYPE"] == "VBRK") color = "LightCyan";
 	if (props["TYPE"] == "VFRAME") color = "LightCyan";
 	if (props["TYPE"].search("_TERM_INT") >= 0) color = "LightCyan";

 	if (props["TYPE"] == "NULL") color = "Lightgray";

 	rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 	rect.setAttribute("id", "tile_" + tile);
 	rect.setAttribute("x", 10 * col + 1);
 	rect.setAttribute("y", 10 * row + 1);
 	rect.setAttribute("width", 8);
 	rect.setAttribute("height", 8);
 	rect.setAttribute("style", "fill: " + color);
 	rect.setAttribute("onmousedown", "tileInfo('" + tile + "')");

 	var gridview = document.getElementById("gridview");
 	gridview.appendChild(rect);

 	if ("cfgcol" in database["tiles"][tile]) {
 		var frameid = database["tiles"][tile]["cfgcol"]["BASE_FRAMEID"];
 		if (!(frameid in cfgcols)) {
 			cfgcols[frameid] = {
 				"first_row": row,
 				"last_row": row,
 				"first_col": col,
 				"last_col": col
 			};
 		}

 		if (row < cfgcols[frameid].first_row) cfgcols[frameid].first_row = row;
 		if (row > cfgcols[frameid].last_row) cfgcols[frameid].last_row = row;

 		if (col < cfgcols[frameid].first_col) cfgcols[frameid].first_col = col;
 		if (col > cfgcols[frameid].last_col) cfgcols[frameid].last_col = col;
 	}
 }

 function initialize() {
 	for (var tile in database["tiles"])
 		createSvgTile(tile);

 	var gridview = document.getElementById("gridview");

 	rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 	rect.setAttribute("id", "tile_" + tile);
 	rect.setAttribute("x", 0);
 	rect.setAttribute("y", 0);
 	rect.setAttribute("width", 10 * numcols);
 	rect.setAttribute("height", 10 * numrows);
 	rect.setAttribute("style", "fill: none; stroke: Black;");
 	gridview.appendChild(rect);

 	marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 	marker.setAttribute("cx", 0);
 	marker.setAttribute("cy", 0);
 	marker.setAttribute("r", 5);
 	marker.setAttribute("style", "fill: none; stroke: none;");
 	gridview.appendChild(marker);

 	for (var frameid in cfgcols) {
 		var cfgcol = cfgcols[frameid];

 		rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 		rect.setAttribute("id", "tile_" + tile);
 		rect.setAttribute("x", 10 * cfgcol.first_col);
 		rect.setAttribute("y", 10 * cfgcol.first_row);
 		rect.setAttribute("width", 10 + 10 * (cfgcol.last_col - cfgcol.first_col));
 		rect.setAttribute("height", 10 + 10 * (cfgcol.last_row - cfgcol.first_row));
 		rect.setAttribute("style", "fill: none; stroke: Black; stroke-width: 0.5px;");
 		gridview.appendChild(rect);
 	}

 	gridview.setAttribute("viewBox", "0 0 " + (10 * numcols) + " " +  (10 * numrows));

 	svgPanZoom('#gridview', {zoomEnabled: true});

 	document.getElementById("title").innerHTML = "Project X-Ray Grid Viewer -- " + database["device"];
 	document.getElementById("infos").style.visibility = "visible";
 }

 window.onload = function() {
 	getJSON(getBaseURL() + "grid-" + device + "-db.json", function(data) {
 		database = data;
 		initialize();
 	});
 }

 //--></script>
 </head><body bgcolor="#aaaaaa">

 <div><b><span id="title">Loading device database. Please wait...</span></b></div>

 <table><tr><td valign="top">
 <div style="background-color: white; width: 600px; height:800px"><svg xmlns="http://www.w3.org/2000/svg"
 	id="gridview" width="100%" height="100%" viewBox="0 0 200 200"></svg></div>

 </td><td valign="top" style="padding-left: 1em">
 <div id="legend" style="margin-bottom: 1em">
 <table>
 <tr><td style="background-color: Khaki; width: 3em">&nbsp;</td><td style="padding-left: 0.5em">CLBLM (Tile with two SLICEM sites)</td></tr>
 <tr><td style="background-color: Gold">&nbsp;</td><td style="padding-left: 0.5em">CLBLL (Tile with two SLICEL sites)</td></tr>
 <tr><td style="background-color: Red">&nbsp;</td><td style="padding-left: 0.5em">Block RAM Tile</td></tr>
 <tr><td style="background-color: Tomato">&nbsp;</td><td style="padding-left: 0.5em">DSP Tile</td></tr>
 <tr><td style="background-color: Green">&nbsp;</td><td style="padding-left: 0.5em">PCIE Tile</td></tr>
 <tr><td style="background-color: SteelBlue">&nbsp;</td><td style="padding-left: 0.5em">Regular Interconnect tile</td></tr>
 <tr><td style="background-color: RoyalBlue">&nbsp;</td><td style="padding-left: 0.5em">Interface Interconnect tile</td></tr>
 <tr><td style="background-color: SkyBlue">&nbsp;</td><td style="padding-left: 0.5em">Feedthru Interconnect tile</td></tr>
 <tr><td style="background-color: LightCyan">&nbsp;</td><td style="padding-left: 0.5em">VBRK / VFRAME / TERM</td></tr>
 <tr><td style="background-color: LightGray">&nbsp;</td><td style="padding-left: 0.5em">NULL Tile</td></tr>
 <tr><td style="background-color: Gray">&nbsp;</td><td style="padding-left: 0.5em">Other</td></tr>
 </table>
 </div>

 <div style="visibility: hidden" id="infos">
 <pre>&lt;-------------------
     Zoom with mouse wheel
     Pan by dragging

 Click on a tile for details</pre>
 </div>

 </td></tr></table>

 </body></html>
	<html><head>
	<title>Project X-Ray Grid Viewer</title>

	<!-- https://github.com/ariutta/svg-pan-zoom -->
	<script src="svg-pan-zoom.js"></script>

	<script><!--

	var device = "xc7a50tfgg484-1";

	var database;
	var cfgcols = { };
	var numrows = 1;
	var numcols = 1;
	var marker;

	var hide_props = [
	"ALTERNATE_SITE_TYPES",
	"CLASS",
	"FIRST_SITE_ID",
	"GRID_POINT_X",
	"GRID_POINT_Y",
	"INDEX",
	"IS_BONDED",
	"IS_CENTER_TILE",
	"IS_CLOCK_BUFFER",
	"IS_CLOCK_PAD",
	"IS_DCM_TILE",
	"IS_GLOBAL_CLOCK_BUFFER",
	"IS_GLOBAL_CLOCK_PAD",
	"IS_GT_CLOCK_SITE_TILE",
	"IS_GT_SITE_TILE",
	"IS_PAD",
	"IS_REGIONAL_CLOCK_BUFFER",
	"IS_REGIONAL_CLOCK_PAD",
	"IS_RESERVED",
	"IS_TEST",
	"IS_USED",
	"MANUAL_ROUTING",
	"PROHIBIT",
	"PROHIBIT_FROM_PERSIST",
	"SITE_PIPS",
	"SLR_REGION_ID",
	"TILE_PATTERN_IDX",
	"TILE_TYPE_INDEX",
	"TILE_X",
	"TILE_Y",
	"TYPE"
	];

	function getJSON(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.responseType = 'json';
	xhr.onload = function() {
	var status = xhr.status;
	if (status == 200) {
	console.log("Finished downloading JSON file " + url + ".");
	callback(xhr.response);
	} else {
	console.log("Failed to download JSON file " + url + ". Status: " + status);
	window.alert("Failed to download JSON file " + url + ". Status: " + status);
	}
	};
	console.log("Downloading JSON file " + url + ".");
	xhr.send();
	};

	function getBaseURL() {
	var loc = window.location.toString().split("/");
	loc[loc.length-1] = "";
	return loc.join("/");
	}

	function tileInfo(tile) {
	var props = database["tiles"][tile]["props"];
	var row = +props["ROW"];
	var col = +props["COLUMN"];

	var html_text = "<h3>Tile: " + tile + "</h3>\n";

	html_text += "<table>\n";
	for (var p in props) {
	if (hide_props.indexOf(p) >= 0) continue;
	html_text += "<tr><td>" + p + "</td><td>" + props[p] + "</td></tr>\n";
	}
	html_text += "</table>\n";

	if ("cfgcol" in database["tiles"][tile]) {
	props = database["tiles"][tile]["cfgcol"]

	html_text += "<h3>Configuration Column</h3>\n";
	html_text += "<table>\n";
	for (var p in props) {
	if (hide_props.indexOf(p) >= 0) continue;
	html_text += "<tr><td>" + p + "</td><td>" + props[p] + "</td></tr>\n";
	}
	html_text += "</table>\n";
	}

	for (var site_idx in database["tiles"][tile]["sites"]) {
	var site = database["tiles"][tile]["sites"][site_idx];
	props = database["sites"][site]["props"];

	html_text += "<h3>Site: " + tile + "</h3>\n";

	if ("bit" in database["sites"][site])
	html_text += '<div style="margin-bottom: 1em">' + database["sites"][site]["bit"] + "</div>\n";

	html_text += "<table>\n";
	for (var p in props) {
	if (hide_props.indexOf(p) >= 0) continue;
	html_text += "<tr><td>" + p + "</td><td>" + props[p] + "</td></tr>\n";
	}
	html_text += "</table>\n";
	}

	var infos = document.getElementById("infos");
	infos.innerHTML = html_text;

	marker.setAttribute("cx", 5 + 10 * col);
	marker.setAttribute("cy", 5 + 10 * row);
	marker.setAttribute("style", "fill: none; stroke: Black;");
	}

	function createSvgTile(tile) {
	var props = database["tiles"][tile]["props"];
	var row = +props["ROW"];
	var col = +props["COLUMN"];

	if (row >= numrows) numrows = row + 1;
	if (col >= numcols) numcols = col + 1;

	var color = "Gray";

	if (props["TYPE"].startsWith("CLBLM_")) color = "Khaki";
	if (props["TYPE"].startsWith("CLBLL_")) color = "Gold";
	if (props["TYPE"].startsWith("BRAM_")) color = "Red";
	if (props["TYPE"].startsWith("DSP_")) color = "Tomato";
	if (props["TYPE"].startsWith("PCIE_")) color = "Green";

	if (props["TYPE"] == "INT_L") color = "SteelBlue";
	if (props["TYPE"] == "INT_R") color = "SteelBlue";
	if (props["TYPE"].startsWith("INT_INTERFACE_")) color = "RoyalBlue";
	if (props["TYPE"].startsWith("BRAM_INT_INTERFACE_")) color = "RoyalBlue";
	if (props["TYPE"].startsWith("INT_FEEDTHRU_")) color = "SkyBlue";

	if (props["TYPE"] == "VBRK") color = "LightCyan";
	if (props["TYPE"] == "VFRAME") color = "LightCyan";
	if (props["TYPE"].search("_TERM_INT") >= 0) color = "LightCyan";

	if (props["TYPE"] == "NULL") color = "Lightgray";

	rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
	rect.setAttribute("id", "tile_" + tile);
	rect.setAttribute("x", 10 * col + 1);
	rect.setAttribute("y", 10 * row + 1);
	rect.setAttribute("width", 8);
	rect.setAttribute("height", 8);
	rect.setAttribute("style", "fill: " + color);
	rect.setAttribute("onmousedown", "tileInfo('" + tile + "')");

	var gridview = document.getElementById("gridview");
	gridview.appendChild(rect);

	if ("cfgcol" in database["tiles"][tile]) {
	var frameid = database["tiles"][tile]["cfgcol"]["BASE_FRAMEID"];
	if (!(frameid in cfgcols)) {
	cfgcols[frameid] = {
	"first_row": row,
	"last_row": row,
	"first_col": col,
	"last_col": col
	};
	}

	if (row < cfgcols[frameid].first_row) cfgcols[frameid].first_row = row;
	if (row > cfgcols[frameid].last_row) cfgcols[frameid].last_row = row;

	if (col < cfgcols[frameid].first_col) cfgcols[frameid].first_col = col;
	if (col > cfgcols[frameid].last_col) cfgcols[frameid].last_col = col;
	}
	}

	function initialize() {
	for (var tile in database["tiles"])
	createSvgTile(tile);

	var gridview = document.getElementById("gridview");

	rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
	rect.setAttribute("id", "tile_" + tile);
	rect.setAttribute("x", 0);
	rect.setAttribute("y", 0);
	rect.setAttribute("width", 10 * numcols);
	rect.setAttribute("height", 10 * numrows);
	rect.setAttribute("style", "fill: none; stroke: Black;");
	gridview.appendChild(rect);

	marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
	marker.setAttribute("cx", 0);
	marker.setAttribute("cy", 0);
	marker.setAttribute("r", 5);
	marker.setAttribute("style", "fill: none; stroke: none;");
	gridview.appendChild(marker);

	for (var frameid in cfgcols) {
	var cfgcol = cfgcols[frameid];

	rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
	rect.setAttribute("id", "tile_" + tile);
	rect.setAttribute("x", 10 * cfgcol.first_col);
	rect.setAttribute("y", 10 * cfgcol.first_row);
	rect.setAttribute("width", 10 + 10 * (cfgcol.last_col - cfgcol.first_col));
	rect.setAttribute("height", 10 + 10 * (cfgcol.last_row - cfgcol.first_row));
	rect.setAttribute("style", "fill: none; stroke: Black; stroke-width: 0.5px;");
	gridview.appendChild(rect);
	}

	gridview.setAttribute("viewBox", "0 0 " + (10 * numcols) + " " + (10 * numrows));

	svgPanZoom('#gridview', {zoomEnabled: true});

	document.getElementById("title").innerHTML = "Project X-Ray Grid Viewer -- " + database["device"];
	document.getElementById("infos").style.visibility = "visible";
	}

	window.onload = function() {
	getJSON(getBaseURL() + "grid-" + device + "-db.json", function(data) {
	database = data;
	initialize();
	});
	}

	//--></script>
	</head><body bgcolor="#aaaaaa">

	<div><b><span id="title">Loading device database. Please wait...</span></b></div>

	<table><tr><td valign="top">
	<div style="background-color: white; width: 600px; height:800px"><svg xmlns="http://www.w3.org/2000/svg"
	id="gridview" width="100%" height="100%" viewBox="0 0 200 200"></svg></div>

	</td><td valign="top" style="padding-left: 1em">
	<div id="legend" style="margin-bottom: 1em">
	<table>
	<tr><td style="background-color: Khaki; width: 3em"> </td><td style="padding-left: 0.5em">CLBLM (Tile with two SLICEM sites)</td></tr>
	<tr><td style="background-color: Gold"> </td><td style="padding-left: 0.5em">CLBLL (Tile with two SLICEL sites)</td></tr>
	<tr><td style="background-color: Red"> </td><td style="padding-left: 0.5em">Block RAM Tile</td></tr>
	<tr><td style="background-color: Tomato"> </td><td style="padding-left: 0.5em">DSP Tile</td></tr>
	<tr><td style="background-color: Green"> </td><td style="padding-left: 0.5em">PCIE Tile</td></tr>
	<tr><td style="background-color: SteelBlue"> </td><td style="padding-left: 0.5em">Regular Interconnect tile</td></tr>
	<tr><td style="background-color: RoyalBlue"> </td><td style="padding-left: 0.5em">Interface Interconnect tile</td></tr>
	<tr><td style="background-color: SkyBlue"> </td><td style="padding-left: 0.5em">Feedthru Interconnect tile</td></tr>
	<tr><td style="background-color: LightCyan"> </td><td style="padding-left: 0.5em">VBRK / VFRAME / TERM</td></tr>
	<tr><td style="background-color: LightGray"> </td><td style="padding-left: 0.5em">NULL Tile</td></tr>
	<tr><td style="background-color: Gray"> </td><td style="padding-left: 0.5em">Other</td></tr>
	</table>
	</div>

	<div style="visibility: hidden" id="infos">
	<pre><-------------------
	Zoom with mouse wheel
	Pan by dragging

	Click on a tile for details</pre>
	</div>

	</td></tr></table>

	</body></html>