Skip to content

Inline iro.js and rangetouch.js #3597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blazoncek merged 6 commits into from
Dec 21, 2023
Merged

Inline iro.js and rangetouch.js #3597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b2babd9
inline iro.js and rangetouch.js
w00000dy Dec 19, 2023
5cd8f56
Remove unused feedback function
w00000dy Dec 19, 2023
0a91d60
add onload event to body
w00000dy Dec 19, 2023
1140f5f
Update version to 2312190
w00000dy Dec 19, 2023
201daf8
Remove /iro.js and /rangetouch.js
w00000dy Dec 19, 2023
86d2998
Add reference to old loading of iro.js and rangetouch.js
w00000dy Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions tools/cdata.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,16 +380,6 @@ const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
file: "favicon.ico",
name: "favicon",
method: "binary",
},
{
file: "iro.js",
name: "iroJs",
method: "gzip"
},
{
file: "rangetouch.js",
name: "rangetouchJs",
method: "gzip"
}
],
"wled00/html_other.h"
Expand Down
52 changes: 8 additions & 44 deletions wled00/data/index.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,52 +7,9 @@
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAGACGAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAE1JREFUOI1j/P//PwOxgNGeAUMxE9G6cQCKDWAhpADZ2f8PMjBS3QW08QK20KaZC2gfC9hCnqouoNgARgY7zMxAyNlUdQHlXiAlO2MDAD63EVqNHAe0AAAAAElFTkSuQmCC"/>
<title>WLED</title>
<script>
Copy link
Contributor

@blazoncek blazoncek Dec 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would keep this for future reference as a comment.

Copy link
Contributor Author

@w00000dy w00000dy Dec 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see no advantage in keeping that as a comment. If you want to look at the code again in the future, you can simply look at the Git history.
I think that would just make the code less readable and most people would probably wonder what this comment is for when they see it.

And what exactly would you want to leave as a comment? The complete <script> block or just the feedback function?

Copy link
Contributor

@blazoncek blazoncek Dec 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

History is one thing, actual snippet embedded as a comment is another. Snippet can be used immediately by anyone while code from history is only viable option for those that know it was there. Snippet (as a comment) does not reduce readability of the code, even without any actual comment in it, on the contrary IMO it adds value for a possible future when such feature may be re-implemented.

Dynamically loading of JS files may come in handy in the future (for possible extensions) and at least POC code should be kept in place as a guideline for such case. Commented code does not increase binary code size or adds performance penalties.

I am in favour of reducing HTTP requests to ESP but not at the expense of removing knowledge from source files. Otherwise you can strip every comment from all source files.

Copy link
Contributor Author

@w00000dy w00000dy Dec 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a comment with referencte to how it was done in 0.14.0. What do you think of this?
I think this is better because we don't have this big block of commented out code (so the code looks cleaner) and we still preserve the knowledge.

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">
</head>
<body>
<body onload="onLoad()">

<div id="cv" class="overlay">Loading WLED UI...</div>
<noscript><div class="overlay" style="opacity:1;">Sorry, WLED UI needs JavaScript!</div></noscript>
Expand Down Expand Up @@ -378,6 +335,13 @@
</div>

<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>
</body>
</html>
16 changes: 15 additions & 1 deletion wled00/data/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var pcMode = false, pcModeA = false, lastw = 0, wW;
var simplifiedUI = false;
var tr = 7;
var d = document;
const ranges = RangeTouch.setup('input[type="range"]', {});
var palettesData;
var fxdata = [];
var pJson = {}, eJson = {}, lJson = {};
Expand All @@ -23,7 +24,7 @@ var pN = "", pI = 0, pNum = 0;
var pmt = 1, pmtLS = 0, pmtLast = 0;
var lastinfo = {};
var isM = false, mw = 0, mh=0;
var ws, cpick, ranges, wsRpt=0;
var ws, wsRpt=0;
var cfg = {
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},
Expand All @@ -39,6 +40,17 @@ var hol = [
[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 sCol(na, col) {d.documentElement.style.setProperty(na, col);}
function gId(c) {return d.getElementById(c);}
Expand Down Expand Up @@ -260,6 +272,8 @@ function onLoad()

selectSlot(0);
updateTablinks(0);
cpick.on("input:end", () => {setColor(1);});
cpick.on("color:change", () => {updatePSliders()});
pmtLS = localStorage.getItem('wledPmt');

// Load initial data
Expand Down
2 changes: 1 addition & 1 deletion wled00/wled.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

// 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
//#define WLED_USE_MY_CONFIG
Expand Down
16 changes: 0 additions & 16 deletions wled00/wled_server.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,22 +254,6 @@ void initServer()
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);

#ifndef WLED_DISABLE_OTA
Expand Down