From a08535bcc5015043d7c13a82a167e0b39e838fc1 Mon Sep 17 00:00:00 2001 From: Tommi Penttinen <tmpent@utu.fi> Date: Wed, 23 Jun 2021 20:34:22 +0300 Subject: [PATCH] Mobile Safari needed special work due to <audio> tag playback restrictions --- enni.html | 22 +++++++++++++++++++++- js/smarter-ui.js | 18 +++++++++++++++++- paavo.html | 22 +++++++++++++++++++++- petra.html | 22 +++++++++++++++++++++- tommi.html | 22 +++++++++++++++++++++- 5 files changed, 101 insertions(+), 5 deletions(-) diff --git a/enni.html b/enni.html index 08872a3..b0c288e 100644 --- a/enni.html +++ b/enni.html @@ -40,6 +40,22 @@ <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script src="js/bootstrap.bundle.min.js"></script> + <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> + + + + <div class="modal" tabindex="-1" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title">Yhteys palvelimeen</h5> + </div> + <div class="modal-footer"> + <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button> + </div> + </div> + </div> + </div> <div class="container"> <div class="row"> <div class="col"> @@ -71,7 +87,11 @@ </div> </div> <script src="js/smarter-ui.js"></script> - + <script type="text/javascript"> + $(document).ready(function() { + $('.modal').modal('show'); + }) + </script> </body> </html> diff --git a/js/smarter-ui.js b/js/smarter-ui.js index 8bd72a5..71a7409 100644 --- a/js/smarter-ui.js +++ b/js/smarter-ui.js @@ -1,6 +1,8 @@ DIRECTION1_TEXT = "Suunta: tulee vasemmalta"; DIRECTION2_TEXT = "Suunta: tulee oikealta"; +var AUDIO_ELEM = new Audio(); + // Make it easier to read CSV files USER_AGENT = navigator.userAgent.replace(';', '').replace(',', ''); @@ -29,20 +31,29 @@ var heartBeat; // https://stackoverflow.com/a/23176223 function connect() { + console.log("Opening websocket"); ws = new WebSocket(SERVER); ws.onopen = function() { + console.log("Opened websocket"); // Initiate hearbeat heartBeat = setInterval(function() { console.log("PING"); ws.send('PING' + SEP + new Date().getTime() + SEP + USER_AGENT); }, 5000); + setTimeout(function() { + var modalClose = document.getElementById('modal-close'); + modalClose.textContent = "Valmis!"; + $(modalClose).toggleClass("disabled"); + }, 1000); }; ws.onmessage = function(e) { console.log('Message:', e.data); try { var vehicle_class = JSON.parse(e.data).vehicle_class; - new Audio(AUDIO[vehicle_class]).play(); + console.log("Got vehicle class: " + vehicle_class); + AUDIO_ELEM.src = AUDIO[vehicle_class]; + AUDIO_ELEM.play(); } catch (exc) { if (exc instanceof SyntaxError) { console.log("Not json : " + e.data); @@ -66,3 +77,8 @@ function connect() { }; } connect(); + +function closeModal() { + AUDIO_ELEM.play(); + $('.modal').modal('hide'); +} \ No newline at end of file diff --git a/paavo.html b/paavo.html index a49c8e6..06dfbb3 100644 --- a/paavo.html +++ b/paavo.html @@ -40,6 +40,22 @@ <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script src="js/bootstrap.bundle.min.js"></script> + <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> + + + + <div class="modal" tabindex="-1" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title">Yhteys palvelimeen</h5> + </div> + <div class="modal-footer"> + <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button> + </div> + </div> + </div> + </div> <div class="container"> <div class="row"> <div class="col"> @@ -71,7 +87,11 @@ </div> </div> <script src="js/smarter-ui.js"></script> - + <script type="text/javascript"> + $(document).ready(function() { + $('.modal').modal('show'); + }) + </script> </body> </html> diff --git a/petra.html b/petra.html index c6d9a8d..51c89e5 100644 --- a/petra.html +++ b/petra.html @@ -40,6 +40,22 @@ <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script src="js/bootstrap.bundle.min.js"></script> + <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> + + + + <div class="modal" tabindex="-1" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title">Yhteys palvelimeen</h5> + </div> + <div class="modal-footer"> + <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button> + </div> + </div> + </div> + </div> <div class="container"> <div class="row"> <div class="col"> @@ -71,7 +87,11 @@ </div> </div> <script src="js/smarter-ui.js"></script> - + <script type="text/javascript"> + $(document).ready(function() { + $('.modal').modal('show'); + }) + </script> </body> </html> diff --git a/tommi.html b/tommi.html index 9c8f3dc..433d0fb 100644 --- a/tommi.html +++ b/tommi.html @@ -40,6 +40,22 @@ <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script src="js/bootstrap.bundle.min.js"></script> + <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> + + + + <div class="modal" tabindex="-1" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title">Yhteys palvelimeen</h5> + </div> + <div class="modal-footer"> + <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button> + </div> + </div> + </div> + </div> <div class="container"> <div class="row"> <div class="col"> @@ -71,7 +87,11 @@ </div> </div> <script src="js/smarter-ui.js"></script> - + <script type="text/javascript"> + $(document).ready(function() { + $('.modal').modal('show'); + }) + </script> </body> </html> -- GitLab