| 2 |
raymond |
1 |
#pragma once
|
|
|
2 |
|
|
|
3 |
#include <Arduino.h>
|
|
|
4 |
|
|
|
5 |
/*
|
|
|
6 |
* This HTML code will be injected in /setup webpage using a <div></div> element as parent
|
|
|
7 |
* The parent element will have the HTML id properties equal to 'raw-html-<id>'
|
|
|
8 |
* where the id value will be equal to the id parameter passed to the function addHTML(html_code, id).
|
|
|
9 |
*/
|
|
|
10 |
inline const char custom_html[] PROGMEM = R"EOF(
|
|
|
11 |
<label for=url class=input-label>Endpoint</label>
|
|
|
12 |
<input type=text placeholder='https://httpbin.org/' id=url value='https://httpbin.org/' />
|
|
|
13 |
<br>
|
|
|
14 |
<div class=row-wrapper>
|
|
|
15 |
<input type="radio" id="get" name="httpmethod" value="GET" checked>
|
|
|
16 |
<label for="html">GET</label><br>
|
|
|
17 |
<input type="radio" id="post" name="httpmethod" value="POST">
|
|
|
18 |
<label for="css">POST</label>
|
|
|
19 |
<a id=fetch class='btn'>
|
|
|
20 |
<span>Fecth url</span>
|
|
|
21 |
</a>
|
|
|
22 |
</div>
|
|
|
23 |
<pre id=payload></pre>
|
|
|
24 |
)EOF";
|
|
|
25 |
|
|
|
26 |
|
|
|
27 |
/*
|
|
|
28 |
* In this example, a style sections is added in order to render properly the new
|
|
|
29 |
* <select> and <pre> elements introduced. Since this section will be added at the end of the body,
|
|
|
30 |
* it is also possible to override the style of the elements already present:
|
|
|
31 |
* for example the background color of body will be overridden with a different color
|
|
|
32 |
*/
|
|
|
33 |
inline const char custom_css[] PROGMEM = R"EOF(
|
|
|
34 |
pre{
|
|
|
35 |
font-family: Monaco,Menlo,Consolas,'Courier New',monospace;
|
|
|
36 |
color: #333;
|
|
|
37 |
line-height: 20px;
|
|
|
38 |
background-color: #f5f5f5;
|
|
|
39 |
border: 1px solid rgba(0,0,0,0.15);
|
|
|
40 |
border-radius: 6px;
|
|
|
41 |
overflow-y: scroll;
|
|
|
42 |
min-height: 350px;
|
|
|
43 |
font-size: 85%;
|
|
|
44 |
width: 95%;
|
|
|
45 |
}
|
|
|
46 |
)EOF";
|
|
|
47 |
|
|
|
48 |
|
|
|
49 |
/*
|
|
|
50 |
* Also the JavaScript will be added at the bottom of body
|
|
|
51 |
* In this example a simple 'click' event listener will be added for the button
|
|
|
52 |
* with id='fetch' (added as HTML). The listener will execute the function 'fetchEndpoint'
|
|
|
53 |
* in order to fetch a remote resource and show the response in a text box.
|
|
|
54 |
*
|
|
|
55 |
* The instruction $('<id-name>') is a "Jquery like" selector already defined
|
|
|
56 |
* so you can use for your purposes:
|
|
|
57 |
* var $ = function(el) {
|
|
|
58 |
* return document.getElementById(el);
|
|
|
59 |
* };
|
|
|
60 |
*/
|
|
|
61 |
inline const char custom_script[] PROGMEM = R"EOF(
|
|
|
62 |
function fetchEndpoint() {
|
|
|
63 |
var mt;
|
|
|
64 |
document.getElementsByName('httpmethod').forEach(el => {
|
|
|
65 |
if (el.checked)
|
|
|
66 |
mt = el.value;
|
|
|
67 |
})
|
|
|
68 |
|
|
|
69 |
var url = $('url').value + mt.toLowerCase();
|
|
|
70 |
var bd = (mt != 'GET') ? 'body: ""' : '';
|
|
|
71 |
var options = {
|
|
|
72 |
method: mt,
|
|
|
73 |
bd
|
|
|
74 |
};
|
|
|
75 |
fetch(url, options)
|
|
|
76 |
.then(response => response.text())
|
|
|
77 |
.then(txt => {
|
|
|
78 |
$('payload').innerHTML = txt;
|
|
|
79 |
});
|
|
|
80 |
}
|
|
|
81 |
|
|
|
82 |
$('fetch').addEventListener('click', fetchEndpoint);
|
|
|
83 |
)EOF";
|
|
|
84 |
|
|
|
85 |
|
|
|
86 |
inline const char base64_logo[] PROGMEM = R"EOF(
|
|
|
87 |
iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAABGdBTUEAALGPC/xhBQAAAAFzUkdC
|
|
|
88 |
AK7OHOkAAAIKUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
89 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
90 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
91 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
92 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
93 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
94 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
95 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
96 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
|
97 |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAIhNjGoAAACtdFJOUwBl/fwyM2b+Bfn7mRAHBgEa+veYfx4C
|
|
|
98 |
PNsD6Lbr3T49T6zLhOYOzN7uWmx671yOjR0PU1EJTtTzaj8x9hP1wFDwfrg5gC1fIXeTYrIEVQry
|
|
|
99 |
+I+crg3XFoE1lFnR07HShyVdbW7f1cdo5aPxq8n0cO1xxJsRW2kM52QYwRkLYa0v4LNYb2BEUpd5
|
|
|
100 |
1siCFIaVpbAm7FbkiJKmF2ODxmfqmldJNn0gG0rCRtpNxUVMXLiLfgAABc5JREFUaN7tWflXE0kQ
|
|
|
101 |
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
|
|
|
127 |
AAAASUVORK5CYII=
|
|
|
128 |
)EOF";
|