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

Remove hue, saturation, contrast, and brightness

Browse Source
This commit is contained in:
Tim Schaub
2015-09-21 07:34:41 +09:00
parent 6c5775e6f6
commit d6f03697d7
22 changed files with 46 additions and 1686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/brightness-contrast.css
View File

@@ -1,7 +0,0 @@
#reset-brightness {
min-width: 138px;
}
#reset-contrast {
min-width: 120px;
}

27
examples/brightness-contrast.html
View File

@@ -1,27 +0,0 @@
---
template: example.html
title: Brightness/contrast example
shortdesc: Example of brightness/contrast control on the client (WebGL only).
docs: >
This example shows how to control brightness/contrast on the client,
the example is limited to WebGL.
tags: "brightness, contrast, webgl"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="no-webgl" class="alert alert-danger" 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="fa fa-plus"></i></button>
<button id="reset-brightness">Brightness</button>
<button id="decrease-brightness"><i class="fa fa-minus"></i></button>
</div>
<div class="btn-group">
<button id="increase-contrast"><i class="fa fa-plus"></i></button>
<button id="reset-contrast">Contrast</button>
<button id="decrease-contrast"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>

75
examples/brightness-contrast.js
View File

@@ -1,75 +0,0 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.has');
goog.require('ol.layer.Tile');
goog.require('ol.source.MapQuest');
function setResetBrightnessButtonHTML() {
resetBrightness.innerHTML = 'Brightness (' +
layer.getBrightness().toFixed(3) + ')';
}
function setResetContrastButtonHTML() {
resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
}
if (!ol.has.WEBGL) {
var info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
} else {
var layer = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
var map = new ol.Map({
layers: [layer],
renderer: 'webgl',
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var increaseBrightness = document.getElementById('increase-brightness');
var resetBrightness = document.getElementById('reset-brightness');
var decreaseBrightness = document.getElementById('decrease-brightness');
setResetBrightnessButtonHTML();
increaseBrightness.addEventListener('click', function() {
layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
setResetBrightnessButtonHTML();
}, false);
resetBrightness.addEventListener('click', function() {
layer.setBrightness(0);
setResetBrightnessButtonHTML();
}, false);
decreaseBrightness.addEventListener('click', function() {
layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
setResetBrightnessButtonHTML();
}, false);
var increaseContrast = document.getElementById('increase-contrast');
var resetContrast = document.getElementById('reset-contrast');
var decreaseContrast = document.getElementById('decrease-contrast');
setResetContrastButtonHTML();
increaseContrast.addEventListener('click', function() {
layer.setContrast(layer.getContrast() + 0.125);
setResetContrastButtonHTML();
}, false);
resetContrast.addEventListener('click', function() {
layer.setContrast(1);
setResetContrastButtonHTML();
}, false);
decreaseContrast.addEventListener('click', function() {
layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
setResetContrastButtonHTML();
}, false);
}

6
examples/hue-saturation.css
View File

@@ -1,6 +0,0 @@
#reset-hue {
min-width: 90px;
}
#reset-saturation {
min-width: 124px;
}

26
examples/hue-saturation.html
View File

@@ -1,26 +0,0 @@
---
template: example.html
title: Hue/saturation example
shortdesc: Example of hue/saturation control on the client (WebGL only).
docs: >
Example of hue/saturation control on the client (WebGL only).
tags: "custom, control"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="no-webgl" class="alert alert-danger" 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="fa fa-plus"></i></button>
<button id="reset-hue">Hue</button>
<button id="decrease-hue"><i class="fa fa-minus"></i></button>
</div>
<div class="btn-group">
<button id="increase-saturation"><i class="fa fa-plus"></i></button>
<button id="reset-saturation">Saturation</button>
<button id="decrease-saturation"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>

79
examples/hue-saturation.js
View File

@@ -1,79 +0,0 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.has');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
goog.require('ol.source.BingMaps');
function setResetHueButtonHTML() {
resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
}
function setResetSaturationButtonHTML() {
resetSaturation.innerHTML = 'Saturation (' +
layer.getSaturation().toFixed(2) + ')';
}
if (!ol.has.WEBGL) {
var info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
} else {
var layer = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Aerial'
})
});
var map = new ol.Map({
layers: [layer],
renderer: 'webgl',
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-9.375, 51.483333]),
zoom: 15
})
});
var increaseHue = document.getElementById('increase-hue');
var resetHue = document.getElementById('reset-hue');
var decreaseHue = document.getElementById('decrease-hue');
setResetHueButtonHTML();
increaseHue.addEventListener('click', function() {
layer.setHue(layer.getHue() + 0.25);
setResetHueButtonHTML();
}, false);
resetHue.addEventListener('click', function() {
layer.setHue(0);
setResetHueButtonHTML();
}, false);
decreaseHue.addEventListener('click', function() {
layer.setHue(layer.getHue() - 0.25);
setResetHueButtonHTML();
}, false);
var increaseSaturation = document.getElementById('increase-saturation');
var resetSaturation = document.getElementById('reset-saturation');
var decreaseSaturation = document.getElementById('decrease-saturation');
setResetSaturationButtonHTML();
increaseSaturation.addEventListener('click', function() {
layer.setSaturation(layer.getSaturation() + 0.25);
setResetSaturationButtonHTML();
}, false);
resetSaturation.addEventListener('click', function() {
layer.setSaturation(1);
setResetSaturationButtonHTML();
}, false);
decreaseSaturation.addEventListener('click', function() {
layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
setResetSaturationButtonHTML();
}, false);
}

32
examples/layer-group.html
View File

@@ -20,14 +20,6 @@ tags: "tilejson, input, bind, group, layergroup"
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>Layer group</span>
@@ -37,14 +29,6 @@ tags: "tilejson, input, bind, group, layergroup"
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
<ul>
<li><span>Food insecurity layer</span>
@@ -54,14 +38,6 @@ tags: "tilejson, input, bind, group, layergroup"
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>World borders layer</span>
@@ -71,14 +47,6 @@ tags: "tilejson, input, bind, group, layergroup"
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
</ul>

14
examples/layer-group.js
View File

@@ -44,15 +44,11 @@ function bindInputs(layerid, layer) {
});
visibilityInput.prop('checked', layer.getVisible());
$.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
function(i, v) {
var input = $(layerid + ' input.' + v);
input.on('input change', function() {
layer.set(v, parseFloat(this.value));
});
input.val(String(layer.get(v)));
}
);
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function() {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
map.getLayers().forEach(function(layer, i) {
bindInputs('#layer' + i, layer);