<html><head>
	<title>YosysJS Example Application #02</title>
	<script type="text/javascript" src="yosysjs.js"></script>
</head><body>
	<div id="popup" style="position: fixed; left: 0; top: 0; width:100%; height:100%; text-align:center; z-index: 1000;"><div
		style="width:300px; margin: 200px auto; background-color: #88f; border:3px dashed #000;
		padding:15px; text-align:center;"><span id="popupmsg">Loading...</span></div>
	</div>
	<h1>YosysJS Example Application #02</h1>
	<textarea id="code" style="width: 800px; height: 300px;">
// borrowed with some modifications from
// http://www.ee.ed.ac.uk/~gerard/Teach/Verilog/manual/Example/lrgeEx2/cooley.html
module up3down5(clock, data_in, up, down, carry_out, borrow_out, count_out, parity_out);

input [8:0] data_in;
input clock, up, down;

output reg [8:0] count_out;
output reg carry_out, borrow_out, parity_out;

reg [9:0] cnt_up, cnt_dn;
reg [8:0] count_nxt;

always @(posedge clock)
begin
	cnt_dn = count_out - 3'b 101;
	cnt_up = count_out + 2'b 11;

	case ({up,down})
		2'b 00 : count_nxt = data_in;
		2'b 01 : count_nxt = cnt_dn;
		2'b 10 : count_nxt = cnt_up;
		2'b 11 : count_nxt = count_out;
		default : count_nxt = 9'bX;
	endcase

	parity_out  &lt;= ^count_nxt;
	carry_out   &lt;= up &amp; cnt_up[9];
	borrow_out  &lt;= down &amp; cnt_dn[9];
	count_out   &lt;= count_nxt;
end

endmodule
	</textarea><p/>
	<input type="button" value="Before Behavioral Synth" onclick="synth1()">
	<input type="button" value="After Behavioral Synth" onclick="synth2()">
	<input type="button" value="After RTL Synth" onclick="synth3()">
	<input type="button" value="After Gate-Level Synth" onclick="synth4()"><p/>
	<svg id="svg" width="800"></svg>
	</td></tr></table>
	<script type="text/javascript">
		YosysJS.load_viz();
		function on_ys_ready() {
			document.getElementById('popup').style.visibility = 'hidden';
			document.getElementById('popupmsg').textContent = 'Please wait..';
		}
		function handle_run_errors(logmsg, errmsg) {
			if (errmsg != "") {
				window.alert(errmsg);
				document.getElementById('popup').style.visibility = 'hidden';
			}
		}
		function synth1() {
			document.getElementById('popup').style.visibility = 'visible';
			ys.write_file("input.v", document.getElementById('code').value);
			ys.run('design -reset; read_verilog input.v; show -stretch', handle_run_errors);
			ys.read_file('show.dot', (function(text){
				console.log(ys.errmsg);
				if (ys.errmsg == "") YosysJS.dot_into_svg(text, 'svg');
				document.getElementById('popup').style.visibility = 'hidden';
			}));
		}
		function synth2() {
			document.getElementById('popup').style.visibility = 'visible';
			ys.write_file("input.v", document.getElementById('code').value);
			ys.run('design -reset; read_verilog input.v; proc; opt_clean; show -stretch', handle_run_errors);
			ys.read_file('show.dot', (function(text){
				if (ys.errmsg == "") YosysJS.dot_into_svg(text, 'svg');
				document.getElementById('popup').style.visibility = 'hidden';
			}));
		}
		function synth3() {
			document.getElementById('popup').style.visibility = 'visible';
			ys.write_file("input.v", document.getElementById('code').value);
			ys.run('design -reset; read_verilog input.v; synth -run coarse; show -stretch', handle_run_errors);
			ys.read_file('show.dot', (function(text){
				if (ys.errmsg == "") YosysJS.dot_into_svg(text, 'svg');
				document.getElementById('popup').style.visibility = 'hidden';
			}));
		}
		function synth4() {
			document.getElementById('popup').style.visibility = 'visible';
			ys.write_file("input.v", document.getElementById('code').value);
			ys.run('design -reset; read_verilog input.v; synth -run coarse; synth -run fine; show -stretch', handle_run_errors);
			ys.read_file('show.dot', (function(text){
				if (ys.errmsg == "") YosysJS.dot_into_svg(text, 'svg');
				document.getElementById('popup').style.visibility = 'hidden';
			}));
		}
		var ys = YosysJS.create_worker(on_ys_ready);
		ys.verbose(true);
	</script>
</body></html>