Revert 2D peek
This commit is contained in:
Blaž Kristan
parent
d511eb19ef
commit
59cb9ba344
@ -393,12 +393,6 @@ const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
|
||||
method: "gzip",
|
||||
filter: "html-minify",
|
||||
},
|
||||
{
|
||||
file: "liveviewws2D.htm",
|
||||
name: "PAGE_liveviewws2D",
|
||||
method: "gzip",
|
||||
filter: "html-minify",
|
||||
},
|
||||
{
|
||||
file: "404.htm",
|
||||
name: "PAGE_404",
|
||||
|
||||
@ -233,14 +233,6 @@ button {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
#liveview2D {
|
||||
height: 320px;
|
||||
display: none;
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
background-color: transparent;
|
||||
color: var(--c-d);
|
||||
|
||||
@ -329,10 +329,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mliveview2D" class="modal">
|
||||
<div id="kliveview2D">Loading...</div><br>
|
||||
</div>
|
||||
|
||||
<div id="rover" class="modal">
|
||||
<i class="icons huge"></i><br>
|
||||
<div id="lv">?</div><br><br>
|
||||
|
||||
@ -1526,30 +1526,10 @@ function toggleSync()
|
||||
|
||||
function toggleLiveview()
|
||||
{
|
||||
if (isInfo) toggleInfo();
|
||||
if (isNodes) toggleNodes();
|
||||
|
||||
isLv = !isLv;
|
||||
|
||||
var lvID = "liveview";
|
||||
if (isM) {
|
||||
lvID = "liveview2D"
|
||||
if (isLv) {
|
||||
var cn = '<iframe id="liveview2D" src="about:blank"></iframe>';
|
||||
d.getElementById('kliveview2D').innerHTML = cn;
|
||||
}
|
||||
|
||||
gId('mliveview2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)";
|
||||
gId('buttonSr').lastChild.innerHTML = "Peek2D"; //lastchild is <p>Peek</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
gId('buttonSr').lastChild.innerHTML = "Peek"; //lastchild is <p>Peek</p>
|
||||
}
|
||||
|
||||
gId(lvID).style.display = (isLv) ? "block":"none";
|
||||
var url = (loc?`http://${locip}`:'') + "/" + lvID;
|
||||
gId(lvID).src = (isLv) ? url:"about:blank";
|
||||
gId('liveview').style.display = (isLv) ? "block":"none";
|
||||
var url = (loc?`http://${locip}`:'') + "/liveview";
|
||||
gId('liveview').src = (isLv) ? url:"about:blank";
|
||||
gId('buttonSr').className = (isLv) ? "active":"";
|
||||
if (!isLv && ws && ws.readyState === WebSocket.OPEN) ws.send('{"lv":false}');
|
||||
size();
|
||||
@ -1558,7 +1538,6 @@ function toggleLiveview()
|
||||
function toggleInfo()
|
||||
{
|
||||
if (isNodes) toggleNodes();
|
||||
if (isLv) toggleLiveview();
|
||||
isInfo = !isInfo;
|
||||
if (isInfo) requestJson();
|
||||
gId('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)";
|
||||
@ -1568,7 +1547,6 @@ function toggleInfo()
|
||||
function toggleNodes()
|
||||
{
|
||||
if (isInfo) toggleInfo();
|
||||
if (isLv) toggleLiveview();
|
||||
isNodes = !isNodes;
|
||||
if (isNodes) loadNodes();
|
||||
gId('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
<!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;
|
||||
}
|
||||
#canv1, #canv2 {
|
||||
background: black;
|
||||
filter: brightness(175%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin:auto">
|
||||
<canvas id="liveviewCanvas" width="320", height="320" style="border:1px solid #000">
|
||||
LiveView
|
||||
</canvas>
|
||||
</div>
|
||||
<script>
|
||||
var canvas = document.getElementById('liveviewCanvas');
|
||||
var leds = "";
|
||||
var matrixWidth = 0;
|
||||
var pixelsPerLed = 0;
|
||||
// Check for canvas support
|
||||
if (canvas.getContext) {
|
||||
// Access the rendering context
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
//In case of pixels
|
||||
|
||||
// // ImageData object
|
||||
// var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
// // One-dimensional array containing the data in the RGBA order
|
||||
// var data = imageData.data;
|
||||
|
||||
// function drawLedPixels(x, y, r, g, b, a) { //old
|
||||
// // console.log(x, y, r, g, b, a);
|
||||
// for (right = 0; right < pixelsPerLed; right++) {
|
||||
// for (down = 0; down < pixelsPerLed; down++) {
|
||||
// ff = (x * pixelsPerLed + right + (y * pixelsPerLed + down) * matrixWidth * pixelsPerLed) * 4;
|
||||
// // if (x==15 && y==15)
|
||||
// // console.log("ff=" + x + " * " + pixelsPerLed + " +" + right + " + (" + y + " * " + pixelsPerLed + " +" + down + ") * " + matrixWidth + ") * 4 = " + ff, data.length); //(5*10+1 + (12*10+1) * 16) * 4 = (51 + 121*16) * 4
|
||||
// data[ff + 0] = r;
|
||||
// data[ff + 1] = g;
|
||||
// data[ff + 2] = b;
|
||||
// data[ff + 3] = a;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
function drawLedCircles(x, y, r, g, b, a) {
|
||||
ctx.fillStyle = `rgb(${r},${g},${b})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x*pixelsPerLed+pixelsPerLed/2, y*pixelsPerLed+pixelsPerLed/2, pixelsPerLed/2, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function paintLeds() {
|
||||
// data represents the Uint8ClampedArray containing the data
|
||||
// in the RGBA order [r0, g0, b0, a0, r1, g1, b1, a1, ..., rn, gn, bn, an]
|
||||
|
||||
for (i = 2; i < leds.length; i+=3) {
|
||||
let ff = (i-2)/3;
|
||||
drawLedCircles(ff%matrixWidth, Math.floor(ff/matrixWidth), leds[i], leds[i+1], leds[i+2], 255)
|
||||
}
|
||||
|
||||
// ctx.putImageData(imageData, 0, 0); //in case of drawLedPixels
|
||||
}
|
||||
}
|
||||
|
||||
function updatePreview(ledsp) {
|
||||
leds = ledsp;
|
||||
matrixWidth = Math.sqrt((leds.length - 2)/3);
|
||||
pixelsPerLed = canvas.width / matrixWidth;
|
||||
// console.log(Math.sqrt((leds.length - 2)/3), pixelsPerLed, leds);
|
||||
paintLeds();
|
||||
}
|
||||
|
||||
function getLiveJson(e) {
|
||||
try {
|
||||
if (toString.call(e.data) === '[object ArrayBuffer]') {
|
||||
let leds = new Uint8Array(event.data);
|
||||
if (leds[0] != 76) return; //'L'
|
||||
updatePreview(leds);
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error("Peek WS error:",err);
|
||||
}
|
||||
}
|
||||
|
||||
var ws;
|
||||
try {
|
||||
ws = top.window.ws;
|
||||
} catch (e) {}
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
console.info("Peek uses top WS");
|
||||
ws.send("{'lv':true}");
|
||||
} else {
|
||||
console.info("Peek WS opening");
|
||||
ws = new WebSocket((window.location.protocol == "https:"?"wss":"ws")+"://"+document.location.host+"/ws");
|
||||
ws.onopen = function () {
|
||||
console.info("Peek WS open");
|
||||
ws.send("{'lv':true}");
|
||||
}
|
||||
}
|
||||
ws.binaryType = "arraybuffer";
|
||||
ws.addEventListener('message',getLiveJson);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
3601
wled00/html_ui.h
3601
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -103,14 +103,6 @@ void initServer()
|
||||
request->send(response);
|
||||
//request->send_P(200, "text/html", PAGE_liveviewws);
|
||||
});
|
||||
server.on("/liveview2D", HTTP_GET, [](AsyncWebServerRequest *request){
|
||||
if (handleIfNoneMatchCacheHeader(request)) return;
|
||||
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", PAGE_liveviewws2D, PAGE_liveviewws2D_length);
|
||||
response->addHeader(FPSTR(s_content_enc),"gzip");
|
||||
setStaticContentCacheHeaders(response);
|
||||
request->send(response);
|
||||
//request->send_P(200, "text/html", PAGE_liveviewws);
|
||||
});
|
||||
#else
|
||||
server.on("/liveview", HTTP_GET, [](AsyncWebServerRequest *request){
|
||||
if (handleIfNoneMatchCacheHeader(request)) return;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user