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

[jacksonchen]

Displays an info box if WebGL is not detected (#165). The info box contains information on how to enable WebGL on three browsers: Chrome, Safari, and Firefox.

[ghost]

Build results will soon be (or already are) available at: http://ci.qiime.org/job/emperor-github-pr/114/

[ElDeveloper]

Thanks for adding this, this is exactly one of the things that we needed the most!

I think this should not show the sidebar and in turn should only show a white background with this message at the center. It would also make sense to add a small explanation of what is happening, something along the lines of: "Emperor's visualization framework is WebGL based, it seems that your system doesn't have this resource available ... etc ".

Some suggestions:

• Add some formatting to highlight the name of the browsers (maybe bold fonts or maybe small icons).
• Maybe adding the emperor logo somewhere?

[ElDeveloper]

An extra addition to this is to mention that if you are using chrome and still not seeing an image, go to chrome://flags and then look to enable Override software rendering. Obviously this will be specific for chrome but it's worth noting.

[ghost]

Build results will soon be (or already are) available at: http://ci.qiime.org/job/emperor-github-pr/122/

[ElDeveloper]

Woooow! This looks really pretty!!! Thanks much @jacksonchen.

Just a couple suggestions:

• Disable it if you haven't already -> Disable this option if you haven't already.
• look to enable Override software rendering -> search for "Override software rendering list and enable this option".
• 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. -> 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".
• Title and main explanation should be centered (as they currently are) but the rest of the text should be set as justify.
• If there's a source for this information we should cite it.
• Make the font a little bigger, perhaps just overall 2 points or 3 bigger.

After this, it should be ready to merge.

[jacksonchen]

Thanks for the feedback! I added your suggestions and here is the commit. Hopefully it is in the final form to be merged, thanks!

[ghost]

Build results will soon be (or already are) available at: http://ci.qiime.org/job/emperor-github-pr/123/

[ElDeveloper]

Hello @jacksonchen I think this is it. @antgonza suggested I tested this on IE, it of course didn't work and the error message was presented, so this is working great! The two things that I'm going to suggest are to:

• Mention these are the only browsers supported.
• Mention to reload the pages once they have gone through these changes.

If people is curious, this is how Emperor looks under IE:

[antgonza]

Looks pretty, thank you @jacksonchen

[ElDeveloper]

It is indeed really pretty!

[ghost]

Build results will soon be (or already are) available at: http://ci.qiime.org/job/emperor-github-pr/124/

[ElDeveloper]

Fantastic, thank you very much for the changes @jacksonchen!!