diff --git a/ippisite/ippidb/templates/targetcentric_networks.html b/ippisite/ippidb/templates/targetcentric_networks.html index 0fd501050b8260185198e67d7a00e1d0c1d47302..86a20dc6c48c89dc3a507b1df1d15619d4a28340 100644 --- a/ippisite/ippidb/templates/targetcentric_networks.html +++ b/ippisite/ippidb/templates/targetcentric_networks.html @@ -35,7 +35,16 @@ </div> </div> <div class="row d-flex"> + <div id="webgl-message" class="messages inner-wrap" style="display: none;"> + <div class="alert alert-warning" role="alert"> + <strong>WebGL is not available in your browser.</strong> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + </div> <iframe id="encoder_iframe" style="min-height:800px !important; width:100%;" src="{% url 'pocketome_html' %}"> + </iframe> </div> <div class="row d-flex mb-3 justify-content-md-end"> @@ -43,5 +52,53 @@ <div class="error"></div> </div> </div> +<div class="modal fade" id="waitingmodal" tabindex="-1" role="dialog" aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered" role="document"> + <div class="modal-content"> + <div class="modal-body"> + <div class="text-center"> + <h3>Please Wait</h3> + <p class="loader"></p> + </div> + </div> + </div> + </div> +</div> <script src="{% static 'js/targetcentrict_networks.js' %}"></script> +<script> + $(document).ready(function () { + var modalShown = false; + + $('#waitingmodal').on('shown.bs.modal', function () { + modalShown = true; + }).modal('show'); + $('#encoder_iframe').on('load', function () { + if (modalShown) { + $('#waitingmodal').modal('hide'); + } else { + $('#waitingmodal').on('shown.bs.modal', function () { + $('#waitingmodal').modal('hide'); + }); + } + }); + }); + document.addEventListener("DOMContentLoaded", function () { + // Check WebGL availability + if (!checkWebGL()) { + // Show the message if WebGL is not available + var webglMessage = document.getElementById("webgl-message"); + webglMessage.style.display = "block"; + } + }); + + // Function to check WebGL availability + function checkWebGL() { + try { + var canvas = document.createElement('canvas'); + return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')); + } catch (e) { + return false; + } + } +</script> {% endblock %} \ No newline at end of file