<script src="imports/chart.js"></script>
<style>
body { background-color: #1f1f1f; }
- [class*=program] td { text-align: center; user-select: none; background-color: #353535; color: #9cdcfe; border-color: grey; }
+ @font-face
+ {
+ font-family: "SmileBASIC";
+ src: url(imports/SMILEBASIC.ttf) format("truetype");
+ }
+ [class*=program] td
+ {
+ font-family: 'Courier New', Courier, monospace;
+ text-align: center;
+ user-select: none;
+ background-color: #353535;
+ color: #9cdcfe;
+ border-color: grey;
+ font-weight: bold;
+ }
+ .program-track
+ {
+ table-layout: fixed;
+ }
textarea
{
background-color: #353535;
</style>
</head>
<body>
- <div class="optionspanel">
- <button class="option" id="load">๐</button>
- <button class="option" id="clear">๐งน</button>
- <button class="option" id="save">๐พ</button><!-- -->
- <button class="option" id="run">โถ</button><!-- -->
- <button class="option" id="help">โ</button>
- <div id="apkwrapper"><button class="option" id="apk">๐ฒ</button> </div>
- <button class="option" id="setup">โ</button>
- </div>
<table border="1" style="width: 100%;">
<tr>
<td colspan="2">
- <div style="overflow-y: scroll; height: 220px;">
- <table border=1 class="program-track"></table>
+ <div class="optionspanel">
+ <button class="option" id="load">๐</button>
+ <button class="option" id="clear">๐งน</button>
+ <button class="option" id="save">๐พ</button><!-- -->
+ <button class="option" id="run">โถ</button><!-- -->
+ <button class="option" id="help">โ</button>
+ <div id="apkwrapper"><button class="option" id="apk">๐ฒ</button> </div>
+ <button class="option" id="setup">โ</button>
+
</div>
</td>
</tr>
<tr>
- <td colspan="2">
- <table border=1 class="program-instr"></table>
+ <td>
+ <div style="overflow-y: scroll; overflow-x: scroll; height: 256px;" class="program-track-container">
+ <table border=1 class="program-track"></table>
+ </div>
+ </td>
+ <td>
+ <table border=1 class="program-instr" style="width: 100%;"></table>
<table border=1 class="program-drag" style="visibility: hidden;"></table>
</td>
</tr>
<istina-editor style="height: 100%;"></istina-editor>
</td>
<td style="width: 50%;">
- <canvas id="myChart"></canvas>
+ <canvas id="resultsChart"></canvas>
</td>
</tr>
</table>
case "01": return "C<span style='text-decoration:overline;'>X</span>"; break;
}
break;
- case "SWAP":
+ case "SW":
switch (pos)
{
- case "10": return "<span style='text-decoration:overline;'>SW</span>AP"; break;
- case "01": return "SW<span style='text-decoration:overline;'>AP</span>"; break;
+ case "10": return "<span style='text-decoration:overline;'>S</span>W"; break;
+ case "01": return "S<span style='text-decoration:overline;'>W</span>"; break;
}
break;
case "CCX":
case "001": return "CC<span style='text-decoration:overline;'>X</span>"; break;
}
break;
- case "CSWAP":
+ case "CSW":
switch (pos)
{
- case "100": return "<span style='text-decoration:overline;'>C</span>SWAP"; break;
- case "010": return "C<span style='text-decoration:overline;'>SW</span>AP"; break;
- case "001": return "CSW<span style='text-decoration:overline;'>AP</span>"; break;
+ case "100": return "<span style='text-decoration:overline;'>C</span>SW"; break;
+ case "010": return "C<span style='text-decoration:overline;'>S</span>W"; break;
+ case "001": return "CS<span style='text-decoration:overline;'>W</span>"; break;
}
break;
}
"T<sup>†</sup>",
"CX",
"CCX",
- "SWAP",
- "CSWAP",
+ "SW",
+ "CSW",
+ "Rx",
+ "Ry",
+ "Rz",
+ "U",
+ "RST",
"๐",
"|1โฉ",
"|0โฉ",
SCALE: 64,
STATE: [ [], [], [], [], [], [], [], [], [], [], [], [], [], [], [] ],
DRAG: "",
+ decode: () =>
+ {
+ var width = 0;
+ for (var i = 0; i < ProgramTrack.STATE.length - 1; i++)
+ {
+ if (ProgramTrack.STATE[i].length > width)
+ {
+ width = ProgramTrack.STATE[i].length;
+ }
+ }
+ var ret = "";
+ var maxQ = -1;
+ var maxC = -1;
+ for (var i = 0; i < width; i++)
+ {
+ var ifblk = ProgramTrack.STATE[ProgramTrack.STATE.length - 1][i].trim();
+ if (ifblk.length > 0)
+ {
+ var a = ifblk.split("<sub>")[0].includes("0") ? 0 : 1;
+ var b = parseInt(ifblk.split("<sub>")[1].split("<")[0]);
+ ifblk = "if(c[" + b + "]==" + a + ") ";
+ if (b > maxC) maxC = b;
+ }
+ var cx = [0, -1, -1];
+ var sw = [0, -1, -1];
+ var ccx = [0, -1, -1, -1];
+ var csw = [0, -1, -1, -1];
+ for (var j = 0; j < ProgramTrack.STATE.length - 1; j++)
+ {
+ var instr = ProgramTrack.STATE[j][i].trim();
+ if (instr.length == 0) continue;
+ console.log(instr);
+ if (j > maxQ) maxQ = j;
+ switch (instr)
+ {
+ case "X": ret += ifblk + "x q[" + j + "];\n"; break;
+ case "Y": ret += ifblk + "y q[" + j + "];\n"; break;
+ case "Z": ret += ifblk + "z q[" + j + "];\n"; break;
+ case "H": ret += ifblk + "h q[" + j + "];\n"; break;
+ case "S": ret += ifblk + "s q[" + j + "];\n"; break;
+ case "T": ret += ifblk + "t q[" + j + "];\n"; break;
+ case "S<sup>โ </sup>": ret += ifblk + "sdg q[" + j + "];\n"; break;
+ case "T<sup>โ </sup>": ret += ifblk + "tdg q[" + j + "];\n"; break;
+ default:
+ if (instr.includes("๐"))
+ {
+ var num = parseInt(instr.split(">")[1].split("<")[0]);
+ if (num > maxC) maxC = num;
+ ret += ifblk + "measure q[" + j + "] -> c[" + num + "];\n";
+ }
+ }
+ if (instr == overline("CX", "10")) { if (cx[1] != -1) { cx[0] = 1; } cx[1] = j; }
+ if (instr == overline("CX", "01")) { if (cx[2] != -1) { cx[0] = 1; } cx[2] = j; }
+ if (instr == overline("SW", "10")) { if (sw[1] != -1) { sw[0] = 1; } sw[1] = j; }
+ if (instr == overline("SW", "01")) { if (sw[2] != -1) { sw[0] = 1; } sw[2] = j; }
+
+ if (instr == overline("CCX", "100")) { if (ccx[1] != -1) { ccx[0] = 1; } ccx[1] = j; }
+ if (instr == overline("CCX", "010")) { if (ccx[2] != -1) { ccx[0] = 1; } ccx[2] = j; }
+ if (instr == overline("CCX", "001")) { if (ccx[3] != -1) { ccx[0] = 1; } ccx[3] = j; }
+ if (instr == overline("CSW", "100")) { if (csw[1] != -1) { csw[0] = 1; } csw[1] = j; }
+ if (instr == overline("CSW", "010")) { if (csw[2] != -1) { csw[0] = 1; } csw[2] = j; }
+ if (instr == overline("CSW", "001")) { if (csw[3] != -1) { csw[0] = 1; } csw[3] = j; }
+ }
+
+ if (cx[0]) { ret = "Duplicate `CX` at column " + (i + 1) + "."; break; }
+ if (cx[1] != -1 && cx[2] != -1) { ret += ifblk + "cx q[" + cx[1] + "], q[" + cx[2] + "];\n"; }
+ else if (cx[1] != -1 || cx[2] != -1) { ret = "Incomplete `CX` at column " + (i + 1) + "."; break; }
+
+ if (sw[0]) { ret = "Duplicate `SW` at column " + (i + 1) + "."; break; }
+ if (sw[1] != -1 && sw[2] != -1) { ret += ifblk + "swap q[" + sw[1] + "], q[" + sw[2] + "];\n"; }
+ else if (sw[1] != -1 || sw[2] != -1) { ret = "Incomplete `SW` at column " + (i + 1) + "."; break; }
+
+ if (ccx[0]) { ret = "Duplicate `CCX` at column " + (i + 1) + "."; break; }
+ if (ccx[1] != -1 && ccx[2] != -1 && ccx[3] != -1) { ret += ifblk + "ccx q[" + ccx[1] + "], q[" + ccx[2] + "], q[" + ccx[3] + "];\n"; }
+ else if (ccx[1] != -1 || ccx[2] != -1 || ccx[3] != -1) { ret = "Incomplete `CCX` at column " + (i + 1) + "."; break; }
+
+ if (csw[0]) { ret = "Duplicate `CSW` at column " + (i + 1) + "."; break; }
+ if (csw[1] != -1 && csw[2] != -1 && csw[3] != -1) { ret += ifblk + "cswap q[" + csw[1] + "], q[" + csw[2] + "], q[" + csw[3] + "];\n"; }
+ else if (csw[1] != -1 || csw[2] != -1 || csw[3] != -1) { ret = "Incomplete `CSW` at column " + (i + 1) + "."; break; }
+ }
+ if (!ret.includes("Duplicate") && !ret.includes("Incomplete"))
+ {
+ if (maxC >= 0)
+ {
+ ret = "creg c[" + (maxC + 1) + "];\n" + ret;
+ }
+ if (maxQ >= 0)
+ {
+ ret = "qreg q[" + (maxQ + 1) + "];\n" + ret;
+ if (maxC >= 0)
+ {
+ ret += "sample c;\n";
+ }
+ else
+ {
+ ret += "born q;\n";
+ }
+ }
+
+ }
+ return ret;
+ },
drag: (e, erase, evt) =>
{
if (e.innerHTML.includes("Q") || e.innerHTML.includes("IF") || e.innerHTML.includes("..."))
{
case overline("CX", "10"): ProgramTrack.STATE[s[0]][s[1]] = overline("CX", "01"); break;
case overline("CX", "01"): ProgramTrack.STATE[s[0]][s[1]] = overline("CX", "10"); break;
- case overline("SWAP", "10"): ProgramTrack.STATE[s[0]][s[1]] = overline("SWAP", "01"); break;
- case overline("SWAP", "01"): ProgramTrack.STATE[s[0]][s[1]] = overline("SWAP", "10"); break;
+ case overline("SW", "10"): ProgramTrack.STATE[s[0]][s[1]] = overline("SW", "01"); break;
+ case overline("SW", "01"): ProgramTrack.STATE[s[0]][s[1]] = overline("SW", "10"); break;
case overline("CCX", "100"): ProgramTrack.STATE[s[0]][s[1]] = overline("CCX", "010"); break;
case overline("CCX", "010"): ProgramTrack.STATE[s[0]][s[1]] = overline("CCX", "001"); break;
case overline("CCX", "001"): ProgramTrack.STATE[s[0]][s[1]] = overline("CCX", "100"); break;
- case overline("CSWAP", "100"): ProgramTrack.STATE[s[0]][s[1]] = overline("CSWAP", "010"); break;
- case overline("CSWAP", "010"): ProgramTrack.STATE[s[0]][s[1]] = overline("CSWAP", "001"); break;
- case overline("CSWAP", "001"): ProgramTrack.STATE[s[0]][s[1]] = overline("CSWAP", "100"); break;
+ case overline("CSW", "100"): ProgramTrack.STATE[s[0]][s[1]] = overline("CSW", "010"); break;
+ case overline("CSW", "010"): ProgramTrack.STATE[s[0]][s[1]] = overline("CSW", "001"); break;
+ case overline("CSW", "001"): ProgramTrack.STATE[s[0]][s[1]] = overline("CSW", "100"); break;
}
var instr = ProgramTrack.STATE[s[0]][s[1]].split("<")[0];
switch (instr)
{
case "CX":
case "CCX":
- case "SWAP":
- case "CSWAP":
+ case "SW":
+ case "CSW":
break;
default: h = e.innerHTML;
}
var drag_event = "onmousedown='ProgramTrack.drag(this, true, event);'";
var px = ProgramTrack.SCALE + "px";
var tr = "<tr style='height: " + px + "'>";
- var td = "<td style='width: " + px + "; height: " + px + ";' qubit='1'";
+ var td = "<td style='min-width: " + px + "; width: " + px + "; height: " + px + ";' qubit='1'";
td += " oncontextmenu='return false;'";
td += ">";
var html = "";
{
html += td + INSTRUCTIONS[i] + "</td>";
itr++;
- if (itr > /*8*/ 100)
+ if (itr > 4 && i != INSTRUCTIONS.length - 1)
{
html += "</tr>" + tr;
itr = 0;
}
html += "</tr>";
$(".program-instr")[0].innerHTML = html;
-
+ IstinaEditor.setText(ProgramTrack.decode());
}
};
window.onload = function()
{
ProgramTrack.draw();
+ $(".program-track")[0].parentNode.style.height = Math.round($(".program-instr")[0].getBoundingClientRect().height) + "px";
+ $(".program-track")[0].parentNode.style.width = Math.round($(".program-instr")[0].getBoundingClientRect().width) + "px";
};
document.body.addEventListener("mousemove", e =>
});
document.body.addEventListener("mouseup", e =>
{
+ ProgramTrack.draw();
if ($(".program-drag")[0].style.visibility == "hidden")
{
return;
attr[1] = parseInt(attr[1]);
var html = $(".program-drag td")[0].innerHTML;
var qubit = parseInt(elem.getAttribute("qubit"));
- console.log(html);
+ console.log(elem.innerHTML);
switch (html)
{
case "|1โฉ": case "|0โฉ":
switch (html)
{
case "CX": html = overline("CX", "10"); break;
- case "SWAP": html = overline("SWAP", "10"); break;
+ case "SW": html = overline("SW", "10"); break;
case "CCX": html = overline("CCX", "100"); break;
- case "CSWAP": html = overline("CSWAP", "100"); break;
+ case "CSW": html = overline("CSW", "100"); break;
case "๐": html = "๐<sub>0</sub>"; break;
case "|1โฉ": html = "|1โฉ<sub>0</sub>"; break;
case "|0โฉ": html = "|0โฉ<sub>0</sub>"; break;
}
}
ProgramTrack.draw();
+ if (elem.innerHTML.trim() == "...")
+ {
+ $(".program-track-container")[0].scrollLeft = $(".program-track-container")[0].scrollLeftMax;
+ }
});
//Chart
- const ctx = document.getElementById('myChart');
-
- new Chart(ctx, {
+ var resultsChart = new Chart(document.getElementById("resultsChart"), {
type: 'bar',
data: {
labels: ['000', '001', '010', '011', '100', '101', '110', '111'],
datasets: [{
label: '# of |1โฉ',
- data: [12, 19, 3, 5, 2, 3, 5, 2],
+ data: [],
borderWidth: 1
}]
},
}
}
});
+ function displayResults(results)
+ {
+ var bitCount = Math.ceil(Math.log2(results.length));
+ resultsChart.data.datasets[0].data = results;
+ resultsChart.data.labels = [];
+ for (var i = 0; i < results.length; i++)
+ {
+ resultsChart.data.labels[resultsChart.data.labels.length] = i.toString(2).padStart(bitCount, "0");
+ }
+ resultsChart.update();
+ }
</script>
</body>