diff --git a/examples/brightness-contrast.html b/examples/brightness-contrast.html new file mode 100644 index 0000000000..503a48ee27 --- /dev/null +++ b/examples/brightness-contrast.html @@ -0,0 +1,62 @@ + + + + + + + + + + Brightness/contrast example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+

Brightness/contrast example

+

Example of brightness/contrast control on the client (WebGL only).

+
+

See the brightness-contrast.js source to see how this is done.

+
+
brightness, contrast, webgl
+
+ +
+ +
+ + + + + diff --git a/examples/brightness-contrast.js b/examples/brightness-contrast.js new file mode 100644 index 0000000000..fe87f6ccaf --- /dev/null +++ b/examples/brightness-contrast.js @@ -0,0 +1,47 @@ +goog.require('ol.Coordinate'); +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.MapQuestOpenAerial'); + + +var layer = new ol.layer.TileLayer({ + source: new ol.source.MapQuestOpenAerial() +}); + +var map = new ol.Map({ + layers: [layer], + renderer: ol.RendererHint.WEBGL, + target: 'map', + view: new ol.View2D({ + center: new ol.Coordinate(0, 0), + zoom: 2 + }) +}); + +var increaseBrightness = document.getElementById('increase-brightness'); +increaseBrightness.addEventListener('click', function() { + layer.setBrightness(layer.getBrightness() + 0.125); +}, false); +var resetBrightness = document.getElementById('reset-brightness'); +resetBrightness.addEventListener('click', function() { + layer.setBrightness(0); +}, false); +var decreaseBrightness = document.getElementById('decrease-brightness'); +decreaseBrightness.addEventListener('click', function() { + layer.setBrightness(layer.getBrightness() - 0.125); +}, false); + +var increaseContrast = document.getElementById('increase-contrast'); +increaseContrast.addEventListener('click', function() { + layer.setContrast(layer.getContrast() + 0.125); +}, false); +var resetContrast = document.getElementById('reset-contrast'); +resetContrast.addEventListener('click', function() { + layer.setContrast(1); +}, false); +var decreaseContrast = document.getElementById('decrease-contrast'); +decreaseContrast.addEventListener('click', function() { + layer.setContrast(layer.getContrast() - 0.125); +}, false);