Blockly Color Wheel Field

This is a blockly color picker / wheel that uses the IRO Color Picker. This field will return a hex value.

Installation

Yarn

yarn add blockly-field-color-wheel

npm

npm install blockly-field-color-wheel --save

Usage

For the options you don't have to pass anything in. It will default to

FF00FF for the color and 150 for the width.

You can control the starting color by passing in the a hex value. You can control the width by passing in a number for the second value. You can over ride any of the default options by passing in a ColorPickerProps. Read IRO Color Pickers Docs to learn more.

The container of the color picker has the 'blockly-color-wheel-container' class attached to the HTML. Allowing you to style it.

JavaScript

import * as Blockly from 'blockly';
import {ColorPickerField} from 'blockly-field-color-wheel';
Blockly.Blocks["color_wheel_picker"] = {
  init: function () {
    this.appendDummyInput()
      .appendField("Color: ")
      .appendField(new ColorPickerField("#00FF00", 150, {
        layoutDirection: 'horizontal',
      }), "COLOR")
  }
};

JSON

import * as Blockly from 'blockly';
import 'blockly-field-color-wheel';
Blockly.defineBlocksWithJsonArray([
    {
        "type": "color_wheel_picker",
        "message0": "Color: %1",
        "args0": [
            {
                "type": "field_template",
                "name": "COLOR",
                "color": "#FF00FF",
                "width" : 150,
                "options":{
                    layoutDirection: 'horizontal',
                }
            }
        ]
    }]);

License

Apache 2.0