Limit screen updates to once every 30ms and only if needed.

sim/state/screen.ts

@@ -2,6 +2,7 @@
 namespace pxsim {
 
     export class EV3ScreenState {
+        shouldUpdate: boolean;
         points: {[x: number]: {[y: number]: number}};
         constructor() {
             this.points = {};
@@ -14,6 +15,7 @@ namespace pxsim {
             const xPoints = this.points[x]
             if (!xPoints) this.points[x] = {};
             this.points[x][y] = v;
+            this.shouldUpdate = true;
         }
     }
 }
@@ -24,7 +26,6 @@ namespace pxsim.screen {
     export function _setPixel(x: number, y: number, mode: Draw) {
         const screenState = (board() as DalBoard).screenState;
         screenState.setPixel(x, y, mode);
-        runtime.queueDisplayUpdate();
     }
 
 

sim/visuals/board.ts

@@ -284,6 +284,11 @@ namespace pxsim.visuals {
                 this.updateState();
                 this.attachEvents();
             }
+
+            let board = this;
+            window.setInterval(function(){
+                board.updateScreen();
+            }, 30);
         }
 
         public getView(): SVGAndSize<SVGSVGElement> {
@@ -459,6 +464,9 @@ namespace pxsim.visuals {
             let state = this.board;
             if (!state || !state.screenState) return;
 
+            if (!state.screenState.shouldUpdate) return;
+            state.screenState.shouldUpdate = false;
+
             this.screenCanvasData = this.screenCanvasCtx.getImageData(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
             Object.keys(state.screenState.points).forEach(xStr => {