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

Merge pull request #752 from elemoine/color-examples

Browse Source 
Add color filter values to buttons
This commit is contained in:
Éric Lemoine
2013-05-31 07:22:53 -07:00
parent 075f4aadc7 93fd685ca7
commit a2316e6e14
4 changed files with 60 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/brightness-contrast.html
+8
View File
@@ -8,6 +8,14 @@
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Brightness/contrast example</title> <title>Brightness/contrast example</title>
<style>
#reset-brightness {
min-width: 138px;
}
#reset-contrast {
min-width: 120px;
}
</style>
</head> </head>
<body> <body>
examples/brightness-contrast.js
+22 -4
View File
@@ -20,27 +20,45 @@ var map = new ol.Map({
}); });
var increaseBrightness = document.getElementById('increase-brightness'); 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() + ')';
}
setResetBrightnessButtonHTML();
increaseBrightness.addEventListener('click', function() { increaseBrightness.addEventListener('click', function() {
layer.setBrightness(layer.getBrightness() + 0.125); layer.setBrightness(layer.getBrightness() + 0.125);
setResetBrightnessButtonHTML();
}, false); }, false);
var resetBrightness = document.getElementById('reset-brightness');
resetBrightness.addEventListener('click', function() { resetBrightness.addEventListener('click', function() {
layer.setBrightness(0); layer.setBrightness(0);
setResetBrightnessButtonHTML();
}, false); }, false);
var decreaseBrightness = document.getElementById('decrease-brightness');
decreaseBrightness.addEventListener('click', function() { decreaseBrightness.addEventListener('click', function() {
layer.setBrightness(layer.getBrightness() - 0.125); layer.setBrightness(layer.getBrightness() - 0.125);
setResetBrightnessButtonHTML();
}, false); }, false);
var increaseContrast = document.getElementById('increase-contrast'); 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() + ')';
}
setResetContrastButtonHTML();
increaseContrast.addEventListener('click', function() { increaseContrast.addEventListener('click', function() {
layer.setContrast(layer.getContrast() + 0.125); layer.setContrast(layer.getContrast() + 0.125);
setResetContrastButtonHTML();
}, false); }, false);
var resetContrast = document.getElementById('reset-contrast');
resetContrast.addEventListener('click', function() { resetContrast.addEventListener('click', function() {
layer.setContrast(1); layer.setContrast(1);
setResetContrastButtonHTML();
}, false); }, false);
var decreaseContrast = document.getElementById('decrease-contrast');
decreaseContrast.addEventListener('click', function() { decreaseContrast.addEventListener('click', function() {
layer.setContrast(layer.getContrast() - 0.125); layer.setContrast(layer.getContrast() - 0.125);
setResetContrastButtonHTML();
}, false); }, false);
examples/hue-saturation.html
+8
View File
@@ -8,6 +8,14 @@
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Hue/saturation example</title> <title>Hue/saturation example</title>
<style>
#reset-hue {
min-width: 90px;
}
#reset-saturation {
min-width: 124px;
}
</style>
</head> </head>
<body> <body>
examples/hue-saturation.js
+22 -4
View File
@@ -24,27 +24,45 @@ var map = new ol.Map({
}); });
var increaseHue = document.getElementById('increase-hue'); 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() + ')';
}
setResetHueButtonHTML();
increaseHue.addEventListener('click', function() { increaseHue.addEventListener('click', function() {
layer.setHue(layer.getHue() + 0.25); layer.setHue(layer.getHue() + 0.25);
setResetHueButtonHTML();
}, false); }, false);
var resetHue = document.getElementById('reset-hue');
resetHue.addEventListener('click', function() { resetHue.addEventListener('click', function() {
layer.setHue(0); layer.setHue(0);
setResetHueButtonHTML();
}, false); }, false);
var decreaseHue = document.getElementById('decrease-hue');
decreaseHue.addEventListener('click', function() { decreaseHue.addEventListener('click', function() {
layer.setHue(layer.getHue() - 0.25); layer.setHue(layer.getHue() - 0.25);
setResetHueButtonHTML();
}, false); }, false);
var increaseSaturation = document.getElementById('increase-saturation'); 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() + ')';
}
setResetSaturationButtonHTML();
increaseSaturation.addEventListener('click', function() { increaseSaturation.addEventListener('click', function() {
layer.setSaturation(layer.getSaturation() + 0.25); layer.setSaturation(layer.getSaturation() + 0.25);
setResetSaturationButtonHTML();
}, false); }, false);
var resetSaturation = document.getElementById('reset-saturation');
resetSaturation.addEventListener('click', function() { resetSaturation.addEventListener('click', function() {
layer.setSaturation(1); layer.setSaturation(1);
setResetSaturationButtonHTML();
}, false); }, false);
var decreaseSaturation = document.getElementById('decrease-saturation');
decreaseSaturation.addEventListener('click', function() { decreaseSaturation.addEventListener('click', function() {
layer.setSaturation(layer.getSaturation() - 0.25); layer.setSaturation(layer.getSaturation() - 0.25);
setResetSaturationButtonHTML();
}, false); }, false);