solved GUI 2d shapes

DylanD · June 19, 2018

2 minutes ago, brianzinn said:
Yes, except import as a local file instead of module. ie:
import ProgressBar from './ProgressBar';

I think its workingggg!!

DylanD · June 19, 2018

@brianzinn

Alright I'm not really sure how to do this. But here we go. So I have a progress.ts file in my TS folder and then I have an a bunch of errors in typescript, and since I have them I can't compile, so here are the errors:

 ts/progress.ts(13,13): error TS2304: Cannot find name '__extends'.
[TSC] ts/progress.ts(20,62): error TS2339: Property 'Observable' does not exist on type '{}'.
[TSC] ts/progress.ts(204,22): error TS2339: Property 'GUI' does not exist on type '{}'.
[TSC] ts/progress.ts(204,38): error TS2339: Property 'GUI' does not exist on type '{}'.
[TSC] ts/progress.ts(205,16): error TS2539: Cannot assign to 'BABYLON' because it is not a variable.

any idea how to get around this?

brianzinn · June 19, 2018

Looks like you are missing imports in progress.ts for Babylon and GUI. ie: don't forget at the top:

import * as BABYLON from 'babylonjs';
import * as GUI from 'babylonjs-gui';

edit. see: https://doc.babylonjs.com/features/npm_support

DylanD · June 19, 2018

3 minutes ago, brianzinn said:
Looks like you are missing imports in progress.ts for Babylon and GUI. ie: don't forget at the top:
import * as BABYLON from 'babylonjs';
import * as GUI from 'babylonjs-gui';

Hey I tried that, didn't seem to change anything... I believe I have that auto imported to all my TypeScript scripts rn...

anyway still get these error so idk what to do again.

Errors I still get:


[TSC] ts/progressBar.ts(16,13): error TS2304: Cannot find name '__extends'.
[TSC] ts/progressBar.ts(23,62): error TS2339: Property 'Observable' does not exist on type '{}'.
[TSC] ts/progressBar.ts(207,22): error TS2339: Property 'GUI' does not exist on type '{}'.
[TSC] ts/progressBar.ts(207,38): error TS2339: Property 'GUI' does not exist on type '{}'.
[TSC] ts/progressBar.ts(208,16): error TS2539: Cannot assign to 'BABYLON' because it is not a variable.

Any ideas?

brianzinn · June 19, 2018

no ideas - how about posting your first 23 lines?

DylanD · June 19, 2018

import * as BABYLON from 'babylonjs';
import * as GUI from 'babylonjs-gui';



var xspeed = 0;
var zspeed = 0;
var slew = 0;



(function (BABYLON) {
    var GUI;
    (function (GUI) {
        var ButtonRing = (function (_super) {
            __extends(ButtonRing, _super);
            function ButtonRing(name) {
                var _this = _super.call(this, name) || this;
                console.log('in-pg ButtonRing code activated');
                _this.name = name;
                _this._value = null;
                // _this._tmpColor = new BABYLON.Color3();
                _this.onValueChangedObservable = new BABYLON.Observable();
                // Events
                _this._pointerIsDown = false;
                // wingy value mod to centerize circle. lame, temporary.
                _this.value = null;  // force
                _this.size = "200px";
                _this.isPointerBlocker = true;
                return _this;
            }
            Object.defineProperty(ButtonRing.prototype, "value", {
                get: function () {
                    return this._value;
                },
                set: function (value) {
                    if (this._value === value) {  // might be mod problem
                    // if (this._value.x == value.x && this._value.y == value.y) {
                        return;
                    }
                    this._value = value;
                    this._markAsDirty();
                    this.onValueChangedObservable.notifyObservers(this._value);
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(ButtonRing.prototype, "width", {
                set: function (value) {
                    if (this._width.toString(this._host) === value) {
                        return;
                    }
                    if (this._width.fromString(value)) {
                        this._height.fromString(value);
                        this._markAsDirty();
                    }
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(ButtonRing.prototype, "height", {
                set: function (value) {
                    if (this._height.toString(this._host) === value) {
                        return;
                    }
                    if (this._height.fromString(value)) {
                        this._width.fromString(value);
                        this._markAsDirty();
                    }
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(ButtonRing.prototype, "arcEnd", {
                set: function (value) {
                    if (this._arcEnd.toString(this._host) === value) {
                        return;
                    }
                    if (this._arcEnd.fromString(value)) {
                        this._markAsDirty();
                    }
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(ButtonRing.prototype, "arcStart", {
                set: function (value) {
                    if (this._arcStart.toString(this._host) === value) {
                        return;
                    }
                    if (this._arcStart.fromString(value)) {
                        this._markAsDirty();
                    }
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(ButtonRing.prototype, "size", {
                get: function () {
                    return this.width;
                },
                set: function (value) {
                    this.width = value;
                },
                enumerable: true,
                configurable: true
            });
            ButtonRing.prototype._getTypeName = function () {
                return "ButtonRing";
            };
            ButtonRing.prototype._updateSquareProps = function () {
                var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
                var wheelThickness = radius * .2;
                var innerDiameter = (radius - wheelThickness) * 2;
                var squareSize = innerDiameter / (Math.sqrt(2));
                var offset = radius - squareSize * .5;
                this._squareLeft = this._currentMeasure.left + offset;
                this._squareTop = this._currentMeasure.top + offset;
                this._squareSize = squareSize;
            };
            ButtonRing.prototype._drawCircle = function (centerX, centerY, radius, context) {
                context.beginPath();
                context.arc(centerX, centerY, radius + 1, 0, 2 * Math.PI, false);
                context.lineWidth = 3;
                context.strokeStyle = '#333333';
                context.stroke();
                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.lineWidth = 3;
                context.strokeStyle = '#ffffff';
                context.stroke();
            };
            ButtonRing.prototype._createColorWheelCanvas = function (radius, thickness) {
                var canvas = document.createElement("canvas");
                canvas.width = radius * 2   ;
                canvas.height = radius * 2;
                var context = canvas.getContext("2d");
                context.lineWidth = thickness;
                context.arc(radius, radius, radius - thickness/2, 0, 2 * Math.PI, true);
                context.strokeStyle = "grey";
                context.stroke();
            
// =================================================================
                // progress
                var marks = 720;
                var deltaAngle = 2 * Math.PI / marks;
                var upperAngleLimit = this._arcEnd+Math.PI/2;
                var lowerAngleLimit = this._arcStart+Math.PI/2;
                var startLate = 0;
                var endEarly = 0;

                context.lineWidth = 4;
                context.strokeStyle = "lime";
                var innerRadius = (radius - thickness) + startLate;
                var outerRadius = radius - endEarly;
                for(var angle = 0; angle <= 2 * Math.PI; angle += deltaAngle) {
                    // console.log("angle:", angle);
                    if (angle >= lowerAngleLimit && angle <= upperAngleLimit) {
                        context.beginPath();
                        context.moveTo(radius + innerRadius * Math.cos(angle), radius + innerRadius * Math.sin(angle));
                        context.lineTo(radius + outerRadius * Math.cos(angle), radius + outerRadius * Math.sin(angle));
                        context.stroke();
                    }
                }

// =================================================================

                return canvas;
            };

            ButtonRing.prototype._draw = function (parentMeasure, context) {
                // console.log('draw');
                context.save();
                this._applyStates(context);
                if (this._processMeasures(parentMeasure, context)) {
                    var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
                    var wheelThickness = 120;
                    var left = this._currentMeasure.left;
                    var top = this._currentMeasure.top;

                    if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
                        this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
                    }
                    if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                        context.shadowColor = this.shadowColor;
                        context.shadowBlur = this.shadowBlur;
                        context.shadowOffsetX = this.shadowOffsetX;
                        context.shadowOffsetY = this.shadowOffsetY;
                        context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
                    }
                    context.drawImage(this._colorWheelCanvas, left, top);
                    if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                        context.shadowBlur = 0;
                        context.shadowOffsetX = 0;
                        context.shadowOffsetY = 0;
                    }
                    var centerX = radius + this._currentMeasure.left;
                    var centerY = radius + this._currentMeasure.top;

                }
                context.restore();
            };
  
            return ButtonRing;
        }(GUI.Control));
        GUI.ButtonRing = ButtonRing;
    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
})(BABYLON || (BABYLON = {}));

Heres all of the lines

I haven't use it in any other code because this won't compile and if it doesn't then I can't reference it anywhere.

Any ideas what it might be or how to fix it?

DylanD · June 19, 2018

@brianzinn

If I just make it a javascript file from the start it doesn't give compile time errors. But then it gives run time errors and I can't really reference the ButtonRing function at all.

brianzinn · June 19, 2018

I would say that you need to do more like:

export default class ButtonRing extends GUI.Control {
  // typescript code in here
}

You have pasted in generated code, which is normally OK as TypeScript is a superset of JavaScript. I don't have time right now to convert over what you wrote.

The properties get/set are generated as:

Object.defineProperty(ButtonRing.prototype, "arcStart", { ... })

Try one function at a time. the following from your code is just a regular class function. ie: _draw(parentMeasure, context) { ... }, but you can optionally add type.

ButtonRing.prototype._draw = function (parentMeasure, context) {
   // console.log('draw');
   context.save();
   //...
}

brianzinn · June 19, 2018

Here is some inspiration - you don't need the module declaration, but follow how the class is defined for syntax (get/set/constructor/private _, public/etc):
https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/colorpicker.ts

DylanD · June 19, 2018

5 minutes ago, brianzinn said:

Here is some inspiration - you don't need the module declaration, but follow how the class is defined for syntax (get/set/constructor/private _, public/etc):
https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/colorpicker.ts

Thanks this should help a lot. Hopefully it works. Thanks for the help! Il send the finished product too!

DylanD · June 19, 2018

Hey guys, no luck converting to typescript, I'm not that great at it. Would really appreciate some guidance.

This is what I have made so far,

module BABYLON.GUI{
export class ButtonRing extends GUI.Control {
    // typescript code in here
    private GUI:any;
    public arcStart:number=0;
    public arcEnd:number=Math.PI;
    constructor(){

        super("buttonRing");
        this.onPointerDownObservable = new BABYLON.Observable();
        this.isPointerBlocker = true;
        return this;
        
    }
   public set width(value:any){
        if(this._width === value){
            return;
        }
        this._width = value;
   }

    public set height(value:any){
        if(this._height === value){
            return;
        }
        this._height = value;
    }
    createColorWheelCanvas = function (radius, thickness) {
        var canvas = document.createElement("canvas");
        canvas.width = radius * 2   ;
        canvas.height = radius * 2;
        var context = canvas.getContext("2d");
        context.lineWidth = thickness;
        context.arc(radius, radius, radius - thickness/2, 0, 2 * Math.PI, true);
        context.strokeStyle = "grey";
        context.stroke();
    
// =================================================================
        // progress
        var marks = 720;
        var deltaAngle = 2 * Math.PI / marks;
        var upperAngleLimit = this._arcEnd+Math.PI/2;
        var lowerAngleLimit = this._arcStart+Math.PI/2;
        var startLate = 0;
        var endEarly = 0;

        context.lineWidth = 4;
        context.strokeStyle = "lime";
        var innerRadius = (radius - thickness) + startLate;
        var outerRadius = radius - endEarly;
        for(var angle = 0; angle <= 2 * Math.PI; angle += deltaAngle) {
            // console.log("angle:", angle);
            if (angle >= lowerAngleLimit && angle <= upperAngleLimit) {
                context.beginPath();
                context.moveTo(radius + innerRadius * Math.cos(angle), radius + innerRadius * Math.sin(angle));
                context.lineTo(radius + outerRadius * Math.cos(angle), radius + outerRadius * Math.sin(angle));
                context.stroke();
            }
        }

// =================================================================

        return canvas;
    };

    draw = function (parentMeasure, context) {
        // console.log('draw');
        context.save();
        this._applyStates(context);
        if (this._processMeasures(parentMeasure, context)) {
            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
            var wheelThickness = 120;
            var left = this._currentMeasure.left;
            var top = this._currentMeasure.top;

            if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
                this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
            }
            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                context.shadowColor = this.shadowColor;
                context.shadowBlur = this.shadowBlur;
                context.shadowOffsetX = this.shadowOffsetX;
                context.shadowOffsetY = this.shadowOffsetY;
                context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
            }
            context.drawImage(this._colorWheelCanvas, left, top);
            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                context.shadowBlur = 0;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = 0;
            }
            var centerX = radius + this._currentMeasure.left;
            var centerY = radius + this._currentMeasure.top;

        }
        context.restore();
    };

    


  }
}

However this has not worked yet I get a runtime error that BABYLON.GUI.ButtonRing() is not a constructor. Im not sure what it means since I thought I coded a constructor on one of the first few lines...

Here is the javascript I'm trying to convert to typescript:

(function (BABYLON) {
    var GUI;
    (function (GUI) {
        var ButtonRing = (function (_super) {
            __extends(ButtonRing, _super);
            function ButtonRing(name) {
                var _this = _super.call(this, name) || this;
                console.log('in-pg ButtonRing code activated');
                
                _this._value = null;
                // _this._tmpColor = new BABYLON.Color3();
                _this.onValueChangedObservable = new BABYLON.Observable();
                // Events
                _this._pointerIsDown = false;
                // wingy value mod to centerize circle. lame, temporary.
                _this.value = null;  // force
                _this.size = "200px";
                _this.isPointerBlocker = true;
                return _this;
            }
            
            Object.defineProperty(ButtonRing.prototype, "width", {
                set: function (value) {
                    if (this._width.toString(this._host) === value) {
                        return;
                    }
                    if (this._width.fromString(value)) {
                        this._height.fromString(value);
                        this._markAsDirty();
                    }
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(ButtonRing.prototype, "height", {
                set: function (value) {
                    if (this._height.toString(this._host) === value) {
                        return;
                    }
                    if (this._height.fromString(value)) {
                        this._width.fromString(value);
                        this._markAsDirty();
                    }
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(ButtonRing.prototype, "arcEnd", {
                set: function (value) {
                    if (this._arcEnd.toString(this._host) === value) {
                        return;
                    }
                    if (this._arcEnd.fromString(value)) {
                        this._markAsDirty();
                    }
                },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(ButtonRing.prototype, "arcStart", {
                set: function (value) {
                    if (this._arcStart.toString(this._host) === value) {
                        return;
                    }
                    if (this._arcStart.fromString(value)) {
                        this._markAsDirty();
                    }
                },
                enumerable: true,
                configurable: true
            });
            
            
          
            ButtonRing.prototype._createColorWheelCanvas = function (radius, thickness) {
                var canvas = document.createElement("canvas");
                canvas.width = radius * 2   ;
                canvas.height = radius * 2;
                var context = canvas.getContext("2d");
                context.lineWidth = thickness;
                context.arc(radius, radius, radius - thickness/2, 0, 2 * Math.PI, true);
                context.strokeStyle = "grey";
                context.stroke();
            
// =================================================================
                // progress
                var marks = 720;
                var deltaAngle = 2 * Math.PI / marks;
                var upperAngleLimit = this._arcEnd+Math.PI/2;
                var lowerAngleLimit = this._arcStart+Math.PI/2;
                var startLate = 0;
                var endEarly = 0;

                context.lineWidth = 4;
                context.strokeStyle = "lime";
                var innerRadius = (radius - thickness) + startLate;
                var outerRadius = radius - endEarly;
                for(var angle = 0; angle <= 2 * Math.PI; angle += deltaAngle) {
                    // console.log("angle:", angle);
                    if (angle >= lowerAngleLimit && angle <= upperAngleLimit) {
                        context.beginPath();
                        context.moveTo(radius + innerRadius * Math.cos(angle), radius + innerRadius * Math.sin(angle));
                        context.lineTo(radius + outerRadius * Math.cos(angle), radius + outerRadius * Math.sin(angle));
                        context.stroke();
                    }
                }

// =================================================================

                return canvas;
            };

            ButtonRing.prototype._draw = function (parentMeasure, context) {
                // console.log('draw');
                context.save();
                this._applyStates(context);
                if (this._processMeasures(parentMeasure, context)) {
                    var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
                    var wheelThickness = 120;
                    var left = this._currentMeasure.left;
                    var top = this._currentMeasure.top;

                    if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
                        this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
                    }
                    if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                        context.shadowColor = this.shadowColor;
                        context.shadowBlur = this.shadowBlur;
                        context.shadowOffsetX = this.shadowOffsetX;
                        context.shadowOffsetY = this.shadowOffsetY;
                        context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
                    }
                    context.drawImage(this._colorWheelCanvas, left, top);
                    if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                        context.shadowBlur = 0;
                        context.shadowOffsetX = 0;
                        context.shadowOffsetY = 0;
                    }
                    var centerX = radius + this._currentMeasure.left;
                    var centerY = radius + this._currentMeasure.top;

                }
                context.restore();
            };
  
            return ButtonRing;
        }(GUI.Control));
        GUI.ButtonRing = ButtonRing;
    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
})(BABYLON || (BABYLON = {}));

// ==========================================================

Any ideas on what I'm doing wrong?

Pinging @Deltakosh I was trying to go off of your work(has your name on it so I think its your ) here: https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/ellipse.ts

but I can't seem to get the hang of it any tips you could give me ?

Thanks

brianzinn · June 19, 2018

2 hours ago, DylanD said:

BABYLON.GUI.ButtonRing() is not a constructor

If you import ButtonRing just do new ButtonRing() - assuming you have something like:

import { ButtonRing } from './ButtonRing';

Remove the module declaration "module BABYLON.GUI". Note that you are not using "export default class", so you need the squiggly braces in your named import.

Looks close what you have there.

DylanD · June 20, 2018

14 hours ago, brianzinn said:
If you import ButtonRing just do new ButtonRing() - assuming you have something like:
import { ButtonRing } from './ButtonRing';
Remove the module declaration "module BABYLON.GUI". Note that you are not using "export default class", so you need the squiggly braces in your named import.

Looks close what you have there.

Hey thanks, taking out the module BABYLON.GUI then just importing with {} made the errors go away! Now I just gotta get it to actually draw to the screen...

here's what it looks like so far:

export class ButtonRing extends BABYLON.GUI.Control {
    // typescript code in here
    private GUI:any;
    public arcStart:number=0;
    public arcEnd:number=Math.PI;
    constructor(){

        super("buttonRing");
        this.onPointerDownObservable = new BABYLON.Observable();
        this.isPointerBlocker = true;
        return this;
        
    }
   public set width(value:any){
        if(this._width === value){
            return;
        }
        this._width = value;
   }

    public set height(value:any){
        if(this._height === value){
            return;
        }
        this._height = value;
    }
    createColorWheelCanvas = function (radius, thickness) {
        var canvas = document.createElement("canvas");
        canvas.width = radius * 2   ;
        canvas.height = radius * 2;
        var context = canvas.getContext("2d");
        context.lineWidth = thickness;
        context.arc(radius, radius, radius - thickness/2, 0, 2 * Math.PI, true);
        context.strokeStyle = "red";
        context.stroke();
    
// =================================================================
        // progress
        var marks = 720;
        var deltaAngle = 2 * Math.PI / marks;
        var upperAngleLimit = this._arcEnd+Math.PI/2;
        var lowerAngleLimit = this._arcStart+Math.PI/2;
        var startLate = 0;
        var endEarly = 0;

        context.lineWidth = 4;
        context.strokeStyle = "white";
        var innerRadius = (radius - thickness) + startLate;
        var outerRadius = radius - endEarly;
        for(var angle = 0; angle <= 2 * Math.PI; angle += deltaAngle) {
            // console.log("angle:", angle);
            if (angle >= lowerAngleLimit && angle <= upperAngleLimit) {
                context.beginPath();
                context.moveTo(radius + innerRadius * Math.cos(angle), radius + innerRadius * Math.sin(angle));
                context.lineTo(radius + outerRadius * Math.cos(angle), radius + outerRadius * Math.sin(angle));
                context.stroke();
            }
        }

// =================================================================

        return canvas;
    };

    draw = function (parentMeasure, context) {
        // console.log('draw');
        context.save();
        this._applyStates(context);
        if (this._processMeasures(parentMeasure, context)) {
            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
            var wheelThickness = 120;
            var left = this._currentMeasure.left;
            var top = this._currentMeasure.top;

            if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
                this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
            }
            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                context.shadowColor = this.shadowColor;
                context.shadowBlur = this.shadowBlur;
                context.shadowOffsetX = this.shadowOffsetX;
                context.shadowOffsetY = this.shadowOffsetY;
                context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
            }
            context.drawImage(this._colorWheelCanvas, left, top);
            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                context.shadowBlur = 0;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = 0;
            }
            var centerX = radius + this._currentMeasure.left;
            var centerY = radius + this._currentMeasure.top;

        }
        context.restore();
    };

    


  }

but again this is unfinished.

Current error this._width.getValue is not a function... so more work but I got it I think.

DylanD · June 20, 2018

So I am trying to build the draw function part of this but It does not recognize this._colorWheelCanvas, or more specifically that is a private variable in the colorPicker class, so I switched the class I was extending from Babylon.gui.control to Babylon.gui.colorpicker

But I still cannot access the this._colorWheelCanvas variable.

Not really sure how I can get around this without changing the colorpicker class.

Any ideas?

export class ButtonRing extends BABYLON.GUI.ColorPicker {
    // typescript code in here
    private GUI:any;
    public arcStart:number=0;
    public arcEnd:number=Math.PI;
    constructor(){

        super("buttonRing");
        this.onPointerDownObservable = new BABYLON.Observable();
        this.isPointerBlocker = true;
        return this;
        
    }


public set width(value: string | number ) {
    if (this._width.toString(this._host) === value) {
        return;
    }

    if (this._width.fromString(value)) {
        this._height.fromString(value);
        this._markAsDirty();
    }
}

public set height(value: string | number ) {
    if (this._height.toString(this._host) === value) {
        return;
    }

    if (this._height.fromString(value)) {
        this._width.fromString(value);
        this._markAsDirty();
    }
}
    createColorWheelCanvas = function (radius, thickness) {
        var canvas = document.createElement("canvas");
        canvas.width = radius * 2   ;
        canvas.height = radius * 2;
        var context = canvas.getContext("2d");
        context.lineWidth = thickness;
        context.arc(radius, radius, radius - thickness/2, 0, 2 * Math.PI, true);
        context.strokeStyle = "red";
        context.stroke();
    
// =================================================================
        // progress
        var marks = 720;
        var deltaAngle = 2 * Math.PI / marks;
        var upperAngleLimit = this.arcEnd+Math.PI/2;
        var lowerAngleLimit = this.arcStart+Math.PI/2;
        var startLate = 0;
        var endEarly = 0;

        context.lineWidth = 4;
        context.strokeStyle = "white";
        var innerRadius = (radius - thickness) + startLate;
        var outerRadius = radius - endEarly;
        for(var angle = 0; angle <= 2 * Math.PI; angle += deltaAngle) {
            // console.log("angle:", angle);
            if (angle >= lowerAngleLimit && angle <= upperAngleLimit) {
                context.beginPath();
                context.moveTo(radius + innerRadius * Math.cos(angle), radius + innerRadius * Math.sin(angle));
                context.lineTo(radius + outerRadius * Math.cos(angle), radius + outerRadius * Math.sin(angle));
                context.stroke();
            }
        }

// =================================================================

        return canvas;
    };

    public _draw(parentMeasure: any, context: CanvasRenderingContext2D): void {
        context.save();

        this._applyStates(context);
        if (this._processMeasures(parentMeasure, context)) {

            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height)*.5;
            var wheelThickness = radius*.2;
            var left = this._currentMeasure.left;
            var top = this._currentMeasure.top;

            if(!this._colorWheelCanvas || this._colorWheelCanvas.width != radius*2){
                super._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
            }
            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
                context.shadowBlur = 0;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = 0;
            }

        }
        context.restore();
    }

    


  }

Wingnut · June 20, 2018

ButtonRing extends ColorPicker? erf. I dunno anything about inheritance, but that sounds... strange. ColorPicker is not even close to being a base class, is it? Don't you want to extend Babylon.GUI.Control, and get your widget far-away from the colorpicker? Even the "ButtonRing" term should probably go, unless you are making one. If you are working on your circular bar-graph, it has no "button" to it.

You know all this already, likely. :)

Maybe it extends GUI ellipse? Not sure.

All in all, you're doing COOOOOOL work, DylanD! I'll shut up now, and let the smarter people talk. I'm watching closely, though. This is good good good learning-material, yum!

DylanD · June 20, 2018

1 minute ago, Wingnut said:

ButtonRing extends ColorPicker? erf. I dunno anything about inheritance, but that sounds... strange. ColorPicker is not even close to being a base class, is it? Don't you want to extend Babylon.GUI.Control, and get your widget far-away from the colorpicker?

Maybe it extends GUI ellipse?

All in all, you're doing COOOOOOL work, DylanD! I'll shut up now, and let the smarter people talk. I'm watching closely, though. This is good good good learning-material, yum!

yea I just figured that out actually, I should only be going off of BABYLON.GUI.Control I believe. I don't mind you talking, others input is really helpful.

Heres what I'm working with right now. I fixed those errors and it still doesn't draw, so not sure why yet...

export class ButtonRing extends BABYLON.GUI.Control {
    // typescript code in here
    private GUI:any;
    public arcStart:number=0;
    public arcEnd:number=Math.PI;
    public _colorWheelCanvas:HTMLCanvasElement;
    constructor(){

        super("buttonRing");
        this.onPointerDownObservable = new BABYLON.Observable();
        this.isPointerBlocker = true;
        
        return this;
        
    }


public set width(value: string | number ) {
    if (this._width.toString(this._host) === value) {
        return;
    }

    if (this._width.fromString(value)) {
        this._height.fromString(value);
        this._markAsDirty();
    }
}

public set height(value: string | number ) {
    if (this._height.toString(this._host) === value) {
        return;
    }

    if (this._height.fromString(value)) {
        this._width.fromString(value);
        this._markAsDirty();
    }
}
    _createColorWheelCanvas = function (radius, thickness) {
        var canvas = document.createElement("canvas");
        canvas.width = radius * 2   ;
        canvas.height = radius * 2;
        var context = canvas.getContext("2d");
        context.lineWidth = thickness;
        context.arc(radius, radius, radius - thickness/2, 0, 2 * Math.PI, true);
        context.strokeStyle = "red";
        context.stroke();
    
// =================================================================
        // progress
        var marks = 720;
        var deltaAngle = 2 * Math.PI / marks;
        var upperAngleLimit = this.arcEnd+Math.PI/2;
        var lowerAngleLimit = this.arcStart+Math.PI/2;
        var startLate = 0;
        var endEarly = 0;

        context.lineWidth = 4;
        context.strokeStyle = "white";
        var innerRadius = (radius - thickness) + startLate;
        var outerRadius = radius - endEarly;
        for(var angle = 0; angle <= 2 * Math.PI; angle += deltaAngle) {
            // console.log("angle:", angle);
            if (angle >= lowerAngleLimit && angle <= upperAngleLimit) {
                context.beginPath();
                context.moveTo(radius + innerRadius * Math.cos(angle), radius + innerRadius * Math.sin(angle));
                context.lineTo(radius + outerRadius * Math.cos(angle), radius + outerRadius * Math.sin(angle));
                context.stroke();
            }
        }

// =================================================================

        return canvas;
    };

    public _draw(parentMeasure: any, context: CanvasRenderingContext2D): void {
        context.save();

        this._applyStates(context);
        if (this._processMeasures(parentMeasure, context)) {

            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height)*.5;
            var wheelThickness = radius*.2;
            var left = this._currentMeasure.left;
            var top = this._currentMeasure.top;

            if(!this._colorWheelCanvas || this._colorWheelCanvas.width != radius*2){
                this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
            }

            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
                context.shadowBlur = 0;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = 0;
            }

        }
        context.restore();
    }

    


  }

Any ideas what it is not drawing/showing up?

Wingnut · June 20, 2018

Have you checked the obvious stuff? Canvas exists? Has width and height? Isn't accidentally z-indexed behind the rendercanvas?

You have a good context2d obj reffed? Tried to draw a simple line on the canvas? Canvas fill?

Got the context2d spec open in another window? https://www.w3.org/TR/2dcontext/#drawing-paths-to-the-canvas

Extra: Does your _this._value have an initial value? Maybe it should?

DylanD · June 20, 2018

4 minutes ago, Wingnut said:

Have you checked the obvious stuff? Canvas exists? Has width and height? Isn't accidentally z-indexed behind the rendercanvas?

You have a good context2d obj reffed? Tried to draw a simple line on the canvas? Canvas fill?

Got the context2d spec open in another window? https://www.w3.org/TR/2dcontext/#drawing-paths-to-the-canvas

Never thought to check that stuff I've never used them before ?. Il try some of these thanks. Il let you know how it goes.

Wingnut · June 20, 2018

I use the old-style debugging method... put console.log("thing:", whatever)... everywhere in the code. It lets me find the exact location of the problem... in the sequence of events. Narrowing it down.

DylanD · June 20, 2018

3 minutes ago, Wingnut said:

I use the old-style debugging method... put console.log("thing:", whatever)... everywhere in the code. It lets me find the exact location of the problem... in the sequence of events. Narrowing it down.

same, but I'm not really sure what does what exactly, also I didn't think that would help. It seems to be drawing every frame, at least I get a console.log() from the _draw function ever frame, probably its a z thing... more testing to do.

Wingnut · June 20, 2018

Well, that's not right (draw every frame).

https://www.babylonjs-playground.com/#91I2RE#88

According to line 136, this draws only on a button click.

Well, it actually appears to draw twice ... just after RUN.

That's why I asked about _value. Maybe _markAsDirty = true ... IS THE render command.

If no initial _value is set, maybe _markAsDirty is never set to true, so initial rendering doesn't happen.

Even for your bar graph... it should ONLY draw when _value changes... not all the time.

By default, that CSS z-index thing should be fine. I would look-for... something wiping the canvas clean... just after the first draw. It looks like nothing happened... but the circle actually was drawn for one frame, and hen wiped. *shrug*. The continuous-running _draw function might be an indicator of a problem in that area.

DylanD · June 20, 2018

3 minutes ago, Wingnut said:

Well, that's not right (draw every frame).

https://www.babylonjs-playground.com/#91I2RE#88

According to line 136, this draws only on a button click.

I GOT IT TO WORK IT IS DRAWING OH MY GOD!

hahahahaha when I was converting to typescript I uh forgot these key lines...

context.drawImage(this._colorWheelCanvas, left, top);
                    var centerX = radius + this._currentMeasure.left;
                    var centerY = radius + this._currentMeasure.top;

hahahahaha sometimes I forget how silly I can be...

It is still drawing every Fram on the one I made though which it probably should be. By the way I am not using the playground I made my own, here https://www.babylonjs-playground.com/#91I2RE#87

But even in the playground it not calling draw every frame so idk whats up with that. Maybe something somewhere when I instantiate it...

Here is the working piece of code in typescript(well draws, might not do everything yet) :

export class ButtonRing extends BABYLON.GUI.Control {
    // typescript code in here
    private GUI:any;
    public arcStart:number=0;
    public arcEnd:number=Math.PI;
    public _colorWheelCanvas:HTMLCanvasElement;
    constructor(){

        super("buttonRing");
        this.onPointerDownObservable = new BABYLON.Observable();
        this.isPointerBlocker = true;
        
        return this;
        
    }


public set width(value: string | number ) {
    if (this._width.toString(this._host) === value) {
        return;
    }

    if (this._width.fromString(value)) {
        this._height.fromString(value);
        this._markAsDirty();
    }
}

public set height(value: string | number ) {
    if (this._height.toString(this._host) === value) {
        return;
    }

    if (this._height.fromString(value)) {
        this._width.fromString(value);
        this._markAsDirty();
    }
}
    _createColorWheelCanvas = function (radius, thickness) {
        var canvas = document.createElement("canvas");
        canvas.width = radius * 2   ;
        canvas.height = radius * 2;
        var context = canvas.getContext("2d");
        context.lineWidth = thickness;
        context.arc(radius, radius, radius - thickness/2, 0, 2 * Math.PI, true);
        context.strokeStyle = "red";
        context.stroke();
    
// =================================================================
        // progress
        var marks = 720;
        var deltaAngle = 2 * Math.PI / marks;
        var upperAngleLimit = this.arcEnd+Math.PI/2;
        var lowerAngleLimit = this.arcStart+Math.PI/2;
        var startLate = 0;
        var endEarly = 0;

        context.lineWidth = 4;
        context.strokeStyle = "white";
        var innerRadius = (radius - thickness) + startLate;
        var outerRadius = radius - endEarly;
        for(var angle = 0; angle <= 2 * Math.PI; angle += deltaAngle) {
            // console.log("angle:", angle);
            if (angle >= lowerAngleLimit && angle <= upperAngleLimit) {
                context.beginPath();
                context.moveTo(radius + innerRadius * Math.cos(angle), radius + innerRadius * Math.sin(angle));
                context.lineTo(radius + outerRadius * Math.cos(angle), radius + outerRadius * Math.sin(angle));
                context.stroke();
            }
        }

// =================================================================

        return canvas;
    };

    public _draw(parentMeasure: any, context: CanvasRenderingContext2D): void {
        context.save();
       
        this._applyStates(context);
        if (this._processMeasures(parentMeasure, context)) {

            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height)*.5;
            var wheelThickness = radius*.2;
            var left = this._currentMeasure.left;
            var top = this._currentMeasure.top;

            if(!this._colorWheelCanvas || this._colorWheelCanvas.width != radius*2){
                this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
                
            }

            context.drawImage(this._colorWheelCanvas, left, top);
            var centerX = radius + this._currentMeasure.left;
            var centerY = radius + this._currentMeasure.top;
            console.log("spicey");

        }
        context.restore();
    }

    


  }

I will keep updating this page to show the new things I might add to it.

Thanks Everyone!!

Wait still gotta figure out the draw every Frame thing...

Wingnut · June 20, 2018

HEY, WELL DONE! CONGRATS!!!

Look at your setValue... it should not be automatically running every frame. Nor should _draw.

I think you have (wrongly) gotten into a mindset... that you must constantly update this control.

Try to leave that thought behind. Instead... in the renderLoop... continuously set control.value to some value + Math.random()... and you will see that the meter is very much "live" and instantly reactive... due to its onValueChangedObservable... which is continuously being polled by BJS core.

DylanD · June 20, 2018

2 minutes ago, Wingnut said:

HEY, WELL DONE! CONGRATS!!!

Look at you setValue... it should not be running every frame.

I think you have (wrongly) gotten into a mindset that you must constantly update this control.

Try to leave that thought behind. Instead... in the renderLoop... continuously set control.value to some value + Math.random()... and you will see that the meter is very much "live" and instantly reactive... due to its onValueChangedObservable... which is continuously being polled by BJS core.

hmmm setValue, never heard of him ... hahaha no uh I didn't understand what set value did so I omitted it... let me try that because it seems right?

Wingnut · June 20, 2018

I'll 'let you' do whatever you need/wish to do.

Yeah, the observables/observers/notification-of-listeners... that's very important to user-interactive (pure) controls. Works very closely with setValue funcs.

It's a system-wide "user just did something" broadcasting system... marshaled by BJS core... at lightning speeds.

APB - All Points Bulletin... BJS obrserver system is like the police radio network. Pretty fun and interesting as a side-study, when bored.

solved GUI 2d shapes

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Wingnut

Sebavan

Pryme8

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members