diff options
Diffstat (limited to 'misc/yosysjs/demo01.html')
| -rw-r--r-- | misc/yosysjs/demo01.html | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/misc/yosysjs/demo01.html b/misc/yosysjs/demo01.html new file mode 100644 index 00000000..e0ba0248 --- /dev/null +++ b/misc/yosysjs/demo01.html @@ -0,0 +1,237 @@ +<html><head> + <title>YosysJS Example Application #01</title> +</head><body onload="document.getElementById('command').focus()"> + <h1>YosysJS Example Application #01</h1> + <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> + <iframe id="viz" style="display: none"><script type="text/javascript" src="viz.js"></script></iframe> + <svg id="svg" style="display: none; position: absolute; padding: 10px; width: 100%; height: 80%;"></svg> + <div><textarea id="output" style="width: 100%" rows="30" cols="100"></textarea></div> + <div id="wait" style="display: block"><br/><b><span id="waitmsg">Loading...</span></b></div> + <div id="input" style="display: none"><form onsubmit="window.setTimeout(run_command); return false"><tt><span id="prompt"> + </span></tt><input id="command" type="text" onkeydown="history(event)" style="font-family: monospace; font-weight: bold;" size="100"></form></div> + <script type='text/javascript'> + var got_log_messages = false; + 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; + } + } + } + + var Module = { + print: (function() { + var element = document.getElementById('output'); + if (element) element.value = ''; // clear browser cache + return function(text) { + if (!got_log_messages) { + window.setTimeout(startup, 50); + got_log_messages = true; + } + if (element && typeof(text) != "number") { + element.value += text + "\n"; + element.scrollTop = element.scrollHeight; // focus on bottom + } + }; + })(), + printErr: (function() { + var element = document.getElementById('output'); + if (element) element.value = ''; // clear browser cache + return function(text) { + if (element && typeof(text) != "number") { + console.log(text); + if (got_log_messages) { + element.value += text + "\n"; + element.scrollTop = element.scrollHeight; // focus on bottom + } + } + }; + })(), + }; + + var current_file = ""; + var console_messages = ""; + var svg_cache = { }; + + function update_tabs() { + var f, html = "", flist = FS.readdir('.'); + 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; + if (current_file == "" || /\.dot$/.test(current_file)) { + var element = document.getElementById('output'); + element.readOnly = true; + element.scrollTop = element.scrollHeight; // focus on bottom + 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; + else if (!/\.dot$/.test(current_file)) + FS.writeFile(current_file, document.getElementById('output').value, {encoding: 'utf8'}); + + if (filename == "") { + document.getElementById('output').value = console_messages; + } else { + try { + document.getElementById('output').value = FS.readFile(filename, {encoding: 'utf8'}); + } catch (e) { + document.getElementById('output').value = ""; + FS.writeFile(filename, document.getElementById('output').value, {encoding: 'utf8'}); + } + } + + if (/\.dot$/.test(filename)) { + dot = document.getElementById('output').value; + if (!(dot in svg_cache)) { + el = document.getElementById('viz'); + svg_cache[dot] = el.contentWindow.Viz(dot, "svg"); + } + document.getElementById('svg').innerHTML = svg_cache[dot]; + document.getElementById('svg').style.display = 'block'; + document.getElementById('output').value = ''; + } else { + document.getElementById('svg').innerHTML = ''; + document.getElementById('svg').style.display = 'none'; + } + + current_file = filename; + update_tabs() + } + + function startup() { + el = document.getElementById('viz'); + el.contentWindow.document.open(); + el.contentWindow.document.write('<script type="text/javascript" src="viz.js"></' + 'script>'); + el.contentWindow.document.close(); + + document.getElementById('wait').style.display = 'none'; + document.getElementById('input').style.display = 'block'; + document.getElementById('waitmsg').textContent = 'Waiting for yosys.js...'; + document.getElementById('prompt').textContent = yosys_prompt(); + + try { FS.mkdir('/work'); } catch (e) { } + FS.chdir('/work'); + + update_tabs(); + console.log('yosys.js loaded.'); + } + + 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"; + FS.writeFile('example.v', txt, {encoding: 'utf8'}); + + 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"; + FS.writeFile('example.ys', txt, {encoding: 'utf8'}); + + open_file('example.ys') + document.getElementById('command').focus(); + } + + function yosys_command(cmd) { + Module.ccall('run', '', ['string'], [cmd]) + } + + function yosys_prompt() { + return Module.ccall('prompt', 'string', [], []) + } + + function run_command() { + var cmd = document.getElementById('command').value; + document.getElementById('command').value = ''; + if (history_log.length == 0 || history_log[history_log.length-1] != cmd) + history_log.push(cmd); + history_index = history_log.length; + + var show_dot_before = ""; + try { show_dot_before = FS.readFile('show.dot', { encoding: 'utf8' }); } catch (e) { } + + open_file(''); + Module.print(yosys_prompt() + cmd); + + document.getElementById('wait').style.display = 'block'; + document.getElementById('input').style.display = 'none'; + + function run_command_bh() { + try { + yosys_command(cmd); + } catch (e) { + Module.print('Caught JavaScript exception. (see JavaScript console for details.)'); + console.log(e); + } + + document.getElementById('wait').style.display = 'none'; + document.getElementById('input').style.display = 'block'; + document.getElementById('prompt').textContent = yosys_prompt(); + + var show_dot_after = ""; + try { show_dot_after = FS.readFile('show.dot', { encoding: 'utf8' }); } catch (e) { } + + if (show_dot_before != show_dot_after) + open_file('show.dot'); + + update_tabs(); + } + + window.setTimeout(run_command_bh, 50); + return false; + } + </script> + <script async type="text/javascript" src="yosys.js"></script> +</body></html> |