JS-Interpreter and Custom Blocks

[felix....@gmail.com]

Hi guys!

I correctly implement NeilFraser-JS-Interpreter-76256b5. It works with the given blocks. But my custom blocks not. I made a block which change the color of a div element. The custom block doesnt work in loops and not with the JS-Interpreter too. But alone it does his Job correctly. Im a bit confused and hopefully someone can help me! I saw a sample of a traffic light from Ruth Leopolp on youtube and tried it by myself. Here is the code of the Block and the Generator Stub:

 

Blockly.Blocks['lightswitch'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("Toggle light:")

        .appendField(new Blockly.FieldDropdown([["red","red"], ["yellow","yellow"], ["green","green"], ["all","all"]]), "lightcolor")

        .appendField(new Blockly.FieldDropdown([["on","on"], ["off","off"]]), "switch");

    this.setInputsInline(false);

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

    this.setColour(290);

    this.setTooltip('Select color and toggle on/off');

    this.setHelpUrl('');

  }

};

Blockly.JavaScript['lightswitch'] = function(block) {

  var dropdown_lightcolor = block.getFieldValue('lightcolor');

  var dropdown_switch = block.getFieldValue('switch');

  

  if (dropdown_switch==="on" && dropdown_lightcolor==="red"){

 var code = "document.getElementById('circlered').style.backgroundColor='red';"

  }

 if (dropdown_switch==="on" && dropdown_lightcolor==="yellow"){

 var code = "document.getElementById('circleyellow').style.backgroundColor='yellow';"

  }

//... alot of if cases but pretty much the same.

  return code;

};

  

[felix....@gmail.com]

I parsed it and did the first Step -> http://prntscr.com/e12p0r

After clicking stepping javascript secound time this -> http://prntscr.com/e12p5o

[felix....@gmail.com]

 Another Example: after this it stopped: http://prntscr.com/e12qjr (in the first loop).

 If i run the code withouth the interpreter. It print off and turn the color on. Make no sense at all.

[Bo Kalvslund]

I have the same experience with my custom blocks.
Seams like there is missing something in the implementation of the block/javascript.
Does someone have any suggestions?
Thanks

[Bo Kalvslund]

I have tried to implement the wait function and the JSInterpreter plus two custom blocks.

My custom block use document.GetElementById and Audio.

I get this error when I try to run the code:

Uncaught ReferenceError: Audio is not defined

    at Interpreter.executeException (acorn_interpreter.js:127)

    at Interpreter.throwException (acorn_interpreter.js:126)

    at Interpreter.getValueFromScope (acorn_interpreter.js:122)

    at Interpreter.getValue (acorn_interpreter.js:125)

    at Interpreter.stepCallExpression (acorn_interpreter.js:138)

    at Interpreter.step (acorn_interpreter.js:45)

    at Interpreter.run (acorn_interpreter.js:45)

    at run (VM37 index2.html:232)

    at HTMLButtonElement.onclick (index2.html:35)

Here's my implementation i customBlocks:

//https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#pe8ww9
Blockly.Blocks['playsound'] = {
  init: function() {
    this.appendValueInput("soundname")
        .setCheck("String")
        .appendField("Input soundname");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(150);
    this.setTooltip('It has to be in the format: soundname.extension');
    this.setHelpUrl('');
  }
};


Blockly.JavaScript['playsound'] = function(block) {
  var value_soundname = Blockly.JavaScript.valueToCode(block, 'soundname', Blockly.JavaScript.ORDER_ATOMIC) || '';
  // TODO: Assemble JavaScript into code variable.
   console.log(value_soundname);
   var slicedFirst = value_soundname.substr(1);
 var soundnameWithPath = "'Audio/" + slicedFirst;


  var code = "var audio = new Audio(" + soundnameWithPath + "); audio.play();\n";
  return code;
};

And here is my addition to initApi:

        // Add an API function for playsound.
      wrapper = function(text) {
        text = text ? text.toString() : '';
        return interpreter.createPrimitive(playsound(text));
      };
      interpreter.setProperty(scope, 'playsound',
          interpreter.createNativeFunction(wrapper));

Does I need anything else to get custom blocks working with the JSInterpreter - It runs fine without my custom blocks - I can step and highlight etc. - but when I put in my custom blocks the code generates the shown error.

Thanks, Bo

[Erik Pasternak]

Hi Bo,

I think you're missing a close quote on your soundnameWithPath.

 var soundnameWithPath = "'Audio/" + slicedFirst + "'";

A helpful way to debug these in general is to capture the generated code that's failing and try to run it manually.

Cheers,

Erik

[Bo Kalvslund]

Hi Erik
Thanks. Actually there is a singlequote there... the blockly text block returns strings with quotationmarks. Thats why I remove one char from the string before putting the path infront.
I have tested the block without the jsinterpreter - and it works fine.

Thanks for your answer - much appreciated
/Bo

[Erik Pasternak]

Woops, sorry about that.

It looks like the interpreter doesn't support any DOM APIs directly and you'll have to write your own interfaces for Audio. Also, you can test out code to see if it's supported in the interpreter demo.

/Bo

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/8ITZ7ko75YE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Erik Pasternak | Master of the House | epas...@google.com     

[Bo Kalvslund]

Thanks, good find - I'll look into that then. If there are some examples around I'd like to hear :-)

Regards Bo.

Den mandag den 13. februar 2017 kl. 22.12.33 UTC+1 skrev Erik Pasternak:

Woops, sorry about that.

It looks like the interpreter doesn't support any DOM APIs directly and you'll have to write your own interfaces for Audio. Also, you can test out code to see if it's supported in the interpreter demo.

On Mon, Feb 13, 2017 at 1:05 PM, Bo Kalvslund <bkalv...@gmail.com> wrote:

Hi Erik
Thanks. Actually there is a singlequote there... the blockly text block returns strings with quotationmarks. Thats why I remove one char from the string before putting the path infront.
I have tested the block without the jsinterpreter - and it works fine.

Thanks for your answer - much appreciated

/Bo

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/8ITZ7ko75YE/unsubscribe.

To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.