How to separate variables of drop-down lists?

827 views
Skip to first unread message

Burak Bilgehan

unread,
Feb 21, 2017, 2:59:00 PM2/21/17
to Blockly
Hello,
I was creating custom blocks and those blocks should list all the variables that could be used. But I want each block's dropdown lists to show only the variables that can be used for this block.
To be more clear, consider a block with a string parsing function. Its drop-down list should only show string variables.
On the other hand, a mathematical operation's block should only list integers, or floats as the variables in its drop-down menu.
But for now every block has the access to every variable ever created. How can I separate them to be detected as different kinds of variables by the program, so the user can only use mathematical variables in mathematical blocks and so on?

Thank you,
Burak Bilgehan

Rachel Fenichel

unread,
Feb 23, 2017, 8:08:46 PM2/23/17
to Blockly
This isn't currently possible, but is a feature we're considering.

Burak Bilgehan

unread,
Feb 24, 2017, 11:07:01 AM2/24/17
to Blockly
But still, can we implement it by coding in JavaScript? I mean we can customize Blockly, I am not an advanced user but can we still do something to create our variable categories and to make our blocks only show one of the variable categories' elements?

Rachel Fenichel

unread,
Feb 24, 2017, 7:31:20 PM2/24/17
to Blockly
You could possibly do it by using a custom dropdown menu: https://developers.google.com/blockly/guides/create-custom-blocks/dropdown-menus

On Fri, Feb 24, 2017 at 8:07 AM Burak Bilgehan <burakb...@gmail.com> wrote:
But still, can we implement it by coding in JavaScript? I mean we can customize Blockly, I am not an advanced user but can we still do something to create our variable categories and to make our blocks only show one of the variable categories' elements?

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

Burak Bilgehan

unread,
Feb 26, 2017, 3:34:41 PM2/26/17
to Blockly
Thank you Rachel.
The link you advised could be useful for me. But I still have something to do. Dynamic dropdown menu is something I will be using in order to acquire my goals. But I don't know how the variables will be included in my dynamic dropdown list.
Let me give an example about it:
I have two blocks called "Order" and "Filter". The variables that will be ordered can't be filtered, and the variables that will be filtered can't be ordered. So the order block's dropdown shouldn't include the variables that can't be ordered.

For now I couldn't get how the variable getting mechanism working. All I know is, once we add ".appendField(new Blockly.FieldVariable("<item>"), "name1");", a dropdown list that includes every single variable is created. I want to eliminate the variables that can't be used for its block. As far as I understood, If we are getting the variables from Blockly.FieldVariable, we need to add some flags to variables while we create them to distinguish them later. But I'm not familiar with JavaScript and my programming knowledge isn't enough to understand how the project works exactly.
So can you help me achieving what I listed above?
Thank you

Sethuraman

unread,
Feb 27, 2017, 1:34:30 AM2/27/17
to Blockly
Hi

   You can use some global variable to store your list of variable and load that in dropdown as ur wish . For loading dropdown in java script (change handler)you can call a function ,through fucntion  you can load values to it.

    Blockly.Blocks['block_type'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField(new Blockly.FieldDropdown(getvalues()), "mydropdown");
.appendField(new Blockly.FieldDropdown(getvalues2()), "mydropdown2");
    this.setColour(230);
    this.setTooltip('');
    this.setHelpUrl('');
  }
};

var getvalues = function(){
 return ([["option","OPTIONNAME"], ["option","OPTIONNAME"], ["option","OPTIONNAME"]]);
}

var getvalues2 = function(){
 return ([["option1","OPTIONNAME1"], ["option2","OPTIONNAME2"], ["option3","OPTIONNAME3"]]);
}

I think this may help you 

Burak Bilgehan

unread,
Feb 27, 2017, 7:28:31 AM2/27/17
to Blockly
Thank you Sethuraman,
What you showed is also useful for me but still, I can't tell what I need pobably.
Let's consider your example:
.appendField(new Blockly.FieldDropdown(getvalues()), "mydropdown"); seems fine for me. I will use my variables in my dropdown like you showed. 
But my problem is:
var getvalues = function(){
 return ([["option","OPTIONNAME"], ["option","OPTIONNAME"], ["option","OPTIONNAME"]]);
}
this part.
I can't give names like ["option", "OPTIONNAME"] to the variables that I wanted to fill the dropdown. I need to gather the variables that have been created before, so it's like I need to use blockly's variable array or something like this, then I need to categorize them depending on my criteria. This is what I cant use a getvalues function as you do. I need my getvalues function to take its values from created variables.

Thank you

Sethuraman

unread,
Feb 28, 2017, 8:01:59 AM2/28/17
to Blockly
Hi 

    In get values function you can loop all the available variable and return only those variable you need by some condition applying or through some flag  .

    For get values function you can pass your criteria as a parameter because you know which criteria you need to apply for particular dropdown like .

.appendField(new Blockly.FieldDropdown(getvalues("country")), "mydropdown");


var getvalues = function(criteria){

var allvariable =  // loop all variable list in blockly and make list
if(criteria == "country"){
 var myarrayforDropdown = getvariableBasedonCriteria(criteria ,allvariable);
 return myarrayforDropdown 
}
else{
 return ([["option","OPTIONNAME"], ["option","OPTIONNAME"], ["option","OPTIONNAME"]]);
}
 
}

 //seperate allvariable according to criteria by looping condition 
var getvariableBasedonCriteria = function(condition,list){
 return seperated variable
}

Burak Bilgehan

unread,
Mar 7, 2017, 4:54:07 PM3/7/17
to Blockly
Hello Sethuraman once again. Thanks for your acvices, I'm getting closer to the solution.
But there's one thing I couldn't understand. Where do you implement the getvalues function? Let me show you my code.
var getValues = function(first) {
    var fs = first.toString();
    var res = [];
    var varlen = Blockly.Variables.allVariables(workspace).length;
    var allVariables = Blockly.Variables.allVariables(workspace);
    for (var i = 0; i < varlen; i++) {
        var curr = allVariables[i];
        if (curr.substr(0,1== fs) {
            res.push([curr,curr]);
        }
    }
    return res;
}


Blockly.Blocks['testpointlike'= {
    initfunction() {
        this.appendDummyInput()
            .appendField("testPoint")
            //.appendField(new Blockly.FieldDropdown([["id1", "id1"], ["id2", "id2"]]), "name1")
            .appendField(new Blockly.FieldDropdown(getValues("r")), "name1")
            .appendField("like")
            .appendField(new Blockly.FieldDropdown(getValues("r")), "name2");
        this.setInputsInline(false);
        this.setPreviousStatement(true'header');
        this.setNextStatement(true, ['header','body']);
        this.setColour(0);
        this.setTooltip('');
        this.setHelpUrl('http://www.example.com/');
    }
};

I tried to implement this way but my block has disappeared from my toolbox for now. What mistake might cause the problem? Sİnce I'm not too familiar with javascript this is probably a noob question but still I can't figure out yet.

Sethuraman

unread,
Mar 10, 2017, 5:19:39 AM3/10/17
to Blockly
Hi Burak Bilgehan 

 Sorry for delay 

since when you loading the page for first time you wont have any variable length so its throwing tuple error , 
so first time loading you can check length of variable and assign default select statement , I have pasted code based on condition , for me now block are loading.

var getValues = function(first) {
    var fs = first.toString();
    var res = [];
    var varlen = Blockly.Variables.allVariables(workspace).length;
    var allVariables = Blockly.Variables.allVariables(workspace);
if(varlen == 0){
res.push(["Select","select"]);
}
else{

Burak Bilgehan

unread,
Mar 13, 2017, 1:03:49 PM3/13/17
to Blockly
Thank you I get your point but can't apply. 
Rachel I have a question for you.
I want to know when EXACTLY the variables are added to the variablesDB, or workspace, or wherever we're getting our variables from. I need to interfere with the variable creation process. For example when we dragged our block that has a variable field within, its default variable is automatically added to our variable database. I need to manipulate the program so that the automatically created variables, along with the ones that we created, can be moved to different parts of variables. 
Let me give you an example. There are two blocks named "order" and "filter". We can treat them as variables. So an order variable can be used in other blocks. On the other hand there are blocks that use filter variables, which are created in filter block. If I can interfere variables' creation, I can send some flags along with order and filter variables, so that the user will know the variable is an order type variable or a filter type variable. 
I hope I can express my problem well. I looked for the whole project, but couldn't find the exact place that the variables are created (or added to the database that makes them recognized as variables).
Thank you.
Burak

Rachel Fenichel

unread,
Mar 13, 2017, 2:04:38 PM3/13/17
to Blockly
Typed variables are coming soon--look for an update in the next few weeks.

If you need to implement this in the meantime, here are some code pointers:

This code creates the popup that asks for a new variable name: https://github.com/google/blockly/blob/master/core/variables.js#L240

Workspace_svg has a createVariable function: https://github.com/google/blockly/blob/master/core/workspace_svg.js#L848, but the meat of it is in workspace.js createVariable: https://github.com/google/blockly/blob/master/core/workspace.js#L268

workspace.variableList is the "variableDB".  There are create, delete, and rename functions for variables, on workspace and workspace_svg.

Hope this helps.
Rachel

Burak Bilgehan

unread,
Mar 20, 2017, 4:24:56 PM3/20/17
to Blockly
Thank you, I tried but I failed to implement what I wanted.
Reply all
Reply to author
Forward
0 new messages