Added haze colour selector.

This commit is contained in:
Nissim Hadar 2017-10-05 11:31:49 -07:00
parent 1e2bd23c0b
commit 512b469dc6
2 changed files with 42 additions and 0 deletions

View file

@ -567,6 +567,15 @@
<div><label>BackgroundBlend </label><input type="number" id="property-zone-haze-background-blend" min="0.0" max="1.0" step="0.05"></div>
</div>
</fieldset>
<fieldset class="zone-group zone-section haze-section property rgb fstuple">
<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>
</fieldset>
</fieldset>
<fieldset class="minor">
<legend class="sub-section-header zone-group zone-section stage-section">

View file

@ -660,6 +660,10 @@ function loaded() {
var elZoneHazeMode = document.getElementById("property-zone-haze-mode");
var elZoneHazeRange = document.getElementById("property-zone-haze-range");
var elZoneHazeBlendInColor = document.getElementById("property-zone-haze-blend-in-color");
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 elZoneHazeBackgroundBlend = document.getElementById("property-zone-haze-background-blend");
var elZoneHazeAltitude = document.getElementById("property-zone-haze-altitude");
@ -1005,6 +1009,11 @@ function loaded() {
setDropdownText(elZoneHazeMode);
elZoneHazeRange.value = properties.haze.hazeRange.toFixed(2);
elZoneHazeBlendInColor.style.backgroundColor = "rgb(" + properties.haze.hazeBlendInColor.red + "," + properties.haze.hazeBlendInColor.green + "," + properties.haze.hazeBlendInColor.blue + ")";
elZoneHazeBlendInColorRed.value = properties.haze.hazeBlendInColor.red;
elZoneHazeBlendInColorGreen.value = properties.haze.hazeBlendInColor.green;
elZoneHazeBlendInColorBlue.value = properties.haze.hazeBlendInColor.blue;
elZoneHazeBackgroundBlend.value = properties.haze.hazeBackgroundBlend;
elZoneHazeAltitude.value = properties.haze.hazeAltitude.toFixed(2);
@ -1406,6 +1415,30 @@ 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',
color: '000000',
onShow: function(colpick) {
$('#property-zone-haze-blend-in-color').attr('active', 'true');
},
onHide: function(colpick) {
$('#property-zone-haze-blend-in-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, 'hazeBlendIn');
}
}));
var zoneHazeBlendInColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('hazeBlendIn', 'color',
elZoneHazeBlendInColorRed,
elZoneHazeBlendInColorGreen,
elZoneHazeBlendInColorBlue);
elZoneHazeBlendInColorRed.addEventListener('change', zoneHazeBlendInColorChangeFunction);
elZoneHazeBlendInColorGreen.addEventListener('change', zoneHazeBlendInColorChangeFunction);
elZoneHazeBlendInColorBlue.addEventListener('change', zoneKeyHazeBlendInColorChangeFunction);
elZoneHazeBackgroundBlend.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeBackgroundBlend'));
elZoneHazeAltitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeAltitude'));