Using TexttoDom and domtoWorkspace

[kate@yoon]

Hi,

Can anyone please help me i'm trying to load my toolbox and Workspace with xml. I used Blockly's workspace factory and it gave me three files two xml files and one js file. So I tried to load my js file in my html file but it doesn't work.

Then i did the following

var xml_text="<xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none">

  <sep></sep>

  <category name="DM" colour="#a55b80" id="testblock">

    <block type="whole_tts">

      <field name="dm">hello</field>

      <field name="dm1">0</field>

      <field name="dm2">0</field>

    </block>

  </category>

</xml>";

var xml = Blockly.Xml.textToDom(xml_text);

Blockly.Xml.domToWorkspace(xml, Blockly.workspace);

But it gives another error Uncaught Error: Blockly.Xml.textToDom expected an <xml> document.

I need to ask two things

1)how do i get my current workspace id

2)am i missing something here?

[Beka Westberg]

Hello,

This shouldn't be too hard to sort out, but first I need to know what your goal is.

Are you trying to load the toolbox? or are you trying to load blocks to the workspace?

If you are trying to load the toolbox, your XML is almost correct (just remove the sep) and you need to inject it like so:

     var toolbox =
          '<xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none">' +
          // Sep line removed
          '  <category name="DM" colour="#a55b80" id="testblock">' +
          '    <block type="whole_tts">' +
          '      <field name="dm">hello</field>' +
          '      <field name="dm1">0</field>' +
          '      <field name="dm2">0</field>' +
          '    </block>' +
          '  </category>' +
          '</xml>';

        workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox })

If you're tryin to load blocks to the workspace your xml needs a few changes, but you were on the right track with the injection.

        workspace = Blockly.inject('blocklyDiv', options);

        // All toolbox-specific XML has been removed.
        var xml_text =
          '<xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none">' +
          '  <block type="whole_tts">' +
          '    <field name="dm">hello</field>' +
          '    <field name="dm1">0</field>' +
          '    <field name="dm2">0</field>' +
          '  </block>' +
          '</xml>';


        var xml = Blockly.Xml.textToDom(xml_text);
        // Where workspace is the above workspace var
        Blockly.Xml.domToWorkspace(xml, workspace);

Also if you want to know your workspace id, simply do:

console.log(workspace.id);

I hope that helps! If you have any further questions please reply!

Beka

[Beka Westberg]

Note: in the second example, on the first line, the "options" variable is an object containing your workspace configuration.

[Beka Westberg]

Hello,

So the reason you're getting two workspaces is because the code.js file is creating a workspace in the 'content-blocks' div, while you are also creating a workspace in the 'blockDiv1' div. If you wanted to you could edit the code.js file to do your custom block loading, but if you're just looking to test blocks and things I would recommend using the playground. It's a bit more flexible, and has more features to help with testing. To do custom block loading you'd just have to edit the start function. I would maybe do it like this:

function start() {
  // All of the URL parsing...


  // Create main workspace.

  workspace = Blockly.inject('blocklyDiv',
      {

         // etc...
      });
  addToolboxButtonCallbacks();
  // This call added.
  appendDom();
  // etc...
}


function appendDom() {
  var blocks = document.getElementById('workspace-blocks');
  if (blocks.firstElementChild) {
    Blockly.Xml.appendDomToWorkspace(blocks, workspace);
  }
}


<xml id="workspace-blocks" xmlns="http://www.w3.org/1999/xhtml" style="display: none">
  <!-- my blocks here -->
</xml>

With regard to organizing level data, I'm not sure how most people do it :/ It seems like blockly games does some sort of parsing based on the url? e.g. https://blockly-games.appspot.com/maze?lang=en&level=4&skin=0 . But I wasn't able to find the code that does the actual loading (if you want to take a look the source is here). Sorry I can't be more help in that regard :/

I hope this information helps, and I'm sorry if it's not what you needed. If you decide you want to test with the code demo instead of the playground I can provide information about how to load blocks into that as well (but really the playground is da bomb).

Beka :D

On Tuesday, June 4, 2019 at 6:26:44 AM UTC-7, kate@yoon wrote:

Hi Beka,

Thanks  for helping.

Actually I'm trying to design a game and want to load the contents according to the levels.Different levels will have different configurations.So yes i need to load my workspace with some predefined blocks and my tool box according to different levels.

To do so, I was thinking to make diff Directories and load content according to those is it possible??

Also, I created a seperate div as   <div id="blocklyDiv1" style="height: 400px"></div> where i want to load my workspace and toolbox but when i do so, I get two seperate div container.

How can i load my content into blockly's Workspace??

Please help....

Following is my Html code

<body>

  <div id="blocklyDiv1" style="height: 400px"></div> 

  <table width="100%" height="100%">

    <tr>

      <td>

        <h1><a href="https://developers.google.com/blockly/">Blockly</a>&rlm; &gt;

          <a href="../index.html">Demos</a>&rlm; &gt;

          <span id="title">...</span>

        </h1>

      </td>

      <td class="farSide">

        <select id="languageMenu"></select>

      </td>

    </tr>

    <tr>

      <td colspan=2>

        <table width="100%">

          <tr id="tabRow" height="1em">

            <td id="tab_blocks" class="tabon">...</td>

            <td class="tabmin">&nbsp;</td>

            <td id="tab_javascript" class="taboff">JavaScript</td>

            <td class="tabmin">&nbsp;</td>

            <td id="tab_python" class="taboff">Python</td>

            <td class="tabmin">&nbsp;</td>

            <td id="tab_php" class="taboff">PHP</td>

            <td class="tabmin">&nbsp;</td>

            <td id="tab_lua" class="taboff">Lua</td>

            <td class="tabmin">&nbsp;</td>

            <td id="tab_dart" class="taboff">Dart</td>

            <td class="tabmin">&nbsp;</td>

            <td id="tab_xml" class="taboff">XML</td>

            <td class="tabmax">

              <button id="trashButton" class="notext" title="...">

                <img src='../../media/1x1.gif' class="trash icon21">

              </button>

              <button id="linkButton" class="notext" title="...">

                <img src='../../media/1x1.gif' class="link icon21">

              </button>

              <button id="runButton" class="notext primary" title="...">

                <img src='../../media/1x1.gif' class="run icon21">

              </button>               

            </td>

          </tr>

        </table>

      </td>

    </tr>

    <tr>

      <td height="99%" colspan=2 id="content_area">

      </td>

    </tr>

  </table>

    <div id="content_blocks" class="content"></span></div>

    <pre id="content_javascript" class="content"></pre>

    <pre id="content_python" class="content" ></pre>

    <pre id="content_php" class="content"></pre>

    <pre id="content_lua" class="content"></pre>

    <pre id="content_dart" class="content"></pre>

    <textarea id="content_xml" class="content" wrap="off"></textarea>

  <xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none">

  <sep></sep>

  <category name="Text" colour="#a55b80" id="testblock">

    <block type="whole_tts">

      <field name="TTSDEFAULT">hello</field>

      <field name="TTSLOOP">0</field>

      <field name="TTSTIME">0</field>

    </block>

  </category>

</xml>

  <script>

    

    $(document).ready(function() { 

    

      var toolbox = document.getElementById("toolbox");

      var options = { 

        toolbox : toolbox, 

        collapse : false, 

        comments : false, 

        disable : false, 

        maxBlocks : Infinity, 

        trashcan : false, 

        horizontalLayout : false, 

        toolboxPosition : 'start', 

        css : true, 

        media : 'https://blockly-demo.appspot.com/static/media/', 

        rtl : false, 

        scrollbars : false, 

        sounds : true, 

        oneBasedIndex : true

      };

      workspace = Blockly.inject('blocklyDiv1', options);

      var xml_text =

        '<xml xmlns="http://www.w3.org/1999/xhtml" id="workspace_1" style="display: none">' +

        '  <block type="whole_tts">' +

        '    <field name="dm">hello</field>' +

        '    <field name="dm1">0</field>' +

        '    <field name="dm2">0</field>' +

        '  </block>' +

        '</xml>';

      var xml = Blockly.Xml.textToDom(xml_text);

      Blockly.Xml.domToWorkspace(xml, workspace);

    });    

  

  </script>