Browse Source

Allow to disable color picker

fastled
Xose Pérez 7 years ago
parent
commit
58a8feb90b
11 changed files with 3730 additions and 3155 deletions
  1. +1
    -1
      code/espurna/config/general.h
  2. +98
    -75
      code/espurna/light.ino
  3. +41
    -37
      code/espurna/settings.ino
  4. +3435
    -3023
      code/espurna/static/index.html.gz.h
  5. +26
    -5
      code/espurna/web.ino
  6. +10
    -0
      code/html/custom.css
  7. +88
    -9
      code/html/custom.js
  8. +25
    -3
      code/html/index.html
  9. +1
    -0
      code/html/nouislider.min.css
  10. +3
    -0
      code/html/nouislider.min.js
  11. +2
    -2
      code/platformio.ini

+ 1
- 1
code/espurna/config/general.h View File

@ -300,12 +300,12 @@ PROGMEM const char* const custom_reset_string[] = {
// 4 channels => RGBW // 4 channels => RGBW
// 5 channels => RGBWW // 5 channels => RGBWW
#define LIGHT_DEFAULT_COLOR "#000080" // Default start color
#define LIGHT_SAVE_DELAY 5 // Persist color after 5 seconds to avoid wearing out #define LIGHT_SAVE_DELAY 5 // Persist color after 5 seconds to avoid wearing out
#define LIGHT_PWM_FREQUENCY 1000 // PWM frequency #define LIGHT_PWM_FREQUENCY 1000 // PWM frequency
#define LIGHT_MAX_PWM 4095 // Maximum PWM value #define LIGHT_MAX_PWM 4095 // Maximum PWM value
#define LIGHT_MAX_VALUE 255 // Maximum light value #define LIGHT_MAX_VALUE 255 // Maximum light value
#define LIGHT_MAX_BRIGHTNESS 255 // Maximun brightness value #define LIGHT_MAX_BRIGHTNESS 255 // Maximun brightness value
#define LIGHT_USE_COLOR 1 // Use 3 first channels as RGB
#define LIGHT_USE_WHITE 0 // Use white channel whenever RGB have the same value #define LIGHT_USE_WHITE 0 // Use white channel whenever RGB have the same value
#define LIGHT_ENABLE_GAMMA 0 // Enable gamma correction #define LIGHT_ENABLE_GAMMA 0 // Enable gamma correction


+ 98
- 75
code/espurna/light.ino View File

@ -12,6 +12,7 @@ Copyright (C) 2016-2017 by Xose Pérez <xose dot perez at gmail dot com>
#include <ArduinoJson.h> #include <ArduinoJson.h>
#include <vector> #include <vector>
Ticker colorTicker;
typedef struct { typedef struct {
unsigned char pin; unsigned char pin;
bool reverse; bool reverse;
@ -19,8 +20,6 @@ typedef struct {
unsigned char shadow; unsigned char shadow;
} channel_t; } channel_t;
std::vector<channel_t> _channels; std::vector<channel_t> _channels;
Ticker colorTicker;
bool _lightState = false; bool _lightState = false;
unsigned int _brightness = LIGHT_MAX_BRIGHTNESS; unsigned int _brightness = LIGHT_MAX_BRIGHTNESS;
@ -65,34 +64,40 @@ void _fromRGB(const char * rgb) {
// if color begins with a # then assume HEX RGB // if color begins with a # then assume HEX RGB
if (p[0] == '#') { if (p[0] == '#') {
if (!lightHasColor()) return;
++p;
unsigned long value = strtoul(p, NULL, 16);
if (lightHasColor()) {
++p;
unsigned long value = strtoul(p, NULL, 16);
// RGBA values are interpreted like RGB + brightness
if (strlen(p) > 7) {
_channels[0].value = (value >> 24) & 0xFF;
_channels[1].value = (value >> 16) & 0xFF;
_channels[2].value = (value >> 8) & 0xFF;
_brightness = (value & 0xFF) * LIGHT_MAX_BRIGHTNESS / 255;
} else {
_channels[0].value = (value >> 16) & 0xFF;
_channels[1].value = (value >> 8) & 0xFF;
_channels[2].value = (value) & 0xFF;
}
// RGBA values are interpreted like RGB + brightness
if (strlen(p) > 7) {
_channels[0].value = (value >> 24) & 0xFF;
_channels[1].value = (value >> 16) & 0xFF;
_channels[2].value = (value >> 8) & 0xFF;
_brightness = (value & 0xFF) * LIGHT_MAX_BRIGHTNESS / 255;
} else {
_channels[0].value = (value >> 16) & 0xFF;
_channels[1].value = (value >> 8) & 0xFF;
_channels[2].value = (value) & 0xFF;
} }
// it's a temperature in mireds // it's a temperature in mireds
} else if (p[0] == 'M') { } else if (p[0] == 'M') {
unsigned long mireds = atol(p + 1);
_fromMireds(mireds);
if (lightHasColor()) {
unsigned long mireds = atol(p + 1);
_fromMireds(mireds);
}
// it's a temperature in kelvin // it's a temperature in kelvin
} else if (p[0] == 'K') { } else if (p[0] == 'K') {
unsigned long kelvin = atol(p + 1);
_fromKelvin(kelvin);
if (lightHasColor()) {
unsigned long kelvin = atol(p + 1);
_fromKelvin(kelvin);
}
// otherwise assume decimal values separated by commas // otherwise assume decimal values separated by commas
} else { } else {
@ -109,7 +114,7 @@ void _fromRGB(const char * rgb) {
} }
// RGB but less than 3 values received // RGB but less than 3 values received
if (channels > 2 & count < 3) {
if (lightHasColor() && (count < 3)) {
_channels[1].value = _channels[0].value; _channels[1].value = _channels[0].value;
_channels[2].value = _channels[0].value; _channels[2].value = _channels[0].value;
} }
@ -174,9 +179,9 @@ void _fromMireds(unsigned long mireds) {
_fromKelvin(kelvin); _fromKelvin(kelvin);
} }
unsigned int _toPWM(unsigned long value, bool gamma, bool reverse) {
unsigned int _toPWM(unsigned long value, bool bright, bool gamma, bool reverse) {
value = constrain(value, 0, LIGHT_MAX_VALUE); value = constrain(value, 0, LIGHT_MAX_VALUE);
value *= ((float) _brightness / LIGHT_MAX_BRIGHTNESS);
if (bright) value *= ((float) _brightness / LIGHT_MAX_BRIGHTNESS);
#if LIGHT_ENABLE_GAMMA #if LIGHT_ENABLE_GAMMA
unsigned int pwm = gamma ? gamma_table[value] : map(value, 0, LIGHT_MAX_VALUE, 0, LIGHT_MAX_PWM); unsigned int pwm = gamma ? gamma_table[value] : map(value, 0, LIGHT_MAX_VALUE, 0, LIGHT_MAX_PWM);
#else #else
@ -189,12 +194,14 @@ unsigned int _toPWM(unsigned long value, bool gamma, bool reverse) {
// Returns a PWM valule for the given channel ID // Returns a PWM valule for the given channel ID
unsigned int _toPWM(unsigned char id) { unsigned int _toPWM(unsigned char id) {
if (id < _channels.size()) { if (id < _channels.size()) {
bool isColor = (lightHasColor() && id < 3);
bool bright = isColor;
#if LIGHT_ENABLE_GAMMA #if LIGHT_ENABLE_GAMMA
bool gamma = (lightHasColor() && id < 3);
bool gamma = isColor;
#else #else
bool gamma = false; bool gamma = false;
#endif #endif
return _toPWM(_channels[id].shadow, gamma, _channels[id].reverse);
return _toPWM(_channels[id].shadow, bright, gamma, _channels[id].reverse);
} }
return 0; return 0;
} }
@ -205,23 +212,27 @@ unsigned int _toPWM(unsigned char id) {
void _shadow() { void _shadow() {
bool useWhite = getSetting("useWhite", LIGHT_USE_WHITE).toInt() == 1;
for (unsigned int i=0; i < _channels.size(); i++) { for (unsigned int i=0; i < _channels.size(); i++) {
_channels[i].shadow = _lightState ? _channels[i].value : 0; _channels[i].shadow = _lightState ? _channels[i].value : 0;
} }
if (_lightState && useWhite && _channels.size() > 3) {
if (_channels[0].shadow == _channels[1].shadow && _channels[1].shadow == _channels[2].shadow ) {
_channels[3].shadow = _channels[0].shadow;
_channels[2].shadow = 0;
_channels[1].shadow = 0;
_channels[0].shadow = 0;
if (lightHasColor()) {
bool useWhite = getSetting("useWhite", LIGHT_USE_WHITE).toInt() == 1;
if (_lightState && useWhite && _channels.size() > 3) {
if (_channels[0].shadow == _channels[1].shadow && _channels[1].shadow == _channels[2].shadow ) {
_channels[3].shadow = _channels[0].shadow;
_channels[2].shadow = 0;
_channels[1].shadow = 0;
_channels[0].shadow = 0;
}
} }
}
}
} }
void _lightProviderUpdate() { void _lightProviderUpdate() {
_shadow(); _shadow();
@ -286,10 +297,12 @@ void _lightMQTTCallback(unsigned int type, const char * topic, const char * payl
if (type == MQTT_CONNECT_EVENT) { if (type == MQTT_CONNECT_EVENT) {
mqttSubscribe(MQTT_TOPIC_BRIGHTNESS);
mqttSubscribe(MQTT_TOPIC_MIRED);
mqttSubscribe(MQTT_TOPIC_KELVIN);
mqttSubscribe(MQTT_TOPIC_COLOR);
if (lightHasColor()) {
mqttSubscribe(MQTT_TOPIC_BRIGHTNESS);
mqttSubscribe(MQTT_TOPIC_MIRED);
mqttSubscribe(MQTT_TOPIC_KELVIN);
mqttSubscribe(MQTT_TOPIC_COLOR);
}
char buffer[strlen(MQTT_TOPIC_CHANNEL) + 3]; char buffer[strlen(MQTT_TOPIC_CHANNEL) + 3];
sprintf(buffer, "%s/+", MQTT_TOPIC_CHANNEL); sprintf(buffer, "%s/+", MQTT_TOPIC_CHANNEL);
@ -350,7 +363,11 @@ unsigned char lightChannels() {
} }
bool lightHasColor() { bool lightHasColor() {
return _channels.size() > 2;
#if LIGHT_USE_COLOR
return _channels.size() > 2;
#else
return false;
#endif
} }
unsigned char lightWhiteChannels() { unsigned char lightWhiteChannels() {
@ -361,10 +378,16 @@ void lightMQTT() {
char buffer[8]; char buffer[8];
// Color
if (lightHasColor()) { if (lightHasColor()) {
// Color
_toRGB(buffer, 8, false); _toRGB(buffer, 8, false);
mqttSend(MQTT_TOPIC_COLOR, buffer); mqttSend(MQTT_TOPIC_COLOR, buffer);
// Brightness
sprintf(buffer, "%d", _brightness);
mqttSend(MQTT_TOPIC_BRIGHTNESS, buffer);
} }
// Channels // Channels
@ -373,19 +396,12 @@ void lightMQTT() {
mqttSend(MQTT_TOPIC_CHANNEL, i, buffer); mqttSend(MQTT_TOPIC_CHANNEL, i, buffer);
} }
// Brightness
sprintf(buffer, "%d", _brightness);
mqttSend(MQTT_TOPIC_BRIGHTNESS, buffer);
} }
void lightUpdate(bool save, bool forward) { void lightUpdate(bool save, bool forward) {
_lightProviderUpdate(); _lightProviderUpdate();
// Delay saving to EEPROM 5 seconds to avoid wearing it out unnecessarily
if (save) colorTicker.once(LIGHT_SAVE_DELAY, _lightColorSave);
// Report color & brightness to MQTT broker // Report color & brightness to MQTT broker
if (forward) lightMQTT(); if (forward) lightMQTT();
@ -394,17 +410,22 @@ void lightUpdate(bool save, bool forward) {
DynamicJsonBuffer jsonBuffer; DynamicJsonBuffer jsonBuffer;
JsonObject& root = jsonBuffer.createObject(); JsonObject& root = jsonBuffer.createObject();
root["colorVisible"] = 1; root["colorVisible"] = 1;
root["color"] = lightColor();
if (lightHasColor()) {
root["color"] = lightColor();
root["brightness"] = lightBrightness();
}
JsonArray& channels = root.createNestedArray("channels"); JsonArray& channels = root.createNestedArray("channels");
for (unsigned char id=0; id < lightChannels(); id++) { for (unsigned char id=0; id < lightChannels(); id++) {
channels.add(lightChannel(id)); channels.add(lightChannel(id));
} }
root["brightness"] = lightBrightness();
String output; String output;
root.printTo(output); root.printTo(output);
wsSend(output.c_str()); wsSend(output.c_str());
} }
// Delay saving to EEPROM 5 seconds to avoid wearing it out unnecessarily
if (save) colorTicker.once(LIGHT_SAVE_DELAY, _lightColorSave);
}; };
void lightState(bool state) { void lightState(bool state) {
@ -453,7 +474,8 @@ void lightBrightness(unsigned int b) {
void _lightAPISetup() { void _lightAPISetup() {
// API entry points (protected with apikey) // API entry points (protected with apikey)
if (_channels.size() > 2) {
if (lightHasColor()) {
apiRegister(MQTT_TOPIC_COLOR, MQTT_TOPIC_COLOR, apiRegister(MQTT_TOPIC_COLOR, MQTT_TOPIC_COLOR,
[](char * buffer, size_t len) { [](char * buffer, size_t len) {
_toRGB(buffer, len, false); _toRGB(buffer, len, false);
@ -463,33 +485,34 @@ void _lightAPISetup() {
lightUpdate(true, true); lightUpdate(true, true);
} }
); );
}
apiRegister(MQTT_TOPIC_KELVIN, MQTT_TOPIC_KELVIN,
[](char * buffer, size_t len) {},
[](const char * payload) {
_fromKelvin(atol(payload));
lightUpdate(true, true);
}
);
apiRegister(MQTT_TOPIC_BRIGHTNESS, MQTT_TOPIC_BRIGHTNESS,
[](char * buffer, size_t len) {
snprintf(buffer, len, "%d", _brightness);
},
[](const char * payload) {
lightBrightness(atoi(payload));
lightUpdate(true, true);
}
);
apiRegister(MQTT_TOPIC_MIRED, MQTT_TOPIC_MIRED,
[](char * buffer, size_t len) {},
[](const char * payload) {
_fromMireds(atol(payload));
lightUpdate(true, true);
}
);
apiRegister(MQTT_TOPIC_BRIGHTNESS, MQTT_TOPIC_BRIGHTNESS,
[](char * buffer, size_t len) {
snprintf(buffer, len, "%d", _brightness);
},
[](const char * payload) {
lightBrightness(atoi(payload));
lightUpdate(true, true);
}
);
apiRegister(MQTT_TOPIC_KELVIN, MQTT_TOPIC_KELVIN,
[](char * buffer, size_t len) {},
[](const char * payload) {
_fromKelvin(atol(payload));
lightUpdate(true, true);
}
);
apiRegister(MQTT_TOPIC_MIRED, MQTT_TOPIC_MIRED,
[](char * buffer, size_t len) {},
[](const char * payload) {
_fromMireds(atol(payload));
lightUpdate(true, true);
}
);
}
for (unsigned int id=0; id<lightChannels(); id++) { for (unsigned int id=0; id<lightChannels(); id++) {


+ 41
- 37
code/espurna/settings.ino View File

@ -139,44 +139,48 @@ void settingsSetup() {
#if LIGHT_PROVIDER != LIGHT_PROVIDER_NONE #if LIGHT_PROVIDER != LIGHT_PROVIDER_NONE
Embedis::command( F("COLOR"), [](Embedis* e) {
if (e->argc > 1) {
String color = String(e->argv[1]);
lightColor(color.c_str());
lightUpdate(true, true);
}
e->stream->printf("Color: %s\n", lightColor().c_str());
e->response(Embedis::OK);
});
Embedis::command( F("MIRED"), [](Embedis* e) {
if (e->argc > 1) {
String color = String("M") + String(e->argv[1]);
lightColor(color.c_str());
lightUpdate(true, true);
}
e->stream->printf("Color: %s\n", lightColor().c_str());
e->response(Embedis::OK);
});
if (lightHasColor()) {
Embedis::command( F("COLOR"), [](Embedis* e) {
if (e->argc > 1) {
String color = String(e->argv[1]);
lightColor(color.c_str());
lightUpdate(true, true);
}
e->stream->printf("Color: %s\n", lightColor().c_str());
e->response(Embedis::OK);
});
Embedis::command( F("BRIGHTNESS"), [](Embedis* e) {
if (e->argc > 1) {
lightBrightness(String(e->argv[1]).toInt());
lightUpdate(true, true);
}
e->stream->printf("Brightness: %d\n", lightBrightness());
e->response(Embedis::OK);
});
Embedis::command( F("MIRED"), [](Embedis* e) {
if (e->argc > 1) {
String color = String("M") + String(e->argv[1]);
lightColor(color.c_str());
lightUpdate(true, true);
}
e->stream->printf("Color: %s\n", lightColor().c_str());
e->response(Embedis::OK);
});
Embedis::command( F("KELVIN"), [](Embedis* e) {
if (e->argc > 1) {
String color = String("K") + String(e->argv[1]);
lightColor(color.c_str());
lightUpdate(true, true);
}
e->stream->printf("Color: %s\n", lightColor().c_str());
e->response(Embedis::OK);
});
Embedis::command( F("KELVIN"), [](Embedis* e) {
if (e->argc > 1) {
String color = String("K") + String(e->argv[1]);
lightColor(color.c_str());
lightUpdate(true, true);
}
e->stream->printf("Color: %s\n", lightColor().c_str());
e->response(Embedis::OK);
});
Embedis::command( F("BRIGHTNESS"), [](Embedis* e) {
if (e->argc > 1) {
lightBrightness(String(e->argv[1]).toInt());
lightUpdate(true, true);
}
e->stream->printf("Brightness: %d\n", lightBrightness());
e->response(Embedis::OK);
});
}
Embedis::command( F("CHANNEL"), [](Embedis* e) { Embedis::command( F("CHANNEL"), [](Embedis* e) {
if (e->argc < 2) { if (e->argc < 2) {


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


+ 26
- 5
code/espurna/web.ino View File

@ -144,10 +144,29 @@ void _wsParse(uint32_t client_id, uint8_t * payload, size_t length) {
} }
#if LIGHT_PROVIDER != LIGHT_PROVIDER_NONE #if LIGHT_PROVIDER != LIGHT_PROVIDER_NONE
if (action.equals("color") && root.containsKey("data")) {
lightColor(root["data"]);
lightUpdate(true, true);
if (lightHasColor()) {
if (action.equals("color") && root.containsKey("data")) {
lightColor(root["data"]);
lightUpdate(true, true);
}
if (action.equals("brightness") && root.containsKey("data")) {
lightBrightness(root["data"]);
lightUpdate(true, true);
}
} }
if (action.equals("channel") && root.containsKey("data")) {
JsonObject& data = root["data"];
if (data.containsKey("id") && data.containsKey("value")) {
lightChannel(data["id"], data["value"]);
lightUpdate(true, true);
}
}
#endif #endif
}; };
@ -453,12 +472,14 @@ void _wsStart(uint32_t client_id) {
#if LIGHT_PROVIDER != LIGHT_PROVIDER_NONE #if LIGHT_PROVIDER != LIGHT_PROVIDER_NONE
root["colorVisible"] = 1; root["colorVisible"] = 1;
root["color"] = lightColor();
if (lightHasColor()) {
root["color"] = lightColor();
root["brightness"] = lightBrightness();
}
JsonArray& channels = root.createNestedArray("channels"); JsonArray& channels = root.createNestedArray("channels");
for (unsigned char id=0; id < lightChannels(); id++) { for (unsigned char id=0; id < lightChannels(); id++) {
channels.add(lightChannel(id)); channels.add(lightChannel(id));
} }
root["brightness"] = lightBrightness();
#endif #endif
root["relayMode"] = getSetting("relayMode", RELAY_MODE); root["relayMode"] = getSetting("relayMode", RELAY_MODE);


+ 10
- 0
code/html/custom.css View File

@ -149,3 +149,13 @@ div.state {
.right { .right {
text-align: right; text-align: right;
} }
.slider {
margin-top: 12px;
}
.slider .noUi-target {
background: #D2D2D2;
}
.slider .noUi-connect {
background: #FFFFFF;
}

+ 88
- 9
code/html/custom.js View File

@ -31,12 +31,6 @@ function validateForm(form) {
} }
function doColor() {
var color = $(this).wheelColorPicker('getValue', 'css');
websock.send(JSON.stringify({'action': 'color', 'data' : color}));
}
function doUpdate() { function doUpdate() {
var form = $("#formSave"); var form = $("#formSave");
if (validateForm(form)) { if (validateForm(form)) {
@ -284,6 +278,77 @@ function addNetwork() {
} }
function initColor() {
// check if already initialized
var done = $("#colors > div").length;
if (done > 0) return;
// add template
var template = $("#colorTemplate").children();
var line = $(template).clone();
line.appendTo("#colors");
// init color wheel
$('input[name="color"]').wheelColorPicker({
sliders: 'wrgbp'
}).on('sliderup', function() {
var value = $(this).wheelColorPicker('getValue', 'css');
websock.send(JSON.stringify({'action': 'color', 'data' : value}));
});
// init bright slider
noUiSlider.create($("#brightness").get(0), {
start: 255,
connect: [true, false],
orientation: "horizontal",
range: { 'min': 0, 'max': 255}
}).on("change", function() {
var value = parseInt(this.get());
websock.send(JSON.stringify({'action': 'brightness', 'data' : value}));
});
}
function initChannels(num) {
// check if already initialized
var done = $("#channels > div").length > 0;
if (done) return;
// does it have color channels?
var colors = $("#colors > div").length > 0;
// calculate channels to create
var max = colors ? num % 3 : num;
var start = num - max;
// add templates
var template = $("#channelTemplate").children();
for (var i=0; i<max; i++) {
var channel_id = start + i;
var line = $(template).clone();
$(".slider", line).attr("data", channel_id);
$("label", line).html("Channel " + (channel_id + 1));
noUiSlider.create($(".slider", line).get(0), {
start: 0,
connect: [true, false],
orientation: "horizontal",
range: { 'min': 0, 'max': 255 }
}).on("change", function() {
var id = $(this.target).attr("data");
var value = parseInt(this.get());
websock.send(JSON.stringify({'action': 'channel', 'data': { 'id': id, 'value': value }}));
});
line.appendTo("#channels");
}
}
function forgetCredentials() { function forgetCredentials() {
$.ajax({ $.ajax({
'method': 'GET', 'method': 'GET',
@ -342,10 +407,27 @@ function processData(data) {
} }
if (key == "color") { if (key == "color") {
initColor();
$("input[name='color']").wheelColorPicker('setValue', data[key], true); $("input[name='color']").wheelColorPicker('setValue', data[key], true);
return; return;
} }
if (key == "brightness") {
var slider = $("#brightness");
if (slider) slider.get(0).noUiSlider.set(data[key]);
return;
}
if (key == "channels") {
var len = data[key].length;
initChannels(len);
for (var i=0; i<len; i++) {
var slider = $(".channels[data=" + i + "]");
if (slider) slider.get(0).noUiSlider.set(data[key][i]);
}
return;
}
if (key == "maxNetworks") { if (key == "maxNetworks") {
maxNetworks = parseInt(data.maxNetworks); maxNetworks = parseInt(data.maxNetworks);
return; return;
@ -537,9 +619,6 @@ function init() {
$(".button-add-network").on('click', function() { $(".button-add-network").on('click', function() {
$("div.more", addNetwork()).toggle(); $("div.more", addNetwork()).toggle();
}); });
$('input[name="color"]').wheelColorPicker({
sliders: 'wsvp'
}).on('sliderup', doColor);
var host = window.location.hostname; var host = window.location.hostname;
var port = location.port; var port = location.port;


+ 25
- 3
code/html/index.html View File

@ -14,6 +14,7 @@
<link rel="stylesheet" href="checkboxes.css" /> <link rel="stylesheet" href="checkboxes.css" />
<link rel="stylesheet" href="custom.css" /> <link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="wheelcolorpicker.css" /> <link rel="stylesheet" href="wheelcolorpicker.css" />
<link rel="stylesheet" href="nouislider.min.css" />
<!-- endbuild --> <!-- endbuild -->
</head> </head>
@ -154,9 +155,10 @@
<div id="relays"> <div id="relays">
</div> </div>
<div class="pure-g module module-color">
<label class="pure-u-1 pure-u-sm-1-4">Color</label>
<input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />
<div id="colors">
</div>
<div id="channels">
</div> </div>
<div class="pure-g module module-analog"> <div class="pure-g module module-analog">
@ -784,6 +786,25 @@
</div> </div>
</div> </div>
<div id="colorTemplate" class="template">
<div class="pure-g">
<label class="pure-u-1 pure-u-sm-1-4">Color</label>
<input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />
</div>
<div class="pure-g">
<label class="pure-u-1 pure-u-sm-1-4">Brightness</label>
<div class="slider pure-u-1 pure-u-sm-1-4" id="brightness"></div>
</div>
</div>
<div id="channelTemplate" class="template">
<div class="pure-g">
<label class="pure-u-1 pure-u-sm-1-4">Channel #</label>
<div class="slider channels pure-u-1 pure-u-sm-1-4" data="0"></div>
</div>
</div>
<iframe id="downloader" style="display:none;"></iframe> <iframe id="downloader" style="display:none;"></iframe>
<input id="uploader" type="file" style="display:none;" /> <input id="uploader" type="file" style="display:none;" />
@ -794,6 +815,7 @@
<script src="checkboxes.js"></script> <script src="checkboxes.js"></script>
<script src="custom.js"></script> <script src="custom.js"></script>
<script src="jquery.wheelcolorpicker-3.0.2.min.js"></script> <script src="jquery.wheelcolorpicker-3.0.2.min.js"></script>
<script src="nouislider.min.js"></script>
<!-- endbuild --> <!-- endbuild -->
</html> </html>

+ 1
- 0
code/html/nouislider.min.css View File

@ -0,0 +1 @@
/*! nouislider - 10.0.0 - 2017-05-28 14:52:48 */.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative;direction:ltr}.noUi-base{width:100%;height:100%;position:relative;z-index:1}.noUi-connect{position:absolute;right:0;top:0;left:0;bottom:0}.noUi-origin{position:absolute;height:0;width:0}.noUi-handle{position:relative;z-index:1}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:top .3s,right .3s,bottom .3s,left .3s;transition:top .3s,right .3s,bottom .3s,left .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-base,.noUi-handle{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;left:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connect{background:#3FB8AF;border-radius:4px;box-shadow:inset 0 0 3px rgba(51,51,51,.45);-webkit-transition:background 450ms;transition:background 450ms}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-large,.noUi-marker-sub{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);padding-left:25px}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}

+ 3
- 0
code/html/nouislider.min.js
File diff suppressed because it is too large
View File


+ 2
- 2
code/platformio.ini View File

@ -448,7 +448,7 @@ board = esp01_1m
board_flash_mode = dout board_flash_mode = dout
lib_deps = ${common.lib_deps} lib_deps = ${common.lib_deps}
lib_ignore = ${common.lib_ignore} lib_ignore = ${common.lib_ignore}
build_flags = -g -Wl,-Tesp8266.flash.1m128.ld -DH801_LED_CONTROLLER -DDEBUG_PORT=Serial1
build_flags = -g -Wl,-Tesp8266.flash.1m0.ld -DH801_LED_CONTROLLER -DDEBUG_PORT=Serial1
[env:h801-debug-ota] [env:h801-debug-ota]
platform = espressif8266 platform = espressif8266
@ -457,7 +457,7 @@ board = esp01_1m
board_flash_mode = dout board_flash_mode = dout
lib_deps = ${common.lib_deps} lib_deps = ${common.lib_deps}
lib_ignore = ${common.lib_ignore} lib_ignore = ${common.lib_ignore}
build_flags = -g -Wl,-Tesp8266.flash.1m128.ld -DH801_LED_CONTROLLER -DDEBUG_PORT=Serial1
build_flags = -g -Wl,-Tesp8266.flash.1m0.ld -DH801_LED_CONTROLLER -DDEBUG_PORT=Serial1
upload_speed = 115200 upload_speed = 115200
upload_port = "192.168.4.1" upload_port = "192.168.4.1"
upload_flags = --auth=fibonacci --port 8266 upload_flags = --auth=fibonacci --port 8266

Loading…
Cancel
Save