diff --git a/README.md b/README.md index 67f879c0..2da26e96 100644 --- a/README.md +++ b/README.md @@ -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: diff --git a/emperor/format.py b/emperor/format.py index 35cccd1f..d844349d 100755 --- a/emperor/format.py +++ b/emperor/format.py @@ -489,7 +489,21 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False, - + + +
+
+ +

WebGL is not enabled!

+

Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. Note: 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.

+

Safari: 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".

+

Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.

+

Other browsers: The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.

+

Note: Once you went through these changes, reload the page and it should work!

+

Sources: Instructions for Chrome and Safari, and Firefox

+
+
@@ -639,4 +653,4 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False, -""" +""" \ No newline at end of file diff --git a/emperor/support_files/emperor/css/emperor.css b/emperor/support_files/emperor/css/emperor.css index c999dfb0..04f1dc5b 100644 --- a/emperor/support_files/emperor/css/emperor.css +++ b/emperor/support_files/emperor/css/emperor.css @@ -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; @@ -254,4 +289,4 @@ .invisible { display: none; - } \ No newline at end of file + } diff --git a/emperor/support_files/emperor/js/emperor.js b/emperor/support_files/emperor/js/emperor.js index a70aa8fc..374a653f 100644 --- a/emperor/support_files/emperor/js/emperor.js +++ b/emperor/support_files/emperor/js/emperor.js @@ -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 @@ -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; diff --git a/tests/test_format.py b/tests/test_format.py index 888d8da2..cc19ee33 100755 --- a/tests/test_format.py +++ b/tests/test_format.py @@ -444,7 +444,21 @@ def test_format_emperor_html_footer_string(self): - + + +
+
+ +

WebGL is not enabled!

+

Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. Note: 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.

+

Safari: 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".

+

Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.

+

Other browsers: The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.

+

Note: Once you went through these changes, reload the page and it should work!

+

Sources: Instructions for Chrome and Safari, and Firefox

+
+
@@ -607,7 +621,21 @@ def test_format_emperor_html_footer_string(self): - + + +
+
+ +

WebGL is not enabled!

+

Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. Note: 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.

+

Safari: 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".

+

Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.

+

Other browsers: The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.

+

Note: Once you went through these changes, reload the page and it should work!

+

Sources: Instructions for Chrome and Safari, and Firefox

+
+
@@ -781,7 +809,21 @@ def test_format_emperor_html_footer_string(self): - + + +
+
+ +

WebGL is not enabled!

+

Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. Note: 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.

+

Safari: 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".

+

Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.

+

Other browsers: The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.

+

Note: Once you went through these changes, reload the page and it should work!

+

Sources: Instructions for Chrome and Safari, and Firefox

+
+
@@ -939,7 +981,21 @@ def test_format_emperor_html_footer_string(self): - + + +
+
+ +

WebGL is not enabled!

+

Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. Note: 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.

+

Safari: 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".

+

Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.

+

Other browsers: The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.

+

Note: Once you went through these changes, reload the page and it should work!

+

Sources: Instructions for Chrome and Safari, and Firefox

+
+
@@ -1101,7 +1157,21 @@ def test_format_emperor_html_footer_string(self): - + + +
+
+ +

WebGL is not enabled!

+

Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available. Here is what you can do:

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable this option if you haven't already. Note: 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.

+

Safari: 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".

+

Firefox: Go to Options through Firefox > Options or Tools > Options. Go to Advanced, then General. Check "Use hardware acceleration when available" and restart Firefox.

+

Other browsers: The only browsers that support WebGL are Chrome, Safari, and Firefox. Please switch to these browsers when using Emperor.

+

Note: Once you went through these changes, reload the page and it should work!

+

Sources: Instructions for Chrome and Safari, and Firefox

+
+