From eade432322a8cad41b547d9d3379049567803987 Mon Sep 17 00:00:00 2001 From: Jackson Chen Date: Mon, 16 Sep 2013 00:07:08 -0600 Subject: [PATCH 1/4] Fixes #165 by displaying an info box if WebGL is not detected --- emperor/format.py | 10 ++++ emperor/support_files/emperor/css/emperor.css | 21 ++++++++ emperor/support_files/emperor/js/emperor.js | 11 +++- tests/test_format.py | 50 +++++++++++++++++++ 4 files changed, 90 insertions(+), 2 deletions(-) diff --git a/emperor/format.py b/emperor/format.py index 35cccd1f..da26d410 100755 --- a/emperor/format.py +++ b/emperor/format.py @@ -491,6 +491,16 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False, +
+
+

WebGL is not enabled!

+

Here is what you can do

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

+

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.

+

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

+
+
+
diff --git a/emperor/support_files/emperor/css/emperor.css b/emperor/support_files/emperor/css/emperor.css index c999dfb0..7086abca 100644 --- a/emperor/support_files/emperor/css/emperor.css +++ b/emperor/support_files/emperor/css/emperor.css @@ -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; diff --git a/emperor/support_files/emperor/js/emperor.js b/emperor/support_files/emperor/js/emperor.js index a70aa8fc..393c31c4 100644 --- a/emperor/support_files/emperor/js/emperor.js +++ b/emperor/support_files/emperor/js/emperor.js @@ -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 @@ -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; diff --git a/tests/test_format.py b/tests/test_format.py index 888d8da2..7c5f3d6b 100755 --- a/tests/test_format.py +++ b/tests/test_format.py @@ -446,6 +446,16 @@ def test_format_emperor_html_footer_string(self): +
+
+

WebGL is not enabled!

+

Here is what you can do

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

+

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.

+

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

+
+
+
@@ -609,6 +619,16 @@ def test_format_emperor_html_footer_string(self): +
+
+

WebGL is not enabled!

+

Here is what you can do

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

+

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.

+

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

+
+
+
@@ -783,6 +803,16 @@ def test_format_emperor_html_footer_string(self): +
+
+

WebGL is not enabled!

+

Here is what you can do

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

+

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.

+

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

+
+
+
@@ -941,6 +971,16 @@ def test_format_emperor_html_footer_string(self): +
+
+

WebGL is not enabled!

+

Here is what you can do

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

+

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.

+

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

+
+
+
@@ -1103,6 +1143,16 @@ def test_format_emperor_html_footer_string(self): +
+
+

WebGL is not enabled!

+

Here is what you can do

+

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

+

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.

+

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

+
+
+
From 311e836af316fd7a258b2fd11185d1b8f0f3c302 Mon Sep 17 00:00:00 2001 From: Jackson Chen Date: Thu, 19 Sep 2013 14:48:37 -0600 Subject: [PATCH 2/4] Hides everything but text box if WebGL is disabled. The text box is also updated to include a logo and more text. --- README.md | 2 +- emperor/format.py | 13 +++-- emperor/support_files/emperor/css/emperor.css | 6 +- emperor/support_files/emperor/js/emperor.js | 10 +++- tests/test_format.py | 55 ++++++++++--------- 5 files changed, 51 insertions(+), 35 deletions(-) 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 da26d410..9ffb63e8 100755 --- a/emperor/format.py +++ b/emperor/format.py @@ -489,15 +489,16 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False, - +
+

WebGL is not enabled!

-

Here is what you can do

-

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

-

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.

-

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

+

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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

+

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.

+

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

@@ -649,4 +650,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 7086abca..f64a3694 100644 --- a/emperor/support_files/emperor/css/emperor.css +++ b/emperor/support_files/emperor/css/emperor.css @@ -6,7 +6,11 @@ overflow: hidden; float: left; } - + + #smalllogo { + width:150px; + height:45px; + } #overlay { visibility: hidden; position: absolute; diff --git a/emperor/support_files/emperor/js/emperor.js b/emperor/support_files/emperor/js/emperor.js index 393c31c4..374a653f 100644 --- a/emperor/support_files/emperor/js/emperor.js +++ b/emperor/support_files/emperor/js/emperor.js @@ -1968,8 +1968,14 @@ 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"; + 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 diff --git a/tests/test_format.py b/tests/test_format.py index 7c5f3d6b..1d292f14 100755 --- a/tests/test_format.py +++ b/tests/test_format.py @@ -444,15 +444,16 @@ def test_format_emperor_html_footer_string(self): - +
+

WebGL is not enabled!

-

Here is what you can do

-

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

-

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.

-

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

+

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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

+

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.

+

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

@@ -617,15 +618,16 @@ def test_format_emperor_html_footer_string(self): - +
+

WebGL is not enabled!

-

Here is what you can do

-

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

-

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.

-

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

+

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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

+

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.

+

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

@@ -801,15 +803,16 @@ def test_format_emperor_html_footer_string(self): - +
+

WebGL is not enabled!

-

Here is what you can do

-

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

-

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.

-

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

+

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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

+

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.

+

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

@@ -969,15 +972,16 @@ def test_format_emperor_html_footer_string(self): - +
+

WebGL is not enabled!

-

Here is what you can do

-

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

-

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.

-

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

+

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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

+

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.

+

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

@@ -1141,15 +1145,16 @@ def test_format_emperor_html_footer_string(self): - +
+

WebGL is not enabled!

-

Here is what you can do

-

Chrome: Type "chrome://flags/" into the address bar, then search for "Disable WebGL". Disable it if you haven't already.

-

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.

-

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

+

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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

+

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.

+

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

From 40868ea56acfbd118d9fc0ca302c72923fe7f23e Mon Sep 17 00:00:00 2001 From: Jackson Chen Date: Thu, 19 Sep 2013 16:51:17 -0600 Subject: [PATCH 3/4] Fixes some phrases and adds sources for information. --- emperor/format.py | 9 ++-- emperor/support_files/emperor/css/emperor.css | 14 +++++- tests/test_format.py | 45 ++++++++++--------- 3 files changed, 42 insertions(+), 26 deletions(-) diff --git a/emperor/format.py b/emperor/format.py index 9ffb63e8..5f9aff87 100755 --- a/emperor/format.py +++ b/emperor/format.py @@ -495,10 +495,11 @@ 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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

-

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.

-

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

+

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.

+

Sources: Instructions for Chrome and Safari, and Firefox

diff --git a/emperor/support_files/emperor/css/emperor.css b/emperor/support_files/emperor/css/emperor.css index f64a3694..094c89f8 100644 --- a/emperor/support_files/emperor/css/emperor.css +++ b/emperor/support_files/emperor/css/emperor.css @@ -11,6 +11,7 @@ width:150px; height:45px; } + #overlay { visibility: hidden; position: absolute; @@ -18,7 +19,7 @@ top: 0px; width:100%; height:100%; - font-size: 12px; + font-size: 14px; text-align:center; z-index: 1000; } @@ -31,6 +32,15 @@ padding:15px; text-align:center; } + + #explanation { + text-align:left; + } + + #source { + font-size:11px; + text-align:left; + } div.plotWrapper { position: relative; @@ -279,4 +289,4 @@ .invisible { display: none; - } \ No newline at end of file + } diff --git a/tests/test_format.py b/tests/test_format.py index 1d292f14..0bc6a7bc 100755 --- a/tests/test_format.py +++ b/tests/test_format.py @@ -450,10 +450,11 @@ 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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

-

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.

-

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

+

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.

+

Sources: Instructions for Chrome and Safari, and Firefox

@@ -624,10 +625,11 @@ 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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

-

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.

-

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

+

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.

+

Sources: Instructions for Chrome and Safari, and Firefox

@@ -809,10 +811,11 @@ 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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

-

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.

-

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

+

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.

+

Sources: Instructions for Chrome and Safari, and Firefox

@@ -978,10 +981,11 @@ 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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

-

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.

-

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

+

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.

+

Sources: Instructions for Chrome and Safari, and Firefox

@@ -1151,10 +1155,11 @@ 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 it if you haven't already. Note: If you follow these steps and still don't see an image, go to "chrome://flags/" and then look to enable Override software rendering.

-

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.

-

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

+

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.

+

Sources: Instructions for Chrome and Safari, and Firefox

From 04e403805ea8396a534800d573a344a2921e8067 Mon Sep 17 00:00:00 2001 From: Jackson Chen Date: Fri, 20 Sep 2013 12:30:02 -0600 Subject: [PATCH 4/4] Adds the browsers supported and more instructions in the text box that appears when WebGL is disbled. --- emperor/format.py | 2 ++ emperor/support_files/emperor/css/emperor.css | 6 +++--- tests/test_format.py | 10 ++++++++++ 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/emperor/format.py b/emperor/format.py index 5f9aff87..d844349d 100755 --- a/emperor/format.py +++ b/emperor/format.py @@ -499,6 +499,8 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False,

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

diff --git a/emperor/support_files/emperor/css/emperor.css b/emperor/support_files/emperor/css/emperor.css index 094c89f8..04f1dc5b 100644 --- a/emperor/support_files/emperor/css/emperor.css +++ b/emperor/support_files/emperor/css/emperor.css @@ -19,14 +19,14 @@ top: 0px; width:100%; height:100%; - font-size: 14px; + font-size: 13px; text-align:center; z-index: 1000; } #overlay div { - width:300px; - margin: 100px auto; + width:325px; + margin: 75px auto; background-color: #fff; border:1px solid #000; padding:15px; diff --git a/tests/test_format.py b/tests/test_format.py index 0bc6a7bc..cc19ee33 100755 --- a/tests/test_format.py +++ b/tests/test_format.py @@ -454,6 +454,8 @@ def test_format_emperor_html_footer_string(self):

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

@@ -629,6 +631,8 @@ def test_format_emperor_html_footer_string(self):

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

@@ -815,6 +819,8 @@ def test_format_emperor_html_footer_string(self):

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

@@ -985,6 +991,8 @@ def test_format_emperor_html_footer_string(self):

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

@@ -1159,6 +1167,8 @@ def test_format_emperor_html_footer_string(self):

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