mirror of
https://github.com/google/blockly.git
synced 2026-01-08 01:20:12 +01:00
5c541c6f99
Using 123 as a better indicator to the user this block can represent any number, and the user should replace this value with their own desired number.
465 lines
13 KiB
HTML
465 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Multi-toolbox Playground</title>
|
|
<script src="../blockly_uncompressed.js"></script>
|
|
<script src="../msg/messages.js"></script>
|
|
<script src="../blocks/logic.js"></script>
|
|
<script src="../blocks/loops.js"></script>
|
|
<script src="../blocks/math.js"></script>
|
|
<script src="../blocks/text.js"></script>
|
|
<script src="../blocks/lists.js"></script>
|
|
<script src="../blocks/colour.js"></script>
|
|
<script src="../blocks/variables.js"></script>
|
|
<script src="../blocks/procedures.js"></script>
|
|
<script>
|
|
'use strict';
|
|
var options = {
|
|
comments: true,
|
|
collapse: true,
|
|
disable: true,
|
|
maxBlocks: Infinity,
|
|
media: '../media/',
|
|
oneBasedIndex: true,
|
|
readOnly: false,
|
|
//rtl: false,
|
|
scrollbars: true,
|
|
trashcan: true,
|
|
//toolbox: null,
|
|
//horizontalLayout: false,
|
|
//toolboxPosition: 'start',
|
|
zoom: {
|
|
controls: true,
|
|
wheel: false,
|
|
startScale: 1.0,
|
|
maxScale: 4,
|
|
minScale: 0.25,
|
|
scaleSpeed: 1.1
|
|
}
|
|
};
|
|
|
|
function start() {
|
|
var match = location.search.match(/toolbox=([^&]+)/);
|
|
var toolbox =
|
|
document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
|
|
document.forms.options.elements.toolbox.selectedIndex =
|
|
Number(toolbox.getElementsByTagName('category').length == 0);
|
|
startBlocklyInstance('VertStartLTR', false, false, 'start', toolbox);
|
|
startBlocklyInstance('VertStartRTL', true, false, 'start', toolbox);
|
|
|
|
startBlocklyInstance('VertEndLTR', false, false, 'end', toolbox);
|
|
startBlocklyInstance('VertEndRTL', true, false, 'end', toolbox);
|
|
|
|
startBlocklyInstance('HorizontalStartLTR', false, true, 'start', toolbox);
|
|
startBlocklyInstance('HorizontalStartRTL', true, true, 'start', toolbox);
|
|
|
|
startBlocklyInstance('HorizontalEndLTR', false, true, 'end', toolbox);
|
|
startBlocklyInstance('HorizontalEndRTL', true, true, 'end', toolbox);
|
|
}
|
|
|
|
function startBlocklyInstance(suffix, rtl, horizontalLayout, position,
|
|
toolbox) {
|
|
options.rtl = rtl;
|
|
options.toolbox = toolbox;
|
|
options.horizontalLayout = horizontalLayout;
|
|
options.toolboxPosition = position;
|
|
Blockly.inject('blocklyDiv' + suffix, options);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
|
|
#octaweb {
|
|
width: 100%;
|
|
}
|
|
#octaweb th {
|
|
padding-top: 1em;
|
|
width: 50%;
|
|
}
|
|
#octaweb td {
|
|
width: 50%;
|
|
}
|
|
#octaweb td >div {
|
|
height: 480px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="start()">
|
|
<h1>Blockly Multi Playground</h1>
|
|
|
|
<form id="options">
|
|
<select name="toolbox" onchange="document.forms.options.submit()">
|
|
<option value="categories">Categories</option>
|
|
<option value="simple">Simple</option>
|
|
</select>
|
|
</form>
|
|
|
|
<table id="octaweb">
|
|
<tr>
|
|
<th>LTR, Vertical, Start</th>
|
|
<th>RTL, Vertical, Start</th>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="blocklyDivVertStartLTR"></div></td>
|
|
<td><div id="blocklyDivVertStartRTL"></div></td>
|
|
</tr>
|
|
<tr>
|
|
<th>LTR, Vertical, End</th>
|
|
<th>RTL, Vertical, End</th>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="blocklyDivVertEndLTR"></div></td>
|
|
<td><div id="blocklyDivVertEndRTL"></div></td>
|
|
</tr>
|
|
<tr>
|
|
<th>LTR, Horizontal, Start</th>
|
|
<th>RTL, Horizontal, Start</th>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="blocklyDivHorizontalStartLTR"></div></td>
|
|
<td><div id="blocklyDivHorizontalStartRTL"></div></td>
|
|
</tr>
|
|
<tr>
|
|
<th>LTR, Horizontal, End</th>
|
|
<th>RTL, Horizontal, End</th>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="blocklyDivHorizontalEndLTR"></div></td>
|
|
<td><div id="blocklyDivHorizontalEndRTL"></div></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<xml id="toolbox-simple" style="display: none">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<!-- <block type="control_repeat"></block> -->
|
|
<block type="logic_operation"></block>
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="logic_operation"></block>
|
|
<block type="logic_negate"></block>
|
|
<block type="logic_boolean"></block>
|
|
<block type="logic_null" disabled="true"></block>
|
|
<block type="logic_ternary"></block>
|
|
</xml>
|
|
|
|
<xml id="toolbox-categories" style="display: none">
|
|
<category name="Logic" colour="210">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<block type="logic_operation"></block>
|
|
<block type="logic_negate"></block>
|
|
<block type="logic_boolean"></block>
|
|
<block type="logic_null" disabled="true"></block>
|
|
<block type="logic_ternary"></block>
|
|
</category>
|
|
<category name="Loops" colour="120">
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="controls_repeat" disabled="true"></block>
|
|
<block type="controls_whileUntil"></block>
|
|
<block type="controls_for">
|
|
<value name="FROM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="TO">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="BY">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="controls_forEach"></block>
|
|
<block type="controls_flow_statements"></block>
|
|
</category>
|
|
<category name="Math" colour="230">
|
|
<block type="math_number" gap="32">
|
|
<field name="NUM">123</field>
|
|
</block>
|
|
<block type="math_arithmetic">
|
|
<value name="A">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="B">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_single">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">9</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_trig">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">45</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_constant"></block>
|
|
<block type="math_number_property">
|
|
<value name="NUMBER_TO_CHECK">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_round">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">3.1</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_on_list"></block>
|
|
<block type="math_modulo">
|
|
<value name="DIVIDEND">
|
|
<shadow type="math_number">
|
|
<field name="NUM">64</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="DIVISOR">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_constrain">
|
|
<value name="VALUE">
|
|
<shadow type="math_number">
|
|
<field name="NUM">50</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="LOW">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="HIGH">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_random_int">
|
|
<value name="FROM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="TO">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_random_float"></block>
|
|
</category>
|
|
<category name="Text" colour="160">
|
|
<block type="text"></block>
|
|
<block type="text_join"></block>
|
|
<block type="text_append">
|
|
<value name="TEXT">
|
|
<shadow type="text"></shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_length">
|
|
<value name="VALUE">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_isEmpty">
|
|
<value name="VALUE">
|
|
<shadow type="text">
|
|
<field name="TEXT"></field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_indexOf">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
<value name="FIND">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_charAt">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_getSubstring">
|
|
<value name="STRING">
|
|
<block type="variables_get">
|
|
<field name="VAR">text</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="text_changeCase">
|
|
<value name="TEXT">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_trim">
|
|
<value name="TEXT">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_print">
|
|
<value name="TEXT">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_prompt_ext">
|
|
<value name="TEXT">
|
|
<shadow type="text">
|
|
<field name="TEXT">abc</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<category name="Lists" colour="260">
|
|
<block type="lists_create_with">
|
|
<mutation items="0"></mutation>
|
|
</block>
|
|
<block type="lists_create_with"></block>
|
|
<block type="lists_repeat">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">5</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="lists_length"></block>
|
|
<block type="lists_isEmpty"></block>
|
|
<block type="lists_indexOf">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_getIndex">
|
|
<value name="VALUE">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_setIndex">
|
|
<value name="LIST">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_getSublist">
|
|
<value name="LIST">
|
|
<block type="variables_get">
|
|
<field name="VAR">list</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="lists_split">
|
|
<value name="DELIM">
|
|
<shadow type="text">
|
|
<field name="TEXT">,</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="lists_sort"></block>
|
|
</category>
|
|
<category name="Colour" colour="20">
|
|
<block type="colour_picker"></block>
|
|
<block type="colour_random"></block>
|
|
<block type="colour_rgb">
|
|
<value name="RED">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="GREEN">
|
|
<shadow type="math_number">
|
|
<field name="NUM">50</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="BLUE">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="colour_blend">
|
|
<value name="COLOUR1">
|
|
<shadow type="colour_picker">
|
|
<field name="COLOUR">#ff0000</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="COLOUR2">
|
|
<shadow type="colour_picker">
|
|
<field name="COLOUR">#3333ff</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="RATIO">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0.5</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<sep></sep>
|
|
<category name="Variables" colour="330" custom="VARIABLE"></category>
|
|
<category name="Functions" colour="290" custom="PROCEDURE"></category>
|
|
</xml>
|
|
</body>
|
|
</html>
|