Skip to content

Commit c25f6ce

Browse files
tobi01001tobi01001
committed
Fixes Partial web interface jasoncoon#231
Script function to load css/js from the ESP when offline.
1 parent ebf028b commit c25f6ce

File tree

3 files changed

+145
-22
lines changed

3 files changed

+145
-22
lines changed

‎esp8266-fastled-webserver/data/index.htm

+70-13
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,45 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<title>ESP8266 + FastLED</title>
99

10-
<!-- request CSS from internet CDN -->
11-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
12-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.6/jquery.minicolors.min.css" integrity="sha512-BVeRnUOL0G7d4gXmj+0VxpoiQuEibKQtlkclADKvCdNrESs0LA6+H8s1lU455VqWFtHBfF/pKDGw/CMat2hqOg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
13-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
10+
<!-- Fallback to load resources from FileSystem if not available online -->
11+
<script>
12+
function CssJsFallback(el) {
13+
if (el instanceof HTMLScriptElement || el instanceof HTMLLinkElement) {
14+
let Url = el.getAttribute('data-fallback');
15+
if (Url) {
16+
if(el instanceof HTMLScriptElement)
17+
{
18+
document.write('<script src="'+Url+'">\x3C/script>');
19+
}
20+
else
21+
{
22+
el.setAttribute('href', Url);
23+
}
24+
}
25+
// No integrity check for local resource
26+
let integrity = el.getAttribute('integrity');
27+
if(integrity) {
28+
el.removeAttribute('integrity');
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<!-- request CSS from internet CDN or the webserver if internet cannot be reached -->
35+
<link onerror='CssJsFallback(this)'
36+
data-fallback='css/bootstrap-5.1.3.min.css'
37+
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
38+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
39+
<link onerror='CssJsFallback(this)'
40+
data-fallback='css/minicolors-2.3.6.min.css'
41+
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.6/jquery.minicolors.min.css"
42+
integrity="sha512-BVeRnUOL0G7d4gXmj+0VxpoiQuEibKQtlkclADKvCdNrESs0LA6+H8s1lU455VqWFtHBfF/pKDGw/CMat2hqOg==" crossorigin="anonymous"
43+
referrerpolicy="no-referrer" />
44+
<link onerror='CssJsFallback(this)'
45+
data-fallback='css/bootstrap-icons-1.7.2.min.css'
46+
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"/>
1447

15-
<!-- request CSS from the ESP8266 web server -->
48+
<!-- request CSS from the ESP8266 web server ONLY -->
1649
<!-- <link rel="stylesheet" href="css/bootstrap-5.1.3.min.css"> -->
1750
<!-- <link rel="stylesheet" href="css/minicolors-2.3.6.min.css"> -->
1851
<!-- <link rel="stylesheet" href="css/bootstrap-icons-1.7.2.min.css"> -->
@@ -420,17 +453,41 @@ <h2 class="accordion-header" id="headingImportExport">
420453
</nav>
421454

422455
<!-- request js from internet CDN -->
423-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
424-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
425-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.6/jquery.minicolors.min.js" integrity="sha512-vBqPkpOdZM0O7YezzE8xaoUdyt4Z2d+gLrY0AMvmNPLdLuNzvreTopyuaM9/FiRzHs1bwWzYDJgH6STcuNXpqg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
426-
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha512-B4skI5FiLurS86aioJx9VfozI1wjqrn6aTdJH+YQUmCZum/ZibPBTX55k5d9XM6EsKePDInkLVrN7vPmJxc1qA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
427-
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
428-
429-
<!-- request js from the ESP8266 web server -->
456+
<script onerror='CssJsFallback(this)'
457+
data-fallback='js/jquery-3.6.0.min.js'
458+
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
459+
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
460+
crossorigin="anonymous"
461+
referrerpolicy="no-referrer"></script>
462+
<script onerror='CssJsFallback(this)'
463+
data-fallback='js/bootstrap-5.1.3.min.js'
464+
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
465+
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
466+
crossorigin="anonymous"></script>
467+
<script onerror='CssJsFallback(this)'
468+
data-fallback='js/jquery.minicolors-2.3.6.min.js'
469+
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.6/jquery.minicolors.min.js"
470+
integrity="sha512-vBqPkpOdZM0O7YezzE8xaoUdyt4Z2d+gLrY0AMvmNPLdLuNzvreTopyuaM9/FiRzHs1bwWzYDJgH6STcuNXpqg=="
471+
crossorigin="anonymous"
472+
referrerpolicy="no-referrer"></script>
473+
<!-- Websocket currently not implemented -->
474+
<!-- <script onerror='CssJsFallback(this)'
475+
data-fallback='js/r-websocket-1.0.0.min.js'
476+
src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"
477+
integrity="sha512-B4skI5FiLurS86aioJx9VfozI1wjqrn6aTdJH+YQUmCZum/ZibPBTX55k5d9XM6EsKePDInkLVrN7vPmJxc1qA=="
478+
crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
479+
<script onerror='CssJsFallback(this)'
480+
data-fallback='js/FileSaver-2.0.5.min.js'
481+
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"
482+
integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw=="
483+
crossorigin="anonymous"
484+
referrerpolicy="no-referrer"></script>
485+
486+
<!-- request js from the ESP8266 web server ONLY -->
430487
<!-- <script src="js/jquery-3.6.0.min.js"></script> -->
431488
<!-- <script src="js/bootstrap-5.1.3.min.js"></script> -->
432489
<!-- <script src="js/jquery.minicolors-2.3.6.min.js"></script> -->
433-
<!-- <script src="js/r-websocket-1.0.0.min.js"></script> -->
490+
<!-- Websocket currently not implemented --> <!-- <script src="js/r-websocket-1.0.0.min.js"></script> -->
434491
<!-- <script src="js/FileSaver-2.0.5.min.js"></script> -->
435492

436493
<script src="js/app.js"></script>

‎esp8266-fastled-webserver/data/info.htm

+30-3
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,37 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<title>ESP8266 + FastLED by Evil Genius Labs</title>
99

10-
<!-- request CSS from internet CDN -->
11-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
1210

13-
<!-- request CSS from the ESP8266 web server -->
11+
<script>
12+
function CssJsFallback(el) {
13+
if (el instanceof HTMLScriptElement || el instanceof HTMLLinkElement) {
14+
let Url = el.getAttribute('data-fallback');
15+
if (Url) {
16+
if(el instanceof HTMLScriptElement)
17+
{
18+
document.write('<script src="'+Url+'">\x3C/script>');
19+
}
20+
else
21+
{
22+
el.setAttribute('href', Url);
23+
}
24+
}
25+
// No integrity check for local resource
26+
let integrity = el.getAttribute('integrity');
27+
if(integrity) {
28+
el.removeAttribute('integrity');
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<!-- request CSS from internet CDN or the webserver if internet cannot be reached -->
35+
<link onerror='CssJsFallback(this)'
36+
data-fallback='css/bootstrap-5.1.3.min.css'
37+
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
38+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
39+
40+
<!-- request CSS from the ESP8266 web server ONLY -->
1441
<!-- <link rel="stylesheet" href="css/bootstrap-5.1.3.min.css"> -->
1542

1643
<link rel="stylesheet" href="css/styles.css">

‎esp8266-fastled-webserver/data/simple.htm

+45-6
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,36 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<title>ESP8266 + FastLED by Evil Genius Labs</title>
99

10-
<!-- request CSS from internet CDN -->
11-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
12-
13-
<!-- request CSS from the ESP8266 web server -->
10+
<script>
11+
function CssJsFallback(el) {
12+
if (el instanceof HTMLScriptElement || el instanceof HTMLLinkElement) {
13+
let Url = el.getAttribute('data-fallback');
14+
if (Url) {
15+
if(el instanceof HTMLScriptElement)
16+
{
17+
document.write('<script src="'+Url+'">\x3C/script>');
18+
}
19+
else
20+
{
21+
el.setAttribute('href', Url);
22+
}
23+
}
24+
// No integrity check for local resource
25+
let integrity = el.getAttribute('integrity');
26+
if(integrity) {
27+
el.removeAttribute('integrity');
28+
}
29+
}
30+
}
31+
</script>
32+
33+
<!-- request CSS from internet CDN or the webserver if internet cannot be reached -->
34+
<link onerror='CssJsFallback(this)'
35+
data-fallback='css/bootstrap-5.1.3.min.css'
36+
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
37+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
38+
39+
<!-- request CSS from the ESP8266 web server ONLY -->
1440
<!-- <link rel="stylesheet" href="css/bootstrap-5.1.3.min.css"> -->
1541

1642
<link rel="stylesheet" href="css/simple.css">
@@ -44,8 +70,21 @@
4470
</div>
4571

4672
<!-- request js from internet CDN -->
47-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
48-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
73+
<script
74+
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
75+
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
76+
crossorigin="anonymous"
77+
referrerpolicy="no-referrer"
78+
onerror='CssJsFallback(this)'
79+
data-fallback='js/jquery-3.1.1.min.js'>
80+
</script>
81+
<script
82+
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
83+
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
84+
crossorigin="anonymous"
85+
onerror='CssJsFallback(this)'
86+
data-fallback='js/bootstrap-5.1.3.min.js'>
87+
</script>
4988
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha512-B4skI5FiLurS86aioJx9VfozI1wjqrn6aTdJH+YQUmCZum/ZibPBTX55k5d9XM6EsKePDInkLVrN7vPmJxc1qA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
5089

5190
<!-- request js from the ESP8266 web server -->

0 commit comments

Comments
 (0)