Merge pull request #70 from ux3d/fix/exposureUI

Fix/exposure UI (GSVN-152)
KhronosGroup · Jan 18, 2021 · 386d6ca · 386d6ca
2 parents 097d499 + f4fafa8
commit 386d6ca
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/example/index.html b/example/index.html
@@ -89,11 +89,18 @@
         </div>
     </section>
 </script>
-<script id="sliderTemplate" type="text/x-template">
+<script id="exposureTemplate" type="text/x-template">
     <div>
         <label class="label">{{ name }}</label>
-        <b-numberinput  v-model="value" min="0" max="100" :exponential=".5"></b-numberinput >
-        <b-slider v-model="value"></b-slider>
+        <b-slider v-model="value" :min="-3" v-bind:max="3" :step=0.3333333 class="exposureSlider" ticks>
+            <b-slider-tick :value="-3" class="exposureSliderMarker">-3</b-slider-tick>
+            <b-slider-tick :value="-2" class="exposureSliderMarker">-2</b-slider-tick>
+            <b-slider-tick :value="-1" class="exposureSliderMarker">-1</b-slider-tick>
+            <b-slider-tick :value="0" class="exposureSliderMarker">0</b-slider-tick>
+            <b-slider-tick :value="1" class="exposureSliderMarker">+1</b-slider-tick>
+            <b-slider-tick :value="2" class="exposureSliderMarker">+2</b-slider-tick>
+            <b-slider-tick :value="3" class="exposureSliderMarker">+3</b-slider-tick>
+        </b-slider>
     </div>
 </script>
 <script id="colorPickerTemplate" type="text/x-template">
@@ -177,7 +184,7 @@ <h2>XMP</h2>
     <div>
         <h2>Advanced Controls</h2>
         <drop-down-element name="Debug Channels" v-on:selectionchanged="debugchannelchanged" v-bind:dropdowncontent="debugchannels"></drop-down-element>
-        <slider-element class="smallerLabel" name="Exposure" v-on:valuechanged="exposurechanged"></slider-element>
+        <exposure-element class="smallerLabel" name="Exposure" v-on:valuechanged="exposurechanged"></exposure-element>
         <drop-down-element class="smallerLabel" name="Tone Map" v-on:selectionchanged="tonemapchanged" v-bind:dropdowncontent="tonemaps"></drop-down-element>
         <b-switch v-model="skinning" v-on:input="skinningchanged">Skinning</b-switch>
         <br>

diff --git a/example/src/logic/uimodel.js b/example/src/logic/uimodel.js
@@ -49,7 +49,7 @@ class UIModel
             startWith(DebugOutput.NONE)
         );
 
-        this.exposure = app.exposureChanged$.pipe(pluck("event", "msg"));
+        this.exposurecompensation = app.exposureChanged$.pipe(pluck("event", "msg"));
         this.skinningEnabled = app.skinningChanged$.pipe(pluck("event", "msg"));
         this.morphingEnabled = app.morphingChanged$.pipe(pluck("event", "msg"));
         this.iblEnabled = app.iblChanged$.pipe(pluck("event", "msg"));

diff --git a/example/src/main.js b/example/src/main.js
@@ -93,8 +93,8 @@ async function main()
         state.renderingParameters.skinning = skinningEnabled;
     });
 
-    uiModel.exposure.subscribe( exposure => {
-        state.renderingParameters.exposure = exposure;
+    uiModel.exposurecompensation.subscribe( exposurecompensation => {
+        state.renderingParameters.exposure = Math.pow(2, exposurecompensation);
     });
 
     uiModel.morphingEnabled.subscribe( morphingEnabled => {

diff --git a/example/src/ui/ui.js b/example/src/ui/ui.js
@@ -91,11 +91,11 @@ Vue.component('check-box-element', {
     },
     template:'#checkBoxTemplate'
 });
-Vue.component('slider-element', {
+Vue.component('exposure-element', {
     props: ['name'],
     data() {
         return {
-            value: 1
+            value: 0,
         };
     },
     updated : function()
@@ -109,7 +109,7 @@ Vue.component('slider-element', {
             this.value = value;
         }
     },
-    template:'#sliderTemplate'
+    template:'#exposureTemplate'
 });
 Vue.component('color-picker-element', {
     props: ['name'],

diff --git a/example/ui.css b/example/ui.css
@@ -247,3 +247,22 @@ div .field.has-addons
 {
     display: block;
 }
+
+.b-slider.exposureSlider
+{
+    margin-bottom: 50px;
+}
+
+.exposureSliderMarker
+{
+    color: #e2e2e2;
+}
+
+.b-slider-tick-label
+{
+    margin-top: 8px;
+    margin-left: -5px;
+    line-height: 0.5;
+    position: relative !important;
+    text-align: center;
+}