Package Exports

blockly-field-color-wheel
blockly-field-color-wheel/dist/index.js
blockly-field-color-wheel/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (blockly-field-color-wheel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Blockly Color Wheel Field

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

example 1

example 2

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