mirror of
https://github.com/google/blockly.git
synced 2026-01-10 18:37:09 +01:00
247 lines
8.8 KiB
HTML
247 lines
8.8 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#frames {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: calc(100% - 3rem);
|
|
bottom: 0;
|
|
}
|
|
|
|
#frames .row {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#frames .col {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#frames .col h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
#frames iframe {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
|
|
.output {
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<select id="selector">
|
|
<option value="colour_blend">colour_blend</option>
|
|
<option value="colour_picker">colour_picker</option>
|
|
<option value="colour_random">colour_random</option>
|
|
<option value="colour_rgb">colour_rgb</option>
|
|
<option value="controls_flow_statements">controls_flow_statements</option>
|
|
<option value="controls_for">controls_for</option>
|
|
<option value="controls_forEach">controls_forEach</option>
|
|
<option value="controls_if">controls_if</option>
|
|
<option value="controls_if_else">controls_if_else</option>
|
|
<option value="controls_if_elseif">controls_if_elseif</option>
|
|
<option value="controls_if_if">controls_if_if</option>
|
|
<option value="controls_ifelse">controls_ifelse</option>
|
|
<option value="controls_repeat">controls_repeat</option>
|
|
<option value="controls_repeat_ext">controls_repeat_ext</option>
|
|
<option value="controls_whileUntil">controls_whileUntil</option>
|
|
<option value="lists_create_empty">lists_create_empty</option>
|
|
<option value="lists_create_with">lists_create_with</option>
|
|
<option value="lists_create_with_container">lists_create_with_container</option>
|
|
<option value="lists_create_with_item">lists_create_with_item</option>
|
|
<option value="lists_getIndex">lists_getIndex</option>
|
|
<option value="lists_getSublist">lists_getSublist</option>
|
|
<option value="lists_indexOf">lists_indexOf</option>
|
|
<option value="lists_isEmpty">lists_isEmpty</option>
|
|
<option value="lists_length">lists_length</option>
|
|
<option value="lists_repeat">lists_repeat</option>
|
|
<option value="lists_reverse">lists_reverse</option>
|
|
<option value="lists_setIndex">lists_setIndex</option>
|
|
<option value="lists_sort">lists_sort</option>
|
|
<option value="lists_split">lists_split</option>
|
|
<option value="logic_boolean">logic_boolean</option>
|
|
<option value="logic_compare">logic_compare</option>
|
|
<option value="logic_negate">logic_negate</option>
|
|
<option value="logic_null">logic_null</option>
|
|
<option value="logic_operation">logic_operation</option>
|
|
<option value="logic_ternary">logic_ternary</option>
|
|
<option value="math_addition">math_addition</option>
|
|
<option value="math_arithmetic">math_arithmetic</option>
|
|
<option value="math_atan2">math_atan2</option>
|
|
<option value="math_change">math_change</option>
|
|
<option value="math_constant">math_constant</option>
|
|
<option value="math_constrain">math_constrain</option>
|
|
<option value="math_modulo">math_modulo</option>
|
|
<option value="math_number">math_number</option>
|
|
<option value="math_number_property">math_number_property</option>
|
|
<option value="math_on_list">math_on_list</option>
|
|
<option value="math_random_float">math_random_float</option>
|
|
<option value="math_random_int">math_random_int</option>
|
|
<option value="math_round">math_round</option>
|
|
<option value="math_single">math_single</option>
|
|
<option value="math_subtraction">math_subtraction</option>
|
|
<option value="math_trig">math_trig</option>
|
|
<option value="multi_block_1">multi_block_1</option>
|
|
<option value="multi_block_logic">multi_block_logic</option>
|
|
<option value="multi_colour_with_external">multi_colour_with_external</option>
|
|
<option value="multi_colour_with_internal">multi_colour_with_internal</option>
|
|
<option value="multi_stack">multi_stack</option>
|
|
<option value="not_true">not_true</option>
|
|
<option value="procedures_callnoreturn">procedures_callnoreturn</option>
|
|
<option value="procedures_callreturn">procedures_callreturn</option>
|
|
<option value="procedures_defnoreturn">procedures_defnoreturn</option>
|
|
<option value="procedures_defreturn">procedures_defreturn</option>
|
|
<option value="procedures_ifreturn">procedures_ifreturn</option>
|
|
<option value="procedures_mutatorarg">procedures_mutatorarg</option>
|
|
<option value="procedures_mutatorcontainer">procedures_mutatorcontainer</option>
|
|
<option value="text_append">text_append</option>
|
|
<option value="text_changeCase">text_changeCase</option>
|
|
<option value="text_charAt">text_charAt</option>
|
|
<option value="text_count">text_count</option>
|
|
<option value="text_create_join_container">text_create_join_container</option>
|
|
<option value="text_create_join_item">text_create_join_item</option>
|
|
<option value="text_getSubstring">text_getSubstring</option>
|
|
<option value="text_indexOf">text_indexOf</option>
|
|
<option value="text_isEmpty">text_isEmpty</option>
|
|
<option value="text_join">text_join</option>
|
|
<option value="text_length">text_length</option>
|
|
<option value="text_print">text_print</option>
|
|
<option value="text_prompt">text_prompt</option>
|
|
<option value="text_prompt_ext">text_prompt_ext</option>
|
|
<option value="text_replace">text_replace</option>
|
|
<option value="text_reverse">text_reverse</option>
|
|
<option value="text_trim">text_trim</option>
|
|
<option value="variables_get">variables_get</option>
|
|
<option value="variables_get_dynamic">variables_get_dynamic</option>
|
|
<option value="variables_set">variables_set</option>
|
|
<option value="variables_set_dynamic">variables_set_dynamic</option>
|
|
</select>
|
|
<div id="frames">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h2>Zelos Rendering</h2>
|
|
</div>
|
|
<div class="col">
|
|
<h2>PXT-Blockly Rendering</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<iframe id="zelos" src="./zelos.html"></iframe>
|
|
</div>
|
|
<div class="col">
|
|
<iframe id="pxtblockly" src="./pxtblockly.html"></iframe>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div id="zelosout">
|
|
<h2>Zelos Rendering</h2>
|
|
<img id="zelosoutput" class="output" />
|
|
</div>
|
|
<div id="pxtblocklyout">
|
|
<h2>PXT-Blockly Rendering</h2>
|
|
<img id="pxtblocklyoutput" class="output" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var pxtblockly = document.getElementById('pxtblockly');
|
|
var zelos = document.getElementById('zelos');
|
|
var selector = document.getElementById('selector');
|
|
var hash = document.location.hash;
|
|
if (hash) {
|
|
selector.value = hash.substring(1);
|
|
}
|
|
|
|
window.addEventListener('message', function (msg) {
|
|
var data = msg.data;
|
|
if (data.type === 'svg') {
|
|
var output = document.getElementById(data.from + 'output');
|
|
output.src = data.text;
|
|
}
|
|
});
|
|
|
|
var current = 'zelos';
|
|
var pause = false;
|
|
document.getElementById('pxtblocklyout').style.display = 'none';
|
|
setInterval(function () {
|
|
if (!pause) {
|
|
document.getElementById(current + 'out').style.display = 'none';
|
|
current = current == 'zelos' ? 'pxtblockly' : 'zelos';
|
|
document.getElementById(current + 'out').style.display = 'block';
|
|
}
|
|
}, 1000);
|
|
|
|
pxtblockly.addEventListener('load', function () {
|
|
updateWorkspaces(selector.value);
|
|
});
|
|
|
|
zelos.addEventListener('load', function () {
|
|
updateWorkspaces(selector.value);
|
|
});
|
|
|
|
selector.addEventListener('change', function (e) {
|
|
updateWorkspaces(e.target.value);
|
|
});
|
|
|
|
function updateWorkspaces(testCase) {
|
|
var fileName = '../../screenshot/test_cases/' + testCase;
|
|
window.location.hash = testCase;
|
|
|
|
var rawFile = new XMLHttpRequest();
|
|
rawFile.open('GET', fileName, false);
|
|
rawFile.onreadystatechange = function () {
|
|
if (rawFile.readyState === 4) {
|
|
if (rawFile.status === 200 || rawFile.status == 0) {
|
|
var xml = rawFile.responseText;
|
|
if (xml) {
|
|
pxtblockly.contentWindow.postMessage({
|
|
type: 'post',
|
|
xml: xml
|
|
}, '*');
|
|
zelos.contentWindow.postMessage({
|
|
type: 'post',
|
|
xml: xml
|
|
}, '*');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
rawFile.send();
|
|
}
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.keyCode === 37) {
|
|
selector.selectedIndex = selector.selectedIndex - 1;
|
|
updateWorkspaces(selector.value);
|
|
} else if (e.keyCode === 39) {
|
|
selector.selectedIndex = selector.selectedIndex + 1;
|
|
updateWorkspaces(selector.value);
|
|
} else if (e.keyCode === 32) {
|
|
pause = !pause;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |