Trouble with interface.html

You are reading a single comment by @tev and its replies. Click here to read the full conversation.

•

tev
Hi all, I'm working on my first app and am having a really frustrating time getting interface.html working the way I want. The only docs I'm able to find for this are in the BangleApps README, and it just doesn't seem adequate at all.

The problem: I want a “download” button in the app loader that when pressed displays a page with a very simple HTML representation of the data logged in my app. I already have a small function in my app's app.js that returns the desired HTML code as a string, and I just want to call that function and inject it directly into the page as shown in the README example. But for some reason, I can't get it to work at all.

Here is what my interface.html currently looks like:
```
<html>
  <head>
    <link rel="stylesheet" href="../../css/spectre.min.css">
  </head>
  <body>
    <script src="../../core/lib/interface.js"></script>
    <div id="content">Loading...</div>
    <script>
      function onInit() {
        Puck.eval("load('timestamplog.app.js')", output => {
          Puck.eval("printHTMLStampLog(stampLog)", output2 => {
            document.getElementById("content").innerHTML = output2;
          });
        });
      }
    </script>
  </body>
</html>
```
The idea is to load my app first (so that I have access to its routines—there's probably a cleaner way to do this, but my focus is on making it work first, then worry about refactoring) and then call the function that runs on the Bangle itself and outputs the HTML I want injected into the page. The app gets loaded, but that's as far as it gets. The second call to Puck.eval just returns nothing, every time. And I can see from the Espruino console that my printHTMLStampLog function does get called and outputs the desired data, but it just doesn't get returned.

What's going on here? After a full day and a half of investigation, I suspect a race condition, because if I fumble around in the browser console and run the second .eval() call by itself after my app is already loaded, it kind of works (except it's somehow not rendering the HTML tags, but we'll deal with that later). I was under the impression that this code would load the app and only call the second part once the first part finishes. Instead, it seems to run the second part too early, and it usually returns nothing, or occasionally, some other nonsense from the Espruino console that has nothing to do with what my app's code is actually writing.

I've looked at a lot of source code for other apps, but it's not getting me anywhere. No one seems to try to use their app's assets directly, and instead they just dump all the code for reading/writing and encoding/decoding data in interface.html. That's not what I want to do because that means needlessly copying and pasting perfectly good code I already wrote into multiple files, and that's a code-maintenance nightmare. I do not wish to take that route. I'd like to leverage the existing on-device app code for this functionality as much as possible.

Can anyone help me get this working properly?

Trouble with interface.html

About

Espruino