DylanD

GUI 2d shapes

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.  :D  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.  :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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...?

Share this post


Link to post
Share on other sites
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.  :D  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? :D 

whats the team name?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.