c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Using game loop instead of queueAnimationUpdate

Browse Source
This commit is contained in:
Sam El-Husseini
2017-12-19 14:20:35 -08:00
parent 785ddff706
commit 2157af3e63
15 changed files with 175 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
sim/visuals/board.ts
View File

@ -1,5 +1,9 @@
/// <reference path="./layoutView.ts" />
namespace pxsim {
export const GAME_LOOP_FPS = 32;
}
namespace pxsim.visuals {
const EV3_STYLE = `
@ -136,10 +140,6 @@ namespace pxsim.visuals {
this.board.updateSubscribers.push(() => this.updateState());
this.updateState();
}
let that = this;
window.setInterval(function(){
that.updateScreen();
}, 30);
}
public getView(): SVGAndSize<SVGSVGElement> {
@ -171,53 +171,6 @@ namespace pxsim.visuals {
this.layoutView.updateTheme(theme);
}
public updateState() {
this.updateVisibleNodes();
}
private updateVisibleNodes() {
const inputNodes = ev3board().getInputNodes();
inputNodes.forEach((node, index) => {
const view = this.getDisplayViewForNode(node.id, index);
if (view) {
this.layoutView.setInput(index, view);
view.updateState();
}
});
this.getDisplayViewForNode(ev3board().getBrickNode().id, -1).updateState();
const outputNodes = ev3board().getMotors();
outputNodes.forEach((node, index) => {
const view = this.getDisplayViewForNode(node.id, index);
if (view) {
this.layoutView.setOutput(index, view);
view.updateState();
}
});
const selected = this.layoutView.getSelected();
if (selected && (selected.getId() !== this.selectedNode || selected.getPort() !== this.selectedPort)) {
this.selectedNode = selected.getId();
this.selectedPort = selected.getPort();
this.controlGroup.clear();
const control = this.getControlForNode(this.selectedNode, selected.getPort());
if (control) {
this.controlView = control;
this.controlGroup.addView(control);
}
this.closeIconView.setVisible(true);
} else if (!selected) {
this.controlGroup.clear();
this.controlView = undefined;
this.selectedNode = undefined;
this.selectedPort = undefined;
this.closeIconView.setVisible(false);
}
this.resize();
}
public resize() {
const bounds = this.element.getBoundingClientRect();
this.width = bounds.width;
@ -245,7 +198,7 @@ namespace pxsim.visuals {
this.controlView.translate(controlCoords.x, controlCoords.y);
}
this.updateScreen();
//this.updateScreen();
}
private getControlForNode(id: NodeType, port: number) {
@ -358,7 +311,7 @@ namespace pxsim.visuals {
this.closeIconView.setVisible(false);
this.resize();
this.updateState();
//this.updateState();
// Add Screen canvas to board
this.buildScreenCanvas();
@ -397,7 +350,78 @@ namespace pxsim.visuals {
this.screenCanvasTemp.style.display = 'none';
}
private updateScreen() {
private lastAnimationId: number;
public updateState() {
if (this.lastAnimationId) cancelAnimationFrame(this.lastAnimationId);
const fps = GAME_LOOP_FPS;
let now;
let then = Date.now();
let interval = 1000 / fps;
let delta;
let that = this;
function loop() {
that.lastAnimationId = requestAnimationFrame(loop);
now = Date.now();
delta = now - then;
if (delta > interval) {
then = now - (delta % interval);
that.updateStateStep();
}
}
loop();
}
private updateStateStep() {
console.log("update state step");
const inputNodes = ev3board().getInputNodes();
inputNodes.forEach((node, index) => {
if (!node.didChange()) return;
const view = this.getDisplayViewForNode(node.id, index);
if (view) {
this.layoutView.setInput(index, view);
view.updateState();
}
});
const brickNode = ev3board().getBrickNode();
if (brickNode.didChange()) {
this.getDisplayViewForNode(ev3board().getBrickNode().id, -1).updateState();
}
const outputNodes = ev3board().getMotors();
outputNodes.forEach((node, index) => {
if (!node.didChange()) return;
const view = this.getDisplayViewForNode(node.id, index);
if (view) {
this.layoutView.setOutput(index, view);
view.updateState();
}
});
const selected = this.layoutView.getSelected();
if (selected && (selected.getId() !== this.selectedNode || selected.getPort() !== this.selectedPort)) {
this.selectedNode = selected.getId();
this.selectedPort = selected.getPort();
this.controlGroup.clear();
const control = this.getControlForNode(this.selectedNode, selected.getPort());
if (control) {
this.controlView = control;
this.controlGroup.addView(control);
}
this.closeIconView.setVisible(true);
} else if (!selected) {
this.controlGroup.clear();
this.controlView = undefined;
this.selectedNode = undefined;
this.selectedPort = undefined;
this.closeIconView.setVisible(false);
}
this.updateScreenStep();
//this.resize();
}
private updateScreenStep() {
let state = ev3board().screenState;
if (!state.didChange()) return;

30
sim/visuals/nodes/largeMotorView.ts
View File

@ -18,36 +18,10 @@ namespace pxsim.visuals {
if (this.lastMotorAnimationId) cancelAnimationFrame(this.lastMotorAnimationId);
if (!speed) return;
this.playMotorAnimation(motorState);
this.setMotorAngle(motorState.getAngle());
}
private playMotorAnimation(state: MotorNode) {
// Max medium motor RPM is 170 according to http://www.cs.scranton.edu/~bi/2015s-html/cs358/EV3-Motor-Guide.docx
const rotationsPerMinute = 170; // 170 rpm at speed 100
const rotationsPerSecond = rotationsPerMinute / 60;
const fps = MOTOR_ROTATION_FPS;
const rotationsPerFrame = rotationsPerSecond / fps;
let now;
let then = Date.now();
let interval = 1000 / fps;
let delta;
let that = this;
function draw() {
that.lastMotorAnimationId = requestAnimationFrame(draw);
now = Date.now();
delta = now - then;
if (delta > interval) {
then = now - (delta % interval);
that.playMotorAnimationStep(state.angle);
const rotations = state.getSpeed() / 100 * rotationsPerFrame;
const angle = rotations * 360;
state.angle += angle;
}
}
draw();
}
private playMotorAnimationStep(angle: number) {
private setMotorAngle(angle: number) {
const holeEl = this.content.getElementById(this.normalizeId(LargeMotorView.ROTATING_ECLIPSE_ID))
const width = 34;
const height = 34;

30
sim/visuals/nodes/mediumMotorView.ts
View File

@ -28,36 +28,10 @@ namespace pxsim.visuals {
if (this.lastMotorAnimationId) cancelAnimationFrame(this.lastMotorAnimationId);
if (!speed) return;
this.playMotorAnimation(motorState);
this.setMotorAngle(motorState.getAngle());
}
private playMotorAnimation(state: MotorNode) {
// Max medium motor RPM is 250 according to http://www.cs.scranton.edu/~bi/2015s-html/cs358/EV3-Motor-Guide.docx
const rotationsPerMinute = 250; // 250 rpm at speed 100
const rotationsPerSecond = rotationsPerMinute / 60;
const fps = MOTOR_ROTATION_FPS;
const rotationsPerFrame = rotationsPerSecond / fps;
let now;
let then = Date.now();
let interval = 1000 / fps;
let delta;
let that = this;
function draw() {
that.lastMotorAnimationId = requestAnimationFrame(draw);
now = Date.now();
delta = now - then;
if (delta > interval) {
then = now - (delta % interval);
that.playMotorAnimationStep(state.angle);
const rotations = state.getSpeed() / 100 * rotationsPerFrame;
const angle = rotations * 360;
state.angle += angle;
}
}
draw();
}
private playMotorAnimationStep(angle: number) {
private setMotorAngle(angle: number) {
const holeEl = this.content.getElementById(this.normalizeId(MediumMotorView.ROTATING_ECLIPSE_ID))
const width = 47.9;
const height = 47.2;