chao
/
mini_cocopi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly Playground</title>
<script src="../blockly_uncompressed.js"></script>
<script src="../generators/javascript.js"></script>
<script src="../generators/javascript/logic.js"></script>
<script src="../generators/javascript/loops.js"></script>
<script src="../generators/javascript/math.js"></script>
<script src="../generators/javascript/text.js"></script>
<script src="../generators/javascript/lists.js"></script>
<script src="../generators/javascript/colour.js"></script>
<script src="../generators/javascript/variables.js"></script>
<script src="../generators/javascript/procedures.js"></script>
<script src="../generators/python.js"></script>
<script src="../generators/python/logic.js"></script>
<script src="../generators/python/loops.js"></script>
<script src="../generators/python/math.js"></script>
<script src="../generators/python/text.js"></script>
<script src="../generators/python/lists.js"></script>
<script src="../generators/python/colour.js"></script>
<script src="../generators/python/variables.js"></script>
<script src="../generators/python/procedures.js"></script>
<script src="../generators/php.js"></script>
<script src="../generators/php/logic.js"></script>
<script src="../generators/php/loops.js"></script>
<script src="../generators/php/math.js"></script>
<script src="../generators/php/text.js"></script>
<script src="../generators/php/lists.js"></script>
<script src="../generators/php/colour.js"></script>
<script src="../generators/php/variables.js"></script>
<script src="../generators/php/procedures.js"></script>
<script src="../generators/lua.js"></script>
<script src="../generators/lua/logic.js"></script>
<script src="../generators/lua/loops.js"></script>
<script src="../generators/lua/math.js"></script>
<script src="../generators/lua/text.js"></script>
<script src="../generators/lua/lists.js"></script>
<script src="../generators/lua/colour.js"></script>
<script src="../generators/lua/variables.js"></script>
<script src="../generators/lua/procedures.js"></script>
<script src="../generators/dart.js"></script>
<script src="../generators/dart/logic.js"></script>
<script src="../generators/dart/loops.js"></script>
<script src="../generators/dart/math.js"></script>
<script src="../generators/dart/text.js"></script>
<script src="../generators/dart/lists.js"></script>
<script src="../generators/dart/colour.js"></script>
<script src="../generators/dart/variables.js"></script>
<script src="../generators/dart/procedures.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 workspace = null;
var fakeDragStack = [];

function start() {
  // Parse the URL arguments.
  var match = location.search.match(/dir=([^&]+)/);
  var rtl = match && match[1] == 'rtl';
  document.forms.options.elements.dir.selectedIndex = Number(rtl);
  var toolbox = getToolboxElement();
  document.forms.options.elements.toolbox.selectedIndex =
      Number(toolbox.getElementsByTagName('category').length == 0);
  match = location.search.match(/side=([^&]+)/);
  var side = match ? match[1] : 'start';
  document.forms.options.elements.side.value = side;
  // Create main workspace.
  workspace = Blockly.inject('blocklyDiv',
          {comments: true,
           collapse: true,
           disable: true,
           grid:
             {spacing: 25,
              length: 3,
              colour: '#ccc',
              snap: true},
           horizontalLayout: side == 'top' || side == 'bottom',
           maxBlocks: Infinity,
           media: '../media/',
           oneBasedIndex: true,
           readOnly: false,
           rtl: rtl,
           scrollbars: true,
           toolbox: toolbox,
           toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
           zoom:
             {controls: true,
              wheel: true,
              startScale: 1.0,
              maxScale: 4,
              minScale: .25,
              scaleSpeed: 1.1}
          });
  // Restore previously displayed text.
  if (sessionStorage) {
    var text = sessionStorage.getItem('textarea');
    if (text) {
      document.getElementById('importExport').value = text;
    }
    // Restore event logging state.
    var state = sessionStorage.getItem('logEvents');
    logEvents(Boolean(Number(state)));
  } else {
    // MSIE 11 does not support sessionStorage on file:// URLs.
    logEvents(false);
  }
  taChange();
}

function getToolboxElement() {
  var match = location.search.match(/toolbox=([^&]+)/);
  return document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
}

function toXml() {
  var output = document.getElementById('importExport');
  var xml = Blockly.Xml.workspaceToDom(workspace);
  output.value = Blockly.Xml.domToPrettyText(xml);
  output.focus();
  output.select();
  taChange();
}

function fromXml() {
  var input = document.getElementById('importExport');
  var xml = Blockly.Xml.textToDom(input.value);
  Blockly.Xml.domToWorkspace(xml, workspace);
  taChange();
}

function toCode(lang) {
  var output = document.getElementById('importExport');
  output.value = Blockly[lang].workspaceToCode(workspace);
  taChange();
}

// Disable the "Import from XML" button if the XML is invalid.
// Preserve text between page reloads.
function taChange() {
  var textarea = document.getElementById('importExport');
  if (sessionStorage) {
    sessionStorage.setItem('textarea', textarea.value);
  }
  var valid = true;
  try {
    Blockly.Xml.textToDom(textarea.value);
  } catch (e) {
    valid = false;
  }
  document.getElementById('import').disabled = !valid;
}

function logEvents(state) {
  var checkbox = document.getElementById('logCheck');
  checkbox.checked = state;
  if (sessionStorage) {
    sessionStorage.setItem('logEvents', Number(state));
  }
  if (state) {
    workspace.addChangeListener(logger);
  } else {
    workspace.removeChangeListener(logger);
  }
}

function logger(e) {
  console.log(e);
}

function airstrike(n) {
  var prototypes = [];
  var toolbox = getToolboxElement();
  var blocks = toolbox.getElementsByTagName('block');
  for (var i = 0, block; block = blocks[i]; i++) {
    prototypes.push(block.getAttribute('type'));
  }
  for (var i = 0; i < n; i++) {
    var prototype = prototypes[Math.floor(Math.random() * prototypes.length)];
    var block = workspace.newBlock(prototype);
    block.initSvg();
    block.getSvgRoot().setAttribute('transform', 'translate(' +
        Math.round(Math.random() * 450 + 40) + ', ' +
        Math.round(Math.random() * 600 + 40) + ')');
    block.render();
  }
}

function fakeDrag(id, dx, dy, opt_workspace) {
  var ws = opt_workspace || Blockly.getMainWorkspace();
  var blockToDrag = ws.getBlockById(id);

  if (!blockToDrag) {
    fakeDragWrapper();
    return;
  }
  var blockTop = blockToDrag.svgGroup_.getBoundingClientRect().top;
  var blockLeft = blockToDrag.svgGroup_.getBoundingClientRect().left;

  // Click somewhere on the block.
  var mouseDownEvent = new MouseEvent('mousedown',
      {clientX: blockLeft + 5, clientY: blockTop + 5});
  blockToDrag.onMouseDown_(mouseDownEvent);

  // Throw in a move for good measure.
  setTimeout(
    function() {
      var mouseMoveEvent = new MouseEvent('mousemove',
          {clientX: blockLeft + dx,
          clientY: blockTop + dy});
      blockToDrag.onMouseMove_(mouseMoveEvent);

      // Drop at dx, dy.
      setTimeout(
        function() {
          var mouseUpEvent = new MouseEvent('mouseup',
              {clientX: blockLeft + dx,
              clientY: blockTop + dy});
          blockToDrag.onMouseUp_(mouseUpEvent);

          setTimeout(fakeDragWrapper(), 100);
        }, 30);
    }, 30);
};

function fakeDragWrapper() {
  var dragInfo = fakeDragStack.pop();
  if (dragInfo) {
    fakeDrag(dragInfo.id, dragInfo.dx, dragInfo.dy, dragInfo.workspace);
  }
}

function fakeManyDrags() {
  var blockList = workspace.getAllBlocks();
  for (var i = 0; i < 2 * blockList.length; i++) {
    fakeDragStack.push(
      {
        id: blockList[Math.round(Math.random() * (blockList.length - 1))].id,
        // Move some blocks up and to the left, but mostly down and to the right.
        dx: Math.round((Math.random() - 0.25) * 200),
        dy: Math.round((Math.random() - 0.25) * 200),
        workspace: workspace
      });
  }
  fakeDragWrapper();
}

function spaghetti(n) {
  var xml = spaghettiXml;
  for(var i = 0; i < n; i++) {
    xml = xml.replace(/(<(statement|next)( name="DO0")?>)<\//g,
        '$1' + spaghettiXml + '</');
  }
  xml = '<xml xmlns="http://www.w3.org/1999/xhtml">' + xml + '</xml>';
  var dom = Blockly.Xml.textToDom(xml);
  console.time('Spaghetti domToWorkspace');
  Blockly.Xml.domToWorkspace(dom, workspace);
  console.timeEnd('Spaghetti domToWorkspace');
}
var spaghettiXml = [
  '  <block type="controls_if">',
  '    <value name="IF0">',
  '      <block type="logic_compare">',
  '        <field name="OP">EQ</field>',
  '        <value name="A">',
  '          <block type="math_arithmetic">',
  '            <field name="OP">MULTIPLY</field>',
  '            <value name="A">',
  '              <block type="math_number">',
  '                <field name="NUM">6</field>',
  '              </block>',
  '            </value>',
  '            <value name="B">',
  '              <block type="math_number">',
  '                <field name="NUM">7</field>',
  '              </block>',
  '            </value>',
  '          </block>',
  '        </value>',
  '        <value name="B">',
  '          <block type="math_number">',
  '            <field name="NUM">42</field>',
  '          </block>',
  '        </value>',
  '      </block>',
  '    </value>',
  '    <statement name="DO0"></statement>',
  '    <next></next>',
  '  </block>'].join('\n');

</script>

<style>
html, body {
  height: 100%;
}
body {
  background-color: #fff;
  font-family: sans-serif;
  overflow: hidden;
}
h1 {
  font-weight: normal;
  font-size: 140%;
}
#blocklyDiv {
  float: right;
  height: 95%;
  width: 70%;
}
#importExport {
  font-family: monospace;
}
</style>
</head>
<body onload="start()">

  <div id="blocklyDiv"></div>

  <h1>Blockly Playground</h1>

  <p><a href="javascript:void(workspace.setVisible(true))">Show</a>
   - <a href="javascript:void(workspace.setVisible(false))">Hide</a></p>

  <form id="options">
    <select name="dir" onchange="document.forms.options.submit()">
      <option value="ltr">LTR</option>
      <option value="rtl">RTL</option>
    </select>
    <select name="toolbox" onchange="document.forms.options.submit()">
      <option value="categories">Categories</option>
      <option value="simple">Simple</option>
    </select>
    <select name="side" onchange="document.forms.options.submit()">
      <option value="start">Start</option>
      <option value="end">End</option>
      <option value="top">Top</option>
      <option value="bottom">Bottom</option>
    </select>
  </form>

  <p>
    <input type="button" value="Export to XML" onclick="toXml()">
    &nbsp;
    <input type="button" value="Import from XML" onclick="fromXml()" id="import">
    <br>
    <input type="button" value="To JavaScript" onclick="toCode('JavaScript')">
    &nbsp;
    <input type="button" value="To Python" onclick="toCode('Python')">
    &nbsp;
    <input type="button" value="To PHP" onclick="toCode('PHP')">
    &nbsp;
    <input type="button" value="To Lua" onclick="toCode('Lua')">
    &nbsp;
    <input type="button" value="To Dart" onclick="toCode('Dart')">
    <br>
    <textarea id="importExport" style="width: 26%; height: 12em"
      onchange="taChange();" onkeyup="taChange()"></textarea>
  </p>

  <p>
    Stress test: &nbsp;
    <input type="button" value="Airstrike!" onclick="airstrike(100)">
    <input type="button" value="Spaghetti!" onclick="spaghetti(8)">
    <input type="button" value="Fake some drags!" onclick="fakeManyDrags()">
  </p>
  <p>
    Log events: &nbsp;
    <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
  </p>

  <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>