<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Custom Procedure Playground</title> <script src="../blockly_uncompressed_vertical.js"></script> <script src="../msg/messages.js"></script> <script src="../blocks_vertical/vertical_extensions.js"></script> <script src="../blocks_common/math.js"></script> <script src="../blocks_common/text.js"></script> <script src="../blocks_common/colour.js"></script> <script src="../blocks_vertical/control.js"></script> <script src="../blocks_vertical/event.js"></script> <script src="../blocks_vertical/motion.js"></script> <script src="../blocks_vertical/looks.js"></script> <script src="../blocks_vertical/procedures.js"></script> <script src="../blocks_vertical/operators.js"></script> <script src="../blocks_vertical/pen.js"></script> <script src="../blocks_vertical/sound.js"></script> <script src="../blocks_vertical/sensing.js"></script> <script src="../blocks_vertical/data.js"></script> <style> body { background-color: #fff; font-family: sans-serif; } h1 { font-weight: normal; font-size: 140%; } </style> </head> <body> <table width="100%"> <tr> <td> <div id="secondaryDiv" style="height: 480px; width: 600px;"></div> </td> <td> <div id="primaryDiv" style="height: 480px; width: 600px;"></div> </td> </tr> <tr> <td></td> <td id="editor-actions"> <button id="text_number" onclick="addTextNumber()">Add text/number input</button> <button id="boolean" onclick="addBoolean()">Add boolean input</button> <button id="label" onclick="addLabel()">Add label</button> <button id="cancelButton" onclick="cancel()">cancel</button> <button id="okButton" onclick="applyMutation()">ok</button> <button id="rndButton" onclick="removeRandomInput()">remove random input</button> <button id="addRndButton" onclick="addRandomInput()">add random input</button> </td> </tr> </table> <xml id="mutator_blocks" style="display:none"> <block type="procedures_declaration" x="25" y="25" deletable="false"> <mutation proccode="say %s %n times if %b" argumentnames="["something","this many","this is true"]" argumentdefaults="["",1,false]" warp="false" argumentids="["a42", "b23", "c99"]"/> </block> </xml> <xml id="main_ws_blocks" style="display:none"> <block id="]){{Y!7N9ezN+j@Vr`8p" type="procedures_definition" x="25" y="25"> <statement name="custom_block"> <shadow type="procedures_prototype" id="caller_internal"> <mutation proccode="say %s %n times if %b" argumentnames="["something","this many","this is true"]" argumentdefaults="["",1,false]" warp="false" argumentids="["a42", "b23", "c99"]"/> </shadow> </statement> <next> <block id="caller_external" type="procedures_call"> <mutation proccode="say %s %n times if %b" argumentnames="["something","this many","this is true"]" argumentdefaults="["",1,false]" warp="false" argumentids="["a42", "b23", "c99"]"/> <value name="input0"> <shadow id="V0~M:TxRk0Ua%osjGzh," type="text"> <field name="TEXT"/></field> </shadow> </value> <value name="input1"> <shadow id="uPx3si(KkbL1)-XpbXoQ" type="math_number"> <field name="NUM">1</field> </shadow> </value> </block> </next> </block> </xml> <xml id="main_ws_blocks_simpler" style="display:none"> <block id="]){{Y!7N9ezN+j@Vr`8p" type="procedures_definition" x="25" y="25"> <statement name="custom_block"> <shadow type="procedures_prototype" id="caller_internal"> <mutation proccode="say %s %n times if %b" argumentnames="["something","this many","this is true"]" argumentdefaults="["",1,false]" warp="false" argumentids="["a42", "b23", "c99"]"/> </shadow> </statement> <next> <block id="caller_external" type="procedures_call"> </block> </next> </block> </xml> <xml id="main_ws_blocks_simplest" style="display:none"> <block id="]){{Y!7N9ezN+j@Vr`8p" type="procedures_definition" x="25" y="25"> <statement name="custom_block"> <shadow type="procedures_prototype" id="caller_internal"> <mutation proccode="my first function" argumentnames="[]" argumentdefaults="[]" warp="false" argumentids="[]"/> </shadow> </statement> <next> <block id="caller_external" type="procedures_call"> <mutation proccode="my first function" argumentnames="[]" argumentdefaults="[]" warp="false" argumentids="[]"/> </block> </next> </block> </xml> <xml id="mutator_blocks_simplest" style="display:none"> <block type="procedures_declaration" x="25" y="25" deletable="false"> <mutation proccode="my first function" argumentnames="[]" argumentdefaults="[]" warp="false" argumentids="[]"/> </block> </xml> <xml id="toolbox" style="display:none"> <category name="More" colour="#FF6680" secondaryColour="#FF4D6A" custom="PROCEDURE"> </category> <category name="Values"> <block type="operator_round"> <value name="NUM"> <shadow type="math_number"> <field name="NUM"></field> </shadow> </value> </block> </category> <category name="Statements"> <block type="control_forever"></block> <block type="sound_stopallsounds"></block> <block type="control_start_as_clone"></block> <block type="control_stop"> <mutation hasnext="false"></mutation> <field name="STOP_OPTION">all</field> </block> </category> </xml> <script> var editorActions = document.getElementById('editor-actions'); editorActions.style.visibility = 'hidden'; var callback = null; var mutationRoot = null; var declarationWorkspace = Blockly.inject('primaryDiv', {media: '../media/'}); declarationWorkspace.addChangeListener(function() { if (mutationRoot) { mutationRoot.onChangeFn(); } }); var definitionWorkspace = Blockly.inject('secondaryDiv', { media: '../media/', toolbox: document.getElementById('toolbox'), zoom: { startScale: 0.75 } }); Blockly.Xml.clearWorkspaceAndLoadFromXml(document.getElementById('main_ws_blocks_simplest'), definitionWorkspace); Blockly.Procedures.externalProcedureDefCallback = function (mutation, cb) { editorActions.style.visibility = 'visible'; callback = cb; declarationWorkspace.clear(); mutationRoot = declarationWorkspace.newBlock('procedures_declaration'); mutationRoot.domToMutation(mutation); mutationRoot.initSvg(); mutationRoot.render(false); } function applyMutation() { var mutation = mutationRoot.mutationToDom(/* opt_generateShadows */ true) console.log(mutation); callback(mutation); callback = null; mutationRoot = null; declarationWorkspace.clear(); definitionWorkspace.refreshToolboxSelection_() editorActions.style.visibility = 'hidden'; } function addLabel() { mutationRoot.addLabelExternal(); } function addBoolean() { mutationRoot.addBooleanExternal(); } function addTextNumber() { mutationRoot.addStringNumberExternal(); } function removeRandomInput() { var rnd = Math.floor(Math.random() * mutationRoot.inputList.length); mutationRoot.removeInput(mutationRoot.inputList[rnd].name); mutationRoot.onChangeFn(); mutationRoot.updateDisplay_(); } function addRandomInput() { var rnd = Math.floor(Math.random() * 3); switch (rnd) { case 0: addTextNumber(); break; case 1: addLabel(); break; case 2: addBoolean(); break; } } function cancel() { callback = null; mutationRoot = null; declarationWorkspace.clear(); definitionWorkspace.refreshToolboxSelection_() editorActions.style.visibility = 'hidden'; } </script> </body> </html>