Merge pull request #89 from richtw1/master

Video changes and 'different' teletext
mattgodbolt · Oct 4, 2015 · e1733b8 · e1733b8
2 parents 65fa954 + d18622f
commit e1733b8
Show file tree

Hide file tree

Showing 7 changed files with 422 additions and 2,643 deletions.
diff --git a/canvas.js b/canvas.js
@@ -5,10 +5,10 @@ define(['webgl-debug'], function (webglDebug) {
         this.ctx = canvas.getContext('2d');
         if (this.ctx === null) throw new Error("Unable to get a 2D context");
         this.ctx.fillStyle = 'black';
-        this.ctx.fillRect(0, 0, 1280, 768);
+        this.ctx.fillRect(0, 0, 1024, 625);
         this.backBuffer = window.document.createElement("canvas");
-        this.backBuffer.width = 1280;
-        this.backBuffer.height = 768;
+        this.backBuffer.width = 1024;
+        this.backBuffer.height = 625;
         this.backCtx = this.backBuffer.getContext("2d");
         this.imageData = this.backCtx.createImageData(this.backBuffer.width, this.backBuffer.height);
         this.canvasWidth = canvas.width;
@@ -67,8 +67,8 @@ define(['webgl-debug'], function (webglDebug) {
         checkedGl.linkProgram(program);
         checkedGl.useProgram(program);
 
-        var width = 1280;
-        var height = 768;
+        var width = 1024;
+        var height = 1024;
 
         this.fb8 = new Uint8Array(width * height * 4);
         this.fb32 = new Uint32Array(this.fb8.buffer);
@@ -95,7 +95,6 @@ define(['webgl-debug'], function (webglDebug) {
         checkedGl.enableVertexAttribArray(uvAttrLoc);
         var uvBuffer = checkedGl.createBuffer();
         checkedGl.bindBuffer(checkedGl.ARRAY_BUFFER, uvBuffer);
-        checkedGl.bufferData(checkedGl.ARRAY_BUFFER, new Float32Array([0, 1, 0, 0, 1, 1, 1, 0]), checkedGl.STATIC_DRAW);
         checkedGl.vertexAttribPointer(uvAttrLoc, 2, checkedGl.FLOAT, false, 0, 0);
 
         checkedGl.activeTexture(gl.TEXTURE0);
@@ -106,7 +105,7 @@ define(['webgl-debug'], function (webglDebug) {
         this.paint = function (minx, miny, maxx, maxy) {
             var gl = this.gl;
             // We can't specify a stride for the source, so have to use the full width.
-            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, miny, width, maxy - miny, gl.RGBA, gl.UNSIGNED_BYTE, this.fb8);
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, miny, width, maxy - miny, gl.RGBA, gl.UNSIGNED_BYTE, this.fb8.subarray(miny * width * 4, maxy * width * 4));
 
             if (lastMinX !== minx || lastMinY !== miny || lastMaxX !== maxx || lastMaxY !== maxy) {
                 lastMinX = minx;
@@ -126,7 +125,7 @@ define(['webgl-debug'], function (webglDebug) {
                 uvFloatArray[6] = maxx;
                 uvFloatArray[7] = miny;
                 gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
-                gl.bufferData(gl.ARRAY_BUFFER, uvFloatArray, gl.STATIC_DRAW);
+                gl.bufferData(gl.ARRAY_BUFFER, uvFloatArray, gl.DYNAMIC_DRAW);
             }
 
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

diff --git a/index.html b/index.html
@@ -138,8 +138,8 @@
 <div>
     <div id="cub-monitor">
         <div>
-            <img id="#cub-monitor-pic" width="921" height="682" src="images/cub-monitor.png">
-            <canvas id="screen" width="921" height="682"></canvas>
+            <img id="#cub-monitor-pic" width="896" height="648" src="images/cub-monitor.png">
+            <canvas id="screen" width="896" height="600"></canvas>
         </div>
     </div>
     <div id="leds">

diff --git a/jsbeeb.css b/jsbeeb.css
@@ -7,8 +7,8 @@ body {
 }
 
 #cub-monitor > div {
-    width: 921px;
-    height: 682px;
+    width: 896px;
+    height: 648px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
@@ -21,10 +21,10 @@ body {
 #screen {
     position: absolute;
     z-index: -1;
-    top: 0px;
+    top: 8px;
     left: 0px;
-    width: 921px;
-    height: 682px;
+    width: 896px;
+    height: 600px;
     display: block;
     background-color: black;
 }