Protractor field limits to 180 degrees, doesn't accept fractions

jfo8000 · November 19, 2020, 4:32am

I am trying to implement a turn block, so I hooked up the protractor…

It looks as if it limits to 180 degrees? I also can’t do decimals - any time someone types them in they get floored.

Is there any way I can use the blockly angle field? It is a bit closer to what I want - I need to turn a 3d shape by a specific amount.

Thanks!
Jfo

jfo8000 · November 19, 2020, 5:00am

You can repro it here on the playground
https://makecode.com/playground#field-editors-protractor

Load up the protractor example
Add a turn block
Try to type 22.5
Result: floors to 22

Same thing happens with range example (but about half the time). If I type a number, then hit enter it floors. Not all the time - might have something to do with what element has focus.

jfo8000 · December 17, 2020, 7:05pm

The TSConfig was

    {
    "compilerOptions": {
        "target": "es5",
        "skipLibCheck": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "declaration": false,
        "out": "../built/fieldeditors.js",
        "rootDir": ".",
        "newLine": "LF",
        "sourceMap": false
    }
    }

Will not work if your typescript isn’t 3.5.1
Needed skipLibCheck otherwise it was digging into jquery and validating that.

jfo8000 · December 17, 2020, 7:03pm

Just following up.
Yes you can replace the fieldeditors by writing an extension.

How to replace field editors.

Make a folder called fieldeditors
Copy the tsconfig from this folder to your folder
Make sure your pxtarget.json has “extendFieldEditors”: “true”
The pxt cli will look for “fieldeditors” folder and build it
Fight typescript compile errors till it loves you back.
- Upgrade your typescript to version 3, pxt-sample libs out of date.
- Add a skipLibCheck to avoid jquery type errors
- if you start with any of the ones from the base pxt, dont forget to update your path referencce to node_modules/pxt-core

/// <reference path="../node_modules/pxt-core/localtypings/blockly.d.ts" />
/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>

jfo8000 · December 18, 2020, 4:29am

As regards to the fraction problem, it seems that there is a fieldOption called precision for the range slider which allows it to accept decimals. This is not working perfectly and I’ve had to call setConstraints with undefined precision to get it to behave properly…

Fiona · March 26, 2021, 3:28pm

I am facing the same problem. And still finding a solution on google. Please anyone give me the correct answer.

jfo8000 · March 26, 2021, 9:47pm

Hi Fiona -
In the end I wound up extending my pxt and replacing the editor with my own copy
The source code is here

github.com

Buildbee/makecode/blob/master/fieldeditors/FieldProtractorEditor.ts

/// <reference path="../node_modules/pxt-core/localtypings/blockly.d.ts" />
/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>


namespace pxt.editor {

  
    export interface FieldProtractorOptions360 extends Blockly.FieldCustomOptions {
        min? : number,
        max? : number,
        precision?: number,
        step? : number,
    }

    export class FieldProtractor360 extends Blockly.FieldSlider implements Blockly.FieldCustom {
        public isFieldCustom_ = true;

        private params: any;

        private circleSVG: SVGElement;

This file has been truncated. show original

github.com

Buildbee/makecode/blob/master/fieldeditors/extension.ts

/// <reference path="../node_modules/pxt-core/built/pxteditor.d.ts" />

namespace pxt.editor {
    initFieldExtensionsAsync = function (opts: pxt.editor.FieldExtensionOptions): Promise<pxt.editor.FieldExtensionResult> {
        pxt.debug('loading buildbee target extensions...')
        const res: pxt.editor.FieldExtensionResult = {
            fieldEditors: [{
                selector: "protractor360",
                editor: FieldProtractor360
            }]
        };
        return Promise.resolve<pxt.editor.FieldExtensionResult>(res);
    }
}

github.com

Buildbee/makecode/blob/master/fieldeditors/tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "skipLibCheck": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "declaration": false,
        "out": "../built/fieldeditors.js",
        "rootDir": ".",
        "newLine": "LF",
        "sourceMap": false
    }
}

You can see how I hooked it up looking at turnAsync()

github.com

Buildbee/makecode/blob/master/sim/operators.ts

/// <reference path="../libs/core/enums.d.ts"/>
/// <reference path="./solids.ts"/>

/**
 * Move and rotate shapes
 */
namespace pxsim.operators {


    function _makeBlock(JSCadBlockStr: string, body: RefAction) {
        return new Promise<void>((resolve, reject) => {
            // push a new statement as the parent
            board().addBlock(JSCadBlockStr);

            // execute the child blocks
            pxsim.runtime.runFiberAsync(body).then((result) => {
                // return back to previous parent statement, or main
                board().popBlock();
                resolve(result)
            }).catch((error) => {

This file has been truncated. show original

And you can see it in action here

Grab out the turn block from operators.
JFo