diff --git a/editor/extension.ts b/editor/extension.ts index 1fbcd012..9a822927 100644 --- a/editor/extension.ts +++ b/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.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) => { diff --git a/editor/field_color.ts b/editor/field_color.ts new file mode 100644 index 00000000..b1029a96 --- /dev/null +++ b/editor/field_color.ts @@ -0,0 +1,71 @@ +/// +/// + +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); + } + } +} \ No newline at end of file diff --git a/libs/color-sensor/color.ts b/libs/color-sensor/color.ts index 2c441377..22838905 100644 --- a/libs/color-sensor/color.ts +++ b/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" - //% color.fieldOptions.columns=4 - //% color.fieldOptions.tooltips=true - //% color.fieldOptions.hideRect=true - //% color.fieldOptions.width=268 - onColorDetected(color: ColorSensorColor, handler: () => void) { + onColorDetected(color: number, handler: () => void) { this.setMode(ColorSensorMode.Color) const v = this._colorEventValue(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" - //% color.fieldOptions.columns=4 - //% color.fieldOptions.tooltips=true - //% color.fieldOptions.hideRect=true - //% color.fieldOptions.width=268 - pauseForColor(color: ColorSensorColor) { + pauseForColor(color: number) { this.setMode(ColorSensorMode.Color); if (this.color() != color) { const v = this._colorEventValue(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" - //% color.fieldOptions.columns=4 - //% color.fieldOptions.tooltips=true - //% color.fieldOptions.hideRect=true - //% color.fieldOptions.width=268 - export function color(color: ColorSensorColor): ColorSensorColor { + export function color(color: number): ColorSensorColor { return color; } diff --git a/libs/color-sensor/ns.ts b/libs/color-sensor/ns.ts new file mode 100644 index 00000000..a9adbdab --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/libs/color-sensor/pxt.json b/libs/color-sensor/pxt.json index e332d12f..b04c038c 100644 --- a/libs/color-sensor/pxt.json +++ b/libs/color-sensor/pxt.json @@ -4,7 +4,8 @@ "files": [ "README.md", "colors.jres", - "color.ts" + "color.ts", + "ns.ts" ], "testFiles": [ "test.ts" diff --git a/theme/fieldeditors.less b/theme/fieldeditors.less index 7f4ba0ba..4f83ad57 100644 --- a/theme/fieldeditors.less +++ b/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; + } + } +} \ No newline at end of file