How can I add a button to a blockly block?

[Zubair Quraishi]

I need a button which will trigger a javascript action to be performed.

[Blake]

Why do you want the button in the block?

On Thu, Sep 8, 2016 at 9:55 AM, Zubair Quraishi <z...@nemcv.com> wrote:

I need a button which will trigger a javascript action to be performed.

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

[Rachel Fenichel]

Not sure exactly what you're trying to accomplish, but you may want to extend Blockly.Icon.

On Thu, Sep 8, 2016 at 9:09 AM Blake <techplex...@gmail.com> wrote:

Why do you want the button in the block?

On Thu, Sep 8, 2016 at 9:55 AM, Zubair Quraishi <z...@nemcv.com> wrote:

I need a button which will trigger a javascript action to be performed.

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

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

[Zubair Quraishi]

I want a button on the block as the block defines a database table, and I only want the update to happen when an "Update" button is pressed on the block. I tried adding an update button to outside of the workspace but noone could find it so I need the button on the block itself

On Thursday, September 8, 2016 at 6:09:34 PM UTC+2, Blake Bourque wrote:

Why do you want the button in the block?

On Thu, Sep 8, 2016 at 9:55 AM, Zubair Quraishi <z...@nemcv.com> wrote:

I need a button which will trigger a javascript action to be performed.

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

[Zubair Quraishi]

What does Blockly.icon do. I searched on the web and in the Blockly website but I can't seem to find anything

[SETHU RAMAN.B]

You can make image as your button and you may give some image like button as url . Then like drop down you may extend the click EventListener for image also and can perform this.

You may get some idea on looking in to this -- https://github.com/toebes-extreme/blockly 

They have implemented extended blockly for clickable image 

go to the post for further understanding -- https://groups.google.com/forum/#!searchin/blockly/image%7Csort:relevance/blockly/3ONGhE3ZsMk/Inqq0h9cDQAJ

[Zubair Quraishi]

thanks, I looked at the links, but is there any way to make a clickable image without having to change the blockly core libraries?

[Zubair Quraishi]

Ok, I tried:

     this.appendDummyInput()
        .appendField("update DB")
        .appendField(new Blockly.FieldImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*"));

and the image shows, but when I try:

    function fff(e) {
         return 0;};

     this.appendDummyInput()
        .appendField("update DB")
        .appendField(new Blockly.FieldClickImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*", fff));

then it complains... is my code right?

On Saturday, 10 September 2016 09:48:11 UTC+2, SETHU RAMAN.B wrote:

[Zubair Quraishi]

Hi Sethu

Ok, I tried:

     this.appendDummyInput()
        .appendField("update DB")
        .appendField(new Blockly.FieldImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*"));

and the image shows, but when I try:

    function fff(e) {
         return 0;};

     this.appendDummyInput()
        .appendField("update DB")
        .appendField(new Blockly.FieldClickImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*", fff));

then it complains... is my code right?

[SETHU RAMAN.B]

Hi 

   May i know which blockly api file you are using , if you are using FieldClickImage then you need to use toebes version of blockly api ( toebes blockly library ) which contain definition for FieldClickImage .

   You can get library here -- https://github.com/toebes-extreme/blockly/blob/master/blockly_compressed.js

   full set -- https://github.com/toebes-extreme/blockly

[Sethuraman]

Hi 

   If you don't want to use that reference in your project , You can extent the existing fieldimage in your blockly you may get it under the following folder ( blockly\core\FieldImage)

  change the code in appropriate place and link the file externally how to link the script file to html page specify the link at last . 

Blockly.FieldImage = function(src, width, height, opt_alt,clickEvent) {

 

  this.sourceBlock_ = null;

  // Ensure height and width are numbers.  Strings are bad at math.

  this.height_ = Number(height);

  this.width_ = Number(width);

  this.size_ = new goog.math.Size(this.width_,

      this.height_ + 2 * Blockly.BlockSvg.INLINE_PADDING_Y);

  this.text_ = opt_alt || '';

  this.setValue(src);

  

   this.clickEvent = clickEvent;

  

};

under 

Blockly.FieldImage.prototype.init = function(block) {

 // at last link give this code 

// assigning the clickevent handler

  this.clickEventListener(this.imageElement_,this.clickEvent);

}

//definition for click listener 

Blockly.FieldImage.prototype.clickEventListener = function(imageElement, functionName){

 

 if(functionName){

imageElement.addEventListener("click", functionName); 

 }

};

[Zubair Quraishi]

I only included one file from there into blockly for the blockly field:

https://github.com/zubairq/yazz/blob/master/resources/public/blockly/core/field_clickimage.js

[Zubair Quraishi]

Ok thanks. I modified the FieldImage class to make a FieldClickImage as you said and it now works. The code is here:

https://github.com/zubairq/yazz/blob/master/resources/public/blockly/core/field_clickimage.js

: and I call it like this:

var fff = function (eventpat) {

  alert('Clicked');

  return 0;};

Blockly.Blocks['appshare_definedb_table'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("Define table")

        .appendField(new Blockly.FieldTextInput("Table name"), "TABLENAME");

    this.appendDummyInput()

        .appendField("update DB")

        .appendField(new Blockly.FieldClickImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*",fff));

    this.setColour(230);

    this.appendStatementInput("COLUMNS").setCheck("ColumnElement");

  }

}

: and it works perfectly... BIG THANKS FOR ALL YOUR HELP!!!!!

[sunm...@gmail.com]

https://github.com/zubairq/yazz/blob/master/resources/public/blockly/core/field_clickimage.js  So sad ,it can't find !who can help me ,Thanks

在 2016年9月12日星期一 UTC+8下午9:47:13，Zubair Quraishi写道：

[Andrew Stratton]

I added a field that you could click - you may be able to work out how to do something similar - https://groups.google.com/forum/#!topic/blockly/OgCsS2RJakY

Cheers - Andy