Update the cookies.js to be able to edit and test direction and color, validate that the SunDirection and color and on/off is working

This commit is contained in:
Sam Gateau 2015-04-17 19:00:40 -07:00
parent 11879f6142
commit 687ca7fee5
6 changed files with 364 additions and 126 deletions

View file

@ -41,7 +41,8 @@ panel.newSlider("Year Time", 0, 364,
);
panel.newSlider("Day Time", 0, 24,
function(value) { Scene.setStageDayTime(value); },
function(value) { Scene.setStageDayTime(value); panel.update("Light Direction"); },
function() { return Scene.getStageDayTime(); },
function(value) {
var hour = Math.floor(value);
@ -78,6 +79,12 @@ panel.newCheckbox("Enable Earth Sun Model",
function(value) { return (value); }
);
panel.newDirectionBox("Light Direction",
function(value) { Scene.setSunDirection(value); },
function() { return Scene.getSunDirection(); },
function(value) { return value.x.toFixed(2) + "," + value.y.toFixed(2) + "," + value.z.toFixed(2); }
);
panel.newSlider("Light Intensity", 0.0, 5,
function(value) { Scene.setSunIntensity(value); },
function() { return Scene.getSunIntensity(); },
@ -90,6 +97,12 @@ panel.newSlider("Ambient Light Intensity", 0.0, 1.0,
function(value) { return (value).toFixed(2); }
);
panel.newColorBox("Light Color",
function(value) { Scene.setSunColor(value); },
function() { return Scene.getSunColor(); },
function(value) { return (value); } // "(" + value.x + "," = value.y + "," + value.z + ")"; }
);
Controller.mouseMoveEvent.connect(function panelMouseMoveEvent(event) { return panel.mouseMoveEvent(event); });
Controller.mousePressEvent.connect( function panelMousePressEvent(event) { return panel.mousePressEvent(event); });
Controller.mouseReleaseEvent.connect(function(event) { return panel.mouseReleaseEvent(event); });

View file

@ -12,6 +12,129 @@
// The Slider class
Slider = function(x,y,width,thumbSize) {
this.background = Overlays.addOverlay("text", {
backgroundColor: { red: 125, green: 125, blue: 255 },
x: x,
y: y,
width: width,
height: thumbSize,
alpha: 1.0,
backgroundAlpha: 0.5,
visible: true
});
this.thumb = Overlays.addOverlay("text", {
backgroundColor: { red: 255, green: 255, blue: 255 },
x: x,
y: y,
width: thumbSize,
height: thumbSize,
alpha: 1.0,
backgroundAlpha: 1.0,
visible: true
});
this.thumbSize = thumbSize;
this.thumbHalfSize = 0.5 * thumbSize;
this.minThumbX = x + this.thumbHalfSize;
this.maxThumbX = x + width - this.thumbHalfSize;
this.thumbX = this.minThumbX;
this.minValue = 0.0;
this.maxValue = 1.0;
this.clickOffsetX = 0;
this.isMoving = false;
this.updateThumb = function() {
thumbTruePos = this.thumbX - 0.5 * this.thumbSize;
Overlays.editOverlay(this.thumb, { x: thumbTruePos } );
};
this.isClickableOverlayItem = function(item) {
return (item == this.thumb) || (item == this.background);
};
this.onMouseMoveEvent = function(event) {
if (this.isMoving) {
newThumbX = event.x - this.clickOffsetX;
if (newThumbX < this.minThumbX) {
newThumbX = this.minThumbX;
}
if (newThumbX > this.maxThumbX) {
newThumbX = this.maxThumbX;
}
this.thumbX = newThumbX;
this.updateThumb();
this.onValueChanged(this.getValue());
}
};
this.onMousePressEvent = function(event, clickedOverlay) {
if (!this.isClickableOverlayItem(clickedOverlay)) {
this.isMoving = false;
return;
}
this.isMoving = true;
var clickOffset = event.x - this.thumbX;
if ((clickOffset > -this.thumbHalfSize) && (clickOffset < this.thumbHalfSize)) {
this.clickOffsetX = clickOffset;
} else {
this.clickOffsetX = 0;
this.thumbX = event.x;
this.updateThumb();
this.onValueChanged(this.getValue());
}
};
this.onMouseReleaseEvent = function(event) {
this.isMoving = false;
};
// Public members:
this.setNormalizedValue = function(value) {
if (value < 0.0) {
this.thumbX = this.minThumbX;
} else if (value > 1.0) {
this.thumbX = this.maxThumbX;
} else {
this.thumbX = value * (this.maxThumbX - this.minThumbX) + this.minThumbX;
}
this.updateThumb();
};
this.getNormalizedValue = function() {
return (this.thumbX - this.minThumbX) / (this.maxThumbX - this.minThumbX);
};
this.setValue = function(value) {
var normValue = (value - this.minValue) / (this.maxValue - this.minValue);
this.setNormalizedValue(normValue);
};
this.getValue = function() {
return this.getNormalizedValue() * (this.maxValue - this.minValue) + this.minValue;
};
this.onValueChanged = function(value) {};
this.destroy = function() {
Overlays.deleteOverlay(this.background);
Overlays.deleteOverlay(this.thumb);
};
this.setThumbColor = function(color) {
Overlays.editOverlay(this.thumb, {backgroundColor: { red: color.x*255, green: color.y*255, blue: color.z*255 }});
};
this.setBackgroundColor = function(color) {
Overlays.editOverlay(this.background, {backgroundColor: { red: color.x*255, green: color.y*255, blue: color.z*255 }});
};
}
// The Checkbox class
Checkbox = function(x,y,width,thumbSize) {
this.thumb = Overlays.addOverlay("text", {
backgroundColor: { red: 255, green: 255, blue: 255 },
@ -52,6 +175,10 @@ Slider = function(x,y,width,thumbSize) {
Overlays.editOverlay(this.thumb, { x: thumbTruePos } );
};
this.isClickableOverlayItem = function(item) {
return item == this.background;
};
this.onMouseMoveEvent = function(event) {
if (this.isMoving) {
newThumbX = event.x - this.clickOffsetX;
@ -67,7 +194,11 @@ Slider = function(x,y,width,thumbSize) {
}
};
this.onMousePressEvent = function(event) {
this.onMousePressEvent = function(event, clickedOverlay) {
if (this.background != clickedOverlay) {
this.isMoving = false;
return;
}
this.isMoving = true;
var clickOffset = event.x - this.thumbX;
if ((clickOffset > -this.thumbHalfSize) && (clickOffset < this.thumbHalfSize)) {
@ -118,112 +249,166 @@ Slider = function(x,y,width,thumbSize) {
};
}
// The Checkbox class
Checkbox = function(x,y,width,thumbSize) {
// The ColorBox class
ColorBox = function(x,y,width,thumbSize) {
var self = this;
var slideHeight = thumbSize / 3;
var sliderWidth = width;
this.red = new Slider(x, y, width, slideHeight);
this.green = new Slider(x, y + slideHeight, width, slideHeight);
this.blue = new Slider(x, y + 2 * slideHeight, width, slideHeight);
this.red.setBackgroundColor({x: 1, y: 0, z: 0});
this.green.setBackgroundColor({x: 0, y: 1, z: 0});
this.blue.setBackgroundColor({x: 0, y: 0, z: 1});
this.thumb = Overlays.addOverlay("text", {
backgroundColor: { red: 255, green: 255, blue: 255 },
x: x,
y: y,
width: thumbSize,
height: thumbSize,
alpha: 1.0,
backgroundAlpha: 1.0,
visible: true
});
this.background = Overlays.addOverlay("text", {
backgroundColor: { red: 125, green: 125, blue: 255 },
x: x,
y: y,
width: width,
height: thumbSize,
alpha: 1.0,
backgroundAlpha: 0.5,
visible: true
});
this.thumbSize = thumbSize;
this.thumbHalfSize = 0.5 * thumbSize;
this.minThumbX = x + this.thumbHalfSize;
this.maxThumbX = x + width - this.thumbHalfSize;
this.thumbX = this.minThumbX;
this.minValue = 0.0;
this.maxValue = 1.0;
this.clickOffsetX = 0;
this.isMoving = false;
this.updateThumb = function() {
thumbTruePos = this.thumbX - 0.5 * this.thumbSize;
Overlays.editOverlay(this.thumb, { x: thumbTruePos } );
this.isClickableOverlayItem = function(item) {
return this.red.isClickableOverlayItem(item)
|| this.green.isClickableOverlayItem(item)
|| this.blue.isClickableOverlayItem(item);
};
this.onMouseMoveEvent = function(event) {
if (this.isMoving) {
newThumbX = event.x - this.clickOffsetX;
if (newThumbX < this.minThumbX) {
newThumbX = this.minThumbX;
}
if (newThumbX > this.maxThumbX) {
newThumbX = this.maxThumbX;
}
this.thumbX = newThumbX;
this.updateThumb();
this.onValueChanged(this.getValue());
}
this.red.onMouseMoveEvent(event);
this.green.onMouseMoveEvent(event);
this.blue.onMouseMoveEvent(event);
};
this.onMousePressEvent = function(event) {
this.isMoving = true;
var clickOffset = event.x - this.thumbX;
if ((clickOffset > -this.thumbHalfSize) && (clickOffset < this.thumbHalfSize)) {
this.clickOffsetX = clickOffset;
} else {
this.clickOffsetX = 0;
this.thumbX = event.x;
this.updateThumb();
this.onValueChanged(this.getValue());
this.onMousePressEvent = function(event, clickedOverlay) {
this.red.onMousePressEvent(event, clickedOverlay);
if (this.red.isMoving) {
return;
}
this.green.onMousePressEvent(event, clickedOverlay);
if (this.green.isMoving) {
return;
}
this.blue.onMousePressEvent(event, clickedOverlay);
};
this.onMouseReleaseEvent = function(event) {
this.isMoving = false;
this.red.onMouseReleaseEvent(event);
this.green.onMouseReleaseEvent(event);
this.blue.onMouseReleaseEvent(event);
};
this.setterFromWidget = function(value) {
var color = self.getValue();
self.onValueChanged(color);
self.updateRGBSliders(color);
};
this.red.onValueChanged = this.setterFromWidget;
this.green.onValueChanged = this.setterFromWidget;
this.blue.onValueChanged = this.setterFromWidget;
this.updateRGBSliders = function(color) {
this.red.setThumbColor({x: color.x, y: 0, z: 0});
this.green.setThumbColor({x: 0, y: color.y, z: 0});
this.blue.setThumbColor({x: 0, y: 0, z: color.z});
};
// Public members:
this.setNormalizedValue = function(value) {
if (value < 0.0) {
this.thumbX = this.minThumbX;
} else if (value > 1.0) {
this.thumbX = this.maxThumbX;
} else {
this.thumbX = value * (this.maxThumbX - this.minThumbX) + this.minThumbX;
}
this.updateThumb();
};
this.getNormalizedValue = function() {
return (this.thumbX - this.minThumbX) / (this.maxThumbX - this.minThumbX);
};
this.setValue = function(value) {
var normValue = (value - this.minValue) / (this.maxValue - this.minValue);
this.setNormalizedValue(normValue);
this.red.setValue(value.x);
this.green.setValue(value.y);
this.blue.setValue(value.z);
this.updateRGBSliders(value);
};
this.getValue = function() {
return this.getNormalizedValue() * (this.maxValue - this.minValue) + this.minValue;
var value = {x:this.red.getValue(), y:this.green.getValue(),z:this.blue.getValue()};
return value;
};
this.destroy = function() {
this.red.destroy();
this.green.destroy();
this.blue.destroy();
};
this.onValueChanged = function(value) {};
}
// The DirectionBox class
DirectionBox = function(x,y,width,thumbSize) {
var self = this;
var slideHeight = thumbSize / 2;
var sliderWidth = width;
this.yaw = new Slider(x, y, width, slideHeight);
this.pitch = new Slider(x, y + slideHeight, width, slideHeight);
this.yaw.setThumbColor({x: 1, y: 0, z: 0});
this.yaw.minValue = -180;
this.yaw.maxValue = +180;
this.pitch.setThumbColor({x: 0, y: 0, z: 1});
this.pitch.minValue = -1;
this.pitch.maxValue = +1;
this.isClickableOverlayItem = function(item) {
return this.yaw.isClickableOverlayItem(item)
|| this.pitch.isClickableOverlayItem(item);
};
this.onMouseMoveEvent = function(event) {
this.yaw.onMouseMoveEvent(event);
this.pitch.onMouseMoveEvent(event);
};
this.onMousePressEvent = function(event, clickedOverlay) {
this.yaw.onMousePressEvent(event, clickedOverlay);
if (this.yaw.isMoving) {
return;
}
this.pitch.onMousePressEvent(event, clickedOverlay);
};
this.onMouseReleaseEvent = function(event) {
this.yaw.onMouseReleaseEvent(event);
this.pitch.onMouseReleaseEvent(event);
};
this.setterFromWidget = function(value) {
var yawPitch = self.getValue();
self.onValueChanged(yawPitch);
};
this.yaw.onValueChanged = this.setterFromWidget;
this.pitch.onValueChanged = this.setterFromWidget;
// Public members:
this.setValue = function(direction) {
var flatXZ = Math.sqrt(direction.x * direction.x + direction.z * direction.z);
if (flatXZ > 0.0) {
var flatX = direction.x / flatXZ;
var flatZ = direction.z / flatXZ;
var yaw = Math.acos(flatX) * 180 / Math.PI;
if (flatZ < 0) {
yaw = -yaw;
}
this.yaw.setValue(yaw);
}
this.pitch.setValue(direction.y);
};
this.getValue = function() {
var dirZ = this.pitch.getValue();
var yaw = this.yaw.getValue() * Math.PI / 180;
var cosY = Math.sqrt(1 - dirZ*dirZ);
var value = {x:cosY * Math.cos(yaw), y:dirZ, z: cosY * Math.sin(yaw)};
return value;
};
this.destroy = function() {
Overlays.deleteOverlay(this.background);
Overlays.deleteOverlay(this.thumb);
this.yaw.destroy();
this.pitch.destroy();
};
this.onValueChanged = function(value) {};
}
var textFontSize = 16;
@ -274,7 +459,12 @@ function PanelItem(name, setter, getter, displayer, x, y, textWidth, valueWidth,
};
this.setterFromWidget = function(value) {
setter(value);
Overlays.editOverlay(this.value, {text: this.displayer(getter())});
// ANd loop back the value after the final setter has been called
var value = getter();
if (this.widget) {
this.widget.setValue(value);
}
Overlays.editOverlay(this.value, {text: this.displayer(value)});
};
@ -326,9 +516,9 @@ Panel = function(x, y) {
for (var i in this.items) {
var widget = this.items[i].widget;
if (clickedOverlay == widget.background) {
if (widget.isClickableOverlayItem(clickedOverlay)) {
this.activeWidget = widget;
this.activeWidget.onMousePressEvent(event);
this.activeWidget.onMousePressEvent(event, clickedOverlay);
// print("clicked... widget=" + i);
break;
}
@ -344,36 +534,63 @@ Panel = function(x, y) {
this.newSlider = function(name, minValue, maxValue, setValue, getValue, displayValue) {
var sliderItem = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight);
var item = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight);
var slider = new Slider(this.widgetX, this.nextY, widgetWidth, rawHeight);
slider.minValue = minValue;
slider.maxValue = maxValue;
slider.onValueChanged = function(value) { sliderItem.setterFromWidget(value); };
sliderItem.widget = slider;
sliderItem.setter(getValue());
this.items[name] = sliderItem;
item.widget = slider;
item.widget.onValueChanged = function(value) { item.setterFromWidget(value); };
item.setter(getValue());
this.items[name] = item;
this.nextY += rawYDelta;
// print("created Item... slider=" + name);
};
this.newCheckbox = function(name, setValue, getValue, displayValue) {
var checkboxItem = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight);
var item = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight);
var checkbox = new Checkbox(this.widgetX, this.nextY, widgetWidth, rawHeight);
checkbox.onValueChanged = function(value) { checkboxItem.setterFromWidget(value); };
checkboxItem.widget = checkbox;
checkboxItem.setter(getValue());
this.items[name] = checkboxItem;
item.widget = checkbox;
item.widget.onValueChanged = function(value) { item.setterFromWidget(value); };
item.setter(getValue());
this.items[name] = item;
this.nextY += rawYDelta;
// print("created Item... slider=" + name);
};
this.newColorBox = function(name, setValue, getValue, displayValue) {
var item = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight);
var colorBox = new ColorBox(this.widgetX, this.nextY, widgetWidth, rawHeight);
item.widget = colorBox;
item.widget.onValueChanged = function(value) { item.setterFromWidget(value); };
item.setter(getValue());
this.items[name] = item;
this.nextY += rawYDelta;
// print("created Item... colorBox=" + name);
};
this.newDirectionBox= function(name, setValue, getValue, displayValue) {
var item = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight);
var directionBox = new DirectionBox(this.widgetX, this.nextY, widgetWidth, rawHeight);
item.widget = directionBox;
item.widget.onValueChanged = function(value) { item.setterFromWidget(value); };
item.setter(getValue());
this.items[name] = item;
this.nextY += rawYDelta;
// print("created Item... directionBox=" + name);
};
this.destroy = function() {
for (var i in this.items) {
this.items[i].destroy();
@ -395,6 +612,15 @@ Panel = function(x, y) {
}
return null;
}
this.update = function(name) {
var item = this.items[name];
if (item != null) {
return item.setter(item.getter());
}
return null;
}
};

View file

@ -265,7 +265,7 @@ public:
Vec4 _spot{0.0f, 0.0f, 0.0f, 3.0f};
Vec4 _shadow{0.0f};
Vec4 _control{0.0f};
Vec4 _control{0.0f, 0.0f, 0.0f, 0.0f};
Schema() {}
};

View file

@ -177,48 +177,47 @@ typedef QSharedPointer< Skybox > SkyboxPointer;
// Sun sky stage generates the rendering primitives to display a scene realistically
// at the specified location and time around earth
class SunSkyStage : public QObject {
Q_OBJECT
class SunSkyStage {
public:
SunSkyStage();
~SunSkyStage();
// time of the day (local to the position) expressed in decimal hour in the range [0.0, 24.0]
Q_INVOKABLE void setDayTime(float hour);
Q_INVOKABLE float getDayTime() const { return _dayTime; }
void setDayTime(float hour);
float getDayTime() const { return _dayTime; }
// time of the year expressed in day in the range [0, 365]
Q_INVOKABLE void setYearTime(unsigned int day);
Q_INVOKABLE unsigned int getYearTime() const { return _yearTime; }
void setYearTime(unsigned int day);
unsigned int getYearTime() const { return _yearTime; }
// Origin orientation used to modify the cardinal axis alignement used.
// THe default is north along +Z axis and west along +X axis. this orientation gets added
// to the transform stack producing the sun light direction.
Q_INVOKABLE void setOriginOrientation(const Quat& orientation);
Q_INVOKABLE const Quat& getOriginOrientation() const { return _earthSunModel.getSurfaceOrientation(); }
void setOriginOrientation(const Quat& orientation);
const Quat& getOriginOrientation() const { return _earthSunModel.getSurfaceOrientation(); }
// Location used to define the sun & sky is a longitude and latitude [rad] and a earth surface altitude [km]
Q_INVOKABLE void setOriginLocation(float longitude, float latitude, float surfaceAltitude);
Q_INVOKABLE float getOriginLatitude() const { return _earthSunModel.getLatitude(); }
Q_INVOKABLE float getOriginLongitude() const { return _earthSunModel.getLongitude(); }
Q_INVOKABLE float getOriginSurfaceAltitude() const { return _earthSunModel.getAltitude(); }
void setOriginLocation(float longitude, float latitude, float surfaceAltitude);
float getOriginLatitude() const { return _earthSunModel.getLatitude(); }
float getOriginLongitude() const { return _earthSunModel.getLongitude(); }
float getOriginSurfaceAltitude() const { return _earthSunModel.getAltitude(); }
// Enable / disable the effect of the time and location on the sun direction and color
Q_INVOKABLE void setEarthSunModelEnable(bool isEnabled);
Q_INVOKABLE bool isEarthSunModelEnabled() const { return _earthSunModelEnable; }
void setEarthSunModelEnable(bool isEnabled);
bool isEarthSunModelEnabled() const { return _earthSunModelEnable; }
// Sun properties
Q_INVOKABLE void setSunColor(const Vec3& color);
Q_INVOKABLE const Vec3& getSunColor() const { return getSunLight()->getColor(); }
Q_INVOKABLE void setSunIntensity(float intensity);
Q_INVOKABLE float getSunIntensity() const { return getSunLight()->getIntensity(); }
Q_INVOKABLE void setSunAmbientIntensity(float intensity);
Q_INVOKABLE float getSunAmbientIntensity() const { return getSunLight()->getAmbientIntensity(); }
void setSunColor(const Vec3& color);
const Vec3& getSunColor() const { return getSunLight()->getColor(); }
void setSunIntensity(float intensity);
float getSunIntensity() const { return getSunLight()->getIntensity(); }
void setSunAmbientIntensity(float intensity);
float getSunAmbientIntensity() const { return getSunLight()->getAmbientIntensity(); }
// The sun direction is expressed in the world space
Q_INVOKABLE void setSunDirection(const Vec3& direction);
Q_INVOKABLE const Vec3& getSunDirection() const { return getSunLight()->getDirection(); }
void setSunDirection(const Vec3& direction);
const Vec3& getSunDirection() const { return getSunLight()->getDirection(); }
LightPointer getSunLight() const { valid(); return _sunLight; }
AtmospherePointer getAtmosphere() const { valid(); return _atmosphere; }

View file

@ -50,7 +50,7 @@ void SceneScriptingInterface::setSunColor(const glm::vec3& color) {
_skyStage->setSunColor(color);
}
const glm::vec3& SceneScriptingInterface::getSunColor() const {
glm::vec3 SceneScriptingInterface::getSunColor() const {
return _skyStage->getSunColor();
}
@ -74,7 +74,7 @@ void SceneScriptingInterface::setSunDirection(const glm::vec3& direction) {
_skyStage->setSunDirection(direction);
}
const glm::vec3& SceneScriptingInterface::getSunDirection() const {
glm::vec3 SceneScriptingInterface::getSunDirection() const {
return _skyStage->getSunDirection();
}

View file

@ -43,7 +43,7 @@ public:
Q_INVOKABLE void setSunColor(const glm::vec3& color);
Q_INVOKABLE const glm::vec3& getSunColor() const;
Q_INVOKABLE glm::vec3 getSunColor() const;
Q_INVOKABLE void setSunIntensity(float intensity);
Q_INVOKABLE float getSunIntensity() const;
Q_INVOKABLE void setSunAmbientIntensity(float intensity);
@ -52,7 +52,7 @@ public:
// Only valid if stage Earth Sun model is disabled
Q_INVOKABLE void setSunDirection(const glm::vec3& direction);
Q_INVOKABLE const glm::vec3& getSunDirection() const;
Q_INVOKABLE glm::vec3 getSunDirection() const;