YosysJS: Wait for Viz to load

diff --git a/misc/yosysjs/demo03.html b/misc/yosysjs/demo03.html
index 36cc6cf4a48751e867ee0952ed6402bd58647ad3..c9386aee8cc61bb976217b6d404345e1fab27afc 100644 (file)
--- a/misc/yosysjs/demo03.html
+++ b/misc/yosysjs/demo03.html
@@ -24,16 +24,18 @@ endmodule
        <h1>YosysJS Example Application #03</h1>
        <b>Your mission:</b> Create a behavioral Verilog model for the following circuit:
        <p/>
-       <svg id="schem" width="800"></svg>
-       <p/>
-       <pre id="code" style="width: 800px; border:2px solid #000; padding: 0.5em;"><span class="noedit">module top(input clk, reset, input [7:0] A, output reg [7:0] Y);
-  always @(posedge clock) begin</span><span class="edit" contenteditable="true">
-    Y &lt;= A | {4{reset}};
-  </span><span class="noedit">end
-endmodule</span></pre><p/>
-       <input type="button" value="Check Model" onclick="check_model()"> <span id="checkmessage"></span>
-       <p/>
-       <p id="wave">&nbsp;</p>
+       <div id="main" style="visibility: hidden">
+               <svg id="schem" width="800"></svg>
+               <p/>
+               <pre id="code" style="width: 800px; border:2px solid #000; padding: 0.5em;"><span class="noedit">module top(input clk, reset, input [7:0] A, output reg [7:0] Y);
+         always @(posedge clock) begin</span><span class="edit" contenteditable="true">
+           Y &lt;= A | {4{reset}};
+         </span><span class="noedit">end
+       endmodule</span></pre><p/>
+               <input type="button" value="Check Model" onclick="check_model()"> <span id="checkmessage"></span>
+               <p/>
+               <p id="wave">&nbsp;</p>
+       </div>
        <script type="text/javascript">
                function on_ys_ready() {
                        ys.write_file('golden.v', document.getElementById('golden_verilog').textContent);
@@ -42,6 +44,7 @@ endmodule</span></pre><p/>
                        YosysJS.dot_into_svg(ys.read_file('show.dot'), 'schem');
                        document.getElementById('popup').style.visibility = 'hidden';
                        document.getElementById('popupmsg').textContent = 'Please wait..';
+                       document.getElementById('main').style.visibility = 'visible';
                }
                function check_model() {
                        function work() {

diff --git a/misc/yosysjs/yosysjs.js b/misc/yosysjs/yosysjs.js
index b0205bf6163ade1ef4aa9378f9b38e38adab040e..2c78451d2843e47e70475f5a8e92ca0e8596027e 100644 (file)
--- a/misc/yosysjs/yosysjs.js
+++ b/misc/yosysjs/yosysjs.js
@@ -1,6 +1,7 @@
 var YosysJS = new function() {
        this.script_element = document.currentScript;
        this.viz_element = undefined;
+       this.viz_ready = true;
 
        this.url_prefix = this.script_element.src.replace(/[^/]+$/, '')
 
@@ -12,9 +13,21 @@ var YosysJS = new function() {
                this.viz_element.style.display = 'none'
                document.body.appendChild(this.viz_element);
 
-               this.viz_element.contentWindow.document.open()
-               this.viz_element.contentWindow.document.write('<script type="text/javascript" src="' + this.url_prefix + 'viz.js"></' + 'script>');
-               this.viz_element.contentWindow.document.close()
+               this.viz_element.contentWindow.document.open();
+               this.viz_element.contentWindow.document.write('<script type="text/javascript" onload="viz_ready = true;" src="' + this.url_prefix + 'viz.js"></' + 'script>');
+               this.viz_element.contentWindow.document.close();
+
+               var that = this;
+               function check_viz_ready() {
+                       if (that.viz_element.contentWindow.viz_ready) {
+                               console.log("YosysJS: Successfully loaded Viz.");
+                               that.viz_ready = true;
+                       } else
+                               window.setTimeout(check_viz_ready, 100);
+               }
+
+               this.viz_ready = false;
+               window.setTimeout(check_viz_ready, 100);
        }
 
        this.dot_to_svg = function(dot_text) {
@@ -40,6 +53,7 @@ var YosysJS = new function() {
 
        this.create = function(reference_element, on_ready) {
                var ys = new Object();
+               ys.YosysJS = this;
                ys.init_script = "";
                ys.ready = false;
                ys.verbose = false;
@@ -185,13 +199,13 @@ var YosysJS = new function() {
                        } catch (e) { }
                }
 
-               doc.open()
+               doc.open();
                doc.write('<script type="text/javascript" src="' + this.url_prefix + 'yosys.js"></' + 'script>');
-               doc.close()
+               doc.close();
 
                if (on_ready || ys.init_script) {
                        function check_ready() {
-                               if (ys.ready) {
+                               if (ys.ready && ys.YosysJS.viz_ready) {
                                        if (ys.init_script) {
                                                ys.write_file("/script.ys", ys.init_script);
                                                ys.run("script /script.ys");