jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-25 11:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3597 from WoodyLetsCode/inline

Browse Source 
Inline iro.js and rangetouch.js
This commit is contained in:
Blaž Kristan 2023-12-21 20:43:29 +01:00 committed by GitHub
commit 6c877b6d44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tools/cdata.js
View File

@ -380,16 +380,6 @@ const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
file: "favicon.ico", file: "favicon.ico",
name: "favicon", name: "favicon",
method: "binary", method: "binary",
},
{
file: "iro.js",
name: "iroJs",
method: "gzip"
},
{
file: "rangetouch.js",
name: "rangetouchJs",
method: "gzip"
} }
], ],
"wled00/html_other.h" "wled00/html_other.h"

52
wled00/data/index.htm
View File

@ -7,52 +7,9 @@
<meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-mobile-web-app-capable">
<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAGACGAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAE1JREFUOI1j/P//PwOxgNGeAUMxE9G6cQCKDWAhpADZ2f8PMjBS3QW08QK20KaZC2gfC9hCnqouoNgARgY7zMxAyNlUdQHlXiAlO2MDAD63EVqNHAe0AAAAAElFTkSuQmCC"/> <link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAGACGAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAE1JREFUOI1j/P//PwOxgNGeAUMxE9G6cQCKDWAhpADZ2f8PMjBS3QW08QK20KaZC2gfC9hCnqouoNgARgY7zMxAyNlUdQHlXiAlO2MDAD63EVqNHAe0AAAAAElFTkSuQmCC"/>
<title>WLED</title> <title>WLED</title>
<script>
function feedback(){}
// instead of including [script src="iro.js"][/script] and [script src="rangetouch.js"][/script]
// (which would be inlined by nodeJS inliner during minimization and compression) we need to load them dynamically
// the following is needed to load iro.js and rangetouch.js as consecutive requests to allow ESP8266
// to keep up with requests (if requests happent too fast some may not get processed)
// it will also call onLoad() after last is loaded (it was removed from [body onload="onLoad()"]).
var h = document.getElementsByTagName('head')[0];
var l = document.createElement('script');
l.type = 'application/javascript';
l.src = 'iro.js';
l.addEventListener('load', (e) => {
// after iro is loaded initialize global variable
cpick = new iro.ColorPicker("#picker", {
width: 260,
wheelLightness: false,
wheelAngle: 270,
wheelDirection: "clockwise",
layout: [{
component: iro.ui.Wheel,
options: {}
}]
});
cpick.on("input:end", () => {setColor(1);});
cpick.on("color:change", () => {updatePSliders()});
var l = document.createElement('script');
l.type = 'application/javascript';
l.src = 'rangetouch.js';
l.addEventListener('load', (e) => {
// after rangetouch is loaded initialize global variable
ranges = RangeTouch.setup('input[type="range"]', {});
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') {
clearInterval(stateCheck);
// document ready, start processing UI
onLoad();
}
}, 100);
});
setTimeout(()=>{h.appendChild(l)},100);
});
setTimeout(()=>{h.appendChild(l)},200);
</script>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body onload="onLoad()">
<div id="cv" class="overlay">Loading WLED UI...</div> <div id="cv" class="overlay">Loading WLED UI...</div>
<noscript><div class="overlay" style="opacity:1;">Sorry, WLED UI needs JavaScript!</div></noscript> <noscript><div class="overlay" style="opacity:1;">Sorry, WLED UI needs JavaScript!</div></noscript>
@ -378,6 +335,13 @@
</div> </div>
<i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br> <i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br>
<!--
If you want to load iro.js and rangetouch.js as consecutive requests, you can do it like it was done in 0.14.0:
https://github.com/Aircoookie/WLED/blob/v0.14.0/wled00/data/index.htm
-->
<script src="iro.js"></script>
<script src="rangetouch.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

16
wled00/data/index.js
View File

@ -15,6 +15,7 @@ var pcMode = false, pcModeA = false, lastw = 0, wW;
var simplifiedUI = false; var simplifiedUI = false;
var tr = 7; var tr = 7;
var d = document; var d = document;
const ranges = RangeTouch.setup('input[type="range"]', {});
var palettesData; var palettesData;
var fxdata = []; var fxdata = [];
var pJson = {}, eJson = {}, lJson = {}; var pJson = {}, eJson = {}, lJson = {};
@ -23,7 +24,7 @@ var pN = "", pI = 0, pNum = 0;
var pmt = 1, pmtLS = 0, pmtLast = 0; var pmt = 1, pmtLS = 0, pmtLast = 0;
var lastinfo = {}; var lastinfo = {};
var isM = false, mw = 0, mh=0; var isM = false, mw = 0, mh=0;
var ws, cpick, ranges, wsRpt=0; var ws, wsRpt=0;
var cfg = { var cfg = {
theme:{base:"dark", bg:{url:"", rnd: false, rndGrayscale: false, rndBlur: false}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}}, theme:{base:"dark", bg:{url:"", rnd: false, rndGrayscale: false, rndBlur: false}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
comp :{colors:{picker: true, rgb: false, quick: true, hex: false}, comp :{colors:{picker: true, rgb: false, quick: true, hex: false},
@ -39,6 +40,17 @@ var hol = [
[0,0,1,1,"https://images.alphacoders.com/119/1198800.jpg"] // new year [0,0,1,1,"https://images.alphacoders.com/119/1198800.jpg"] // new year
]; ];
var cpick = new iro.ColorPicker("#picker", {
width: 260,
wheelLightness: false,
wheelAngle: 270,
wheelDirection: "clockwise",
layout: [{
component: iro.ui.Wheel,
options: {}
}]
});
function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson();} function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson();}
function sCol(na, col) {d.documentElement.style.setProperty(na, col);} function sCol(na, col) {d.documentElement.style.setProperty(na, col);}
function gId(c) {return d.getElementById(c);} function gId(c) {return d.getElementById(c);}
@ -260,6 +272,8 @@ function onLoad()
selectSlot(0); selectSlot(0);
updateTablinks(0); updateTablinks(0);
cpick.on("input:end", () => {setColor(1);});
cpick.on("color:change", () => {updatePSliders()});
pmtLS = localStorage.getItem('wledPmt'); pmtLS = localStorage.getItem('wledPmt');
// Load initial data // Load initial data

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // version code in format yymmddb (b = daily build)
#define VERSION 2312160 #define VERSION 2312190
//uncomment this if you have a "my_config.h" file you'd like to use //uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG //#define WLED_USE_MY_CONFIG

16
wled00/wled_server.cpp
View File

@ -254,22 +254,6 @@ void initServer()
size_t len, bool final) {handleUpload(request, filename, index, data, len, final);} size_t len, bool final) {handleUpload(request, filename, index, data, len, final);}
); );
server.on("/iro.js", HTTP_GET, [](AsyncWebServerRequest *request){
if (handleIfNoneMatchCacheHeader(request)) return;
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", iroJs, iroJs_length);
response->addHeader(FPSTR(s_content_enc),"gzip");
setStaticContentCacheHeaders(response);
request->send(response);
});
server.on("/rangetouch.js", HTTP_GET, [](AsyncWebServerRequest *request){
if (handleIfNoneMatchCacheHeader(request)) return;
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", rangetouchJs, rangetouchJs_length);
response->addHeader(FPSTR(s_content_enc),"gzip");
setStaticContentCacheHeaders(response);
request->send(response);
});
createEditHandler(correctPIN); createEditHandler(correctPIN);
#ifndef WLED_DISABLE_OTA #ifndef WLED_DISABLE_OTA