solved GUI 2d shapes

[DylanD]

Just now, Wingnut said:

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.

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.

No no no I didn't mean I don't want to use value I just didn't understand it.  I'm working on updating it to have it now though.  

So value is what makes it update to new values?

[Wingnut]

Yeah.  Makes sense, eh?  Change the control.value, and the bar graph moves to a new setting, right?

And console.log(control.value) returns its current value.  Much like HTML form widgets and input boxes.

[Wingnut]

12 minutes ago, DylanD said:

No no no I didn't mean I don't want to use value I just didn't understand it.

I was just making fun of your common use of "let me blah blah blah".  There is another 'good acquaintance' forum user name @Pryme8 who uses the "let me" thing pretty often, too.  And I have some people around me in real life... that often say it.  I have made a habit of making fun of it... but I shouldn't do that.   

I'm really a free wheeling kind of guy.  I "let" folks do all sorts of stuff, and rarely disallow.  heh. 

I'm just a goofball, DD!    Too much comedy TV and movies, I think.  I'm a HUGE Leslie Nielsen fan.

[Pryme8]

Let me tell you what...

^_^

[DylanD]

1 minute ago, Wingnut said:

I was just making fun of your common use of "let me blah blah blah".  There is another 'good acquaintance' forum user name @Pryme8 who uses the "let me" thing pretty often, too.  And I have some people around me in real life... that often say it.  I have made a habit of making fun of it... but I shouldn't do that.   

I'm really a free wheeling kind of guy.  I "let" folks do all sorts of stuff, and rarely disallow.  heh.  I'm just a goofball, DD! 

ohhh hahaha, I guess its good to goof around here though keeps the mood chill.  I enjoy the different vernaculars I get to hear, as long as they are clear, which sometimes they are not.

I haven't had any lucky with the setValue stuff not sure if I'm doing it right.  Don't I just need to make another set function that sets value?  like this code:

 

    set setValue(value: any){
        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);
    }

Heres the full script so that you can better understand what I have done and not done.

 

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;
    public onValueChangedObservable:BABYLON.Observable<string|number>;
    private value:string|number;
    constructor(){

        super("buttonRing");
        this.onPointerDownObservable = new BABYLON.Observable();
        this.isPointerBlocker = true;
        this.onValueChangedObservable = new BABYLON.Observable();
        this.value = null;
        return this;
        
    }
    set setValue(value: any){
        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);
    }


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

    


  }

Any idea where I am going wrong?

[Wingnut]

Hiya P8!  Hiya BrianZ. 

The "let me" thing is related to "teaming"... and often to real-time team-ups.

It's complicated... Freudian stuff... belongingness.  Somewhat related to a phenomena called "Treehouse Teaming"... where folks climb aboard good causes, for free, become great team... no pay, no bosses, formed out of common cause, riding spirit and enthusiasm, usually provided by a hoopla-filled lunatic spearheader.    Often these crazy-with-enthusiasm spearheaders have marching bands behind them, playing John Philip Sousa songs.  heh.  Ya can't help-but join the parade.    That kind of spirited teaming has built MANY-a over-gaudy 3-story, working-bathroom, 12-room tree house... for the neighborhood kids to share.

Dylan... go put more console.logs in that #88 playground... watch how ITS observers and setValues work... watch the observers do their stuff... try to get yours to do the same.  You're doing fine on the progress-per-time-per-effort gauge... you are COOKIN' up a STEEP learning curve... chowin' some road surface. 

[brianzinn]

I think what WingNut is saying is that if you are calling on your instance "buttonRing.value = " (which is the property setter) in your render loop that it will mark the control as dirty and force a redraw.  If you copy the javascript that is generated in your project into a PG then we can definitely be more helpful!  Might require a tweak to what class is being extended, as the original code you started with.

[Wingnut]

Oh, yeah, you actually corrected me, BZ, thank you!  I talked-of a renderLoop random value as a tester of the bar-graph position/setting.  But yeah, that will cause a redraw every frame.

Phew, good catch, BZ!  Probably should change value on a setInterval tester... but... we might need an animateToNewValue. 

[DylanD]

1 hour ago, brianzinn said:

I think what WingNut is saying is that if you are calling on your instance "buttonRing.value = " (which is the property setter) in your render loop that it will mark the control as dirty and force a redraw.  If you copy the javascript that is generated in your project into a PG then we can definitely be more helpful!  Might require a tweak to what class is being extended, as the original code you started with.

Oh thats a really good idea, I dont know why I didn't think to just put the JS up in a playground, duh such simple thing I missed yet so valuable.  

Here is the javascript in playground... it doesn't work ?

 

https://www.babylonjs-playground.com/#SCJ6SZ#0

 

1 hour ago, Wingnut said:

Oh, yeah, you actually corrected me, BZ, thank you!  I talked-of a renderLoop random value as a tester of the bar-graph position/setting.  But yeah, that will cause a redraw every frame.

Phew, good catch, BZ!  Probably should change value on a setInterval... but... we might need an animateToNewValue. 

I had originally setup a setInterval

 

 

 

any ideas as to what I'm doing wrong now...?

[DylanD]

36 minutes ago, Wingnut said:

Hiya P8!  Hiya BrianZ. 

The "let me" thing is related to "teaming"... and often to real-time team-ups.

It's complicated... Freudian stuff... belongingness.  Somewhat related to a phenomena called "Treehouse Teaming"... where folks climb aboard good causes, for free, become great team... no pay, no bosses, formed out of common cause, riding spirit and enthusiasm, usually provided by a hoopla-filled lunatic spearheader.    Often these crazy-with-enthusiasm spearheaders have marching bands behind them, playing John Philip Sousa songs.  heh.  Ya can't help-but join the parade.    That kind of spirited teaming has built MANY-a over-gaudy 3-story, working-bathroom, 12-room tree house... for the neighborhood kids to share.

Dylan... go put more console.logs in that #88 playground... watch how ITS observers and setValues work... watch the observers do their stuff... try to get yours to do the same.  You're doing fine on the progress-per-time-per-effort gauge... you are COOKIN' up a STEEP learning curve... chowin' some road surface. 

hmmmmm so what I'm hearing is we are on a team?  

whats the team name?

[Pryme8]

Say "Car Ramrod"

[DylanD]

54 minutes ago, DylanD said:

Oh thats a really good idea, I dont know why I didn't think to just put the JS up in a playground, duh such simple thing I missed yet so valuable.  

Here is the javascript in playground... it doesn't work ?

 

https://www.babylonjs-playground.com/#SCJ6SZ#0

 

I had originally setup a setInterval

 

 

 

any ideas as to what I'm doing wrong now...?

just noticed in the reply I said it did work and then didn't even put the correct playground, here is the corrected message.

[DylanD]

I think it keeps re drawing because it is in the render scene, in the render loop.  Idk.

yet it still won't update.

[Pryme8]

I get System is not a function in that PG

[DylanD]

3 minutes ago, Pryme8 said:

I get System is not a function in that PG

me too but it was the generated javascript code though, and I cannot seem to find a way around it.

[brianzinn]

Works after deleting a bit of unneeded code, must be something else in your calling code in your application.  I think you need to update your code to have arcEnd change the amount of red.
https://www.babylonjs-playground.com/#SCJ6SZ#3

[DylanD]

10 hours ago, brianzinn said:

Works after deleting a bit of unneeded code, must be something else in your calling code in your application.  I think you need to update your code to have arcEnd change the amount of red.
https://www.babylonjs-playground.com/#SCJ6SZ#3

Hey so I tried updating width with a set interval and it was working correctly so must be something with the arc functions.  Il try making it change the red.

Thanks @brianzinn !

 

updates will comes!

[DylanD]

Hey @brianzinn I switched a lot of code around heres what it looks like in typescript now:

export class ButtonRing extends BABYLON.GUI.Control {
    // typescript code in here
    private GUI:any;
    public _arcEnd :number;

    public _arcStart:number;
    public _colorWheelCanvas:HTMLCanvasElement;
    public onValueChangedObservable:BABYLON.Observable<boolean>;
    private value:string|number;
    constructor(){

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


    public set arcStart(value: number) {
        this._arcStart = value;
        this._markAsDirty();
        return;
    }

    public set arcEnd(value:number) {
        
        this._arcEnd = value;
        this._markAsDirty();
        return;
        
    }


    _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;
        
        
    
// =================================================================
        // progress
        var marks = 720;
        var deltaAngle = 2 * Math.PI / marks;
        var upperAngleLimit = Math.PI*2;
        var lowerAngleLimit = 0;
        var startLate = 0.5;
        var endEarly = 0;

        context.lineWidth = 3;
        context.strokeStyle = "white";
        context.lineWidth = thickness;
        context.arc(radius, radius, radius - thickness/2,0, Math.PI*2, true);
        context.stroke();
        context.beginPath();
        context.arc(radius, radius, radius - thickness/2,0, this._arcEnd, true);
        context.strokeStyle = "red";
        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(this._arcEnd);

        }
        context.restore();
    }

    


  }

 

Now I just create two circle instead of the many "ticks".  It looks much better and Is easier to understand, however, I still haven't figured out how to make it update when I change arcStart or arcEnd, it only updates when I update width... (probably height and that too but not tested).

Here is the javascript in a playground:

https://www.babylonjs-playground.com/#SCJ6SZ#4

Not sure how you got yours to work in the playground but the codes there...

So any ideas on how to make it update when I set arcEnd?

 

[DylanD]

@brianzinn  hahah, for now to get it to update when I want I just add like 0.00001 to the width and then it updates for me.  Maybe il just put that in the function....

[brianzinn]

2 hours ago, DylanD said:

Not sure how you got yours to work in the playground but the codes there...

I deleted this part:
 

System.register([], function (exports_1, context_1) {
    "use strict";
    var ButtonRing;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {

left your class in the middle.  then deleted this part:
 

exports_1("ButtonRing", ButtonRing);
        }
    };
});

I would suspect that you need to change the width to force the draw to enter the if (processMeasure(...)):
https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/control.ts#L917

You will probably want to dig through the inherited methods a bit, if you want to work with the controls with more understanding. You could probably update the if statement with your own processMeasure method that calls the super method and also checks arcStart and arcEnd?  Changing those new properties should force a redraw!

[DylanD]

30 minutes ago, brianzinn said:

I deleted this part:
 

System.register([], function (exports_1, context_1) {
    "use strict";
    var ButtonRing;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {

left your class in the middle.  then deleted this part:
 

exports_1("ButtonRing", ButtonRing);
        }
    };
});

I would suspect that you need to change the width to force the draw to enter the if (processMeasure(...)):
https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/control.ts#L917

You will probably want to dig through the inherited methods a bit, if you want to work with the controls with more understanding. You could probably update the if statement with your own processMeasure method that calls the super method and also checks arcStart and arcEnd?  Changing those new properties should force a redraw!

Il look into the inherited methods stuff, however for now I just added these lines to my arcEnd and start function work perfectly... probably not the best hack but hey it works.

 

var hold = this.width;
this.width = 0;
this.width = hold;

Thanks for all of your help @brianzinn !

 

just a few tweeks and I will post finished code.

[DylanD]

@brianzinn  Heres the finished product in typescript:

 

export class ButtonRing extends BABYLON.GUI.Control {
    // typescript code in here
    private GUI:any;
    private _arcEnd :number;
    private _color1:string;
    private _color2:string;
    private _arcStart:number;
    private _colorWheelCanvas:HTMLCanvasElement;
    private onValueChangedObservable:BABYLON.Observable<boolean>;
    private value:string|number;
    constructor(){

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

    public set arcStart(value: number) {
        this._arcStart = value;
        var hold = this.width;
        this.width = 0;
        this.width = hold;
        this._markAsDirty();
        
    }

    public set arcEnd(value:number) {
        
        this._arcEnd = value;
        var hold = this.width;
        this.width = 0;
        this.width = hold;
        this._markAsDirty();
        return;
        
    }
    public set color1(value:string) {
        
        this._color1 = value;
        var hold = this.width;
        this.width = 0;
        this.width = hold;
        this._markAsDirty();
        return;
        
    }
    public set color2(value:string) {
        
        this._color2 = value;
        var hold = this.width;
        this.width = 0;
        this.width = hold;
        this._markAsDirty();
        return;
        
    }

    public get arcStart() {
        
        return this._arcStart;
    }

    public get arcEnd() {
        return this._arcEnd;
        
        
    }

    _createColorWheelCanvas = function (radius, thickness) {
        var canvas = document.createElement("canvas");
        canvas.width = radius * 2-2   ;
        canvas.height = radius*2-2 ;
        var context = canvas.getContext("2d");
        context.lineWidth = thickness;
    
        context.lineWidth = 3;
        context.strokeStyle = this._color2;
        //context.lineWidth = thickness;
        context.arc(radius, radius, radius - thickness/2,0, Math.PI*2, true);
        context.stroke();
        context.beginPath();
        context.arc(radius, radius, radius - thickness/2,this._arcStart+1.5*Math.PI,this._arcEnd+1.5*Math.PI, true);
        context.strokeStyle = this._color1;
        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;

        }
        context.restore();
    }

    
    

  }

They should add something like this, or this to Babylon(this one kinda on the light side since it doesn't do much)...

Thanks again everyone!

[Wingnut]

Hi girls. Throughout this thread... I have been saying ._isDirty in lots of places.   I really meant ._markAsDirty().  Sorry if I caused confusion.  I already edited most of them.

[DylanD]

On 6/23/2018 at 11:44 AM, Wingnut said:

Hi girls. Throughout this thread... I have been saying ._isDirty in lots of places.   I really meant ._markAsDirty().  Sorry if I caused confusion.  I already edited most of them.

yea I tried using ._markAsDirty() but it did seem to work out.  But its all over now.

[Dad72]

Is it planned to do a PR of this control. I am looking for a progress bar with Babylon.GUI. I see that there is the file typescript de fact but never propose in PR.

It's a useful Control.  Please, make a PR

Thank you