jQuery UI Widgets Forums Gauges and Maps Gauges Gauge crunches memory

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Gauge crunches memory #107583

    GLAMBERT
    Participant

    under Angular 8 , I create a component with a template containing 4
    gauges in a ngfor loop. The gauge get information from the component
    through binding. The component received a feed through websocket from a
    server every 10 secondes (control process).

    All works fine the gauges are updated by the feed, but the memory usage is
    growing up to the crash of the chrome instance after 2 or 3 hours.
    I disable the update of the DOM to exclude the code for the feed
    management and the memory usage is quite stable. Without update of the
    DOM the memory is stable.

    I try to use the API gauge.height() and setOption() without the binding, the widget is
    updated internally (view in devtools but nothing change on the screen.

    I try the same process with one gauge (no ngfor) and that works fine.

    I perhaps did’nt understand something or did something wrong . what do
    you feel of this behavior ?

    `
    thanks for your Help.
    <table id=tab1 border=”0″>
    <tr id=trtab1>
    <ng-container *ngFor=”let Dba of Val ; let BaI = index”>
    <td id=td{{BaI}} >
    <table id=tab2{{BaI}} border=”0″>
    <th id=thtitle{{BaI}} style=”text-align: ‘center'”>
    <p id=title{{BaI}} [ngStyle]=”ngStyle[BaI]” readonly rows=”1″ cols=”12″>{{title[BaI]}}</p>
    </th>
    <tr id=tdtab2{{BaI}}>
    <jqxGauge #myGauge id=gauge{{BaI}}
    [height] = 200 [width] = 200
    [colorScheme] = “‘scheme05′”
    [animationDuration] = 0
    [ticksDistance]= “‘15%'”
    [startAngle]= -315 [endAngle]= -45
    [pointer]= “{length: ‘70%’, width: ‘2%’}”
    [cap]= “{ style: { fill: ‘#249dd6’, stroke: ‘#249dd6’}}”
    [border]=”{ size: ‘3%’, style: { stroke: ‘#cccccc’}, visible: true, showGradient: true }”
    [min]= “Min[BaI]” [max]= “Max[BaI]”
    [ticksMinor]=”tickMinor[BaI]”
    [ticksMajor]=”tickMajor[BaI]”
    [labels]= “labels[BaI]”
    [ranges]= “ranges[BaI]”
    [caption]=”caption[BaI]”
    [value] = “Val[BaI]”>
    </jqxGauge>
    </tr>
    </table>
    </td>
    </ng-container>
    </tr>
    </table>

    import { Component, ViewChildren, QueryList} from ‘@angular/core’;
    // websockets service which gives a message every 10 secondes
    import { DataService } from ‘../dataservice.service’;
    import { jqxGaugeComponent } from ‘jqwidgets-ng/jqxgauge’;
    import { formatNumber } from ‘@angular/common’;

    @Component({
    selector: ‘app-cirgauge’,
    templateUrl: ‘./cirgauge.component.html’,
    styleUrls: [‘./cirgauge.component.css’],
    providers: [DataService]
    })
    export class CirgaugeComponent {
    // variables to update the DOM through bindings
    title = [”, ”, ”, ”, ”];
    ngStyle = [ {backgroundColor: ”},
    {backgroundColor: ”},
    {backgroundColor: ”},
    {backgroundColor: ”}];
    Val = [100, 100, 100, 100];
    Min = [-10, 0, 10, 10];
    Max = [ 40, 14, 80, 80];
    caption: any = [ {value: ‘0’, position: ‘bottom’, offset: [0, 10], visible: true},
    {value: ‘0’, position: ‘bottom’, offset: [0, 10], visible: true},
    {value: ‘0’, position: ‘bottom’, offset: [0, 10], visible: true},
    {value: ‘0’, position: ‘bottom’, offset: [0, 10], visible: true}];
    tickMinor: any = [ {interval: 1, size: ‘7%’, visible: true },
    {interval: 0.5, size: ‘7%’, visible: true },
    {interval: 2, size: ‘7%’, visible: true },
    {interval: 2, size: ‘7%’, visible: true }];
    tickMajor: any = [ {interval: 5, size: ‘15%’, visible: true },
    {interval: 1, size: ‘15%’, visible: true },
    {interval: 10, size: ‘15%’, visible: true },
    {interval: 10, size: ‘15%’, visible: true }];
    labels: any = [ {distance: ‘35%’, interval: 5, offset: [0, -10], visible: true },
    {distance: ‘35%’, interval: 1, offset: [0, -10], visible: true },
    {distance: ‘35%’, interval: 10, offset: [0, -10], visible: true },
    {distance: ‘35%’, interval: 10, offset: [0, -10], visible: true }];
    ranges: any = [
    [ { startValue: -10, endValue: 15, style: { fill: ‘#0000FF’, stroke: ‘#0000FF’}, startWidth: ‘7%’, endWidth: ‘7%’},
    { startValue: 15, endValue: 25, style: { fill: ‘#00FF00’, stroke: ‘#00FF00’}, startWidth: ‘7%’, endWidth: ‘7%’},
    { startValue: 25, endValue: 40, style: { fill: ‘#FF0000’, stroke: ‘#FF0000’}, startWidth: ‘7%’, endWidth: ‘7%’}],
    [ { startValue: 0, endValue: 0, style: { fill: ‘#0000FF’, stroke: ‘#0000FF’}, startWidth: ‘7%’, endWidth: ‘7%’},
    { startValue: 0, endValue: 12, style: { fill: ‘#00FF00’, stroke: ‘#00FF00’}, startWidth: ‘7%’, endWidth: ‘7%’},
    { startValue: 12, endValue: 14, style: { fill: ‘#FF0000’, stroke: ‘#FF0000’}, startWidth: ‘7%’, endWidth: ‘7%’}],
    [ { startValue: 10, endValue: 0, style: { fill: ‘#0000FF’, stroke: ‘#0000FF’}, startWidth: ‘7%’, endWidth: ‘7%’},
    { startValue: 0, endValue: 0, style: { fill: ‘#00FF00’, stroke: ‘#00FF00’}, startWidth: ‘7%’, endWidth: ‘7%’},
    { startValue: 0, endValue: 80, style: { fill: ‘#FF0000’, stroke: ‘#FF0000’}, startWidth: ‘7%’, endWidth: ‘7%’}],
    [ { startValue: 10, endValue: 0, style: { fill: ‘#0000FF’, stroke: ‘#0000FF’}, startWidth: ‘7%’, endWidth: ‘7%’},
    { startValue: 0, endValue: 0, style: { fill: ‘#00FF00’, stroke: ‘#00FF00’}, startWidth: ‘7%’, endWidth: ‘7%’},
    { startValue: 0, endValue: 80, style: { fill: ‘#FF0000’, stroke: ‘#FF0000’}, startWidth: ‘7%’, endWidth: ‘7%’}]];
    // variable to receive update from the backend through websocket service
    Ba = [{Nom: ”, ConsiN: 5, ConsiJ: 35, Temp: 0, Etat: 0},
    {Nom: ”, ConsiN: 0, ConsiJ: 14, Temp: 0, Etat: 0},
    {Nom: ”, ConsiN: 0, ConsiJ: 0, Temp: 0, Etat: 0},
    {Nom: ”, ConsiN: 0, ConsiJ: 0, Temp: 0, Etat: 0}
    ];
    // start flag to optimize the update process
    start = true;
    constructor(
    private socket1: DataService) {}
    // query list to get access to the 4 gauges
    @ViewChildren(‘myGauge’) listGauge: QueryList<jqxGaugeComponent>;

    ngOnInit() {
    }
    ngAfterViewInit() {
    console.log(‘ngAterViewinit debut’);
    // call the listener for Gauge information
    this.socket1.getEventListener(‘Gauge’).subscribe(event1 => {
    // init service launch the communication with backend get a message form the service
    console.log(‘cirgauge recept message’);
    // if message is not of type message discarded it’s open or close
    if (event1.type === ‘message’) {
    // receive a data message extract the value in Ba
    this.Ba = JSON.parse(event1.data)[‘Ballons’.toString()];
    // change value for each of the 4 gauges and transfert in relevant variable to update
    // the DOM through binding
    this.listGauge.forEach((gauge, index) => {
    // changes properties of caption and Value for each messages
    this.caption[index][‘value’.toString()] = formatNumber(this.Ba[index][‘Temp’.toString()], ‘fr-FR’, ‘.2-2’);
    this.Val[index] = this.Ba[index][‘Temp’.toString()];
    if (this.Ba[index][‘Etat’.toString()] === 1 && index > 1) {
    this.ngStyle[index][‘backgroundColor’.toString()] = ‘#FF0000’;
    }
    // changes properties only on reception of the first message (ranges , min, max …)
    if (this.start) {
    this.title[index] = this.Ba[index][‘Nom’.toString()];
    // gauge 2 and 3 has ranges coming from backend
    if (index > 1) {
    this.ranges[index][0][‘startValue’.toString()] = this.Min[index];
    this.ranges[index][0][‘endValue’.toString()] = this.Ba[index][‘ConsiJ’.toString()];
    this.ranges[index][1][‘startValue’.toString()] = this.Ba[index][‘ConsiJ’.toString()];
    this.ranges[index][1][‘endValue’.toString()] = this.Ba[index][‘ConsiN’.toString()];
    this.ranges[index][2][‘startValue’.toString()] = this.Ba[index][‘ConsiN’.toString()];
    this.ranges[index][2][‘endValue’.toString()] = this.Max[index];
    }
    }
    });
    this.start = false;
    }
    if (event1.type === ‘close’) {/*to do*/}// communication close from service
    if (event1.type === ‘open’) {/*to do*/}// communication open by service
    });

    }
    ngOnDestroy() {
    this.socket1.close();
    console.log(‘destroy cirgauge’);
    }
    }

    import { Injectable, EventEmitter } from ‘@angular/core’;

    @Injectable({
    providedIn: ‘root’
    })
    export class DataService {

    private socket: WebSocket;
    private state = 0;
    private listener: EventEmitter<any> = new EventEmitter();

    public constructor() {}
    public close() {
    console.log(‘datas close’);
    this.state = 0;
    this.socket.close();
    }
    public getEventListener(what: string) {
    console.log(‘geteventlistener’ + what + ‘ ‘ + this.state);
    if (this.state === 0) { this.state = 1; this.open(what); }
    return this.listener;
    }
    private open(what: string) {
    console.log(‘datas debut’ + what);
    this.socket = new WebSocket(‘ws://chauffage.glocal:7681/publisher’, what);
    this.socket.onopen = event => {this.listener.emit({type: ‘open’, data: event}); };
    this.socket.onclose = event => {this.listener.emit({type: ‘close’, data: event}); };
    this.socket.onmessage = event => {
    // console.log(‘message :’ + event.data);
    this.listener.emit({type: ‘message’, data: event.data});
    console.log( ‘message :’ + what); };
    }
    }

    Gauge crunches memory #107631

    Hristo
    Participant

    Hello GLAMBERT,

    I tested this example and it seems to work fine:
    https://stackblitz.com/edit/github-ebjrts
    Could you try to reproduce your case as you use the example above?
    After that, I will try to reproduce it and then I will try to provide you a solution.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.