Highlighting fields, checkboxes, statement- and input connections

[Wolfgang Koehler]

I need to do some checking of the information entered between blocks. For example I don't want two blocks of the same type with the same text in one of the input fields. My thought was that I would add a button for validation which is clicked once all blocks have been assembled. Based on the result of the validation I would show an alert and also highlight the fields (checkboxes, statement- and input connections) in question.

Searching through the core I came across this:

/**
 * Check to see if the contents of the editor validates.
 * Style the editor accordingly.
 * @private
 */
Blockly.FieldTextInput.prototype.validate_ = function() {
  var valid = true;
  goog.asserts.assertObject(Blockly.FieldTextInput.htmlInput_);
  var htmlInput = Blockly.FieldTextInput.htmlInput_;
  if (this.sourceBlock_ && this.validator_) {
    valid = this.validator_(htmlInput.value);
  }
  if (valid === null) {
    Blockly.addClass_(htmlInput, 'blocklyInvalidInput');
  } else {
    Blockly.removeClass_(htmlInput, 'blocklyInvalidInput');
  }
};

From that I conclude, that the highlighting can be done using:

  var htmlInput = Blockly.FieldTextInput.htmlInput_;
  Blockly.addClass_(htmlInput, 'blocklyInvalidInput');
  Blockly.removeClass_(htmlInput, 'blocklyInvalidInput');

My question however is: How can I apply that to the input field of a specific block?

I was hoping for something along this line:

  Blockly.addClass_(myBlock.getField('FieldName').???, 'blocklyInvalidInput')

This is just an example of what I'm looking for. Don't actually know how to find the element to which to add the class I guess.

Talking about highlighting. I also would like to be able to highlight checkboxes, statement- and input connections based on my validation. Any suggestions?

Thanks in advance

[Wolfgang Koehler]

Still could use some suggestions on this issue

[Anthony Morphett]

Hi Wolfgang

For fields, you should be able to use Blockly.addClass_( field.fieldGroup_, "yourCssClass" ) and Blockly.removeClass(...) to add/remove CSS styling.  Here's a snippet from my project to show how it works:

In your validation function:

Blockly.addClass_( errorField.fieldGroup_, "blocklyErrorField" );

CSS rule:

/* Highlight a field in red to indicate an error */
.blocklyErrorField > rect {
  fill: rgb(255, 192, 192) !important;
  fill-opacity: 1 !important;
}

Note: field.fieldGroup_ is an SVG <g> element so we use the child selector "> rect" to select the graphical <rect> element within the field.
This rule works with FieldTextInput, you might need to modify the selector for other field types eg checkboxes.

I've written a couple of helper functions Field.addCSSClass() & Field.removeCSSClass() which help with this, they also queue the actions if the field hasn't been initialised yet so you can use them during block init(). You're welcome to use them if you like: https://github.com/awmorp/blockly/blob/master/core/field.js#L202

I can't help with highlighting input or statement connectors, sorry.

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

[Wolfgang Koehler]

Thanks Anthony - works like a charm.

[Wolfgang Koehler]

Anybody know how to highlight checkboxes, statement- and input connections?

On Tuesday, May 10, 2016 at 9:28:06 AM UTC+2, Wolfgang Koehler wrote:

[Wolfgang Koehler]

I came across addSelect() and removeSelect() now which will highlight the whole block. Good enough for me. Wish I could influence the color of the highlighting.

On Tuesday, May 10, 2016 at 9:28:06 AM UTC+2, Wolfgang Koehler wrote:

[Wolfgang Koehler]

myblock.setWarningText('Warning!') highlights the block and adds a warning icon which, when clicked, will display the warning text. Even better choice.

On Tuesday, May 10, 2016 at 9:28:06 AM UTC+2, Wolfgang Koehler wrote:

[Kartheek Gollanapalli]

Hi Anthony, 

Can you please suggest how to disable checkbox in Blockly?

(bottom most block)

We have created a custom block using Blockly which has input fields in it. I want to disable some checkboxes on particular selection from dropdown and enable them on drop-down change.

In Blockly documentation, I haven't found a way to disable the checkbox(show grey box). Can you please confirm if there's one?

 

Please help.

Thanks.

[Cory Diers]

Hi Kartheek,

There isn't currently a way to disable a checkbox field, that's correct. First, I would suggest using a mutator to edit your block as the dropdown changes. Second, you have two options. First is to create your own checkbox field (perhaps extending field_checkbox) that has the disabling logic you're looking for. Alternately, you could use the mutator to remove the checkbox fields, and change the shape of the block. That tends to be the solution I've seen most often for cases like this.

--

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+unsubscribe@googlegroups.com.

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

--

Cory Diers | Software Engineer | cory...@google.com |