mirror of
https://github.com/scratchfoundation/scratch-html5.git
synced 2025-03-14 14:49:56 -04:00
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.
This commit is contained in:
parent
b2644c0365
commit
374c3ccf19
4 changed files with 65 additions and 21 deletions
9
compare.css
Normal file
9
compare.css
Normal file
|
@ -0,0 +1,9 @@
|
|||
textarea {
|
||||
width: 450px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
object {
|
||||
display: block;
|
||||
}
|
||||
|
51
compare.html
51
compare.html
|
@ -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"> </div>
|
||||
<div id="left"> </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"> </div>
|
||||
<div id="down"> </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>
|
||||
|
|
|
@ -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
15
player.css
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue