To get alert message

147 views
Skip to first unread message

Gauri raykar

unread,
Mar 22, 2021, 2:02:28 AM3/22/21
to blo...@googlegroups.com
Hello,
     How to get an alert message after click on custom block (block in workspace)

Beka Westberg

unread,
Mar 22, 2021, 12:33:46 PM3/22/21
to blo...@googlegroups.com
Hello,

You can trigger an alert when a block is clicked by listening for the click event. But the problem is that this triggers when /any/ block is clicked :/ For example:
```
function onClick(event) {
  if (event.type == Blockly.Events.CLICK &&
      event.targetType == 'block') {
    alert('You clicked a block!')
  }
}
workspace.addChangeListener(onClick);
```

Depending on what exactly you want to achieve, you may be able to use an image field with a click listener. This would allow you to only listen for clicks on your custom blocks.
```
field = new Blockly.FieldImage(/* etc */)
var listener = function() {
    alert('You clicked the image field!')
}
field.setOnClickHandler(listener)
```

I hope that gives you some place to start.  If you have any further questions please reply!
--Beka

On Sun, Mar 21, 2021 at 11:02 PM Gauri raykar <gaurir...@gmail.com> wrote:
Hello,
     How to get an alert message after click on custom block (block in workspace)

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAFT6%3DT3cL_GymbFuhZ2cmqzPLRq-z_sp0atPgartPwPu4SNA2w%40mail.gmail.com.

Gauri raykar

unread,
Mar 25, 2021, 1:15:19 AM3/25/21
to blo...@googlegroups.com
Hello, 
    There is only one block in workspace. So no problem with first solution but it is not working. Please go though the code and give me the solution.  https://drive.google.com/drive/folders/1bXkEVdG1GHs62ciuZAWLcIMvcBVC2shF?usp=sharing

Beka Westberg

unread,
Mar 25, 2021, 11:40:04 AM3/25/21
to blo...@googlegroups.com
Hello,

I would be happy to help if you could provide a bit more information =) For example:
  • How is the code not working? Could you provide a description, stack trace, or gif of what is occurring?
  • Have you tried to do any debugging on your own? If so, what information did you discover?
Once there's a bit more information I'm sure someone here can help you out =)

Best,
Beka

Gauri raykar

unread,
Mar 25, 2021, 12:38:45 PM3/25/21
to Blockly
I tried the solution but it's not working.



first.html


<!-- Workspace Area -->
<div id="blocklyDiv" style="height: 600px; width: 1450px;"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="startBlocks" style="display: none">
<block type="apple"></block>
</xml>
</body>

</html>
<script>
var workspace = Blockly.inject('blocklyDiv',);
Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'), workspace);
function onClick(event) {
// alert("hello")
if (event.type == Blockly.Events.CLICK &&
event.targetType == 'apple') {
alert('You clicked a block!')
}
}
workspace.addChangeListener(onClick);

</script>


block_defination.js


Blockly.Blocks['apple'] = {
init: function() {
this.appendDummyInput()
.appendField(new Blockly.FieldImage("./images/ap.png", 150, 150, { alt: "*", flipRtl: "TRUE" }));
this.setColour(87);
// this.setMovable(false); // Web or Android
this.setTooltip("");
this.setHelpUrl("");
}
};

Gauri raykar

unread,
Mar 25, 2021, 12:42:29 PM3/25/21
to blo...@googlegroups.com
--
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.
Screenshot_2021-03-25-22-11-45-244_com.gallery.player.jpg

Beka Westberg

unread,
Mar 26, 2021, 10:37:34 AM3/26/21
to blo...@googlegroups.com
Ahh I see, it looks like there was a bit of a miscommunication about the targetType hehe. As stated in the events documentation, targetType is one of  'block', 'workspace', or 'zoom_controls'. So your onClick function should look like this if you want to listen for clicks on blocks:
```
function onClick(event) {

  if (event.type == Blockly.Events.CLICK &&
    event.targetType == 'block') {  // String comparison should be 'block'

    alert('You clicked a block!')
  }
}
```

Sadly there's no way to tell what /type of block/ you're clicking on, which is why I mentioned:

> But the problem is that this triggers when /any/ block is clicked :/

In my original post. Since then I've created an issue to address this problem, but it won't be available for at least 3 months due to Blockly's release cycle :/

Best wishes,
Beka

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

koz...@google.com

unread,
Apr 7, 2021, 6:00:57 PM4/7/21
to Blockly
I think the Click event does have the information you need.

The click event has the following properties:
- workspaceId - the associated workspace id
- blockId - the id of the block clicked if this is a block click event
- targetType - one of "block', 'workspace', or 'zoom_controls'
- type - Blockly.Events.CLICK
- isUiEvent - true

You could use the blockId property with the method getBlockById on the workspace to get the block associated with this event. That block should have the property type which will be equal to "apple" if that block is the one that is clicked.

~ Monica
Reply all
Reply to author
Forward
0 new messages