misc/yosysjs/demo01.html

   1 <html><head>
   2         <title>YosysJS Example Application #01</title>
   3         <script type="text/javascript" src="yosysjs.js"></script>
   4 </head><body onload="document.getElementById('command').focus()">
   5         <h1>YosysJS Example Application #01</h1>
   6         <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>
   7         <svg id="svg" style="display: none; position: absolute; padding: 10px; width: calc(100% - 40px); height: 480px;"></svg>
   8         <div><textarea id="output" style="width: 100%; height: 500px"></textarea></div>
   9         <div id="wait" style="display: block"><br/><b><span id="waitmsg">Loading...</span></b></div>
  10         <div id="input" style="display: none"><form onsubmit="window.setTimeout(run_command); return false"><br/><tt><span id="prompt">
  11                         </span></tt><input id="command" type="text" onkeydown="history(event)" style="font-family: monospace; font-weight: bold;" size="100"></form></div>
  12         <script type='text/javascript'>
  13                 function print_output(text) {
  14                         var el = document.getElementById('output');
  15                         el.value += text + "\n";
  16                 }
  17
  18                 YosysJS.load_viz();
  19                 var ys = YosysJS.create("", function() {
  20                         print_output(ys.print_buffer);
  21
  22                         document.getElementById('wait').style.display = 'none';
  23                         document.getElementById('input').style.display = 'block';
  24                         document.getElementById('waitmsg').textContent = 'Waiting for yosys.js...';
  25                         document.getElementById('prompt').textContent = ys.prompt();
  26
  27                         update_tabs();
  28                 });
  29
  30                 ys.echo = true;
  31
  32                 var history_log = [];
  33                 var history_index = 0;
  34                 var history_bak = "";
  35
  36                 function history(ev) {
  37                         if (ev.keyCode == 38) {
  38                                 el = document.getElementById('command');
  39                                 if (history_index == history_log.length)
  40                                         history_bak = el.value
  41                                 if (history_index > 0)
  42                                         el.value = history_log[--history_index];
  43                         }
  44                         if (ev.keyCode == 40) {
  45                                 if (history_index < history_log.length) {
  46                                         el = document.getElementById('command');
  47                                         if (++history_index < history_log.length)
  48                                                 el.value = history_log[history_index];
  49                                         else
  50                                                 el.value = history_bak;
  51                                 }
  52                         }
  53                 }
  54
  55                 var current_file = "";
  56                 var console_messages = "";
  57                 var svg_cache = { };
  58
  59                 function update_tabs() {
  60                         var f, html = "", flist = ys.read_dir('.');
  61                         if (current_file == "") {
  62                                 html += '<tt>[ <b>Console</b>';
  63                         } else {
  64                                 html += '<tt>[ <span onclick="open_file(\'\')">Console</span>';
  65                         }
  66                         for (i in flist) {
  67                                 f = flist[i]
  68                                 if (f == "." || f == "..")
  69                                         continue;
  70                                 if (current_file == f) {
  71                                         html += ' | <b>' + f + '</b>';
  72                                 } else {
  73                                         html += ' | <span onclick="open_file(\'' + f + '\')">' + f + '</span>';
  74                                 }
  75                         }
  76                         html += ' | <span onclick="open_file(prompt(\'Filename:\'))">new file</span> ]</tt>';
  77                         document.getElementById('tabs').innerHTML = html;
  78                         if (current_file == "" || /\.dot$/.test(current_file)) {
  79                                 var element = document.getElementById('output');
  80                                 element.readOnly = true;
  81                                 element.scrollTop = element.scrollHeight; // focus on bottom
  82                                 document.getElementById('command').focus();
  83                         } else {
  84                                 document.getElementById('output').readOnly = false;
  85                                 document.getElementById('output').focus();
  86                         }
  87                 }
  88
  89                 function open_file(filename)
  90                 {
  91                         if (current_file == "")
  92                                 console_messages = document.getElementById('output').value;
  93                         else if (!/\.dot$/.test(current_file))
  94                                 ys.write_file(current_file, document.getElementById('output').value);
  95
  96                         if (filename == "") {
  97                                 document.getElementById('output').value = console_messages;
  98                         } else {
  99                                 try {
 100                                         document.getElementById('output').value = ys.read_file(filename);
 101                                 } catch (e) {
 102                                         document.getElementById('output').value = "";
 103                                         ys.write_file(filename, document.getElementById('output').value);
 104                                 }
 105                         }
 106
 107                         if (/\.dot$/.test(filename)) {
 108                                 dot = document.getElementById('output').value;
 109                                 YosysJS.dot_into_svg(dot, 'svg');
 110                                 document.getElementById('svg').style.display = 'block';
 111                                 document.getElementById('output').value = '';
 112                         } else {
 113                                 document.getElementById('svg').innerHTML = '';
 114                                 document.getElementById('svg').style.display = 'none';
 115                         }
 116
 117                         current_file = filename;
 118                         update_tabs()
 119                 }
 120
 121                 function startup() {
 122                 }
 123
 124                 function load_example() {
 125                         open_file('')
 126
 127                         var txt = "";
 128                         txt += "// a simple yosys.js example. run \"script example.ys\".\n";
 129                         txt += "\n";
 130                         txt += "module example(input clk, input rst, input inc, output reg [3:0] cnt);\n";
 131                         txt += "  always @(posedge clk) begin\n";
 132                         txt += "    if (rst)\n";
 133                         txt += "      cnt <= 0;\n";
 134                         txt += "    else if (inc)\n";
 135                         txt += "      cnt <= cnt + 1;\n";
 136                         txt += "  end\n";
 137                         txt += "endmodule\n";
 138                         txt += "\n";
 139                         ys.write_file('example.v', txt);
 140
 141                         var txt = "";
 142                         txt += "# a simple yosys.js example. run \"script example.ys\".\n";
 143                         txt += "\n";
 144                         txt += "design -reset\n";
 145                         txt += "read_verilog example.v\n";
 146                         txt += "proc\n";
 147                         txt += "opt\n";
 148                         txt += "show\n";
 149                         txt += "\n";
 150                         ys.write_file('example.ys', txt);
 151
 152                         open_file('example.ys')
 153                         document.getElementById('command').focus();
 154                 }
 155
 156                 function run_command() {
 157                         var cmd = document.getElementById('command').value;
 158                         document.getElementById('command').value = '';
 159                         if (history_log.length == 0 || history_log[history_log.length-1] != cmd)
 160                                 history_log.push(cmd);
 161                         history_index = history_log.length;
 162
 163                         var show_dot_before = "";
 164                         try { show_dot_before = ys.read_file('show.dot'); } catch (e) { }
 165
 166                         open_file('');
 167
 168                         document.getElementById('wait').style.display = 'block';
 169                         document.getElementById('input').style.display = 'none';
 170
 171                         function run_command_bh() {
 172                                 try {
 173                                         ys.run(cmd);
 174                                 } catch (e) {
 175                                         ys.write('Caught JavaScript exception. (see JavaScript console for details.)');
 176                                         console.log(e);
 177                                 }
 178                                 print_output(ys.print_buffer);
 179
 180                                 document.getElementById('wait').style.display = 'none';
 181                                 document.getElementById('input').style.display = 'block';
 182                                 document.getElementById('prompt').textContent = ys.prompt();
 183
 184                                 var show_dot_after = "";
 185                                 try { show_dot_after = ys.read_file('show.dot'); } catch (e) { }
 186
 187                                 if (show_dot_before != show_dot_after)
 188                                         open_file('show.dot');
 189
 190                                 update_tabs();
 191                         }
 192
 193                         window.setTimeout(run_command_bh, 50);
 194                         return false;
 195                 }
 196         </script>
 197 </body></html>