EmWiApp.html

31 views
asked Oct 4 in GUI Development by Mike_PPsys
Our Javascript GUI can take ~30sec or so to initially download over Wifi. Is there a way to have EmWiz generate code to throw up a "Loading..." page right away in EmWiApp.html?

1 Answer

0 votes
answered Oct 8 by Christoph Friegel

Hi,

If you have investigated the html-code of the EmWiApp.html, you can see that the WebGL GUI of the Embedded Wizard works within the <CANVAS>-tag only. 

In short:
Since the GUI is still downloading... you need to solve this native manually via your own js/html code.

Just a simple solution (of many):
You could just set this <CANVAS> to invisible as long as it is not ready. In addition you can add a text or image (e.g. splashscreen with a spinner-gif) that tells the user that it is loading.
After everythng is set up, you can remove the text/image and make the <CANVAS> visible again.

Code could look like this:

<!DOCTYPE html>
<HTML>
  <HEAD>
  <TITLE></TITLE>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <META name="Generator" content="Embedded Wizard, Tara Systems GmbH, written by Paul Banach and Manfred Schweyer">
  </HEAD>
  <BODY>
    <div id='loading' >Loading</div>
    <CANVAS id="_canvas_EmWiApp" width="1350" height="480" tabindex="1" style='display: none;'>
      Sorry, your browser doesn't support the canvas element.
    </CANVAS>
...

The "display: none" makes the CANVAS invisible. Now you just need a mechanism to know when everything is downloaded. Maybe something like jQuery.ready() could help or statically via a timer (e.g. http://jsfiddle.net/MrPolywhirl/cbLsc81f/ ). Maybe your Application.init() can also tell when the GUI is fully loaded. Then just remove the loading-div and enable the CANVAS again.

Hope this helps,
Chris

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...