added Split for main window

2018-11-23 13:29:11 -05:00 · 2018-11-23 13:29:11 -05:00 · 84c8c12092
parent 4034be10c4
commit 84c8c12092
8 changed files with 63 additions and 27 deletions
--- a/css/ui.css
+++ b/css/ui.css
@ -66,7 +66,8 @@
 }
 #workspace {
  background-color:#333;
-  width:50%;
+  float:left;
+  height:100%;
 }
 div.editor {
  line-height:1.25;
@ -217,16 +218,13 @@ a.dropdown-toggle {
    border-radius:6px 0 6px 6px;
 }
 div.emulator {
-  position:absolute;
-  right:0;
-  top:0;
-  width:50%;
+  float:left;
  height:100%;
  background-color: #666;
  margin-top: 20px auto 0;
 }
 div.emuoverlay {
-  position:absolute;
+  position:relative;
  left:0;
  top:0;
  width:100%;
@ -238,7 +236,7 @@ div.emuscope {
  pointer-events:auto;
 }
 div.emuspacer {
-  width:0;
+  width:100%;
 }
 /* has to be here b/c renders differently after first load if in inline style */
 .emuvideo {
@ -312,10 +310,10 @@ canvas.pixelated {
 }
 div.replaydiv {
  position:absolute;
-  padding:20px;
+  padding:15px;
  left:50%;
  bottom:0;
-  width:50%;
+  right:0;
  background-color: #666;
 }
 .slider {
@ -328,6 +326,14 @@ div.replaydiv {
  background-position: 50%;
  pointer-events:auto;
 }
+.gutter.gutter-horizontal {
+  background-image: url('grips/vertical.png');
+  cursor: col-resize;
+}
+.gutter.gutter-vertical {
+  background-image: url('grips/horizontal.png');
+  cursor: row-resize;
+}
 .gutter.gutter-vertical {
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
 }
@ -335,6 +341,11 @@ div.replaydiv {
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
  height:100%;
 }
+.split,
+.gutter.gutter-horizontal {
+    float: left;
+    height: 100%;
+}
 div.markdown {
 background-color: #fff;
 width:94%;
--- a/doc/notes.txt
+++ b/doc/notes.txt
@ -78,7 +78,7 @@ TODO:
 - batariBasic: proper line numbers, listing, syntax highlighting
 - show player controls for each platform, allow touch support
 - granular control over time scrubbing, show CPU state
- __MAIN__ for main C file
+- error showing replay div before rom starts


 WEB WORKER FORMAT
--- a/index.html
+++ b/index.html
@ -203,19 +203,19 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
    </div>
    <div id="emuoverlay" class="emuoverlay" style="display:none">
    </div>
+    <div id="replaydiv" class="replaydiv" style="display:none">
+     <div style="display:flex">
+      <button id="replay_min" type="button" title="Start of replay"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>
+      <button id="replay_back" type="button" title="Back one frame"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
+      <span id="replay_frame" style="text-align:center;width:3em;margin-left:1em;color:#ccc">-</span>
+      <input type="range" min="0" max="0" value="0" class="slider" id="replayslider">
+      <button id="replay_fwd" type="button" title="Ahead one frame"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
+      <button id="replay_max" type="button" title="End of replay"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button>
+     </div>
+    </div>
  </div>
  <div id="mem_info" class="mem_info" style="display:none">
  </div>
-  <div id="replaydiv" class="replaydiv" style="display:none">
-   <div style="display:flex">
-    <button id="replay_min" type="button" title="Start of replay"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>
-    <button id="replay_back" type="button" title="Back one frame"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
-    <span id="replay_frame" style="text-align:center;width:3em;margin-left:1em;color:#ccc">-</span>
-    <input type="range" min="0" max="0" value="0" class="slider" id="replayslider">
-    <button id="replay_fwd" type="button" title="Ahead one frame"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
-    <button id="replay_max" type="button" title="End of replay"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button>
-   </div>
-  </div>
  <div id="error_alert" class="alert alert-danger alert-dismissable" style="position:absolute;right:0;top:0;display:none">
    <button type="button" class="close" onclick="$('.alert').hide()" aria-hidden="true">&times;</button>
    <div id="error_alert_msg"></div>
@ -351,7 +351,6 @@ function require(modname) {
 <script src="local/lzg.js"></script>

 <script>
-  //Split(["#workspace", "#emulator"], {sizes: [50,50]});
  startUI(true);
 </script>

--- a/scripts/sync-dev.sh
+++ b/scripts/sync-dev.sh
@ -3,4 +3,4 @@
 . ./scripts/env.sh
 DESTPATH=$RSYNC_PATH/dev/
 git ls-files -z | rsync --stats --exclude '.*' --exclude 'scripts/*' --exclude=node_modules -ril --chmod=a+rx -e "ssh -p 2222" --files-from - -0 . $DESTPATH
-rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" ./gen ./mame  $DESTPATH/
+rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" ./gen $DESTPATH/
--- a/scripts/sync-version-prod.sh
+++ b/scripts/sync-version-prod.sh
@ -21,5 +21,5 @@ mkdir -p $TMPDIR
 git archive $VERSION | tar x -C $TMPDIR
 echo "Copying to $DESTPATH..."
 rsync --stats --exclude '.*' --exclude 'scripts/*' --exclude=node_modules --copy-dest=$DEVPATH -rilz --chmod=a+rx -e "ssh -p 2222" $TMPDIR/ $SUBMODS $DESTPATH
-rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" --copy-dest=$DEVPATH ./gen ./mame  $DESTPATH/
+rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" --copy-dest=$DEVPATH ./gen  $DESTPATH/
 echo "Done."
--- a/src/platform/verilog.ts
+++ b/src/platform/verilog.ts
@ -301,6 +301,7 @@ var VerilogPlatform = function(mainElement, options) {
 
  waveview : WaveformView;
  wavediv : JQuery;
+  topdiv : JQuery;
  split;
  hasvideo : boolean;

@ -326,15 +327,18 @@ var VerilogPlatform = function(mainElement, options) {
    // setup scope
    trace_buffer = new Uint32Array(0x20000);
    var overlay = $("#emuoverlay").show();
-    var topdiv = $('<div class="emuspacer">').appendTo(overlay);
+    this.topdiv = $('<div class="emuspacer">').appendTo(overlay);
+    vcanvas.appendTo(this.topdiv);
    this.wavediv = $('<div class="emuscope">').appendTo(overlay);
-    this.split = Split( [topdiv[0], this.wavediv[0]], {
+    this.split = Split( [this.topdiv[0], this.wavediv[0]], {
      minSize: [0,0],
      sizes: [99,1],
      direction: 'vertical',
      gutterSize: 16,
      onDrag: () => {
        if (this.waveview) this.waveview.recreate();
+        vcanvas.css('position','relative');
+        vcanvas.css('top', -this.wavediv.height()+'px');
      },
      onDragStart: () => {
        $(".emuoverlay").css("pointer-events", "auto"); // allow drag
@ -356,6 +360,7 @@ var VerilogPlatform = function(mainElement, options) {
  }
  
  updateVideoFrame() {
+    this.topdiv.show(); //show crt
    this.setGenInputs();
    var fps = this.getFrameRate();
    // darken the previous frame?
@ -403,6 +408,7 @@ var VerilogPlatform = function(mainElement, options) {
  
  updateScopeFrame() {
    this.split.setSizes([0,100]); // ensure scope visible
+    this.topdiv.hide();// hide crt
    var done = this.fillTraceBuffer(32 * trace_signals.length); // TODO: const
    if (done)
      this.pause(); // TODO?
--- a/src/ui.ts
+++ b/src/ui.ts
@ -15,7 +15,7 @@ import { getFilenameForPath, getFilenamePrefix, highlightDifferences, invertMap,
 import { StateRecorderImpl } from "./recorder";

 // external libs (TODO)
-declare var ga, Tour, GIF, saveAs, JSZip, Mousetrap;
+declare var ga, Tour, GIF, saveAs, JSZip, Mousetrap, Split;
 // in index.html
 declare var exports;

@ -1189,6 +1189,24 @@ function loadScript(scriptfn, onload) {
  document.getElementsByTagName('head')[0].appendChild(script);
 }

+export function setupSplits() {
+  const splitName = 'workspace-split-' + platform_id;
+  var sizes = [50, 50];
+  var sizesStr = localStorage.getItem(splitName)
+  if (sizesStr) {
+    try {
+      sizes = JSON.parse(sizesStr);
+    } catch (e) { console.log(e); }
+  }
+  var split;
+  split = Split(['#workspace', '#emulator'], {
+    sizes: sizes,
+    onDragEnd: function() {
+      localStorage.setItem(splitName, JSON.stringify(split.getSizes()))
+    },
+  });
+}
+
 // start
 export function startUI(loadplatform : boolean) {
  installErrorHandler();
@ -1198,6 +1216,7 @@ export function startUI(loadplatform : boolean) {
    platform_id = qs['platform'] = "vcs";
  }
  $("#item_platform_"+platform_id).addClass("dropdown-item-checked");
+  setupSplits();
  // parse query string
  // is this a share URL?
  if (qs['sharekey']) {
@ -1225,3 +1244,4 @@ export function startUI(loadplatform : boolean) {
    }
  }
 }
+
--- a/testwave.html
+++ b/testwave.html
@ -48,7 +48,7 @@ body {
 <div id="notebook">
  <div id="workspace">
  </div>
-  <div class="emulator" id="emulator">
+  <div class="emulator" id="emulator" style="width:100%">
    <div class="emuoverlay" id="emuoverlay">
        <span class="btn-group" role="group">
          <button type="button" class="btn btn-xs" onclick="this.blur();" title="Go to start of trace"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>