Use a color picker for the color field (color enum picker) (#346)

editor/extension.ts

@@ -7,6 +7,7 @@ import { FieldImages } from "./field_images";
 import { FieldSpeed } from "./field_speed";
 import { FieldBrickButtons } from "./field_brickbuttons";
 import { FieldTurnRatio } from "./field_turnratio";
+import { FieldColorEnum } from "./field_color";
 
 pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): Promise<pxt.editor.ExtensionResult> {
     pxt.debug('loading pxt-ev3 target extensions...')
@@ -27,6 +28,9 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
         }, {
             selector: "turnratio",
             editor: FieldTurnRatio
+        }, {
+            selector: "colorenum",
+            editor: FieldColorEnum
         }],
         deployCoreAsync,
         showUploadInstructionsAsync: (fn: string, url: string, confirmAsync: (options: any) => Promise<number>) => {

editor/field_color.ts

@@ -0,0 +1,71 @@
+/// <reference path="../node_modules/pxt-core/localtypings/blockly.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
+
+export interface FieldColorEnumOptions extends pxtblockly.FieldColourNumberOptions {
+}
+
+export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Blockly.FieldCustom {
+    public isFieldCustom_ = true;
+
+    constructor(text: string, params: FieldColorEnumOptions, opt_validator?: Function) {
+        super(text, params, opt_validator);
+    }
+
+    mapColour(enumString: string) {
+        switch(enumString) {
+            case '#000000': return 'ColorSensorColor.Black';
+            case '#006db3': return 'ColorSensorColor.Blue';
+            case '#00934b': return 'ColorSensorColor.Green';
+            case '#ffd01b': return 'ColorSensorColor.Yellow';
+            case '#f12a21': return 'ColorSensorColor.Red';
+            case '#ffffff': return 'ColorSensorColor.White';
+            case '#6c2d00': return 'ColorSensorColor.Brown';
+            default: return 'ColorSensorColor.None';
+        }
+    }
+
+    mapEnum(colorString: string) {
+        console.log(colorString);
+        switch(colorString) {
+            case 'ColorSensorColor.Black': return '#000000';
+            case 'ColorSensorColor.Blue': return '#006db3';
+            case 'ColorSensorColor.Green': return '#00934b';
+            case 'ColorSensorColor.Yellow': return '#ffd01b';
+            case 'ColorSensorColor.Red': return '#f12a21';
+            case 'ColorSensorColor.White': return '#ffffff';
+            case 'ColorSensorColor.Brown': return '#6c2d00';
+            case 'ColorSensorColor.None': return '#dfe6e9'; // Grey
+            default: return colorString;
+        }
+    }
+
+    /**
+     * Return the current colour.
+     * @param {boolean} opt_asHex optional field if the returned value should be a hex
+     * @return {string} Current colour in '#rrggbb' format.
+     */
+    getValue(opt_asHex?: boolean) {
+        var colour = this.mapColour(this.colour_);
+        if (!opt_asHex && colour.indexOf('#') > -1) {
+            return `0x${colour.replace(/^#/, '')}`;
+        }
+        return colour;
+    }
+
+    /**
+     * Set the colour.
+     * @param {string} colour The new colour in '#rrggbb' format.
+     */
+    setValue(colorStr: string) {
+        var colour = this.mapEnum(colorStr);
+        if (this.sourceBlock_ && Blockly.Events.isEnabled() &&
+            this.colour_ != colour) {
+            Blockly.Events.fire(new (Blockly as any).Events.BlockChange(
+                this.sourceBlock_, 'field', this.name, this.colour_, colour));
+        }
+        this.colour_ = colour;
+        if (this.sourceBlock_) {
+            this.sourceBlock_.setColour(colour, colour, colour);
+        }
+    }
+}

libs/color-sensor/color.ts

@@ -19,21 +19,21 @@ enum LightIntensityMode {
 }
 
 const enum ColorSensorColor {
-    //% block="none" jres=colors.none blockIdentity=sensors.color
+    //% block="none" blockIdentity=sensors.__colorEnumPicker
     None,
-    //% block="black" jres=colors.black blockIdentity=sensors.color
+    //% block="black" blockIdentity=sensors.__colorEnumPicker
     Black,
-    //% block="blue" jres=colors.blue blockIdentity=sensors.color
+    //% block="blue" blockIdentity=sensors.__colorEnumPicker
     Blue,
-    //% block="green" jres=colors.green blockIdentity=sensors.color
+    //% block="green" blockIdentity=sensors.__colorEnumPicker
     Green,
-    //% block="yellow" jres=colors.yellow blockIdentity=sensors.color
+    //% block="yellow" blockIdentity=sensors.__colorEnumPicker
     Yellow,
-    //% block="red" jres=colors.red blockIdentity=sensors.color
+    //% block="red" blockIdentity=sensors.__colorEnumPicker
     Red,
-    //% block="white" jres=colors.white blockIdentity=sensors.color
+    //% block="white" blockIdentity=sensors.__colorEnumPicker
     White,
-    //% block="brown" jres=colors.brown blockIdentity=sensors.color
+    //% block="brown" blockIdentity=sensors.__colorEnumPicker
     Brown
 }
 
@@ -110,19 +110,14 @@ namespace sensors {
          * @param handler the code to run when detected
          */
         //% help=sensors/color-sensor/on-color-detected
-        //% block="on **color** %this|detected color %color"
+        //% block="on **color** %this|detected color %color=colorEnumPicker"
         //% blockId=colorOnColorDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors
         //% this.fieldEditor="ports"
         //% weight=100 blockGap=12
         //% group="Color Sensor"
-        //% color.fieldEditor="gridpicker"
+        onColorDetected(color: number, handler: () => void) {
-        //% color.fieldOptions.columns=4
-        //% color.fieldOptions.tooltips=true
-        //% color.fieldOptions.hideRect=true
-        //% color.fieldOptions.width=268
-        onColorDetected(color: ColorSensorColor, handler: () => void) {
             this.setMode(ColorSensorMode.Color)
             const v = this._colorEventValue(<number>color);
             control.onEvent(this._id, v, handler);
@@ -135,19 +130,14 @@ namespace sensors {
          * @param color the color to detect
          */
         //% help=sensors/color-sensor/pause-for-color
-        //% block="pause **color** %this|for color %color"
+        //% block="pause **color** %this|for color %color=colorEnumPicker"
         //% blockId=colorPauseForColorDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors
         //% this.fieldEditor="ports"
         //% weight=99 blockGap=8
         //% group="Color Sensor"
-        //% color.fieldEditor="gridpicker"
+        pauseForColor(color: number) {
-        //% color.fieldOptions.columns=4
-        //% color.fieldOptions.tooltips=true
-        //% color.fieldOptions.hideRect=true
-        //% color.fieldOptions.width=268
-        pauseForColor(color: ColorSensorColor) {
             this.setMode(ColorSensorMode.Color);
             if (this.color() != color) {
                 const v = this._colorEventValue(<number>color);
@@ -319,16 +309,11 @@ namespace sensors {
      * @param color the color sensed by the sensor, eg: ColorSensorColor.Red
      */
     //% shim=TD_ID
-    //% blockId=colorSensorColor block="color %color"
+    //% blockId=colorSensorColor block="color %color=colorEnumPicker"
     //% group="Color Sensor"
     //% weight=97
     //% help=sensors/color
-    //% color.fieldEditor="gridpicker"
+    export function color(color: number): ColorSensorColor {
-    //% color.fieldOptions.columns=4
-    //% color.fieldOptions.tooltips=true
-    //% color.fieldOptions.hideRect=true
-    //% color.fieldOptions.width=268
-    export function color(color: ColorSensorColor): ColorSensorColor {
         return color;
     }
 

libs/color-sensor/ns.ts

@@ -0,0 +1,17 @@
+
+
+namespace sensors {
+
+    /**
+     * A color enum picker
+     * @param color to use, eg: ColorSensorColor.Blue
+     */
+    //% blockId=colorEnumPicker block="%color" shim=TD_ID
+    //% weight=0 blockHidden=1 turnRatio.fieldOptions.decompileLiterals=1
+    //% color.fieldEditor="colorenum"
+    //% color.fieldOptions.colours='["#f12a21", "#ffd01b", "#006db3", "#00934b", "#ffffff", "#6c2d00", "#000000"]'
+    //% color.fieldOptions.columns=2 color.fieldOptions.className='legoColorPicker'
+    export function __colorEnumPicker(color: ColorSensorColor): number {
+        return color;
+    }
+}

libs/color-sensor/pxt.json

@@ -4,7 +4,8 @@
     "files": [
         "README.md",
         "colors.jres",
-        "color.ts"
+        "color.ts",
+        "ns.ts"
     ],
     "testFiles": [
         "test.ts"

theme/fieldeditors.less

@@ -37,3 +37,24 @@
     stroke:#fc3;
     stroke-width: 4px !important;
 }
+
+
+/* Color enum picker */
+.blocklyDropDownDiv {
+    .goog-palette {
+        margin-bottom: 0px !important;
+    }
+    .legoColorPicker {
+        .goog-palette-colorswatch {
+            height: 30px;
+            width: 30px;
+            border-radius: 100%;
+        }
+        .goog-palette-cell-hover .goog-palette-colorswatch {
+            border: 2px solid #000;
+        }
+        .goog-palette-cell-selected .goog-palette-colorswatch {
+            border: 3px solid #000;
+        }
+    }
+}