2015-02-15 09:16:08 -06:00
|
|
|
<html><head>
|
2015-02-16 05:41:48 -06:00
|
|
|
<title>YosysJS Example Application #01</title>
|
2015-02-16 06:23:54 -06:00
|
|
|
<script type="text/javascript" src="yosysjs.js"></script>
|
2015-02-15 09:16:08 -06:00
|
|
|
</head><body onload="document.getElementById('command').focus()">
|
2015-02-16 05:41:48 -06:00
|
|
|
<h1>YosysJS Example Application #01</h1>
|
2015-02-15 15:53:41 -06:00
|
|
|
<table width="100%"><tr><td><div id="tabs"></div></td><td align="right"><tt>[ <span onclick="load_example()">load example</span> ]</tt></td></tr></table>
|
2015-02-16 07:10:00 -06:00
|
|
|
<svg id="svg" style="display: none; position: absolute; padding: 10px; width: calc(100% - 40px); height: 480px;"></svg>
|
|
|
|
|
<div><textarea id="output" style="width: 100%; height: 500px"></textarea></div>
|
2015-02-15 09:16:08 -06:00
|
|
|
<div id="wait" style="display: block"><br/><b><span id="waitmsg">Loading...</span></b></div>
|
2015-02-16 06:23:54 -06:00
|
|
|
<div id="input" style="display: none"><form onsubmit="window.setTimeout(run_command); return false"><br/><tt><span id="prompt">
|
2015-02-15 17:11:22 -06:00
|
|
|
</span></tt><input id="command" type="text" onkeydown="history(event)" style="font-family: monospace; font-weight: bold;" size="100"></form></div>
|
2015-02-15 09:16:08 -06:00
|
|
|
<script type='text/javascript'>
|
2015-02-16 06:23:54 -06:00
|
|
|
function print_output(text) {
|
|
|
|
|
var el = document.getElementById('output');
|
|
|
|
|
el.value += text + "\n";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
YosysJS.load_viz();
|
|
|
|
|
var ys = YosysJS.create("", function() {
|
|
|
|
|
print_output(ys.print_buffer);
|
|
|
|
|
|
|
|
|
|
document.getElementById('wait').style.display = 'none';
|
|
|
|
|
document.getElementById('input').style.display = 'block';
|
|
|
|
|
document.getElementById('waitmsg').textContent = 'Waiting for yosys.js...';
|
|
|
|
|
document.getElementById('prompt').textContent = ys.prompt();
|
|
|
|
|
|
|
|
|
|
update_tabs();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
ys.echo = true;
|
|
|
|
|
|
2015-02-15 17:11:22 -06:00
|
|
|
var history_log = [];
|
|
|
|
|
var history_index = 0;
|
|
|
|
|
var history_bak = "";
|
|
|
|
|
|
|
|
|
|
function history(ev) {
|
|
|
|
|
if (ev.keyCode == 38) {
|
|
|
|
|
el = document.getElementById('command');
|
|
|
|
|
if (history_index == history_log.length)
|
|
|
|
|
history_bak = el.value
|
|
|
|
|
if (history_index > 0)
|
|
|
|
|
el.value = history_log[--history_index];
|
|
|
|
|
}
|
|
|
|
|
if (ev.keyCode == 40) {
|
|
|
|
|
if (history_index < history_log.length) {
|
|
|
|
|
el = document.getElementById('command');
|
|
|
|
|
if (++history_index < history_log.length)
|
|
|
|
|
el.value = history_log[history_index];
|
|
|
|
|
else
|
|
|
|
|
el.value = history_bak;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-02-15 10:14:09 -06:00
|
|
|
|
2015-02-15 11:10:54 -06:00
|
|
|
var current_file = "";
|
|
|
|
|
var console_messages = "";
|
2015-02-15 15:53:41 -06:00
|
|
|
var svg_cache = { };
|
2015-02-15 11:10:54 -06:00
|
|
|
|
|
|
|
|
function update_tabs() {
|
2015-02-16 06:23:54 -06:00
|
|
|
var f, html = "", flist = ys.read_dir('.');
|
2015-02-15 11:10:54 -06:00
|
|
|
if (current_file == "") {
|
|
|
|
|
html += '<tt>[ <b>Console</b>';
|
|
|
|
|
} else {
|
|
|
|
|
html += '<tt>[ <span onclick="open_file(\'\')">Console</span>';
|
|
|
|
|
}
|
|
|
|
|
for (i in flist) {
|
|
|
|
|
f = flist[i]
|
|
|
|
|
if (f == "." || f == "..")
|
|
|
|
|
continue;
|
|
|
|
|
if (current_file == f) {
|
|
|
|
|
html += ' | <b>' + f + '</b>';
|
|
|
|
|
} else {
|
|
|
|
|
html += ' | <span onclick="open_file(\'' + f + '\')">' + f + '</span>';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
html += ' | <span onclick="open_file(prompt(\'Filename:\'))">new file</span> ]</tt>';
|
|
|
|
|
document.getElementById('tabs').innerHTML = html;
|
2015-02-15 15:53:41 -06:00
|
|
|
if (current_file == "" || /\.dot$/.test(current_file)) {
|
|
|
|
|
var element = document.getElementById('output');
|
|
|
|
|
element.readOnly = true;
|
|
|
|
|
element.scrollTop = element.scrollHeight; // focus on bottom
|
2015-02-15 11:10:54 -06:00
|
|
|
document.getElementById('command').focus();
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById('output').readOnly = false;
|
|
|
|
|
document.getElementById('output').focus();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function open_file(filename)
|
|
|
|
|
{
|
|
|
|
|
if (current_file == "")
|
|
|
|
|
console_messages = document.getElementById('output').value;
|
2015-02-15 15:53:41 -06:00
|
|
|
else if (!/\.dot$/.test(current_file))
|
2015-02-16 06:23:54 -06:00
|
|
|
ys.write_file(current_file, document.getElementById('output').value);
|
2015-02-15 11:10:54 -06:00
|
|
|
|
|
|
|
|
if (filename == "") {
|
|
|
|
|
document.getElementById('output').value = console_messages;
|
|
|
|
|
} else {
|
|
|
|
|
try {
|
2015-02-16 06:23:54 -06:00
|
|
|
document.getElementById('output').value = ys.read_file(filename);
|
2015-02-15 11:10:54 -06:00
|
|
|
} catch (e) {
|
|
|
|
|
document.getElementById('output').value = "";
|
2015-02-16 06:23:54 -06:00
|
|
|
ys.write_file(filename, document.getElementById('output').value);
|
2015-02-15 11:10:54 -06:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-15 15:53:41 -06:00
|
|
|
if (/\.dot$/.test(filename)) {
|
|
|
|
|
dot = document.getElementById('output').value;
|
2015-02-16 06:23:54 -06:00
|
|
|
YosysJS.dot_into_svg(dot, 'svg');
|
2015-02-15 15:53:41 -06:00
|
|
|
document.getElementById('svg').style.display = 'block';
|
|
|
|
|
document.getElementById('output').value = '';
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById('svg').innerHTML = '';
|
|
|
|
|
document.getElementById('svg').style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-15 11:10:54 -06:00
|
|
|
current_file = filename;
|
|
|
|
|
update_tabs()
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-15 10:14:09 -06:00
|
|
|
function startup() {
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-15 15:53:41 -06:00
|
|
|
function load_example() {
|
|
|
|
|
open_file('')
|
|
|
|
|
|
|
|
|
|
var txt = "";
|
|
|
|
|
txt += "// a simple yosys.js example. run \"script example.ys\".\n";
|
|
|
|
|
txt += "\n";
|
|
|
|
|
txt += "module example(input clk, input rst, input inc, output reg [3:0] cnt);\n";
|
|
|
|
|
txt += " always @(posedge clk) begin\n";
|
|
|
|
|
txt += " if (rst)\n";
|
|
|
|
|
txt += " cnt <= 0;\n";
|
|
|
|
|
txt += " else if (inc)\n";
|
|
|
|
|
txt += " cnt <= cnt + 1;\n";
|
|
|
|
|
txt += " end\n";
|
|
|
|
|
txt += "endmodule\n";
|
|
|
|
|
txt += "\n";
|
2015-02-16 06:23:54 -06:00
|
|
|
ys.write_file('example.v', txt);
|
2015-02-15 15:53:41 -06:00
|
|
|
|
|
|
|
|
var txt = "";
|
|
|
|
|
txt += "# a simple yosys.js example. run \"script example.ys\".\n";
|
|
|
|
|
txt += "\n";
|
|
|
|
|
txt += "design -reset\n";
|
|
|
|
|
txt += "read_verilog example.v\n";
|
|
|
|
|
txt += "proc\n";
|
|
|
|
|
txt += "opt\n";
|
|
|
|
|
txt += "show\n";
|
|
|
|
|
txt += "\n";
|
2015-02-16 06:23:54 -06:00
|
|
|
ys.write_file('example.ys', txt);
|
2015-02-15 15:53:41 -06:00
|
|
|
|
|
|
|
|
open_file('example.ys')
|
|
|
|
|
document.getElementById('command').focus();
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-15 09:16:08 -06:00
|
|
|
function run_command() {
|
|
|
|
|
var cmd = document.getElementById('command').value;
|
|
|
|
|
document.getElementById('command').value = '';
|
2015-02-15 17:11:22 -06:00
|
|
|
if (history_log.length == 0 || history_log[history_log.length-1] != cmd)
|
|
|
|
|
history_log.push(cmd);
|
|
|
|
|
history_index = history_log.length;
|
2015-02-15 11:10:54 -06:00
|
|
|
|
2015-02-15 15:53:41 -06:00
|
|
|
var show_dot_before = "";
|
2015-02-16 06:23:54 -06:00
|
|
|
try { show_dot_before = ys.read_file('show.dot'); } catch (e) { }
|
2015-02-15 15:53:41 -06:00
|
|
|
|
2015-02-15 11:10:54 -06:00
|
|
|
open_file('');
|
|
|
|
|
|
2015-02-15 09:16:08 -06:00
|
|
|
document.getElementById('wait').style.display = 'block';
|
|
|
|
|
document.getElementById('input').style.display = 'none';
|
|
|
|
|
|
|
|
|
|
function run_command_bh() {
|
|
|
|
|
try {
|
2015-02-16 06:23:54 -06:00
|
|
|
ys.run(cmd);
|
2015-02-15 09:16:08 -06:00
|
|
|
} catch (e) {
|
2015-02-16 06:23:54 -06:00
|
|
|
ys.write('Caught JavaScript exception. (see JavaScript console for details.)');
|
2015-02-15 09:16:08 -06:00
|
|
|
console.log(e);
|
|
|
|
|
}
|
2015-02-16 06:23:54 -06:00
|
|
|
print_output(ys.print_buffer);
|
2015-02-15 15:53:41 -06:00
|
|
|
|
2015-02-15 09:16:08 -06:00
|
|
|
document.getElementById('wait').style.display = 'none';
|
|
|
|
|
document.getElementById('input').style.display = 'block';
|
2015-02-16 06:23:54 -06:00
|
|
|
document.getElementById('prompt').textContent = ys.prompt();
|
2015-02-15 15:53:41 -06:00
|
|
|
|
|
|
|
|
var show_dot_after = "";
|
2015-02-16 06:23:54 -06:00
|
|
|
try { show_dot_after = ys.read_file('show.dot'); } catch (e) { }
|
2015-02-15 15:53:41 -06:00
|
|
|
|
|
|
|
|
if (show_dot_before != show_dot_after)
|
|
|
|
|
open_file('show.dot');
|
|
|
|
|
|
2015-02-15 11:10:54 -06:00
|
|
|
update_tabs();
|
2015-02-15 09:16:08 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.setTimeout(run_command_bh, 50);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body></html>
|
