Skip to content

Commit

Permalink
Extended GUI to support Xilinx nodes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@deffel
deffel committed Jun 23, 2022
1 parent 90f1f93 commit 80ba8fa
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 20 deletions.
11 changes: 8 additions & 3 deletions gui/NodeShape.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ const OrientationEnum = Object.freeze({
}
});


const NodeTypeEnum = Object.freeze({
"intel": "intel",
"xilinx": "xilinx"
});


//Gray rectangel
Expand Down Expand Up @@ -348,13 +351,13 @@ NodeShape = draw2d.shape.layout.FlexGridLayout.extend({
this.orientation = orientation;
},

addFPGA: function (string_acl) {
addFPGA: function (string_acl, channelsCount) {
orientation = this.getOrientation();
let prop = this.ORIENTATION_PROPERTIES[orientation];
let fpga = new FPGAShape({
"orientation": this.orientation,
"name": string_acl,
"channelsCount": 4
"channelsCount": channelsCount
});

if (this.getFPGAs().getSize() > 0) {
Expand Down Expand Up @@ -415,6 +418,8 @@ NodeShape = draw2d.shape.layout.FlexGridLayout.extend({
return this.getChildren().get(1).getChildren().get(0);
} else if (string_acl == "acl1") {
return this.getChildren().get(1).getChildren().get(1);
} else if (string_acl == "acl2") {
return this.getChildren().get(1).getChildren().get(2);
} else {
alert("getFPGAFromFpgalink fails with input \"" + string_acl + "\"");
return;
Expand Down
29 changes: 21 additions & 8 deletions gui/Toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,16 +84,25 @@ example.Toolbar = Class.extend({

// Inject the SRUN Button
//
this.srunImportButton = $("<button>IMPORT</button>");
this.html.append(this.srunImportButton);
this.srunImportButton.button().click($.proxy(function () {

this.srunImportIntelButton = $("<button>IMPORT INTEL</button>");
this.html.append(this.srunImportIntelButton);
this.srunImportIntelButton.button().click($.proxy(function () {
var srun_raw = prompt("Enter command, f.e. srun", "FPGALINK0=n2fpga03:acl1:ch0-n2fpga03:acl1:ch1 FPGALINK1=n2fpga02:acl0:ch0-n2fpga02:acl0:ch1 FPGALINK2=n2fpga02:acl0:ch2-n2fpga02:acl0:ch3 FPGALINK3=n2fpga03:acl1:ch2-n2fpga03:acl1:ch3");

this.srunApply(srun_raw);
this.srunApply(srun_raw, NodeTypeEnum.intel);

}, this)).button("option", "enabled", true);

this.srunImportXilinxButton = $("<button>IMPORT XILINX</button>");
this.html.append(this.srunImportXilinxButton);
this.srunImportXilinxButton.button().click($.proxy(function () {
var srun_raw = prompt("Enter command, f.e. srun", " -N 2 --fpgalink=n01:acl1:ch1-n00:acl2:ch1 --fpgalink=n01:acl2:ch0-n01:acl2:ch1 --fpgalink=n00:acl1:ch0-n00:acl1:ch1 --fpgalink=n01:acl0:ch0-n01:acl0:ch1 --fpgalink=n00:acl0:ch0-n01:acl1:ch0 --fpgalink=n00:acl0:ch1-n00:acl2:ch0");

this.srunApply(srun_raw, NodeTypeEnum.xilinx);

}, this)).button("option", "enabled", true);


this.delimiter = $("<span class='toolbar_delimiter'>&nbsp;</span>");
this.html.append(this.delimiter);

Expand Down Expand Up @@ -186,7 +195,7 @@ example.Toolbar = Class.extend({
this.redoButton.button("option", "disabled", !event.getStack().canRedo());
},

srunApply: function (srun_raw) {
srunApply: function (srun_raw, node_type) {
// Get number of fpganodes: -N 1
var srun_N_needle = "-N ";
var srun_N = -1;
Expand Down Expand Up @@ -262,9 +271,13 @@ example.Toolbar = Class.extend({

// node.setOrientation(orientation);
node.setName(this.view.getNodeNameNew());
node.addFPGA("acl0");
node.addFPGA("acl1");

let num_fpgas = node_type == NodeTypeEnum.intel ? 2 : 3;
let num_channels = node_type == NodeTypeEnum.intel ? 4 : 2;

for(var f = 0; f < num_fpgas; f++) {
node.addFPGA("acl"+f, num_channels);
}

fpganodes.push(node);

Expand Down
20 changes: 17 additions & 3 deletions gui/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,27 @@ example.View = draw2d.Canvas.extend({
// - type "label": different labels for decoration

switch($(droppedDomNode).data("type")) {
case "node" :
case "node-intel" :
var node = new NodeShape({ "orientation": $(droppedDomNode).data("shape") })

// node.setOrientation(orientation);
node.setName(this.getNodeNameNew());
node.addFPGA("acl0");
node.addFPGA("acl1");
node.addFPGA("acl0", 4);
node.addFPGA("acl1", 4);

// create a command for the undo/redo support
var command = new draw2d.command.CommandAdd(this, node, x, y);
this.getCommandStack().execute(command);

break;
case "node-xilinx":
var node = new NodeShape({ "orientation": $(droppedDomNode).data("shape") })

// node.setOrientation(orientation);
node.setName(this.getNodeNameNew());
node.addFPGA("acl0", 2);
node.addFPGA("acl1", 2);
node.addFPGA("acl2", 2);

// create a command for the undo/redo support
var command = new draw2d.command.CommandAdd(this, node, x, y);
Expand Down
56 changes: 50 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,20 +90,57 @@
});

// Read srun command from $_GET request.
var srun_cmd = "";
try {
var get_decoded = decodeURI(window.location.search);
const urlParams = new URLSearchParams(get_decoded);

if (urlParams.has('import')) {
const srun_cmd = urlParams.get('import');
srun_cmd = urlParams.get('import');

var get_node_type = "";

if (urlParams.has('node-type') &&
(urlParams.get('node-type') == NodeTypeEnum.intel ||
urlParams.get('node-type') == NodeTypeEnum.xilinx)) {
get_node_type = urlParams.get('node-type');
} else {
// Apply minor heuristic if command is for Xilinx or Intel.
// Idea: If command has
// * acl2, it has to be Xilinx
// * chX, where X >= 2, it has to be Intel
if (srun_cmd.indexOf("acl2") > -1) {
get_node_type = NodeTypeEnum.xilinx;
}
if (srun_cmd.indexOf("ch2") > -1 || srun_cmd.indexOf("ch3") > -1 ) {
get_node_type = NodeTypeEnum.intel;
}

// If heuristic does not catch, ask user.
if(get_node_type == "") {
document.getElementById("prompt-node-type").showModal();
}
}

app.toolbar.srunApply(srun_cmd);
if(get_node_type != "") {
app.toolbar.srunApply(srun_cmd, get_node_type);
}
}

} catch (e) { // catches a malformed URI
alert("error parsing srun command from GET request.");
}

// Read srun command from $_GET request, if node type unclear.
$("#prompt-node-type-intel").click(function () {
document.getElementById("prompt-node-type").close();
app.toolbar.srunApply(srun_cmd, NodeTypeEnum.intel);
});
$("#prompt-node-type-xilinx").click(function () {
document.getElementById("prompt-node-type").close();
app.toolbar.srunApply(srun_cmd, NodeTypeEnum.xilinx);
});

// Navigation.
// Grid toggle.
app.toolbar.toggleGridButton = $('#toggleGridButton');
Expand Down Expand Up @@ -150,13 +187,12 @@
</div>

<div id="navigation" class="">

<p style="font-size:22px;"><strong><a href="index.html" style="color:#18b0e2;">FPGALink-GUI</a></strong></p>

<p style="color:#fff;"><strong>Add Nodes by <br />Drag&Drop</strong></p>
<div data-type="node" data-shape="north" class="palette_node_element draw2d_droppable">North Node</div>
<div data-type="node" data-shape="east" class="palette_node_element draw2d_droppable">East Node</div>
<div data-type="node" data-shape="south" class="palette_node_element draw2d_droppable">South Node</div>
<div data-type="node" data-shape="west" class="palette_node_element draw2d_droppable">West Node</div>
<div data-type="node-intel" data-shape="east" class="palette_node_element draw2d_droppable">Intel Stratix 10 Node</div>
<div data-type="node-xilinx" data-shape="east" class="palette_node_element draw2d_droppable">Xilinx Alveo U280 Nodes</div>
<br />
<p style="color:#fff;"><strong>Add Annotations</strong></p>
<div data-type="label" data-shape="label" class="palette_node_element draw2d_droppable">Label</div>
Expand Down Expand Up @@ -193,6 +229,14 @@
<textarea id="svg_output" rows="4" cols="40"></textarea>
</div>

<dialog id="prompt-node-type" role="dialog" aria-labelledby="prompt-dialog-heading">
Node type (intel or xilinx) unclear. Select<br />
<p>
<button id="prompt-node-type-intel" name="intel">intel</button>
<button id="prompt-node-type-xilinx" name="xilinx">xilinx</button>
</p>
</dialog>

</body>

</html>

0 comments on commit 80ba8fa

Please sign in to comment.