frangoteam / FUXA

Web-based Process Visualization (SCADA/HMI/Dashboard) software
https://frangoteam.org
MIT License
2.76k stars 812 forks source link

[BUG] View Background Color not working #1363

Open LordNetro opened 1 month ago

LordNetro commented 1 month ago

Describe the bug The background color and behaviour of the view is lost whenever you acces the view by an event. If you acces the view via the side menu the behaviour is the expected (it works). The bug only happens when you acces the view via a button in a different view

To Reproduce Steps to reproduce the behavior:

  1. Add a button to a view
  2. Add an mouse down / open page event to the button
  3. Assign a view that has a different background color than the default to the event
  4. Try it and see that the background color is white and not the one that you assigned before

Expected behavior See the view with the expected background color and behaviour.

Screenshots View accessed via button in different view

image

View accesed via side menu image

Environment

henjoe commented 1 month ago

I checked the logic for this, the sideNav has different logic from the button (navigating to other page).

If you can edit a code, you can simply change the fuxa-view.component.ts under client\src\app\fuxa-view

Search the code below: (loadPage)

 loadPage(param: any, viewref: string, options: any) {

        let view: View = this.getView(viewref);
        if (view) {
            if (options?.variablesMapping) {
                this.loadVariableMapping(options.variablesMapping);
            }
            this.loadHmi(view);
            if (param.scaleMode) {
                Utils.resizeViewRev(this.dataContainer.nativeElement, this.dataContainer.nativeElement.parentElement?.parentElement, param.scaleMode);
            }
        }
    }

and change the this.loadHmi(view) to this.loadHmi(view, true)

loadPage(param: any, viewref: string, options: any) {

        let view: View = this.getView(viewref);
        if (view) {
            if (options?.variablesMapping) {
                this.loadVariableMapping(options.variablesMapping);
            }
            this.loadHmi(view, true);
            if (param.scaleMode) {
                Utils.resizeViewRev(this.dataContainer.nativeElement, this.dataContainer.nativeElement.parentElement?.parentElement, param.scaleMode);
            }
        }
    }
henjoe commented 1 month ago

By the way, how you manage all the controls (sliders, gauges and etc.) to have a little bit of transparent background?

This is awesome.

henjoe commented 1 month ago

By the way, how you manage all the controls (sliders, gauges and etc.) to have a little bit of transparent background?

This is awesome.

By the way, how you manage all the controls (sliders, gauges and etc.) to have a little bit of transparent background?

This is awesome.

Nevermind, I knew it. What a dumb question 😄

LordNetro commented 3 weeks ago

I checked the logic for this, the sideNav has different logic from the button (navigating to other page).

If you can edit a code, you can simply change the fuxa-view.component.ts under client\src\app\fuxa-view

Search the code below: (loadPage)

 loadPage(param: any, viewref: string, options: any) {

        let view: View = this.getView(viewref);
        if (view) {
            if (options?.variablesMapping) {
                this.loadVariableMapping(options.variablesMapping);
            }
            this.loadHmi(view);
            if (param.scaleMode) {
                Utils.resizeViewRev(this.dataContainer.nativeElement, this.dataContainer.nativeElement.parentElement?.parentElement, param.scaleMode);
            }
        }
    }

and change the this.loadHmi(view) to this.loadHmi(view, true)

loadPage(param: any, viewref: string, options: any) {

        let view: View = this.getView(viewref);
        if (view) {
            if (options?.variablesMapping) {
                this.loadVariableMapping(options.variablesMapping);
            }
            this.loadHmi(view, true);
            if (param.scaleMode) {
                Utils.resizeViewRev(this.dataContainer.nativeElement, this.dataContainer.nativeElement.parentElement?.parentElement, param.scaleMode);
            }
        }
    }

Thank you so much! @unocelli could you add this fix to the PRO version please? Thank you in advance.

unocelli commented 3 weeks ago

@henjoe Thanks a lot!