Add primitive video debugging

With reference to #131

debug.js

@@ -7,7 +7,7 @@ define(['jquery', 'underscore', 'utils'], function ($, _, utils) {
         var disass = $('#disassembly');
         var memview = $('#memory');
         var memloc = 0;
-        var debugNode = $('#debug, #hardware_debug');
+        var debugNode = $('#debug, #hardware_debug, #crtc_debug');
 
         function setupGoto(form, func) {
             var addr = form.find(".goto-addr");
@@ -50,6 +50,7 @@ define(['jquery', 'underscore', 'utils'], function ($, _, utils) {
 
         var uservia;
         var sysvia;
+        var crtc;
 
         function updateElem(elem, val) {
             var prevVal = elem.text();
@@ -91,11 +92,60 @@ define(['jquery', 'underscore', 'utils'], function ($, _, utils) {
             return update;
         }
 
+        function setupCrtc(node, video) {
+            if (!video) return utils.noop;
+            var updates = [];
+
+            var regNode = node.find('.crtc_regs');
+
+            function makeRow(node, text) {
+                var row = node.find(".template").clone().removeClass("template").appendTo(node);
+                row.find(".register").text(text);
+                return row.find(".value");
+            }
+
+            for (var i = 0; i < 16; ++i) {
+                (function (i) {
+                    var value = makeRow(regNode, "R" + i);
+                    updates.push(function () {
+                        updateElem(value, hexbyte(video.regs[i]));
+                    });
+                })(i);
+            }
+
+            var stateNode = node.find('.crtc_state');
+            var others = [
+                'bitmapX', 'bitmapY', 'dispEnabled',
+                'horizCounter', 'inHSync', 'scanlineCounter', 'vertCounter', 'inVSync', 'inVertAdjust',
+                'addr', 'addrLine', 'lineStartAddr', 'nextLineStartAddr'];
+            $.each(others, function (_, elem) {
+                var value = makeRow(stateNode, elem);
+                if (typeof(video[elem]) === "boolean") {
+                    updates.push(function () {
+                        updateElem(value, video[elem] ? "true" : "false");
+                    });
+                } else {
+                    updates.push(function () {
+                        updateElem(value, hexword(video[elem]));
+                    });
+                }
+            });
+
+            var update = function () {
+                $.each(updates, function (_, up) {
+                    up();
+                });
+            };
+            update();
+            return update;
+        }
+
         this.setCpu = function (c) {
             cpu = c;
             disassemble = c.disassembler.disassemble;
             sysvia = setupVia($('#sysvia'), c.sysvia);
             uservia = setupVia($('#uservia'), c.uservia);
+            crtc = setupCrtc($('#crtc_debug'), c.video);
         };
 
         var disassPc = null;
@@ -107,6 +157,7 @@ define(['jquery', 'underscore', 'utils'], function ($, _, utils) {
             updateMemory();
             sysvia();
             uservia();
+            crtc();
             video.debugPaint();
         };
 

index.html

@@ -179,6 +179,30 @@
             </tbody>
         </table>
     </div>
+    <div id="crtc_debug" class="initially-hidden">
+        <div class="crtc_state">
+            <h6 class="dbg">6845 state</h6>
+            <table>
+                <tbody>
+                <tr class="template">
+                    <th><span class="register"></span>:</th>
+                    <td class="value"></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="crtc_regs">
+            <h6 class="dbg">6845 regs</h6>
+            <table>
+                <tbody>
+                <tr class="template">
+                    <th><span class="register"></span>:</th>
+                    <td class="value"></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
     <div id="debug" class="initially-hidden">
         <div class="debug-container">
             <form class="form-inline" role="form" id="goto-mem-addr-form">
@@ -223,7 +247,7 @@
     </div>
     <div id="hardware_debug" class="initially-hidden">
         <div class="via_regs" id="sysvia">
-            <h6>System VIA</h6>
+            <h6 class="dbg">System VIA</h6>
             <table>
                 <tbody>
                 <tr class="template">
@@ -234,7 +258,7 @@ <h6>System VIA</h6>
             </table>
         </div>
         <div class="via_regs" id="uservia">
-            <h6>User VIA</h6>
+            <h6 class="dbg">User VIA</h6>
             <table>
                 <tbody>
                 <tr class="template">
@@ -387,7 +411,8 @@ <h4 class="modal-title">Load cassette image</h4>
             <div class="modal-body">
                 To load a custom cassette image, get a UEF file and load it below.
                 <div class="tape">
-                    <label>Load local UEF file: <input type="file" id="tape_load" accept=".uef,application/binary"></label>
+                    <label>Load local UEF file: <input type="file" id="tape_load"
+                                                       accept=".uef,application/binary"></label>
                 </div>
             </div>
             <div class="modal-footer">

jsbeeb.css

@@ -18,14 +18,17 @@ body {
     position: absolute;
     z-index: -2;
 }
+
 .sidebar.right {
     right: -205px;
     top: 0px;
 }
+
 .sidebar.left {
     left: -205px;
     top: 0px;
 }
+
 .sidebar.bottom {
     bottom: -100px;
 }
@@ -75,10 +78,31 @@ body {
     width: 90px;
 }
 
+#crtc_debug {
+    background-color: #333333;
+    border: 1px solid #555555;
+    margin: 2px;
+    padding: 2px;
+    position: fixed;
+    top: 80px;
+    right: 0px;
+    font-size: 8pt;
+    font-family: monospace;
+}
+
+h6.dbg { text-align: center }
 .via_regs {
     display: inline-block;
 }
 
+.crtc_regs {
+    display: inline-block;
+}
+
+.crtc_state {
+    display: inline-block;
+}
+
 span.accesskey {
     text-decoration: underline;
 }