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

Display hue/saturation value in button text

Browse Source
This commit is contained in:
Éric Lemoine
2013-05-31 15:47:17 +02:00
parent 84b1886666
commit 93fd685ca7
2 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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);