Merge pull request #135 from Microsoft/field_ports

Add an output port field editor

cmds/cmds.ts

@@ -2,7 +2,7 @@
 
 import * as fs from 'fs';
 
-require("./editor")
+require("./editor/deploy")
 
 declare namespace pxt.editor {
     function deployCoreAsync(resp: pxtc.CompileResult, disconnect?: boolean): Promise<void>;

editor/deploy.ts

@@ -0,0 +1,133 @@
+/// <reference path="../node_modules/pxt-core/built/pxteditor.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
+
+import UF2 = pxtc.UF2;
+
+export let ev3: pxt.editor.Ev3Wrapper
+
+export function debug() {
+    return initAsync()
+        .then(w => w.downloadFileAsync("/tmp/dmesg.txt", v => console.log(pxt.Util.uint8ArrayToString(v))))
+}
+
+function hf2Async() {
+    return pxt.HF2.mkPacketIOAsync()
+        .then(h => {
+            let w = new pxt.editor.Ev3Wrapper(h)
+            ev3 = w
+            return w.reconnectAsync(true)
+                .then(() => w)
+        })
+}
+
+let noHID = false
+
+let initPromise: Promise<pxt.editor.Ev3Wrapper>
+export function initAsync() {
+    if (initPromise)
+        return initPromise
+
+    let canHID = false
+    if (pxt.U.isNodeJS) {
+        canHID = true
+    } else {
+        const forceHexDownload = /forceHexDownload/i.test(window.location.href);
+        if (pxt.Cloud.isLocalHost() && pxt.Cloud.localToken && !forceHexDownload)
+            canHID = true
+    }
+
+    if (noHID)
+        canHID = false
+
+    if (canHID) {
+        initPromise = hf2Async()
+            .catch(err => {
+                initPromise = null
+                noHID = true
+                return Promise.reject(err)
+            })
+    } else {
+        noHID = true
+        initPromise = Promise.reject(new Error("no HID"))
+    }
+
+    return initPromise
+}
+
+// this comes from aux/pxt.lms
+const rbfTemplate = `
+4c45474f580000006d000100000000001c000000000000000e000000821b038405018130813e8053
+74617274696e672e2e2e0084006080XX00448581644886488405018130813e80427965210084000a
+`
+export function deployCoreAsync(resp: pxtc.CompileResult, isCli = false) {
+    let w: pxt.editor.Ev3Wrapper
+
+    let filename = resp.downloadFileBaseName || "pxt"
+    filename = filename.replace(/^lego-/, "")
+
+    let fspath = "../prjs/BrkProg_SAVE/"
+
+    let elfPath = fspath + filename + ".elf"
+    let rbfPath = fspath + filename + ".rbf"
+
+    let rbfHex = rbfTemplate
+        .replace(/\s+/g, "")
+        .replace("XX", pxt.U.toHex(pxt.U.stringToUint8Array(elfPath)))
+    let rbfBIN = pxt.U.fromHex(rbfHex)
+    pxt.HF2.write16(rbfBIN, 4, rbfBIN.length)
+
+    let origElfUF2 = UF2.parseFile(pxt.U.stringToUint8Array(atob(resp.outfiles[pxt.outputName()])))
+
+    let mkFile = (ext: string, data: Uint8Array = null) => {
+        let f = UF2.newBlockFile()
+        f.filename = "Projects/" + filename + ext
+        if (data)
+            UF2.writeBytes(f, 0, data)
+        return f
+    }
+
+    let elfUF2 = mkFile(".elf")
+    for (let b of origElfUF2) {
+        UF2.writeBytes(elfUF2, b.targetAddr, b.data)
+    }
+
+    let r = UF2.concatFiles([elfUF2, mkFile(".rbf", rbfBIN)])
+    let data = UF2.serializeFile(r)
+
+    resp.outfiles[pxtc.BINARY_UF2] = btoa(data)
+
+    let saveUF2Async = () => {
+        if (isCli || !pxt.commands.saveOnlyAsync) {
+            return Promise.resolve()
+        } else {
+            return pxt.commands.saveOnlyAsync(resp)
+        }
+    }
+
+    if (noHID) return saveUF2Async()
+
+    return initAsync()
+        .then(w_ => {
+            w = w_
+            if (w.isStreaming)
+                pxt.U.userError("please stop the program first")
+            return w.stopAsync()
+        })
+        .then(() => w.rmAsync(elfPath))
+        .then(() => w.flashAsync(elfPath, UF2.readBytes(origElfUF2, 0, origElfUF2.length * 256)))
+        .then(() => w.flashAsync(rbfPath, rbfBIN))
+        .then(() => w.runAsync(rbfPath))
+        .then(() => {
+            if (isCli)
+                return w.disconnectAsync()
+            else
+                return Promise.resolve()
+            //return Promise.delay(1000).then(() => w.dmesgAsync())
+        }).catch(e => {
+            // if we failed to initalize, retry
+            if (noHID)
+                return saveUF2Async()
+            else
+                return Promise.reject(e)
+        })
+}

editor/extension.ts

@@ -1,142 +1,23 @@
 /// <reference path="../node_modules/pxt-core/built/pxteditor.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
 
-// When require()d from node, bind the global pxt namespace
+import { deployCoreAsync, initAsync } from "./deploy";
-namespace pxt {
+import { FieldPorts } from "./field_ports";
-    export const dummyExport = 1;
-}
-eval("if (typeof process === 'object' && process + '' === '[object process]') pxt = global.pxt")
 
-namespace pxt.editor {
+pxt.editor.initExtensionsAsync = function(opts: pxt.editor.ExtensionOptions): Promise<pxt.editor.ExtensionResult> {
-    import UF2 = pxtc.UF2;
+    pxt.debug('loading pxt-ev3 target extensions...')
-
+    updateBlocklyShape();
-    export let ev3: Ev3Wrapper
+    const res: pxt.editor.ExtensionResult = {
-
+        fieldEditors: [{
-    export function debug() {
+            selector: "ports",
-        return initAsync()
+            editor: FieldPorts
-            .then(w => w.downloadFileAsync("/tmp/dmesg.txt", v => console.log(pxt.Util.uint8ArrayToString(v))))
+        }],
-    }
+        deployCoreAsync
-
+    };
-    // this comes from aux/pxt.lms
+    initAsync().catch(e => {
-    const rbfTemplate = `
+        // probably no HID - we'll try this again upon deployment
-4c45474f580000006d000100000000001c000000000000000e000000821b038405018130813e8053
-74617274696e672e2e2e0084006080XX00448581644886488405018130813e80427965210084000a
-`
-
-    function hf2Async() {
-        return pxt.HF2.mkPacketIOAsync()
-            .then(h => {
-                let w = new Ev3Wrapper(h)
-                ev3 = w
-                return w.reconnectAsync(true)
-                    .then(() => w)
-            })
-    }
-
-    let noHID = false
-
-    let initPromise: Promise<Ev3Wrapper>
-    function initAsync() {
-        if (initPromise)
-            return initPromise
-
-        let canHID = false
-        if (U.isNodeJS) {
-            canHID = true
-        } else {
-            const forceHexDownload = /forceHexDownload/i.test(window.location.href);
-            if (Cloud.isLocalHost() && Cloud.localToken && !forceHexDownload)
-                canHID = true
-        }
-
-        if (noHID)
-            canHID = false
-
-        if (canHID) {
-            initPromise = hf2Async()
-                .catch(err => {
-                    initPromise = null
-                    noHID = true
-                    return Promise.reject(err)
-                })
-        } else {
-            noHID = true
-            initPromise = Promise.reject(new Error("no HID"))
-        }
-
-        return initPromise
-    }
-
-    export function deployCoreAsync(resp: pxtc.CompileResult, isCli = false) {
-        let w: Ev3Wrapper
-
-        let filename = resp.downloadFileBaseName || "pxt"
-        filename = filename.replace(/^lego-/, "")
-
-        let fspath = "../prjs/BrkProg_SAVE/"
-
-        let elfPath = fspath + filename + ".elf"
-        let rbfPath = fspath + filename + ".rbf"
-
-        let rbfHex = rbfTemplate
-            .replace(/\s+/g, "")
-            .replace("XX", U.toHex(U.stringToUint8Array(elfPath)))
-        let rbfBIN = U.fromHex(rbfHex)
-        HF2.write16(rbfBIN, 4, rbfBIN.length)
-
-        let origElfUF2 = UF2.parseFile(U.stringToUint8Array(atob(resp.outfiles[pxt.outputName()])))
-
-        let mkFile = (ext: string, data: Uint8Array = null) => {
-            let f = UF2.newBlockFile()
-            f.filename = "Projects/" + filename + ext
-            if (data)
-                UF2.writeBytes(f, 0, data)
-            return f
-        }
-
-        let elfUF2 = mkFile(".elf")
-        for (let b of origElfUF2) {
-            UF2.writeBytes(elfUF2, b.targetAddr, b.data)
-        }
-
-        let r = UF2.concatFiles([elfUF2, mkFile(".rbf", rbfBIN)])
-        let data = UF2.serializeFile(r)
-
-        resp.outfiles[pxtc.BINARY_UF2] = btoa(data)
-
-        let saveUF2Async = () => {
-            if (isCli || !pxt.commands.saveOnlyAsync) {
-                return Promise.resolve()
-            } else {
-                return pxt.commands.saveOnlyAsync(resp)
-            }
-        }
-
-        if (noHID) return saveUF2Async()
-
-        return initAsync()
-            .then(w_ => {
-                w = w_
-                if (w.isStreaming)
-                    U.userError("please stop the program first")
-                return w.stopAsync()
-            })
-            .then(() => w.rmAsync(elfPath))
-            .then(() => w.flashAsync(elfPath, UF2.readBytes(origElfUF2, 0, origElfUF2.length * 256)))
-            .then(() => w.flashAsync(rbfPath, rbfBIN))
-            .then(() => w.runAsync(rbfPath))
-            .then(() => {
-                if (isCli)
-                    return w.disconnectAsync()
-                else
-                    return Promise.resolve()
-                //return Promise.delay(1000).then(() => w.dmesgAsync())
-            }).catch(e => {
-                // if we failed to initalize, retry
-                if (noHID)
-                    return saveUF2Async()
-                else
-                    return Promise.reject(e)
     })
+    return Promise.resolve<pxt.editor.ExtensionResult>(res);
 }
 
 /**
@@ -228,15 +109,8 @@ namespace pxt.editor {
 
 }
 
-    initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): Promise<pxt.editor.ExtensionResult> {
+// When require()d from node, bind the global pxt namespace
-        pxt.debug('loading pxt-ev3 target extensions...')
+// namespace pxt {
-        updateBlocklyShape();
+//     export const dummyExport = 1;
-        const res: pxt.editor.ExtensionResult = {
+// }
-            deployCoreAsync,
+// eval("if (typeof process === 'object' && process + '' === '[object process]') pxt = global.pxt")
-        };
-        initAsync().catch(e => {
-            // probably no HID - we'll try this again upon deployment
-        })
-        return Promise.resolve<pxt.editor.ExtensionResult>(res);
-    }
-}

editor/field_ports.ts

@@ -0,0 +1,147 @@
+/// <reference path="../node_modules/pxt-core/localtypings/blockly.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
+
+export interface FieldPortsOptions extends Blockly.FieldCustomDropdownOptions {
+    columns?: string;
+    width?: string;
+}
+
+export class FieldPorts extends Blockly.FieldDropdown implements Blockly.FieldCustom {
+    public isFieldCustom_ = true;
+
+    // Width in pixels
+    private width_: number;
+
+    // Columns in grid
+    private columns_: number;
+
+    private savedPrimary_: string;
+
+    constructor(text: string, options: FieldPortsOptions, validator?: Function) {
+        super(options.data);
+
+        this.columns_ = parseInt(options.columns) || 4;
+        this.width_ = parseInt(options.width) || 300;
+    }
+
+    /**
+     * Create a dropdown menu under the text.
+     * @private
+     */
+    public showEditor_() {
+        // If there is an existing drop-down we own, this is a request to hide the drop-down.
+        if (Blockly.DropDownDiv.hideIfOwner(this)) {
+            return;
+        }
+        // If there is an existing drop-down someone else owns, hide it immediately and clear it.
+        Blockly.DropDownDiv.hideWithoutAnimation();
+        Blockly.DropDownDiv.clearContent();
+        // Populate the drop-down with the icons for this field.
+        let dropdownDiv = Blockly.DropDownDiv.getContentDiv();
+        let contentDiv = document.createElement('div');
+        // Accessibility properties
+        contentDiv.setAttribute('role', 'menu');
+        contentDiv.setAttribute('aria-haspopup', 'true');
+        const options = this.getOptions();
+        for (let i = 0, option: any; option = options[i]; i++) {
+            let content = (options[i] as any)[0]; // Human-readable text or image.
+            const value = (options[i] as any)[1]; // Language-neutral value.
+            // Icons with the type property placeholder take up space but don't have any functionality
+            // Use for special-case layouts
+            if (content.type == 'placeholder') {
+                let placeholder = document.createElement('span');
+                placeholder.setAttribute('class', 'blocklyDropDownPlaceholder');
+                placeholder.style.width = content.width + 'px';
+                placeholder.style.height = content.height + 'px';
+                contentDiv.appendChild(placeholder);
+                continue;
+            }
+            let button = document.createElement('button');
+            button.setAttribute('id', ':' + i); // For aria-activedescendant
+            button.setAttribute('role', 'menuitem');
+            button.setAttribute('class', 'blocklyDropDownButton');
+            button.title = content.alt;
+            if (this.columns_) {
+                button.style.width = ((this.width_ / this.columns_) - 8) + 'px';
+                button.style.height = ((this.width_ / this.columns_) - 8) + 'px';
+            } else {
+                button.style.width = content.width + 'px';
+                button.style.height = content.height + 'px';
+            }
+            let backgroundColor = this.sourceBlock_.getColour();
+            if (value == this.getValue()) {
+                // This icon is selected, show it in a different colour
+                backgroundColor = this.sourceBlock_.getColourTertiary();
+                button.setAttribute('aria-selected', 'true');
+            }
+            button.style.backgroundColor = backgroundColor;
+            button.style.borderColor = this.sourceBlock_.getColourTertiary();
+            Blockly.bindEvent_(button, 'click', this, this.buttonClick_);
+            Blockly.bindEvent_(button, 'mouseup', this, this.buttonClick_);
+            // These are applied manually instead of using the :hover pseudoclass
+            // because Android has a bad long press "helper" menu and green highlight
+            // that we must prevent with ontouchstart preventDefault
+            Blockly.bindEvent_(button, 'mousedown', button, function (e) {
+                this.setAttribute('class', 'blocklyDropDownButton blocklyDropDownButtonHover');
+                e.preventDefault();
+            });
+            Blockly.bindEvent_(button, 'mouseover', button, function () {
+                this.setAttribute('class', 'blocklyDropDownButton blocklyDropDownButtonHover');
+                contentDiv.setAttribute('aria-activedescendant', this.id);
+            });
+            Blockly.bindEvent_(button, 'mouseout', button, function () {
+                this.setAttribute('class', 'blocklyDropDownButton');
+                contentDiv.removeAttribute('aria-activedescendant');
+            });
+            let buttonImg = document.createElement('img');
+            buttonImg.src = content.src;
+            //buttonImg.alt = icon.alt;
+            // Upon click/touch, we will be able to get the clicked element as e.target
+            // Store a data attribute on all possible click targets so we can match it to the icon.
+            button.setAttribute('data-value', value);
+            buttonImg.setAttribute('data-value', value);
+            button.appendChild(buttonImg);
+            contentDiv.appendChild(button);
+        }
+        contentDiv.style.width = this.width_ + 'px';
+        dropdownDiv.appendChild(contentDiv);
+
+        Blockly.DropDownDiv.setColour(this.sourceBlock_.getColour(), this.sourceBlock_.getColourTertiary());
+
+        // Calculate positioning based on the field position.
+        var scale = this.sourceBlock_.workspace.scale;
+        var bBox = { width: this.size_.width, height: this.size_.height };
+        bBox.width *= scale;
+        bBox.height *= scale;
+        var position = this.fieldGroup_.getBoundingClientRect();
+        var primaryX = position.left + bBox.width / 2;
+        var primaryY = position.top + bBox.height;
+        var secondaryX = primaryX;
+        var secondaryY = position.top;
+        // Set bounds to workspace; show the drop-down.
+        (Blockly.DropDownDiv as any).setBoundsElement(this.sourceBlock_.workspace.getParentSvg().parentNode);
+        (Blockly.DropDownDiv as any).show(this, primaryX, primaryY, secondaryX, secondaryY,
+            this.onHide_.bind(this));
+    }
+
+    /**
+     * Callback for when a button is clicked inside the drop-down.
+     * Should be bound to the FieldIconMenu.
+     * @param {Event} e DOM event for the click/touch
+     * @private
+     */
+    private buttonClick_ = function (e: any) {
+        let value = e.target.getAttribute('data-value');
+        this.setValue(value);
+        Blockly.DropDownDiv.hide();
+    };
+
+    /**
+     * Callback for when the drop-down is hidden.
+     */
+    private onHide_ = function () {
+        Blockly.DropDownDiv.content_.removeAttribute('role');
+        Blockly.DropDownDiv.content_.removeAttribute('aria-haspopup');
+        Blockly.DropDownDiv.content_.removeAttribute('aria-activedescendant');
+    };
+}

editor/tsconfig.json

@@ -1,12 +1,14 @@
 {
     "compilerOptions": {
         "target": "es5",
-        "noImplicitAny": true,
+        "noImplicitAny": false,
         "noImplicitReturns": true,
-        "declaration": true,
+        "module": "commonjs",
-        "out": "../built/editor.js",
+        "outDir": "../built/editor",
         "rootDir": ".",
         "newLine": "LF",
-        "sourceMap": false
+        "sourceMap": false,
+        "allowSyntheticDefaultImports": true,
+        "declaration": true
     }
 }

libs/color-sensor/color.ts

@@ -111,6 +111,7 @@ namespace sensors {
         //% blockId=colorOnColorDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=100 blockGap=8
         //% group="Color Sensor"
         onColorDetected(color: ColorSensorColor, handler: () => void) {
@@ -130,6 +131,7 @@ namespace sensors {
         //% blockId=colorPauseForColorDetected
         //% parts="colorsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=99 blockGap=8
         //% group="Color Sensor"
         pauseForColor(color: ColorSensorColor) {
@@ -149,6 +151,7 @@ namespace sensors {
         //% blockId=colorGetColor
         //% parts="colorsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=99
         //% group="Color Sensor"
         color(): ColorSensorColor {
@@ -166,6 +169,7 @@ namespace sensors {
         //% blockId=colorOnLightChanged
         //% parts="colorsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=89 blockGap=8
         //% group="Color Sensor"
         onLightChanged(mode: LightIntensityMode, condition: LightCondition, handler: () => void) {
@@ -182,6 +186,7 @@ namespace sensors {
         //% blockId=colorPauseForLight
         //% parts="colorsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=88 blockGap=8
         //% group="Color Sensor"
         pauseForLight(mode: LightIntensityMode, condition: LightCondition) {
@@ -199,6 +204,7 @@ namespace sensors {
         //% blockId=colorLight
         //% parts="colorsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=87
         //% group="Color Sensor"
         light(mode: LightIntensityMode) {

libs/gyro-sensor/gyro.ts

@@ -28,6 +28,7 @@ namespace sensors {
         //% blockId=gyroGetAngle
         //% parts="gyroscope"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=65 blockGap=8
         //% group="Gyro Sensor"
         angle(): number {
@@ -44,6 +45,7 @@ namespace sensors {
         //% blockId=gyroGetRate
         //% parts="gyroscope"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=65 blockGap=8        
         //% group="Gyro Sensor"
         rate(): number {

libs/touch-sensor/touch.ts

@@ -45,6 +45,7 @@ namespace sensors {
         //% blockId=touchEvent block="on %sensor|%event"
         //% parts="touch"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=99 blockGap=8
         //% group="Touch Sensor"
         onEvent(ev: TouchSensorEvent, body: () => void) {
@@ -60,6 +61,7 @@ namespace sensors {
         //% blockId=touchWaitUntil block="pause until %sensor|%event"
         //% parts="touch"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=98 blockGap=8
         //% group="Touch Sensor"
         pauseUntil(ev: TouchSensorEvent) {
@@ -75,6 +77,7 @@ namespace sensors {
         //% blockId=touchIsPressed
         //% parts="touch"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=81
         //% group="Touch Sensor"
         isPressed() {
@@ -90,6 +93,7 @@ namespace sensors {
         //% blockId=touchWasPressed
         //% parts="touch"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=81 blockGap=8
         //% group="Touch Sensor"
         wasPressed() {

libs/ultrasonic-sensor/ultrasonic.ts

@@ -46,6 +46,7 @@ namespace sensors {
         //% block="on %sensor|%event"
         //% parts="ultrasonicsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=100 blockGap=8
         //% group="Ultrasonic Sensor"
         onEvent(event: UltrasonicSensorEvent, handler: () => void) {
@@ -60,6 +61,7 @@ namespace sensors {
         //% blockId=ultrasonicWait
         //% parts="ultrasonicsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=99 blockGap=8
         //% group="Ultrasonic Sensor"        
         pauseUntil(event: UltrasonicSensorEvent) {
@@ -75,6 +77,7 @@ namespace sensors {
         //% blockId=sonarGetDistance
         //% parts="ultrasonicsensor"
         //% blockNamespace=sensors
+        //% sensor.fieldEditor="ports"
         //% weight=65
         //% group="Ultrasonic Sensor"     
         distance(): number {