123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Blockly Demo: Realtime Collaboration</title>
- <script src="../../blockly_compressed.js"></script>
- <script src="../../blocks_compressed.js"></script>
- <script src="../../msg/js/en.js"></script>
- <script src="https://apis.google.com/js/api.js"></script>
- <style>
- body {
- background-color: #fff;
- font-family: sans-serif;
- }
- h1 {
- font-weight: normal;
- font-size: 140%;
- }
- #collaborators > img {
- margin-right: 5px;
- height: 30px;
- padding-bottom: 5px;
- width: 30px;
- border-radius: 3px;
- }
- </style>
- </head>
- <body>
- <h1><a href="https://developers.google.com/blockly/">Blockly</a> >
- <a href="../index.html">Demos</a> > Realtime Collaboration</h1>
- <p>This is a simple demo of realtime collaboration in Blockly.</p>
- <p>→ More info on
- <a href="https://developers.google.com/blockly/realtime-collaboration">
- realtime collaboration in Blockly</a>...</p>
- <div id="collaborators"></div>
- <div id="blocklyDiv"
- style="height: 480px; width: 600px;">
- </div>
- <xml id="toolbox" style="display: none">
- <block type="controls_if"></block>
- <block type="controls_repeat_ext"></block>
- <block type="logic_compare"></block>
- <block type="math_number"></block>
- <block type="math_arithmetic"></block>
- <block type="text"></block>
- <block type="text_print"></block>
- </xml>
- <p>Test realtime collaboration by opening
- <a target="_blank" href="#" onmouseover="this.href = window.location.href">
- this link</a> in a separate browser window or tab and they will be
- synchronized. You can even share the link with a friend!.</p>
- <br>
- <br>
- <!-- Text area that will be used for our collaborative chat box. -->
- <textarea id="chatbox" style="width: 26%; height: 12em" disabled="true"></textarea>
- <script>
- // See https://developers.google.com/blockly/realtime-collaboration for how
- // to set up your app for realtime collaboration and how to get the
- // clientId that you need below.
- Blockly.inject(document.getElementById('blocklyDiv'),
- {toolbox: document.getElementById('toolbox'),
- realtime: true,
- realtimeOptions:
- {clientId: 'YOUR CLIENT ID HERE',
- chatbox: {elementId: 'chatbox'},
- collabElementId: 'collaborators'}});
- </script>
- </body>
- </html>
|