Profound Logic Forums

Posted: **Fri Jul 13, 2018 9:30 am**

Is it possible to remove the remove the Loading Animation / Thinking Spinner for only 1 rich display file. We have a continuous displaying dashboard that we would like it removed from.

I found the following, but this appears to be a global change.
http://www.profoundlogic.com/docs/displ ... +Animation

Thanks

Posted: **Fri Jul 13, 2018 1:10 pm**

You're right, if you change the loading animation, all subsequent screens will use the change. So if you change it in your application, it'll be changed for the rest of the session.

Is that really a problem, though? You say that your dashboard is "continuously displaying". To me, that implies that you won't exit the program... am I wrong?

If you do, couldn't you just change it back afterwards?

Posted: **Fri Jul 13, 2018 1:35 pm**

How do I change it in the application, only for that session? The only documentation I've found is for the global setting.

Correct, the program will not be exiting. The program is set as an Anonymous Program and will be running on a Raspberry Pi without a keyboard or mouse.

Posted: **Fri Jul 13, 2018 4:23 pm**

As you pointed out, there's a page that explains how to change the loading animation here:
http://www.profoundlogic.com/docs/displ ... +Animation

The code you see on that page is JavaScript code. The example chooses to run that JavaScript code when the web page is loaded at the start of all sessions, but that's not a requirement -- you can run it at any time. (Or, perhaps I should say, anywhere that you can insert JavaScript code... but that's nearly any time.)

The tricky part here is that the loading animation starts running before the screen is loaded, so the code can't be in the screen itself. Makes sense if you think about it... it's the loading animation, so it has to begin running BEFORE the screen loads... so how can you run it before your screen is loaded from the server? See what I mean? tricky.

Its hard for me to suggest a solution because I'm not familiar with your application, but...

1) Given that this screen is displayed continuously, maybe it's okay to have the "default" loading animation for the first time the screen is displayed, but then have the changed one for subsequent displays? If so, you can insert the code in the screen's "onload" or "onsubmit" event.

2) If the animation must be changed prior to the first display of the screen, maybe it can be set in a prior display? If necessary, you could write a separate screen just for this... have it change the animation, and then immediately submit control back to the server (with something like pui.click or presskey("enter"), etc). Then it could display the screen that's repeated continuously with the proper animation.

3) Another thought, if it absolutely must apply to every single screen in the session (but nowhere else) would be to have a separate HTML page that starts this vs. other applications. then that page could set it at the start.

4) If you don't like the separate page idea, it could run in a "settings.js" like the example, but use an "if" statement to control whether the animation is changed or not. for example, maybe you'd stick a parameter in the URL to control it, and then settings.js (or whatever you call your start JS file) could look for that parameter.

do any of these options make sense in your application?

Posted: **Fri Jul 13, 2018 5:01 pm**

Another option would be to create a 'dummy' initial record format that changes the loading animation and immediately returns control to the program with a pui.click().

I currently use this technique to display a "Loading, please wait..." screen when there is a particularly long initialization routine.

Sean

Posted: **Fri Jul 13, 2018 5:02 pm**

Sean, that was my option (2), above :-)

Posted: **Mon Jul 16, 2018 2:50 am**

You should be able to do this in your skin's custom.js. An example:

Code: Select all

function customize() {
  if (pui.beforeRender == null) {
    pui.beforeRender = function(screen) {
      	/* 
    	  You have to adjust the following if clause to something that identifies 
    	  your rich display screen, as in your dashboard screen.
  	*/
      if (screen["layers"][0]["formats"][0]["name"] === "DASHBOARD1") {
        pui["loading animation"]["css"] = null;
      } else if (pui["loading animation"]["css"] === null) {
        /*
    	  Set back the animation if the screen is not DASHBOARD1 and if the animation was set to null previously.
    	  Look up what your spinners css class is and replace "pui-animation" with that.
    	*/
        pui["loading animation"]["css"] = "pui-animatlon";
      }
    };
  }
}

What this does is use this method to do some adjustments before the rich display file is rendered and disables the spinner for a particular screen. The "ugly" or "tricky" part here is identifiying the screen. We can't just read some DOM elements because the screen hasn't been rendered yet, so we have to use the parameter that the server gives our function - in this case the "screen" variable.

Posted: **Mon Jul 16, 2018 2:25 pm**

Thanks Scott, that gave me enough to work with.

Profound Logic Forums

Remove Loading Animation / Thinking Spinner

Remove Loading Animation / Thinking Spinner

Re: Remove Loading Animation / Thinking Spinner

Re: Remove Loading Animation / Thinking Spinner

Re: Remove Loading Animation / Thinking Spinner

Re: Remove Loading Animation / Thinking Spinner

Re: Remove Loading Animation / Thinking Spinner

Re: Remove Loading Animation / Thinking Spinner

Re: Remove Loading Animation / Thinking Spinner