added loading and fallback for no webgl

evanw · Apr 10, 2011 · 8070f5a · 8070f5a
1 parent 188a42c
commit 8070f5a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/src/core/main.js b/src/core/main.js
@@ -6,15 +6,21 @@ var filters;
 var displayShader;
 
 function initGL() {
-    var canvas3d = $('#canvas')[0];
-    gl = canvas3d.getContext('experimental-webgl');
-    displayShader = new Shader(null, '\
-        uniform sampler2D texture;\
-        varying vec2 texCoord;\
-        void main() {\
-            gl_FragColor = texture2D(texture, vec2(texCoord.x, 1.0 - texCoord.y));\
-        }\
-    ');
+    try {
+        var canvas3d = document.createElement('canvas');
+        gl = canvas3d.getContext('experimental-webgl');
+        $('.document').html('<div id="markers"></div>');
+        $('.document').append(canvas3d);
+        displayShader = new Shader(null, '\
+            uniform sampler2D texture;\
+            varying vec2 texCoord;\
+            void main() {\
+                gl_FragColor = texture2D(texture, vec2(texCoord.x, 1.0 - texCoord.y));\
+            }\
+        ');
+    } catch (e) {
+        $('.loading').html('Your browser does not support WebGL.<br>Please see <a href="http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">Getting a WebGL Implementation</a>.');
+    }
 }
 
 function reloadImage(image) {
@@ -45,7 +51,6 @@ function startLoading() {
     image.onload = function() {
         reloadImage(image);
     };
-    // image.src = 'samples/Copenhagen_small.jpg';
     image.src = 'samples/Flowers_small.jpg';
 
     // sample images

diff --git a/www/index.html b/www/index.html
@@ -23,8 +23,7 @@
 
   <div class="edit-area">
     <div class="document">
-      <div id="markers"></div>
-      <canvas id="canvas"></canvas>
+      <div class="loading">Loading...</div>
     </div>
   </div>
 

diff --git a/www/style.css b/www/style.css
@@ -1,6 +1,7 @@
 body {
   margin: 0;
   color: black;
+  overflow: hidden;
   font: 12px Arial, sans-serif;
 }
 
@@ -10,9 +11,13 @@ body {
   top: 0;
   right: 0;
   height: 40px;
+  background: #DFDFDF;
   background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#BFBFBF));
+  background: -moz-linear-gradient(#EFEFEF, #BFBFBF);
   z-index: 1;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
+  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
   line-height: 40px;
   padding-left: 10px;
 }
@@ -62,15 +67,20 @@ body {
   overflow: hidden;
   position: relative;
   display: inline-block;
+  background: white;
   border: 1px solid black;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
+  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 }
 
 .marker {
   width: 14px;
   height: 14px;
   border: 2px solid white;
   box-shadow: 0 2px 2px black, inset 0 2px 2px black;
+  -moz-box-shadow: 0 2px 2px black, inset 0 2px 2px black;
+  -webkit-box-shadow: 0 2px 2px black, inset 0 2px 2px black;
   border-radius: 100px;
   position: absolute;
   left: 50%;
@@ -89,6 +99,8 @@ body {
   border-radius: 2px;
   background: white;
   box-shadow: 0 1px 1px black;
+  -moz-box-shadow: 0 1px 1px black;
+  -webkit-box-shadow: 0 1px 1px black;
 }
 
 canvas {
@@ -104,6 +116,8 @@ canvas {
   border: 2px solid white;
   border-radius: 10px;
   box-shadow: 0 2px 4px black;
+  -moz-box-shadow: 0 2px 4px black;
+  -webkit-box-shadow: 0 2px 4px black;
   padding: 15px;
   color: white;
   display: none;
@@ -144,3 +158,7 @@ td { vertical-align: top; }
 .sample-image {
   cursor: pointer;
 }
+
+.loading {
+  padding: 10px 15px;
+}