mirror of
https://github.com/wled/WLED.git
synced 2025-07-23 02:36:39 +00:00
Integrated liveview
This commit is contained in:
parent
731550acb3
commit
0e8806eb2b
@ -367,7 +367,7 @@ class WS2812FX {
|
|||||||
setEffectConfig(uint8_t m, uint8_t s, uint8_t i, uint8_t p);
|
setEffectConfig(uint8_t m, uint8_t s, uint8_t i, uint8_t p);
|
||||||
|
|
||||||
uint8_t
|
uint8_t
|
||||||
returnedSegment = 0,
|
mainSegment = 0,
|
||||||
paletteFade = 0,
|
paletteFade = 0,
|
||||||
paletteBlend = 0,
|
paletteBlend = 0,
|
||||||
colorOrder = 0,
|
colorOrder = 0,
|
||||||
@ -380,7 +380,7 @@ class WS2812FX {
|
|||||||
getPaletteCount(void),
|
getPaletteCount(void),
|
||||||
getMaxSegments(void),
|
getMaxSegments(void),
|
||||||
getFirstSelectedSegment(void),
|
getFirstSelectedSegment(void),
|
||||||
getReturnedSegmentId(void),
|
getMainSegmentId(void),
|
||||||
gamma8(uint8_t),
|
gamma8(uint8_t),
|
||||||
get_random_wheel_index(uint8_t);
|
get_random_wheel_index(uint8_t);
|
||||||
|
|
||||||
|
@ -331,7 +331,7 @@ void WS2812FX::setPalette(uint8_t p) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
bool WS2812FX::setEffectConfig(uint8_t m, uint8_t s, uint8_t in, uint8_t p) {
|
bool WS2812FX::setEffectConfig(uint8_t m, uint8_t s, uint8_t in, uint8_t p) {
|
||||||
uint8_t retSeg = getReturnedSegmentId();
|
uint8_t retSeg = getMainSegmentId();
|
||||||
Segment& seg = _segments[retSeg];
|
Segment& seg = _segments[retSeg];
|
||||||
uint8_t modePrev = seg.mode, speedPrev = seg.speed, intensityPrev = seg.intensity, palettePrev = seg.palette;
|
uint8_t modePrev = seg.mode, speedPrev = seg.speed, intensityPrev = seg.intensity, palettePrev = seg.palette;
|
||||||
|
|
||||||
@ -370,11 +370,11 @@ void WS2812FX::setBrightness(uint8_t b) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
uint8_t WS2812FX::getMode(void) {
|
uint8_t WS2812FX::getMode(void) {
|
||||||
return _segments[getReturnedSegmentId()].mode;
|
return _segments[getMainSegmentId()].mode;
|
||||||
}
|
}
|
||||||
|
|
||||||
uint8_t WS2812FX::getSpeed(void) {
|
uint8_t WS2812FX::getSpeed(void) {
|
||||||
return _segments[getReturnedSegmentId()].speed;
|
return _segments[getMainSegmentId()].speed;
|
||||||
}
|
}
|
||||||
|
|
||||||
uint8_t WS2812FX::getBrightness(void) {
|
uint8_t WS2812FX::getBrightness(void) {
|
||||||
@ -398,20 +398,21 @@ uint8_t WS2812FX::getFirstSelectedSegment(void)
|
|||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
uint8_t WS2812FX::getReturnedSegmentId(void) {
|
uint8_t WS2812FX::getMainSegmentId(void) {
|
||||||
if (returnedSegment >= MAX_NUM_SEGMENTS || !_segments[returnedSegment].isActive())
|
if (mainSegment >= MAX_NUM_SEGMENTS || !_segments[mainSegment].isActive())
|
||||||
{
|
{
|
||||||
return getFirstSelectedSegment();
|
return getFirstSelectedSegment();
|
||||||
}
|
}
|
||||||
return returnedSegment;
|
return mainSegment;
|
||||||
}
|
}
|
||||||
|
|
||||||
uint32_t WS2812FX::getColor(void) {
|
uint32_t WS2812FX::getColor(void) {
|
||||||
return _segments[getReturnedSegmentId()].colors[0];
|
return _segments[getMainSegmentId()].colors[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
uint32_t WS2812FX::getPixelColor(uint16_t i)
|
uint32_t WS2812FX::getPixelColor(uint16_t i)
|
||||||
{
|
{
|
||||||
|
i = i * (_disableNLeds+1);
|
||||||
if (reverseMode) i = _length- 1 -i;
|
if (reverseMode) i = _length- 1 -i;
|
||||||
if (IS_REVERSE) i = SEGMENT.stop -1 -i + SEGMENT.start; //reverse just individual segment
|
if (IS_REVERSE) i = SEGMENT.stop -1 -i + SEGMENT.start; //reverse just individual segment
|
||||||
if (_skipFirstMode) i += LED_SKIP_AMOUNT;
|
if (_skipFirstMode) i += LED_SKIP_AMOUNT;
|
||||||
@ -434,6 +435,7 @@ uint32_t WS2812FX::getPixelColor(uint16_t i)
|
|||||||
default: return 0;
|
default: return 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (i >= _lengthRaw) return 0;
|
||||||
RgbwColor lColor = bus->GetPixelColorRgbw(i);
|
RgbwColor lColor = bus->GetPixelColorRgbw(i);
|
||||||
byte r = lColor.R, g = lColor.G, b = lColor.B;
|
byte r = lColor.R, g = lColor.G, b = lColor.B;
|
||||||
switch (colorOrder)
|
switch (colorOrder)
|
||||||
|
59
wled00/data/liveview.htm
Normal file
59
wled00/data/liveview.htm
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="theme-color" content="#222222">
|
||||||
|
<title>WLED Live Preview</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#canv {
|
||||||
|
background: black;
|
||||||
|
filter: brightness(175%);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="canv" />
|
||||||
|
<script>
|
||||||
|
update();
|
||||||
|
|
||||||
|
function update()
|
||||||
|
{
|
||||||
|
if (document.hidden) {
|
||||||
|
setTimeout(update, 250);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
fetch('/json/live')
|
||||||
|
.then(res => {
|
||||||
|
if (!res.ok) {
|
||||||
|
setTimeout(update, 2500);
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(json => {
|
||||||
|
var str = "linear-gradient(90deg,";
|
||||||
|
var len = json.leds.length;
|
||||||
|
for (i = 0; i < len; i++) {
|
||||||
|
var leddata = json.leds[i];
|
||||||
|
if (leddata.length > 6) leddata = leddata.substring(2);
|
||||||
|
str += "#" + leddata;
|
||||||
|
if (i < len -1) str += ","
|
||||||
|
}
|
||||||
|
str += ")";
|
||||||
|
document.getElementById("canv").style.background = str;
|
||||||
|
setTimeout(update, 40);
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
setTimeout(update, 2500);
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -33,6 +33,24 @@ const char PAGE_welcome[] PROGMEM = "";
|
|||||||
#endif
|
#endif
|
||||||
|
|
||||||
|
|
||||||
|
//liveview
|
||||||
|
const char PAGE_liveview[] PROGMEM = R"=====(<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<meta name=viewport content="width=device-width, initial-scale=1, minimum-scale=1">
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<meta name=theme-color content=#222222>
|
||||||
|
<title>WLED Live Preview</title>
|
||||||
|
<style>body{margin:0}#canv{background:black;filter:brightness(175%);width:100%;height:100%;position:absolute}</style>
|
||||||
|
</head>
|
||||||
|
<body><div id=canv />
|
||||||
|
<script>update();function update()
|
||||||
|
{if(document.hidden){setTimeout(update,250);return;}
|
||||||
|
fetch('/json/live').then(res=>{if(!res.ok){setTimeout(update,2500);}
|
||||||
|
return res.json();}).then(json=>{var str="linear-gradient(90deg,";var len=json.leds.length;for(i=0;i<len;i++){var leddata=json.leds[i];if(leddata.length>6)leddata=leddata.substring(2);str+="#"+leddata;if(i<len-1)str+=","}
|
||||||
|
str+=")";document.getElementById("canv").style.background=str;setTimeout(update,40);}).catch(function(error){setTimeout(update,2500);})}</script>
|
||||||
|
</body></html>)=====";
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* favicon
|
* favicon
|
||||||
*/
|
*/
|
||||||
|
@ -37,6 +37,10 @@ void initServer()
|
|||||||
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Methods", "*");
|
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Methods", "*");
|
||||||
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Headers", "*");
|
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Headers", "*");
|
||||||
|
|
||||||
|
server.on("/liveview", HTTP_GET, [](AsyncWebServerRequest *request){
|
||||||
|
request->send_P(200, "text/html", PAGE_liveview);
|
||||||
|
});
|
||||||
|
|
||||||
//settings page
|
//settings page
|
||||||
server.on("/settings", HTTP_GET, [](AsyncWebServerRequest *request){
|
server.on("/settings", HTTP_GET, [](AsyncWebServerRequest *request){
|
||||||
serveSettings(request);
|
serveSettings(request);
|
||||||
|
@ -2,51 +2,8 @@
|
|||||||
* JSON API (De)serialization
|
* JSON API (De)serialization
|
||||||
*/
|
*/
|
||||||
|
|
||||||
bool deserializeState(JsonObject root)
|
void deserializeSegment(JsonObject elem, byte it)
|
||||||
{
|
{
|
||||||
bool stateResponse = root["v"] | false;
|
|
||||||
|
|
||||||
bri = root["bri"] | bri;
|
|
||||||
|
|
||||||
bool on = root["on"] | (bri > 0);
|
|
||||||
if (!on != !bri) toggleOnOff();
|
|
||||||
|
|
||||||
if (root.containsKey("transition"))
|
|
||||||
{
|
|
||||||
transitionDelay = root["transition"];
|
|
||||||
transitionDelay *= 100;
|
|
||||||
}
|
|
||||||
if (root.containsKey("tt"))
|
|
||||||
{
|
|
||||||
transitionDelayTemp = root["tt"];
|
|
||||||
transitionDelayTemp *= 100;
|
|
||||||
jsonTransitionOnce = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
int ps = root["ps"] | -1;
|
|
||||||
if (ps >= 0) applyPreset(ps);
|
|
||||||
|
|
||||||
int cy = root["pl"] | -1;
|
|
||||||
presetCyclingEnabled = (cy >= 0);
|
|
||||||
|
|
||||||
JsonObject nl = root["nl"];
|
|
||||||
nightlightActive = nl["on"] | nightlightActive;
|
|
||||||
nightlightDelayMins = nl["dur"] | nightlightDelayMins;
|
|
||||||
nightlightFade = nl["fade"] | nightlightFade;
|
|
||||||
nightlightTargetBri = nl["tbri"] | nightlightTargetBri;
|
|
||||||
|
|
||||||
JsonObject udpn = root["udpn"];
|
|
||||||
notifyDirect = udpn["send"] | notifyDirect;
|
|
||||||
receiveNotifications = udpn["recv"] | receiveNotifications;
|
|
||||||
bool noNotification = udpn["nn"]; //send no notification just for this request
|
|
||||||
|
|
||||||
int timein = root["time"] | -1;
|
|
||||||
if (timein != -1) setTime(timein);
|
|
||||||
|
|
||||||
int it = 0;
|
|
||||||
JsonArray segs = root["seg"];
|
|
||||||
for (JsonObject elem : segs)
|
|
||||||
{
|
|
||||||
byte id = elem["id"] | it;
|
byte id = elem["id"] | it;
|
||||||
if (id < strip.getMaxSegments())
|
if (id < strip.getMaxSegments())
|
||||||
{
|
{
|
||||||
@ -101,8 +58,78 @@ bool deserializeState(JsonObject root)
|
|||||||
seg.palette = elem["pal"] | seg.palette;
|
seg.palette = elem["pal"] | seg.palette;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bool deserializeState(JsonObject root)
|
||||||
|
{
|
||||||
|
bool stateResponse = root["v"] | false;
|
||||||
|
|
||||||
|
bri = root["bri"] | bri;
|
||||||
|
|
||||||
|
bool on = root["on"] | (bri > 0);
|
||||||
|
if (!on != !bri) toggleOnOff();
|
||||||
|
|
||||||
|
int tr = root["transition"] | -1;
|
||||||
|
if (tr >= 0)
|
||||||
|
{
|
||||||
|
transitionDelay = tr;
|
||||||
|
transitionDelay *= 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr = root["tt"] | -1;
|
||||||
|
if (tr >= 0)
|
||||||
|
{
|
||||||
|
transitionDelayTemp = tr;
|
||||||
|
transitionDelayTemp *= 100;
|
||||||
|
jsonTransitionOnce = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
int ps = root["ps"] | -1;
|
||||||
|
if (ps >= 0) applyPreset(ps);
|
||||||
|
|
||||||
|
int cy = root["pl"] | -1;
|
||||||
|
presetCyclingEnabled = (cy >= 0);
|
||||||
|
|
||||||
|
JsonObject nl = root["nl"];
|
||||||
|
nightlightActive = nl["on"] | nightlightActive;
|
||||||
|
nightlightDelayMins = nl["dur"] | nightlightDelayMins;
|
||||||
|
nightlightFade = nl["fade"] | nightlightFade;
|
||||||
|
nightlightTargetBri = nl["tbri"] | nightlightTargetBri;
|
||||||
|
|
||||||
|
JsonObject udpn = root["udpn"];
|
||||||
|
notifyDirect = udpn["send"] | notifyDirect;
|
||||||
|
receiveNotifications = udpn["recv"] | receiveNotifications;
|
||||||
|
bool noNotification = udpn["nn"]; //send no notification just for this request
|
||||||
|
|
||||||
|
int timein = root["time"] | -1;
|
||||||
|
if (timein != -1) setTime(timein);
|
||||||
|
|
||||||
|
int it = 0;
|
||||||
|
JsonVariant segVar = root["seg"];
|
||||||
|
if (segVar.is<JsonObject>())
|
||||||
|
{
|
||||||
|
int id = segVar["id"] | -1;
|
||||||
|
if (id < 0) { //set all selected segments
|
||||||
|
for (byte s = 0; s < strip.getMaxSegments(); s++)
|
||||||
|
{
|
||||||
|
WS2812FX::Segment sg = strip.getSegment(s);
|
||||||
|
if (sg.isActive() && sg.isSelected())
|
||||||
|
{
|
||||||
|
deserializeSegment(segVar, s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else { //set only the segment with the specified ID
|
||||||
|
deserializeSegment(segVar, it);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
JsonArray segs = segVar.as<JsonArray>();
|
||||||
|
for (JsonObject elem : segs)
|
||||||
|
{
|
||||||
|
deserializeSegment(elem, it);
|
||||||
it++;
|
it++;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
colorUpdated(noNotification ? 5:1);
|
colorUpdated(noNotification ? 5:1);
|
||||||
|
|
||||||
ps = root["psave"] | -1;
|
ps = root["psave"] | -1;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user