From d84477c1c003af1da5a956435026691c962436ff Mon Sep 17 00:00:00 2001
From: Bruno Binet <bruno.binet@gmail.com>
Date: Thu, 13 Jun 2013 14:17:29 +0200
Subject: [PATCH] Bind more layer properties in layer-group example

This allows to update hue, saturation, brightness, contrast values.
---
 examples/layer-group.html | 32 ++++++++++++++++++++++++++++++++
 examples/layer-group.js   |  7 +++++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/examples/layer-group.html b/examples/layer-group.html
index 3b966c954e..747d0b4c44 100644
--- a/examples/layer-group.html
+++ b/examples/layer-group.html
@@ -54,6 +54,14 @@
                     </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>
@@ -63,6 +71,14 @@
                     </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>
@@ -72,6 +88,14 @@
                         </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>
@@ -81,6 +105,14 @@
                         </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>
diff --git a/examples/layer-group.js b/examples/layer-group.js
index 18055859e5..183e8fa9bc 100644
--- a/examples/layer-group.js
+++ b/examples/layer-group.js
@@ -42,8 +42,11 @@ var map = new ol.Map({
 function bindInputs(layerid, layer) {
   new ol.dom.Input($(layerid + ' .visible')[0])
       .bindTo('checked', layer, 'visible');
-  new ol.dom.Input($(layerid + ' .opacity')[0])
-      .bindTo('value', layer, 'opacity');
+  $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
+      function(i, v) {
+        new ol.dom.Input($(layerid + ' .' + v)[0]).bindTo('value', layer, v);
+      }
+  );
 }
 map.getLayers().forEach(function(layer, i) {
   bindInputs('#layer' + i, layer);