ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Only show controls for WebGL settings when WebGL is used

Browse Source
This commit is contained in:
Andreas Hocevar
2014-04-22 16:29:53 +02:00
parent 16d7999deb
commit 32dda342aa
2 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
examples/bind-input.html
View File

@@ -35,6 +35,7 @@
<p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p> <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
<div id="docs"> <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>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
<p id="has-webgl" style="display: none">With the <a href="?renderer=webgl">WebGL renderer</a>, <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong> can also be controlled.</p>
<div id="no-webgl" class="alert alert-warning" style="display: none"> <div id="no-webgl" class="alert alert-warning" style="display: none">
<h4>Warning!</h4> <h4>Warning!</h4>
A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
@@ -53,14 +54,16 @@
</label> </label>
<label>opacity</label> <label>opacity</label>
<input id="opacity" type="range" min="0" max="1" step="0.01"/> <input id="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
<fieldset id="webgl" style="display: none">
<label>hue</label> <label>hue</label>
<input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/> <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label> <label>saturation</label>
<input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/> <input id="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label> <label>contrast</label>
<input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/> <input id="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label> <label>brightness</label>
<input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/> <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset> </fieldset>
</form> </form>
</div> </div>

18
examples/bind-input.js
View File

@@ -6,21 +6,19 @@ goog.require('ol.layer.Tile');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
if (!ol.BrowserFeature.HAS_WEBGL) { function checkWebGL(evt) {
var inputs = document.getElementsByClassName('webgl'); document.getElementById('no-webgl').style.display =
for (var i = 0, len = inputs.length; i < len; i++) { ol.BrowserFeature.HAS_WEBGL ? 'none' : '';
inputs[i].disabled = true; document.getElementById('has-webgl').style.display =
} ol.BrowserFeature.HAS_WEBGL && !evt.glContext ? '' : 'none';
var info = document.getElementById('no-webgl'); document.getElementById('webgl').style.display =
/** evt.glContext ? '' : 'none';
* display warning message
*/
info.style.display = '';
} }
var layer = new ol.layer.Tile({ var layer = new ol.layer.Tile({
source: new ol.source.OSM() source: new ol.source.OSM()
}); });
layer.once('precompose', checkWebGL);
var view = new ol.View2D({ var view = new ol.View2D({
center: [0, 0], center: [0, 0],