Merge pull request #990 from fredj/examples_no_webgl

Better user notification if WebGL is not supported

examples/bind-input.html

@@ -41,7 +41,11 @@
           <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
           <div id="docs">
             <p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
-            <p>Note: hue, saturation, contrast and brightness effects only work with WebGL (in WebGL-capable browsers).</p>
+            <div id="no-webgl" class="alert alert-warning" style="display: none">
+              <h4>Warning!</h4>
+              A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
+              <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
+            </div>
           </div>
           <div id="tags">input, bind, openstreetmap</div>
         </div>
@@ -56,13 +60,13 @@
               <label>opacity</label>
               <input id="opacity" type="range" min="0" max="1" step="0.01"/>
               <label>hue</label>
-              <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
               <label>saturation</label>
-              <input id="saturation" type="range" min="0" max="5" step="0.01"/>
+              <input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
               <label>contrast</label>
-              <input id="contrast" type="range" min="0" max="2" step="0.01"/>
+              <input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
               <label>brightness</label>
-              <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
+              <input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </form>
         </div>

examples/bind-input.js

@@ -4,6 +4,20 @@ goog.require('ol.View2D');
 goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
+goog.require('ol.webgl.SUPPORTED');
+
+
+if (!ol.webgl.SUPPORTED) {
+  var inputs = document.getElementsByClassName('webgl');
+  for (var i = 0, len = inputs.length; i < len; i++) {
+    inputs[i].disabled = true;
+  }
+  var info = document.getElementById('no-webgl');
+  /**
+   * display warning message
+   */
+  info.style.display = '';
+}
 
 var layer = new ol.layer.TileLayer({
   source: new ol.source.OSM()

examples/brightness-contrast.html

@@ -39,6 +39,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
           <div class="btn-group">
             <button id="increase-brightness"><i class="icon-plus"></i></button>
             <button id="reset-brightness">Brightness</button>

examples/brightness-contrast.js

@@ -3,8 +3,25 @@ goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.MapQuestOpenAerial');
+goog.require('ol.webgl.SUPPORTED');
 
 
+function setResetBrightnessButtonHTML() {
+  resetBrightness.innerHTML = 'Brightness (' +
+      layer.getBrightness().toFixed(3) + ')';
+}
+
+function setResetContrastButtonHTML() {
+  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
+}
+
+if (!ol.webgl.SUPPORTED) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
   var layer = new ol.layer.TileLayer({
     source: new ol.source.MapQuestOpenAerial()
   });
@@ -23,10 +40,6 @@ var increaseBrightness = document.getElementById('increase-brightness');
   var resetBrightness = document.getElementById('reset-brightness');
   var decreaseBrightness = document.getElementById('decrease-brightness');
 
-function setResetBrightnessButtonHTML() {
-  resetBrightness.innerHTML = 'Brightness (' +
-      layer.getBrightness().toFixed(3) + ')';
-}
   setResetBrightnessButtonHTML();
 
   increaseBrightness.addEventListener('click', function() {
@@ -46,9 +59,6 @@ var increaseContrast = document.getElementById('increase-contrast');
   var resetContrast = document.getElementById('reset-contrast');
   var decreaseContrast = document.getElementById('decrease-contrast');
 
-function setResetContrastButtonHTML() {
-  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
-}
   setResetContrastButtonHTML();
 
   increaseContrast.addEventListener('click', function() {
@@ -63,3 +73,4 @@ decreaseContrast.addEventListener('click', function() {
     layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
     setResetContrastButtonHTML();
   }, false);
+}

examples/hue-saturation.html

@@ -39,6 +39,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
           <div class="btn-group">
             <button id="increase-hue"><i class="icon-plus"></i></button>
             <button id="reset-hue">Hue</button>

examples/hue-saturation.js

@@ -4,8 +4,25 @@ goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
+goog.require('ol.webgl.SUPPORTED');
 
 
+function setResetHueButtonHTML() {
+  resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
+}
+
+function setResetSaturationButtonHTML() {
+  resetSaturation.innerHTML = 'Saturation (' +
+      layer.getSaturation().toFixed(2) + ')';
+}
+
+if (!ol.webgl.SUPPORTED) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
   var layer = new ol.layer.TileLayer({
     source: new ol.source.BingMaps({
       key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
@@ -27,9 +44,6 @@ var increaseHue = document.getElementById('increase-hue');
   var resetHue = document.getElementById('reset-hue');
   var decreaseHue = document.getElementById('decrease-hue');
 
-function setResetHueButtonHTML() {
-  resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
-}
   setResetHueButtonHTML();
 
   increaseHue.addEventListener('click', function() {
@@ -49,10 +63,6 @@ var increaseSaturation = document.getElementById('increase-saturation');
   var resetSaturation = document.getElementById('reset-saturation');
   var decreaseSaturation = document.getElementById('decrease-saturation');
 
-function setResetSaturationButtonHTML() {
-  resetSaturation.innerHTML = 'Saturation (' +
-      layer.getSaturation().toFixed(2) + ')';
-}
   setResetSaturationButtonHTML();
 
   increaseSaturation.addEventListener('click', function() {
@@ -67,3 +77,4 @@ decreaseSaturation.addEventListener('click', function() {
     layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
     setResetSaturationButtonHTML();
   }, false);
+}

examples/side-by-side.html

@@ -36,6 +36,9 @@
         <div class="span4">
           <h4>WebGL</h4>
           <div id="webglMap" class="map"></div>
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
         </div>
         <div class="span4">
           <h4>DOM</h4>

examples/side-by-side.js

@@ -3,6 +3,7 @@ goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.MapQuestOpenAerial');
+goog.require('ol.webgl.SUPPORTED');
 
 
 var domMap = new ol.Map({
@@ -19,14 +20,20 @@ var domMap = new ol.Map({
   })
 });
 
-
+if (ol.webgl.SUPPORTED) {
   var webglMap = new ol.Map({
     renderer: ol.RendererHint.WEBGL,
     target: 'webglMap'
   });
   webglMap.bindTo('layergroup', domMap);
   webglMap.bindTo('view', domMap);
-
+} else {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+}
 
 var canvasMap = new ol.Map({
   renderer: ol.RendererHint.CANVAS,

examples/ten-thousand-points.html

@@ -31,6 +31,10 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
         </div>
       </div>
 

examples/ten-thousand-points.js

@@ -9,6 +9,7 @@ goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.VectorLayer2');
 goog.require('ol.source.OSM');
 goog.require('ol.source.VectorSource2');
+goog.require('ol.webgl.SUPPORTED');
 
 
 // WARNING
@@ -16,6 +17,13 @@ goog.require('ol.source.VectorSource2');
 // calls used here are internal and low-level and are not representative of the
 // final API.
 
+if (!ol.webgl.SUPPORTED) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
 
   var pointCollection = ol.geom2.PointCollection.createEmpty(101 * 101);
   var i, j, x, y;
@@ -66,3 +74,4 @@ var map = new ol.Map({
       zoom: 0
     })
   });
+}

src/ol/canvas/canvas.exports

@@ -0,0 +1 @@
+@exportSymbol ol.canvas.SUPPORTED

src/ol/canvas/canvas.js

@@ -1,4 +1,5 @@
 goog.provide('ol.canvas');
+goog.provide('ol.canvas.SUPPORTED');
 
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');

src/ol/renderer/canvas/canvasrenderer.js

@@ -1,6 +1,6 @@
 goog.provide('ol.renderer.canvas.SUPPORTED');
 
-goog.require('ol.canvas');
+goog.require('ol.canvas.SUPPORTED');
 
 
 /**

src/ol/renderer/webgl/webglrenderer.js

@@ -1,6 +1,6 @@
 goog.provide('ol.renderer.webgl.SUPPORTED');
 
-goog.require('ol.webgl');
+goog.require('ol.webgl.SUPPORTED');
 
 
 /**

src/ol/webgl/webgl.exports

@@ -0,0 +1 @@
+@exportSymbol ol.webgl.SUPPORTED

src/ol/webgl/webgl.js

@@ -1,4 +1,5 @@
 goog.provide('ol.webgl');
+goog.provide('ol.webgl.SUPPORTED');
 goog.provide('ol.webgl.WebGLContextEventType');
 
 goog.require('goog.dom');