Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #165 by displaying an info box if WebGL is not detected #186

Merged
merged 4 commits into from
Sep 21, 2013
Merged

Fixes #165 by displaying an info box if WebGL is not detected #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eade432
Fixes #165 by displaying an info box if WebGL is not detected
jacksonchen Sep 16, 2013
311e836
Hides everything but text box if WebGL is disabled. The text box is a…
jacksonchen Sep 19, 2013
40868ea
Fixes some phrases and adds sources for information.
jacksonchen Sep 19, 2013
04e4038
Adds the browsers supported and more instructions in the text box tha…
jacksonchen Sep 20, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ To start using Emperor, please refer to the [installation notes](INSTALL.md).

## Usage examples

The main interface to create Emperor visualizations is the `make_emperor.py` script, inputing a mapping file and a PCoA data file, will generate an Emperor graphical user interface to analize and visualize your data.
The main interface to create Emperor visualizations is the `make_emperor.py` script, inputing a mapping file and a PCoA data file, will generate an Emperor graphical user interface to analyze and visualize your data.

If you have a QIIME compliant mapping file and a PCoA file, try the following command from a terminal session:

Expand Down
18 changes: 16 additions & 2 deletions emperor/format.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,7 +489,21 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False,
</script>
</head>

<body>
<body>

<div id="overlay">
<div>
<img src="emperor_required_resources/img/emperor.png" alt="Emperor" id="smalllogo"/>
<h1>WebGL is not enabled!</h1>
<p>Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:</p>
<p id="explanation"><strong>Chrome:</strong> Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. <em>Note:</em> If you follow these steps and still don't see an image, go to "chrome://flags/" and then search for "Override software rendering list" and enable this option.</p>
<p id="explanation"><strong>Safari:</strong> Open Safari's menu and select Preferences. Click on the advanced tab, and then check "Show Developer" menu. Then open the "Developer" menu and select "Enable WebGL".</p>
<p id="explanation"><strong>Firefox:</strong> Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
<p id="explanation"><strong>Other browsers:</strong> The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.</p>
<p id="explanation"><em>Note:</em> Once you went through these changes, reload the page and it should work!</p>
<p id="source">Sources: Instructions for <a href="https://www.biodigitalhuman.com/home/enabling-webgl.html">Chrome and Safari</a>, and <a href="http://www.infewbytes.com/?p=144">Firefox</a></p>
</div>
</div>

<div id="plotToggle">
<form>
Expand Down Expand Up @@ -639,4 +653,4 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False,
</body>

</html>
"""
"""
37 changes: 36 additions & 1 deletion emperor/support_files/emperor/css/emperor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,41 @@
overflow: hidden;
float: left;
}

#smalllogo {
width:150px;
height:45px;
}

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

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

#explanation {
text-align:left;
}

#source {
font-size:11px;
text-align:left;
}

div.plotWrapper {
position: relative;
Expand Down Expand Up @@ -254,4 +289,4 @@

.invisible {
display: none;
}
}
17 changes: 15 additions & 2 deletions emperor/support_files/emperor/js/emperor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1966,6 +1966,18 @@ function reset_div_sizes(width_left) {
}
}

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

/*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 +1992,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
80 changes: 75 additions & 5 deletions tests/test_format.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,21 @@ def test_format_emperor_html_footer_string(self):
</script>
</head>

<body>
<body>

<div id="overlay">
<div>
<img src="emperor_required_resources/img/emperor.png" alt="Emperor" id="smalllogo"/>
<h1>WebGL is not enabled!</h1>
<p>Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:</p>
<p id="explanation"><strong>Chrome:</strong> Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. <em>Note:</em> If you follow these steps and still don't see an image, go to "chrome://flags/" and then search for "Override software rendering list" and enable this option.</p>
<p id="explanation"><strong>Safari:</strong> Open Safari's menu and select Preferences. Click on the advanced tab, and then check "Show Developer" menu. Then open the "Developer" menu and select "Enable WebGL".</p>
<p id="explanation"><strong>Firefox:</strong> Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
<p id="explanation"><strong>Other browsers:</strong> The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.</p>
<p id="explanation"><em>Note:</em> Once you went through these changes, reload the page and it should work!</p>
<p id="source">Sources: Instructions for <a href="https://www.biodigitalhuman.com/home/enabling-webgl.html">Chrome and Safari</a>, and <a href="http://www.infewbytes.com/?p=144">Firefox</a></p>
</div>
</div>

<div id="plotToggle">
<form>
Expand Down Expand Up @@ -607,7 +621,21 @@ def test_format_emperor_html_footer_string(self):
</script>
</head>

<body>
<body>

<div id="overlay">
<div>
<img src="emperor_required_resources/img/emperor.png" alt="Emperor" id="smalllogo"/>
<h1>WebGL is not enabled!</h1>
<p>Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:</p>
<p id="explanation"><strong>Chrome:</strong> Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. <em>Note:</em> If you follow these steps and still don't see an image, go to "chrome://flags/" and then search for "Override software rendering list" and enable this option.</p>
<p id="explanation"><strong>Safari:</strong> Open Safari's menu and select Preferences. Click on the advanced tab, and then check "Show Developer" menu. Then open the "Developer" menu and select "Enable WebGL".</p>
<p id="explanation"><strong>Firefox:</strong> Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
<p id="explanation"><strong>Other browsers:</strong> The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.</p>
<p id="explanation"><em>Note:</em> Once you went through these changes, reload the page and it should work!</p>
<p id="source">Sources: Instructions for <a href="https://www.biodigitalhuman.com/home/enabling-webgl.html">Chrome and Safari</a>, and <a href="http://www.infewbytes.com/?p=144">Firefox</a></p>
</div>
</div>

<div id="plotToggle">
<form>
Expand Down Expand Up @@ -781,7 +809,21 @@ def test_format_emperor_html_footer_string(self):
</script>
</head>

<body>
<body>

<div id="overlay">
<div>
<img src="emperor_required_resources/img/emperor.png" alt="Emperor" id="smalllogo"/>
<h1>WebGL is not enabled!</h1>
<p>Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:</p>
<p id="explanation"><strong>Chrome:</strong> Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. <em>Note:</em> If you follow these steps and still don't see an image, go to "chrome://flags/" and then search for "Override software rendering list" and enable this option.</p>
<p id="explanation"><strong>Safari:</strong> Open Safari's menu and select Preferences. Click on the advanced tab, and then check "Show Developer" menu. Then open the "Developer" menu and select "Enable WebGL".</p>
<p id="explanation"><strong>Firefox:</strong> Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
<p id="explanation"><strong>Other browsers:</strong> The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.</p>
<p id="explanation"><em>Note:</em> Once you went through these changes, reload the page and it should work!</p>
<p id="source">Sources: Instructions for <a href="https://www.biodigitalhuman.com/home/enabling-webgl.html">Chrome and Safari</a>, and <a href="http://www.infewbytes.com/?p=144">Firefox</a></p>
</div>
</div>

<div id="plotToggle">
<form>
Expand Down Expand Up @@ -939,7 +981,21 @@ def test_format_emperor_html_footer_string(self):
</script>
</head>

<body>
<body>

<div id="overlay">
<div>
<img src="emperor_required_resources/img/emperor.png" alt="Emperor" id="smalllogo"/>
<h1>WebGL is not enabled!</h1>
<p>Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:</p>
<p id="explanation"><strong>Chrome:</strong> Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. <em>Note:</em> If you follow these steps and still don't see an image, go to "chrome://flags/" and then search for "Override software rendering list" and enable this option.</p>
<p id="explanation"><strong>Safari:</strong> Open Safari's menu and select Preferences. Click on the advanced tab, and then check "Show Developer" menu. Then open the "Developer" menu and select "Enable WebGL".</p>
<p id="explanation"><strong>Firefox:</strong> Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
<p id="explanation"><strong>Other browsers:</strong> The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.</p>
<p id="explanation"><em>Note:</em> Once you went through these changes, reload the page and it should work!</p>
<p id="source">Sources: Instructions for <a href="https://www.biodigitalhuman.com/home/enabling-webgl.html">Chrome and Safari</a>, and <a href="http://www.infewbytes.com/?p=144">Firefox</a></p>
</div>
</div>

<div id="plotToggle">
<form>
Expand Down Expand Up @@ -1101,7 +1157,21 @@ def test_format_emperor_html_footer_string(self):
</script>
</head>

<body>
<body>

<div id="overlay">
<div>
<img src="emperor_required_resources/img/emperor.png" alt="Emperor" id="smalllogo"/>
<h1>WebGL is not enabled!</h1>
<p>Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:</p>
<p id="explanation"><strong>Chrome:</strong> Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. <em>Note:</em> If you follow these steps and still don't see an image, go to "chrome://flags/" and then search for "Override software rendering list" and enable this option.</p>
<p id="explanation"><strong>Safari:</strong> Open Safari's menu and select Preferences. Click on the advanced tab, and then check "Show Developer" menu. Then open the "Developer" menu and select "Enable WebGL".</p>
<p id="explanation"><strong>Firefox:</strong> Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.</p>
<p id="explanation"><strong>Other browsers:</strong> The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.</p>
<p id="explanation"><em>Note:</em> Once you went through these changes, reload the page and it should work!</p>
<p id="source">Sources: Instructions for <a href="https://www.biodigitalhuman.com/home/enabling-webgl.html">Chrome and Safari</a>, and <a href="http://www.infewbytes.com/?p=144">Firefox</a></p>
</div>
</div>

<div id="plotToggle">
<form>
Expand Down