Jump to content

GUI 2d shapes


DylanD
 Share

Recommended Posts

@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?

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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();
   //...
}
Link to comment
Share on other sites

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! :) 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

    


  }

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...