From 356100ed0a93ce8f1d107baa8967222224db5a8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20M=C3=BChl?= <github@blueforcer.de>
Date: Wed, 2 Aug 2023 14:48:37 +0200
Subject: [PATCH] better liveview

---
 src/ServerManager.cpp                       | 1 -
 {lib/webserver => src}/edit_htm.h           | 0
 {lib/webserver => src}/esp-fs-webserver.cpp | 0
 {lib/webserver => src}/esp-fs-webserver.h   | 0
 src/icondownloader.h                        | 4 ++--
 {lib/webserver => src}/setup_htm.h          | 0
 6 files changed, 2 insertions(+), 3 deletions(-)
 rename {lib/webserver => src}/edit_htm.h (100%)
 rename {lib/webserver => src}/esp-fs-webserver.cpp (100%)
 rename {lib/webserver => src}/esp-fs-webserver.h (100%)
 rename {lib/webserver => src}/setup_htm.h (100%)
diff --git a/src/ServerManager.cpp b/src/ServerManager.cpp
index bcc9d8b6..5a09470d 100644
--- a/src/ServerManager.cpp
+++ b/src/ServerManager.cpp
@@ -5,7 +5,6 @@
 #include "icondownloader.h"
 #include <Update.h>
 #include <ESPmDNS.h>
-#include "SPI.h"
 #include <LittleFS.h>
 #include <WiFi.h>
 #include "DisplayManager.h"
diff --git a/lib/webserver/edit_htm.h b/src/edit_htm.h
similarity index 100%
rename from lib/webserver/edit_htm.h
rename to src/edit_htm.h
diff --git a/lib/webserver/esp-fs-webserver.cpp b/src/esp-fs-webserver.cpp
similarity index 100%
rename from lib/webserver/esp-fs-webserver.cpp
rename to src/esp-fs-webserver.cpp
diff --git a/lib/webserver/esp-fs-webserver.h b/src/esp-fs-webserver.h
similarity index 100%
rename from lib/webserver/esp-fs-webserver.h
rename to src/esp-fs-webserver.h
diff --git a/src/icondownloader.h b/src/icondownloader.h
index 517ed25f..ad599bbd 100644
--- a/src/icondownloader.h
+++ b/src/icondownloader.h
@@ -84,6 +84,6 @@ static const char custom_script[] PROGMEM = R"EOF(
 )EOF";
 
 
-static const char PROGMEM screen_html[] = R"EOF(
-<!DOCTYPE html><html><head><title>ScreenMirror</title><style>body{margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:100vh;background:#000}#a{position:relative;background:url('https://raw.githubusercontent.com/Blueforcer/awtrix-light/main/border.png') no-repeat center;background-size:cover;padding:60px}canvas{max-width:100%;max-height:100%}.b{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px}.b button{width:150px;height:50px;color:#fff;background:#333}</style><script type="module">import{GIFEncoder,quantize,applyPalette}from'https://unpkg.com/gifenc@1.0.3';const c=document.getElementById('canvas'),d=c.getContext('2d'),e=1055,f=263;c.width=e;c.height=f;let g,h=false;async function i(){const j=await fetch("/api/screen"),k=await j.json();d.clearRect(0,0,c.width,c.height);d.fillStyle="0";d.fillRect(0,0,e,f);for(let l=0;l<8;l++){for(let m=0;m<32;m++){const n=k[l*32+m],o=(n&0xff0000)>>16,p=(n&0x00ff00)>>8,q=n&0x0000ff;d.fillStyle=`rgb(${o},${p},${q})`;d.fillRect(m*33,l*33,32,32)}}if(h){const r=d.getImageData(0,0,e,f).data,s="rgb565",t=quantize(r,256,{format:s}),u=applyPalette(r,t,s);g.writeFrame(u,e,f,{palette:t,delay:10})}}document.addEventListener("DOMContentLoaded",async function(){i();setInterval(i,100);document.getElementById("b").addEventListener("click",function(){const v=document.createElement("a");v.href=c.toDataURL();v.download="awtrix.png";v.click()});document.getElementById("c").addEventListener("click",function(){let w=new XMLHttpRequest();w.open("POST","/api/nextapp",true);w.send()});document.getElementById("d").addEventListener("click",function(){let x=new XMLHttpRequest();x.open("POST","/api/previousapp",true);x.send()});document.getElementById("e").addEventListener("click",async function(){const y=this;if(h){g.finish();const z=g.bytesView();A(z,'awtrix.gif','image/gif');h=false;y.textContent="Start GIF recording"}else{g=GIFEncoder();h=true;y.textContent="Stop GIF recording"}})});function A(aa,ab,ac){const ad=aa instanceof Blob?aa:new Blob([aa],{type:ac}),ae=URL.createObjectURL(ad),af=document.createElement("a");af.href=ae;af.download=ab;af.click()};</script></head><body><div id="a"><canvas id="canvas"></canvas></div><div class="b"><button id="d"><</button><button id="b">Download PNG</button><button id="e">Start GIF recording</button><button id="c">></button></div></body></html>
+static const char screen_html[] PROGMEM = R"EOF(
+<!DOCTYPE html><html><script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script><head><title>ScreenMirror</title><style>body,#a{margin:0;padding:0;display:flex;background:#000}body{justify-content:center;align-items:center;flex-direction:column;min-height:100vh}#a{position:relative;padding:60px}#a::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('https://raw.githubusercontent.com/Blueforcer/awtrix-light/main/border.png') no-repeat center;background-size:cover;z-index:2}canvas{position:relative;max-width:100%;max-height:100%;background:#000;z-index:1}.b{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px}.b button{width:150px;height:50px;color:#fff;background:#333}</style><script type="module">import{GIFEncoder,quantize,applyPalette}from'https://unpkg.com/gifenc@1.0.3';const c=document.getElementById('c'),d=c.getContext('2d'),w=1052,h=260;c.width=w;c.height=h;let e,f=!1,g=performance.now();function j(){fetch("/api/screen").then(function(a){return a.json()}).then(function(a){d.clearRect(0,0,c.width,c.height);d.fillStyle="#000";for(let b=0;b<8;b++)for(let i=0;i<32;i++){const k=a[b*32+i],l=(k&0xff0000)>>16,m=(k&0x00ff00)>>8,n=k&0x0000ff;d.fillStyle=`rgb(${l},${m},${n})`;d.fillRect(i*33,b*33,29,29)}if(f){const o=performance.now(),p=Math.round((o-g));g=o;const q=d.getImageData(0,0,w,h).data,r="rgb444",s=quantize(q,256,{format:r}),t=applyPalette(q,s,r);e.writeFrame(t,w,h,{palette:s,delay:p})}j()})}document.addEventListener("DOMContentLoaded",function(){j();document.getElementById("h").addEventListener("click",function(){const a=document.createElement("a");a.href=c.toDataURL();a.download='awtrix.png';a.click()});document.getElementById("i").addEventListener("click",function(){const a=new XMLHttpRequest();a.open("POST","/api/nextapp",!0);a.send()});document.getElementById("j").addEventListener("click",function(){const a=new XMLHttpRequest();a.open("POST","/api/previousapp",!0);a.send()});document.getElementById("k").addEventListener("click",async function(){const a=this;if(f){e.finish();const b=e.bytesView();l(b,'awtrix.gif','image/gif');f=!1;a.textContent="Start GIF recording"}else{e=GIFEncoder();g=performance.now();f=!0;a.textContent="Stop GIF recording"}})});function l(b,a,c){const d=b instanceof Blob?b:new Blob([b],{type:c}),e=URL.createObjectURL(d),f=document.createElement("a");f.href=e;f.download=a;f.click()}</script></head><body><div id="a"><canvas id="c"></canvas></div><div class="b"><button id="j"><</button><button id="h">Download PNG</button><button id="k">Start GIF recording</button><button id="i">></button></div></body></html>
 )EOF";
\ No newline at end of file
diff --git a/lib/webserver/setup_htm.h b/src/setup_htm.h
similarity index 100%
rename from lib/webserver/setup_htm.h
rename to src/setup_htm.h
