WIP - adding haze blend out colour

This commit is contained in:
Nissim Hadar 2017-10-05 13:20:21 -07:00
parent cbaae2c79b
commit 2e2364e03f
2 changed files with 60 additions and 3 deletions

View file

@ -567,9 +567,24 @@
<div class="color-picker" id="property-zone-haze-blend-in-color"></div>
<legend>Haze Blend In Color</legend>
<div class="tuple">
<div><input type="number" class="red" id="property-zone-haze-blend-in-color-red"><label for="property-zone-haze-blend-in-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-zone-haze-blend-in-color-green"><label for="property-zone-haze-blend-in-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-zone-haze-blend-in-color-blue"><label for="property-zone-haze-blend-in-color-blue">Blue:</label></div>
<div><input type="number" class="red" id="property-zone-haze-blend-in-color-red" min="0" max="255" step="1">
<label for="property-zone-haze-blend-in-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-zone-haze-blend-in-color-green" min="0" max="255" step="1">
<label for="property-zone-haze-blend-in-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-zone-haze-blend-in-color-blue" min="0" max="255" step="1">
<label for="property-zone-haze-blend-in-color-blue">Blue:</label></div>
</div>
</fieldset>
<fieldset class="zone-group zone-section haze-section property rgb fstuple">
<div class="color-picker" id="property-zone-haze-blend-out-color"></div>
<legend>Haze Blend Out Color</legend>
<div class="tuple">
<div><input type="number" class="red" id="property-zone-haze-blend-out-color-red" min="0" max="255" step="1">
<label for="property-zone-haze-blend-out-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-zone-haze-blend-out-color-green" min="0" max="255" step="1">
<label for="property-zone-haze-blend-out-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-zone-haze-blend-out-color-blue" min="0" max="255" step="1">
<label for="property-zone-haze-blend-out-color-blue">Blue:</label></div>
</div>
</fieldset>
</fieldset>

View file

@ -664,6 +664,10 @@ function loaded() {
var elZoneHazeBlendInColorRed = document.getElementById("property-zone-haze-blend-in-color-red");
var elZoneHazeBlendInColorGreen = document.getElementById("property-zone-haze-blend-in-color-green");
var elZoneHazeBlendInColorBlue = document.getElementById("property-zone-haze-blend-in-color-blue");
var elZoneHazeBlendOutColor = document.getElementById("property-zone-haze-blend-out-color");
var elZoneHazeBlendOutColorRed = document.getElementById("property-zone-haze-blend-out-color-red");
var elZoneHazeBlendOutColorGreen = document.getElementById("property-zone-haze-blend-out-color-green");
var elZoneHazeBlendOutColorBlue = document.getElementById("property-zone-haze-blend-out-color-blue");
var elZoneHazeBackgroundBlend = document.getElementById("property-zone-haze-background-blend");
var elZoneHazeAltitude = document.getElementById("property-zone-haze-altitude");
@ -1019,6 +1023,17 @@ function loaded() {
elZoneHazeBlendInColorBlue.value = properties.haze.hazeBlendInColor.blue;
elZoneHazeBackgroundBlend.value = properties.haze.hazeBackgroundBlend.toFixed(2);
elZoneHazeBlendOutColor.style.backgroundColor = "rgb(" +
properties.haze.hazeBlendOutColor.red + "," +
properties.haze.hazeBlendOutColor.green + "," +
properties.haze.hazeBlendOutColor.blue + ")";
elZoneHazeBlendOutColorRed.value = properties.haze.hazeBlendOutColor.red;
elZoneHazeBlendOutColorGreen.value = properties.haze.hazeBlendOutColor.green;
elZoneHazeBlendOutColorBlue.value = properties.haze.hazeBlendOutColor.blue;
elZoneHazeBackgroundBlend.value = properties.haze.hazeBackgroundBlend.toFixed(2);
elZoneHazeAltitude.value = properties.haze.hazeAltitude.toFixed(0);
elZoneStageLatitude.value = properties.stage.latitude.toFixed(2);
@ -1418,6 +1433,7 @@ function loaded() {
elZoneHazeMode.addEventListener('change', createEmitTextPropertyUpdateFunction('hazeMode'));
elZoneHazeRange.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeRange'));
colorPickers.push($('#property-zone-haze-blend-in-color').colpick({
colorScheme: 'dark',
layout: 'hex',
@ -1442,6 +1458,32 @@ function loaded() {
elZoneHazeBlendInColorRed.addEventListener('change', zoneHazeBlendInColorChangeFunction);
elZoneHazeBlendInColorGreen.addEventListener('change', zoneHazeBlendInColorChangeFunction);
elZoneHazeBlendInColorBlue.addEventListener('change', zoneHazeBlendInColorChangeFunction);
colorPickers.push($('#property-zone-haze-blend-out-color').colpick({
colorScheme: 'dark',
layout: 'hex',
color: '000000',
onShow: function(colpick) {
$('#property-zone-haze-blend-out-color').attr('active', 'true');
},
onHide: function(colpick) {
$('#property-zone-haze-blend-out-color').attr('active', 'false');
},
onSubmit: function(hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex);
$(el).colpickHide();
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'hazeBlendOutColor');
}
}));
var zoneHazeBlendOutColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeBlendOutColor',
elZoneHazeBlendOutColorRed,
elZoneHazeBlendOutColorGreen,
elZoneHazeBlendOutColorBlue);
elZoneHazeBlendOutColorRed.addEventListener('change', zoneHazeBlendOutColorChangeFunction);
elZoneHazeBlendOutColorGreen.addEventListener('change', zoneHazeBlendOutColorChangeFunction);
elZoneHazeBlendOutColorBlue.addEventListener('change', zoneHazeBlendOutColorChangeFunction);
elZoneHazeBackgroundBlend.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeBackgroundBlend'));
elZoneHazeAltitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeAltitude'));