c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sam El-Husseini 2018-02-26 13:37:58 -08:00 committed by GitHub
parent cda7013e96
commit a021c0b292
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 129 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
editor/extension.ts
View File

@ -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>) => {

71
editor/field_color.ts Normal file
View File

@ -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);
}
}
}

43
libs/color-sensor/color.ts
View File

@ -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(<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"
//% 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(<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"
//% 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;
}

17
libs/color-sensor/ns.ts Normal file
View File

@ -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;
}
}

3
libs/color-sensor/pxt.json
View File

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

21
theme/fieldeditors.less
View File

@ -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;
}
}
}