123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462 |
- <!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"></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>
|