Skip to content

Commit

Permalink
Fixes #165 by displaying an info box if WebGL is not detected
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacksonchen
jacksonchen committed Sep 16, 2013
1 parent c841fa8 commit eade432
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 2 deletions.
10 changes: 10 additions & 0 deletions emperor/format.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,16 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False,
<body>
<div id="overlay">
<div>
<h1>WebGL is not enabled!</h1>
<p>Here is what you can do</p>
<p>Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.</p>
<p>Safari: Open Safari menu and select Preferences. Click on the advanced tab, and then check Show Develop menu. Then open the Develop menu and select Enable WebGL.</p>
<p>Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
</div>
</div>
<div id="plotToggle">
<form>
<div id="plottype">
Expand Down
21 changes: 21 additions & 0 deletions emperor/support_files/emperor/css/emperor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,27 @@
overflow: hidden;
float: left;
}

#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
font-size: 12px;
text-align:center;
z-index: 1000;
}

#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}

div.plotWrapper {
position: relative;
Expand Down
11 changes: 9 additions & 2 deletions emperor/support_files/emperor/js/emperor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1966,6 +1966,12 @@ function reset_div_sizes(width_left) {
}
}

//Unhides the info box if WebGL is disabled
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

/*Setup and initialization function for the whole system
This function will set all of the WebGL elements that are required to exist
Expand All @@ -1980,8 +1986,9 @@ $(document).ready(function() {
containmentLeft = $(window).width()*0.5;
containmentRight = $(window).width()*0.99;
// Detecting that webgl is activated
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

if ( ! Detector.webgl ) {
overlay();
}
var main_plot = $('#main_plot');
var particles, geometry, parameters, i, h, color;
var mouseX = 0, mouseY = 0;
Expand Down
50 changes: 50 additions & 0 deletions tests/test_format.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,6 +446,16 @@ def test_format_emperor_html_footer_string(self):
<body>
<div id="overlay">
<div>
<h1>WebGL is not enabled!</h1>
<p>Here is what you can do</p>
<p>Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.</p>
<p>Safari: Open Safari menu and select Preferences. Click on the advanced tab, and then check Show Develop menu. Then open the Develop menu and select Enable WebGL.</p>
<p>Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
</div>
</div>
<div id="plotToggle">
<form>
<div id="plottype">
Expand Down Expand Up @@ -609,6 +619,16 @@ def test_format_emperor_html_footer_string(self):
<body>
<div id="overlay">
<div>
<h1>WebGL is not enabled!</h1>
<p>Here is what you can do</p>
<p>Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.</p>
<p>Safari: Open Safari menu and select Preferences. Click on the advanced tab, and then check Show Develop menu. Then open the Develop menu and select Enable WebGL.</p>
<p>Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
</div>
</div>
<div id="plotToggle">
<form>
<div id="plottype">
Expand Down Expand Up @@ -783,6 +803,16 @@ def test_format_emperor_html_footer_string(self):
<body>
<div id="overlay">
<div>
<h1>WebGL is not enabled!</h1>
<p>Here is what you can do</p>
<p>Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.</p>
<p>Safari: Open Safari menu and select Preferences. Click on the advanced tab, and then check Show Develop menu. Then open the Develop menu and select Enable WebGL.</p>
<p>Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
</div>
</div>
<div id="plotToggle">
<form>
<div id="plottype">
Expand Down Expand Up @@ -941,6 +971,16 @@ def test_format_emperor_html_footer_string(self):
<body>
<div id="overlay">
<div>
<h1>WebGL is not enabled!</h1>
<p>Here is what you can do</p>
<p>Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.</p>
<p>Safari: Open Safari menu and select Preferences. Click on the advanced tab, and then check Show Develop menu. Then open the Develop menu and select Enable WebGL.</p>
<p>Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
</div>
</div>
<div id="plotToggle">
<form>
<div id="plottype">
Expand Down Expand Up @@ -1103,6 +1143,16 @@ def test_format_emperor_html_footer_string(self):
<body>
<div id="overlay">
<div>
<h1>WebGL is not enabled!</h1>
<p>Here is what you can do</p>
<p>Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.</p>
<p>Safari: Open Safari menu and select Preferences. Click on the advanced tab, and then check Show Develop menu. Then open the Develop menu and select Enable WebGL.</p>
<p>Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
</div>
</div>
<div id="plotToggle">
<form>
<div id="plottype">
Expand Down

0 comments on commit eade432

Please sign in to comment.