nga-js: two column display; hide canvas if nothing was drawn to it; glossary below input area

FossilOrigin-Name: cd673444c1019f2c34abd2ed290ae9bb9d47090c27a750bf909f46e17526b881

RELEASE-NOTES

@@ -16,4 +16,4 @@ In progress:
   - remove dead code
   - reformat consistently
   - performance improvements
-
+- split the glossary tool into smaller parts

tools/glossary.retro

@@ -166,7 +166,7 @@ export and (eventually) ePub.
                      c:put ] s:for-each ;
 
   :div             '<div_style='margin-left:_1em;'> s:put  call  '</div> s:put nl ;
-  :header          '<h1>  s:put  call  '</h1>  s:put nl ;
+  :header          '<h2>  s:put  call  '</h2>  s:put nl ;
   :paragraph       '<p>   s:put  call  '</p>   s:put nl ;
   :br              '<br>  s:put nl ;
   :xmp             '<xmp_style='background:#222'> s:put  call  '</xmp> s:put nl ;

vm/nga-js/index.html

@@ -11,8 +11,9 @@
   <div class='left'>
     <textarea id='input' onchange='saveproject()'>
     </textarea>
+    <iframe src='http://forth.works:9999'></iframe>
   </div>
-  <div class='mid'>
+  <div class='right'>
     <div style='border-bottom: 1px solid #FDF6E3; color: #657B83; background: #FDF6E3;'>
       <button onclick='cls()'>Clear</button>
       <button onclick='go()'>Go</button>
@@ -23,9 +24,6 @@
 </xmp>
     </div>
   </div>
-  <div class='right'>
-    <iframe src='http://forth.works:9999'></iframe>
-  </div>
 </body>
 
 </html>

vm/nga-js/nga.js

@@ -10,6 +10,8 @@ var IMAGE_SIZE = 524288;    /* Amount of simulated RAM    */
 var DATA_DEPTH = 8192;      /* Depth of data stack        */
 var ADDRESS_DEPTH = 32768;  /* Depth of the stacks        */
 
+var framebuffer = 0;
+
 function Stack(size) {
   this.sp = 0;
   this.data = new Array(size);
@@ -96,6 +98,7 @@ function rxPrepareVM() {
   ip = 0;
   data.reset();
   address.reset();
+  framebuffer = 0;
 }
 
 instructions[vm.NOP] = function() {}
@@ -475,6 +478,13 @@ function go() {
     j++;
   }
   document.getElementById("console").innerHTML += "\n" + s;
+  if (framebuffer === 0) {
+    var canvas = document.getElementById('canvas');
+    canvas.style.display = "none";
+  } else {
+    var canvas = document.getElementById('canvas');
+    canvas.style.display = "block";
+  }
 }
 
 function saveproject() {
@@ -488,6 +498,7 @@ function loadproject() {
 }
 
 function draw(fb_start) {
+  framebuffer = 1;
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
   var imgData = ctx.createImageData(300, 300);

vm/nga-js/style.css

@@ -18,29 +18,24 @@
  	padding: 0;
  }
  .left,
- .mid,
  .right {
  	float: left;
  	height: 100vp;
  	overflow: auto;
  	overflow-x: hidden;
  	height: 100%;
- }
- .left,
- .mid {
- 	width: 39%;
  	border-right: 1px solid #FDF6E3;
  }
- .mid {
- 	background: #657B83;
+ .left {
+ 	width: 49.5%;
  }
  .right {
- 	width: 21.5%;
+ 	width: 49.5%;
  }
  textarea,
  iframe {
  	width: 100%;
- 	height: 100%;
+ 	height: 70%;
  	box-sizing: border-box;
  	/* For IE and modern versions of Chrome */
  	-moz-box-sizing: border-box;
@@ -53,6 +48,9 @@
  	border: 0px;
  	direction: ltr;
  }
+ iframe {
+ 	height: 30%;
+ }
  button {
  	color: #657B83;
  	background: #FDF6E3;