Browse Source

Option to enable/disable color smooth transtions from webUI. New LIGHTS tab in webUI

fastled
Xose Pérez 7 years ago
parent
commit
dcc09128cd
4 changed files with 3142 additions and 3120 deletions
  1. BIN
      code/espurna/data/index.html.gz
  2. +22
    -31
      code/espurna/light.ino
  3. +3055
    -3051
      code/espurna/static/index.html.gz.h
  4. +65
    -38
      code/html/index.html

BIN
code/espurna/data/index.html.gz View File


+ 22
- 31
code/espurna/light.ino View File

@ -34,10 +34,11 @@ typedef struct {
std::vector<channel_t> _light_channel;
bool _light_state = false;
bool _light_use_transitions = false;
bool _light_has_color = false;
bool _light_use_white = false;
bool _light_use_gamma = false;
unsigned long _light_steps_left = 0;
unsigned long _light_steps_left = 1;
unsigned int _light_brightness = LIGHT_MAX_BRIGHTNESS;
#if LIGHT_PROVIDER == LIGHT_PROVIDER_MY92XX
@ -342,6 +343,10 @@ void _fromMireds(unsigned long mireds) {
_fromKelvin(kelvin);
}
// -----------------------------------------------------------------------------
// PROVIDER
// -----------------------------------------------------------------------------
unsigned int _toPWM(unsigned long value, bool bright, bool gamma, bool reverse) {
value = constrain(value, 0, LIGHT_MAX_VALUE);
if (bright) value *= ((float) _light_brightness / LIGHT_MAX_BRIGHTNESS);
@ -351,23 +356,21 @@ unsigned int _toPWM(unsigned long value, bool bright, bool gamma, bool reverse)
return value;
}
// Returns a PWM valule for the given channel ID
// Returns a PWM value for the given channel ID
unsigned int _toPWM(unsigned char id) {
if (id < _light_channel.size()) {
bool isColor = _light_has_color && (id < 3);
bool bright = isColor;
bool gamma = isColor & _light_use_gamma;
return _toPWM(_light_channel[id].shadow, bright, gamma, _light_channel[id].reverse);
}
return 0;
if (id >= _light_channel.size()) return 0;
bool isColor = _light_has_color && (id < 3);
bool bright = isColor;
bool gamma = isColor & _light_use_gamma;
return _toPWM(_light_channel[id].shadow, bright, gamma, _light_channel[id].reverse);
}
// -----------------------------------------------------------------------------
// PROVIDER
// -----------------------------------------------------------------------------
void _shadow() {
// Update transition ticker
_light_steps_left--;
if (_light_steps_left == 0) _light_transition_ticker.detach();
// Transitions
unsigned char target;
for (unsigned int i=0; i < _light_channel.size(); i++) {
@ -381,13 +384,6 @@ void _shadow() {
_light_channel[i].shadow = _light_channel[i].current;
}
// Update transition ticker
if (_light_steps_left == 0) {
_light_transition_ticker.detach();
} else {
_light_steps_left--;
}
// Use white channel for same RGB
if (_light_use_white && _light_has_color) {
if (_light_channel[0].shadow == _light_channel[1].shadow && _light_channel[1].shadow == _light_channel[2].shadow ) {
@ -404,10 +400,6 @@ void _lightProviderUpdate() {
_shadow();
#ifdef LIGHT_ENABLE_PIN
digitalWrite(LIGHT_ENABLE_PIN, _light_state);
#endif
#if LIGHT_PROVIDER == LIGHT_PROVIDER_MY92XX
for (unsigned char i=0; i<_light_channel.size(); i++) {
@ -573,13 +565,9 @@ unsigned char lightWhiteChannels() {
void lightUpdate(bool save, bool forward) {
#if LIGHT_USE_TRANSITIONS
_light_steps_left = LIGHT_TRANSITION_STEPS;
_light_transition_ticker.attach_ms(LIGHT_TRANSITION_STEP, _lightProviderUpdate);
#else
_light_steps_left = 0;
_lightProviderUpdate();
#endif
// Configure color transition
_light_steps_left = _light_use_transitions ? LIGHT_TRANSITION_STEPS : 1;
_light_transition_ticker.attach_ms(LIGHT_TRANSITION_STEP, _lightProviderUpdate);
// Report color & brightness to MQTT broker
#if MQTT_SUPPORT
@ -679,6 +667,7 @@ void _lightWebSocketOnSend(JsonObject& root) {
root["useColor"] = _light_has_color;
root["useWhite"] = _light_use_white;
root["useGamma"] = _light_use_gamma;
root["useTransitions"] = _light_use_transitions;
root["useCSS"] = getSetting("useCSS", LIGHT_USE_CSS).toInt() == 1;
bool useRGB = getSetting("useRGB", LIGHT_USE_RGB).toInt() == 1;
root["useRGB"] = useRGB;
@ -862,6 +851,7 @@ void _lightConfigure() {
}
_light_use_gamma = getSetting("useGamma", LIGHT_USE_GAMMA).toInt() == 1;
_light_use_transitions = getSetting("useTransitions", LIGHT_USE_TRANSITIONS).toInt() == 1;
}
@ -869,6 +859,7 @@ void lightSetup() {
#ifdef LIGHT_ENABLE_PIN
pinMode(LIGHT_ENABLE_PIN, OUTPUT);
digitalWrite(LIGHT_ENABLE_PIN, HIGH);
#endif
#if LIGHT_PROVIDER == LIGHT_PROVIDER_MY92XX


+ 3055
- 3051
code/espurna/static/index.html.gz.h
File diff suppressed because it is too large
View File


+ 65
- 38
code/html/index.html View File

@ -98,6 +98,10 @@
<a href="#" class="pure-menu-link" data="panel-ntp">NTP</a>
</li>
<li class="pure-menu-item module module-color">
<a href="#" class="pure-menu-link" data="panel-color">LIGHTS</a>
</li>
<li class="pure-menu-item module module-dcz">
<a href="#" class="pure-menu-link" data="panel-domoticz">DOMOTICZ</a>
</li>
@ -361,7 +365,59 @@
</div>
</div>
<div class="pure-g module module-color">
<div class="pure-g module module-alexa">
<div class="pure-u-1 pure-u-sm-1-4"><label for="alexaEnabled">Alexa integration</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="alexaEnabled" tabindex="13" /></div>
</div>
<div class="pure-g module module-ha">
<div class="pure-u-1 pure-u-sm-1-4"><label for="haEnabled">Home Assistant</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="haEnabled" tabindex="14" /></div>
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
<div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
<div class="pure-u-1 pure-u-md-3-4 hint">
Home Assistant auto-discovery feature. Enable and save to add the device to your HA console.
When using a colour light you might want to disable CSS style so Home Assistant can parse the color.
</div>
</div>
<div class="pure-g module module-ha">
<label class="pure-u-1 pure-u-md-1-4" for="haPrefix">Home Assistant Prefix</label>
<input class="pure-u-1 pure-u-md-1-4" name="haPrefix" type="text" tabindex="15" />
</div>
<div class="pure-g module module-ds module-dht">
<label class="pure-u-1 pure-u-sm-1-4" for="tmpUnits">Temperature units</label>
<div class="pure-u-1 pure-u-sm-1-4"><input type="radio" name="tmpUnits" tabindex="16" value="0"> Celsius (&deg;C)</input></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="radio" name="tmpUnits" tabindex="17" value="1"> Fahrenheit (&deg;F)</input></div>
</div>
<div class="pure-g module module-ds module-dht">
<label class="pure-u-1 pure-u-md-1-4" for="tmpCorrection">Temperature correction</label>
<input name="tmpCorrection" class="pure-u-1 pure-u-md-1-4" type="number" action="reset" min="-100" step="0.1" max="100" tabindex="18" />
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
<div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
<div class="pure-u-1 pure-u-md-3-4 hint">
Temperature correction value is added to the measured value which may be inaccurate due to many factors. The value can be negative.
</div>
</div>
</fieldset>
</div>
</div>
<div class="panel" id="panel-color">
<div class="header">
<h1>LIGHTS</h1>
<h2>Lights configuration</h2>
</div>
<div class="page">
<fieldset>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-4"><label for="useColor">Use colorpicker</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useColor" action="reload" tabindex="8" /></div>
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
@ -369,7 +425,7 @@
<div class="pure-u-1 pure-u-md-3-4 hint">Use color picker for the first 3 channels as RGB.<br />Will only work if the device has at least 3 dimmable channels.<br />Reload the page to update the web interface.</div>
</div>
<div class="pure-g module module-color">
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-4"><label for="useRGB">Use RGB picker</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useRGB" action="reload" tabindex="11" /></div>
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
@ -377,7 +433,7 @@
<div class="pure-u-1 pure-u-md-3-4 hint">Use RGB color picker if enabled (plus brightness), otherwise use HSV (hue-saturation-value) style</div>
</div>
<div class="pure-g module module-color">
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-4"><label for="useWhite">Use white channel</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useWhite" action="reload" tabindex="9" /></div>
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
@ -385,7 +441,7 @@
<div class="pure-u-1 pure-u-md-3-4 hint">Use forth dimmable channel as white when first 3 have the same RGB value.<br />Will only work if the device has at least 4 dimmable channels.<br />Reload the page to update the web interface.</div>
</div>
<div class="pure-g module module-color">
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-4"><label for="useGamma">Use gamma correction</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useGamma" tabindex="10" /></div>
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
@ -393,7 +449,7 @@
<div class="pure-u-1 pure-u-md-3-4 hint">Use gamma correction for RGB channels.<br />Will only work if "use colorpicker" above is also ON.</div>
</div>
<div class="pure-g module module-color">
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-4"><label for="useCSS">Use CSS style</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useCSS" tabindex="11" /></div>
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
@ -401,41 +457,12 @@
<div class="pure-u-1 pure-u-md-3-4 hint">Use CSS style to report colors to MQTT and REST API. <br />Red will be reported as "#FF0000" if ON, otherwise "255,0,0"</div>
</div>
<div class="pure-g module module-alexa">
<div class="pure-u-1 pure-u-sm-1-4"><label for="alexaEnabled">Alexa integration</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="alexaEnabled" tabindex="12" /></div>
</div>
<div class="pure-g module module-ha">
<div class="pure-u-1 pure-u-sm-1-4"><label for="haEnabled">Home Assistant</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="haEnabled" tabindex="13" /></div>
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
<div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
<div class="pure-u-1 pure-u-md-3-4 hint">
Home Assistant auto-discovery feature. Enable and save to add the device to your HA console.
When using a colour light you might want to disable CSS style so Home Assistant can parse the color.
</div>
</div>
<div class="pure-g module module-ha">
<label class="pure-u-1 pure-u-md-1-4" for="haPrefix">Home Assistant Prefix</label>
<input class="pure-u-1 pure-u-md-1-4" name="haPrefix" type="text" tabindex="14" />
</div>
<div class="pure-g module module-ds module-dht">
<label class="pure-u-1 pure-u-sm-1-4" for="tmpUnits">Temperature units</label>
<div class="pure-u-1 pure-u-sm-1-4"><input type="radio" name="tmpUnits" tabindex="15" value="0"> Celsius (&deg;C)</input></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="radio" name="tmpUnits" tabindex="16" value="1"> Fahrenheit (&deg;F)</input></div>
</div>
<div class="pure-g module module-ds module-dht">
<label class="pure-u-1 pure-u-md-1-4" for="tmpCorrection">Temperature correction</label>
<input name="tmpCorrection" class="pure-u-1 pure-u-md-1-4" type="number" action="reset" min="-100" step="0.1" max="100" tabindex="17" />
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-4"><label for="useTransitions">Color transitions</label></div>
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useTransitions" tabindex="12" /></div>
<div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
<div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
<div class="pure-u-1 pure-u-md-3-4 hint">
Temperature correction value is added to the measured value which may be inaccurate due to many factors. The value can be negative.
</div>
<div class="pure-u-1 pure-u-md-3-4 hint">If enabled color changes will be smoothed.</div>
</div>
</fieldset>


Loading…
Cancel
Save