Dynamically change colour depending on dropdown

[Pj Muller]

Hi All,

we are trying to create a custom block that changes of output type and of colour whenever we change the dropdown value.

The output type changes perfectly every time we change the dropdown value the setColour() only works once, the colour does NOT change afterwards. 

Any help would greatly be appreciated :)!

  {

  init: function() {

    // ....

    var thisBlock = this;

    var dropdown = new Blockly.FieldDropdown([...], function(newOp) {

      thisBlock.updateType_(newOp);

    });

    // ....

  },

  updateType_: function(newOp) {

    if (newOp == 'STRING') {

      this.setColour(200);

      this.outputConnection.setCheck('String');

    } else if(newOp == 'NUMBER') {

      this.setColour(100);

      this.outputConnection.setCheck('Number');

    }

  },

  // storing output type

  mutationToDom: function() {

    var container = document.createElement('mutation');

    container.setAttribute('op', this.getFieldValue('OP'));

    return container;

  },

  // retrieving output type

  domToMutation: function(xmlElement) {

    this.updateType_(xmlElement.getAttribute('op'));

  }

};

[Rachel Fenichel]

Hi Pj,

Are you using the compiled version of Blockly?

[Rachel Fenichel]

Scratch that, I don't think the question is relevant.

[Anthony Morphett]

Hi Pj

If it helps, I have a block that similarly changes colour and output type depending on dropdown selection, and it works fine for me. Your code is basically similar to mine and I can't spot a reason why yours would work differently (!?).  Though I've made a few modifications to Blockly core which possibly might affect things. You can see my code here https://github.com/awmorp/math-blockly/blob/gh-pages/js/math-blocks-vectors.js#L79 and live demo here, in case it's useful.

Regards

Anthony

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Pj Muller]

Hi Anthony,

first of all. Super for your fast response AND that you showed me that it is possible to change the colour.

The code looks indeed very similar however I could not find the definition of this.setColourByType(); and within my Blockly the method is not defined.

Can you let me know what minimal changes I need to make to the Blockly core? Or something else.

PS: if other people also have a working prototype, please showcase it. The more examples/working code I have, the easier it will be to find the error.

PS2: @Anthony, how did you configure it that the yellow "snap" highlights are immediately turned on whenever you start to drag a block and not when you are up close?

Greetings,

PJ

[Pj Muller]

For the record, pretty strange, everthing seems to work -> http://jsbin.com/poreni/1/edit?js,output , is this code correct or am I forgetting something?

When I load this block the full Rails app it's not working anymore (so the type keeps on changing but not the color). I already tried to pinpoint which point is breaking it but no luck so far. Any ideas?

[Anthony Morphett]

Hi PJ

The function Block.setColourByType() is not part of standard Blockly, it is a function that I added in my project to automatically set a block colour based on its output type.  It essentially just looks up a colour number from a list of type-colour pairs and then calls Block.setColour().  You could write your own version if you wish, or just use a bunch of 'if's as you do now.

As for the 'snap' highlights, that is the type indicator plugin from https://github.com/HendrikD/blockly-plugins .

Anthony

[Pj Muller]

Hi Anthony, 

For the first issue: changing the color

===========================

I'm not there :(. Still have not figured out why it is working on jsbin and not in my local install.

Will continue to dig deeper.

If you have some ideas how I can debug better -> SHOOT!

For the second: Snapping from a distance

=================================

thanks for pointing me in the direction of  https://github.com/HendrikD/blockly-plugins I added it and it works. However the yellow highlights don't dissapear after snapping (see  https://github.com/HendrikD/blockly-plugins/issues/1)

Did you have the same and if so, how did you fix it?