diff options
| author | Justin Worthe <justin@worthe-it.co.za> | 2017-11-12 13:12:35 +0200 |
|---|---|---|
| committer | Justin Worthe <justin@worthe-it.co.za> | 2017-11-12 13:12:35 +0200 |
| commit | 9cdda723cc90492cd4ac1fb32d31e5077293a2b9 (patch) | |
| tree | 45f298356858900b0becac3c176af0799b069635 /web/index.html | |
| parent | 625206f888a796cf40dadbf571fc23bdf3c3379b (diff) | |
Added loading and error indications for web UI
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 38 |
1 files changed, 24 insertions, 14 deletions
diff --git a/web/index.html b/web/index.html index 7e2b59a..d3f6a4b 100644 --- a/web/index.html +++ b/web/index.html @@ -3,19 +3,30 @@ <link rel="stylesheet" href="style.css"> </head> <body> - <p> - This is a demo for the web build of Rusty Microphone using - Emscripten. It requires a browser that supports WebAssembly - and the Web Audio API. There may still be some rough edges - that need to be refined. If it does not appear to be working, - please make sure that you are using the latest version of your - web browser, since these technologies are still relatively - new. - </p> - <h1>Rusty Microphone</h1> - <div id="rusty-microphone"> - + <div id="loading"> + Loading... + </div> + <div id="browser-support-error" class="error" style="display:none;"> + <p> + It looks like something has gone wrong while loading. The + most likely reason for this is that this app doesn't support + your web browser. + </p> + + <p> + I test with the latest version of Firefox, but it should + also work with recent versions of Chrome, Microsoft Edge, + Safari and Opera. If you're running one of these browsers, + please make sure you've updated to the latest version. + </p> + </div> + <div id="unexpected-error" class="error" style="display:none;"> + <p> + An unexpected error has occurred. Please try again later. + </p> + </div> + <div id="rusty-microphone" style="display:none;"> <p>The current note being played is <span id="pitch-label">unknown</span></p> <div id="pitch-indicator-bar-container"> <div id="pitch-indicator-bar"></div> @@ -27,10 +38,9 @@ <canvas id="oscilloscope" width="320" height="300"></canvas> - <p>The current framerate is <span id="frame-rate">_</span>FPS</p> + <p>The current framerate is <span id="frame-rate">0</span>FPS</p> </div> - <script src="adapter.js"></script> <script src="main.js"></script> <script src="rusty_microphone.js"></script> </body> |