Better user notification if WebGL is not supported

This commit is contained in:
Frederic Junod
2013-09-06 22:35:22 +02:00
parent 393566155d
commit aa823e2b28
10 changed files with 229 additions and 156 deletions

View File

@@ -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>