scratchfoundation/scratch-html5
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-html5.git synced 2025-03-14 14:49:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed look of the green flag over the HTML5 player. Moved some styles into compare.css from compare.html. Implemented debug logs for Javascript and Actionscript to compare the operation of both virtual machines. Moved start and stop buttons above the players.

Browse source
This commit is contained in:
Shane M. Clements 2013-11-04 06:11:05 +00:00
parent b2644c0365
commit 374c3ccf19
4 changed files with 65 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
compare.css Normal file
View file

@ -0,0 +1,9 @@
textarea {
width: 450px;
height: 200px;
}
object {
display: block;
}

51
compare.html
View file

@ -15,6 +15,7 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
}
</style>
<link href="player.css" type="text/css" rel="stylesheet" />
<link href="compare.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="js/util/Timer.js"></script>
@ -47,18 +48,16 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
}
</script>
<script>
var flashLog = null;
$(function() {
// The flashvars tell flash about the project data (and autostart=true)
var flashvars = {
server: encodeURIComponent('scratch.mit.edu'),
debugOps: true,
debugOpCmd: 'debugFlash',
project_id: project_id
};
// Pass in the cloud token for the project
if (window.getCloudToken) {
flashvars.cloud_token = encodeURIComponent(getCloudToken());
}
var params = {
allowscriptaccess: 'always',
allowfullscreen: 'false',
@ -69,7 +68,7 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
var flashPlayer = null;
//var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf";
var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf";
swfobject.embedSWF(swf_url, "flashScratch", "480", "400", "10.2.0",
swfobject.embedSWF(swf_url, "flashScratch", "482", "402", "10.2.0",
"http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
flashvars, params, null, function(e) {
$('#flashScratch').css('visibility', 'visible');
@ -84,11 +83,39 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
$('#trigger_stop').click(function() {
flashPlayer.ASstopRunning();
});
flashLog = $('#flashDebug');
var jsLog = $('#jsDebug');
interp.debugOps = true;
interp.debugFunc = function(opCount, opName, args) {
var text = opCount + ': '+opName+'('+args.join(', ')+')';
jsLog.val(jsLog.val() + text + "\n");
}
// Setup synchronized scrolling
flashLog.scroll(function() {
jsLog.scrollTop(flashLog.scrollTop());
});
jsLog.scroll(function() {
flashLog.scrollTop(jsLog.scrollTop());
});
});
function debugFlash(opCount, opName, args) {
var text = opCount + ': '+opName+'('+args.join(', ')+')';
flashLog.val(flashLog.val() + text + "\n");
}
</script>
</head>
<body>
<div style="display: inline-block;">
<div>
<div id="info">Loading...</div>
<button id="trigger_green_flag">Green flag</button>
<button id="trigger_stop">Stop</button>
<input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button>
</div>
<div class="playerContainer">
<div id="up">&nbsp;</div>
<div id="left">&nbsp;</div>
<div id="overContainer">
@ -97,20 +124,16 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
</div>
<div id="right">&nbsp;</div>
<div id="down">&nbsp;</div>
<textarea id="jsDebug"></textarea>
</div>
<div style="display: inline-block;">
<div class="playerContainer">
<div id="flashScratch" style="text-align:center;visibility:hidden;">
<p style="color:#aaa;font-size:22px;margin-top:14px;line-height:28px;">Oh Noes! Scratch project cannot display.<br/>Flash player is disabled, missing, or less than version 10.2.</p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" target="_blank" />
</a>
</div>
<textarea id="flashDebug"></textarea>
</div>
<div id="info">Loading...</div>
<button id="trigger_green_flag">Green flag</button>
<button id="trigger_stop">Stop</button>
<input type="text" name="project_id" id="project_id" /><button id='go_project'>Go!</button>
</body>
</html>

11
js/Interpreter.js
View file

@ -54,6 +54,9 @@ var Interpreter = function() {
this.yield = false;
this.doRedraw = false;
this.opCount = 0; // used to benchmark the interpreter
this.debugOps = false;
this.debugFunc = null;
this.opCount2 = 0;
};
// Utilities for building blocks and sequences of blocks
@ -136,6 +139,14 @@ Interpreter.prototype.stepActiveThread = function() {
// Advance the "program counter" to the next block before running the primitive.
// Control flow primitives (e.g. if) may change activeThread.nextBlock.
this.activeThread.nextBlock = b.nextBlock;
if(this.debugOps && this.debugFunc) {
var finalArgs = new Array(b.args.length);
for(var i=0; i<b.args.length; ++i)
finalArgs[i] = this.arg(b, i);
this.debugFunc(this.opCount2, b.op, finalArgs);
++this.opCount2;
}
b.primFcn(b);
if (this.yield) { this.activeThread.nextBlock = b; return; }
b = this.activeThread.nextBlock; // refresh local variable b in case primitive did some control flow

15
player.css
View file

@ -26,12 +26,8 @@
}
#greenSlideFg {
background-color: #000;
opacity: 0.4;
width: 278px;
height: 218px;
padding-top: 142px;
padding-left: 202px;;
background-color: rgba(0,0,0,0.4);
padding: 140px 202px;
}
/* iPad arrow key frame */
@ -39,7 +35,12 @@
#left { float: left; width: 30px; height: 360px; background-color: #333; }
#right { float: left; width: 30px; height: 360px; background-color: #333; }
#down { width: 540px; height: 30px; clear: both; background-color: #333; }
.playerContainer {
display: inline-block;
text-align: center;
}
/* Reporter styles */
.reporter-normal {
display: inline-block;