How to create a colour block with only limited colors which I specify

[Vivek]

Hello team,

I want to create a color block but with 4-5 colors only. I have used the  .appendField(new Blockly.FieldColour("#ff0000"), "NAME");  but it is showing all colors in color selection option.

I want only red, green, blue, black, white, or no color as option for selection in block.

Please help me in achieving this.

Regards 

Vivek

[Red Panda]

You could overwrite the default color class or create a new one and then define a new color palette with your desired colors. e.g.

Blockly.FieldColour.COLOURS = ['#f00','#0f0','#00f','#000','#888','#fff'];
Blockly.FieldColour.COLUMNS = 3;

[Erik Pasternak]

For future reference, here's the docs. You can also use setcolors() to define it for a specific block type.

[Vivek]

Thank you all

Its working nicely.

You guys are really doing exceptional work.

Your commitment is incredible.

Thank You 

Vivek

[Bart Butenaers]

For future reference, here's the docs. You can also use setcolors() to define it for a specific block type.

Morning everybody,

If your custom blocks are defined as Javascript functions, the setColors is indeed working fine:

    init: function() {          
        var limitedColourField = new Blockly.FieldColour('#00f');
        limitedColourField.setColours(['#ff0000', '#00ff00', '#ffff00', '#0000ff', '#888888']).setColumns(3);
        ...
        this.appendDummyInput().appendField(limitedColourField, 'COLOUR');
        ...
    }

But can this mechanism also be used when your custom blocks are defined as JSON objects???

For example, I don't know how to use my limitedColourField in the JSON:

    init: function () {    
        var limitedColourField = new Blockly.FieldColour('#00f');
        limitedColourField.setColours(['#ff0000', '#00ff00', '#ffff00', '#0000ff', '#888888']).setColumns(3);
       
        this.jsonInit({
            ...
            "args0": [
                {
                    "type": "field_colour",  ??????????????????????????????????????????????????
                    "name": "COLOUR",
                    "colour": "#0000ff"
                }
            ],
            ...
        });
    }

I'm currently converting all my Javascript definitions to JSON definitions, so that is the reason of my question ...

Thanks !!!!

Bart

[Bart Butenaers]

Tried a number of things, but don't get it working.

For example this doesn't help:

                {
                    "type": "field_colour",

                    "name": "COLOUR",
                    "colour": "#0000ff",

                    "colours": ['#ff0000', '#00ff00', '#ffff00', '#0000ff', '#888888']
                },

Seems to be rather trivial what I want to achieve, but running out of creativity...

[Red Panda]

Hi Bart Butenaers,

It may be possible that this is only possible with javascript. Dynamic definition seems to be rather difficult with JSON

-Red Panda

[Bart Butenaers]

Hello Red,

Thanks for the bad news :-)
Did meanwhile some further reading and found something interesting ( see https://github.com/google/blockly/blob/master/core/field_textinput.js ) :

Blockly.Field.register('field_input', Blockly.FieldTextInput);

Could I use that somehow to use my limitedColourField in the json, or do I have develop an entirely new color subclass?

Thanks!
Bart

[Erik Pasternak]

Yep, sorry to say that's not supported in JSON. https://github.com/google/blockly/issues/286

It should be pretty easy to add to FieldColour.fromJson if someone has the time to make a PR.

Cheers,

Erik 

[Bart Butenaers]

Hi Erik,

that is a real bummer for me: have converted all my blocks to json, except from one, that uses such a limited color set.

Do you have an idea how I could workaround it someway ?

Creating a subclass from FieldClass seems a lot of work (a.o. Closure, ...) to set a simple array of colors.

My knowledge about Blockly is too limited to get it solved ;-(

Bart

[Bart Butenaers]

Erik,

think I have found a workaround:

1. In my JSON block definition I add a dummy input (at %2) and an extension for the limited colour picker:

Blockly.Blocks['node_status'] = {
    init: function () {
        this.jsonInit({
            "type": "node_status",
            "message0": Blockly.Msg.NODE_STATUS,
            "args0": [
                {
                    "type": "input_value",
                    "name": "TEXT_INPUT",
                    "check": "String"
                },
                {
                    "type": "input_dummy",
                    "name": "COLOUR_PLACEHOLDER",
                },
                {
                    "type": "field_dropdown",
                    "name": "SHAPE",
                    "options": [["ring", "RING" ],
                                ["dot" , "DOT"  ]]
                }
            ],
            "inputsInline": true,
            "previousStatement": null,
            "nextStatement": null,
            "colour": "#BB8FCE",
            "tooltip": Blockly.Msg.NODE_STATUS_TOOLTIP,
            "helpUrl": null,
            "extensions": ["limited_colorpicker_extension"]
        });
    }
}

2.  As soon as the extension gets loaded, it creates a limited colour picker field at appends that underneath the dummy input:

Blockly.Extensions.register('limited_colorpicker_extension', function() {
    //var input = this.inputList[0];
    var placeholder = this.inputList[1];


    // Set the allowed status colours (red, green, orange, blue, grey).    
    var colourField = new Blockly.FieldColour('#00f');
    colourField.setColours(['#ff0000', '#00ff00', '#ffff00', '#0000ff', '#888888']).setColumns(3);
           
    placeholder.appendField(colourField, 'COLOUR');
});

3. The limited color picker field is nicely displayed:

4. And now in the code generator, the colour is available as normal:

Blockly.JavaScript['node_status'] = function(block) {
    var colour = block.getFieldValue('COLOUR');
    ....
}

Thanks for the link to the issue, now at least I know that there is no standard solution available at the moment!

Kind regards,

Bart