search

MeetmeLeave / ng-canvas-gauges

Angular2 component wrapper for the canvas-gauges library written by @Mikhus(https://github.com/Mikhus/canvas-gauges).
MIT License
38 stars 23 forks source link

Beginner help wanted please! #32

Closed godind closed 6 months ago

godind commented 4 years ago

Hi guys,

Sorry but I am new to this and trying to invest some time on an open source project, one small step at a time.

Can someone explain how to create an instance of LinearGauge using Typescript please? What I want to do here is use an instance of the LinearGauge class directly from code so that I can use thing like MyGauge.options.lenght = 100; to manipulate the object properties in real time: change colors, font, etc. I know you can use the html declarative approach, I have and it works, but it's messy code and I find myself recreating feature that I believe are part of the LinearGauge class; things like lifecycle management, gauge option functions, etc. See where I'm going?

Using HTML works fine What I mean by this is (sorry if I don't have all my terminology right!), I can see my gauge by adding the <linear-gauge> with appropriate properties to my template file. I can use [attr.XXX]="typescript variable" in the template file to update anything. I took me lots of time to figure this out (I am new to this so I have to read on Typescript, Angular and Material docs and google a lot) and it works fine. But I can't escape the fact that their is a better way to do this. When I look at the ng-canvas-gauge base class I see features I am not exploiting!

Help Using Typescript I added ng-canvas to my project and registered what's needed manually. I have created a separate component that imports LinearGauge and LinearGaugeOptions from ng-canvas-gauge.

In my template file I use <linear-gauge #linearGauge>, etc. What I cannot figure out is how to bind the template file gauge to a LinearGauge object. I tried all kinds a variations of: @ViewChild('linearGauge') public linearGauge: LinearGauge; but when I try to use this.linearGauge.options.tilte = "My Title"; it does not update the gauge. I can read from this.linearGauge object but can affect it for some reason. I also tried @ViewChild('linearGauge',{read: true}) linearGauge: LinearGauge; etc. but damn...no success.

Do I need to do an extends of LinearGauge? Do I need to add something in the constructor? Should I be creating the gauge in Typescript?

Ultimately I'd like to have a LinearGauge and LinearGaugeOptions objects and to drive everything.

Thank for you help.

alaska88 commented 4 years ago

I don't know if you have fixed it but... In your HTML, include a name to the gauge like : 

            <radial-gauge #elGauge minor-ticks="10" stroke-ticks="true" color-plate="#222" color-major-ticks='#f5f5f5' color-minor-ticks='#ddd' border-shadow-width="5" value-int="2" value-dec="2" width="150" height="400">
            </radial-gauge>

Then in your module , reference to the gauge like this ( Before constructor, butin the class): @ViewChild('elGauge', {static:false} ) miGauge;

And now, you can access to all the information and methods like this:

this.miGauge.gauge.options.value=this.ElSensor.value; 
 this.miGauge.gauge.update()

Object is not available in constructor. Only after ngAfterViewInit