Skip to content

Commit 3689bf5

Browse files
sysprogssysprogs
committed
Added support for displaying the current pin values
1 parent 4b730c8 commit 3689bf5

File tree

2 files changed

+2519
-23
lines changed

2 files changed

+2519
-23
lines changed

‎PicoHTTPServer/www/index.html

+60-23
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<!--<link rel="stylesheet" href="css/main.css">-->
3+
<title>Raspberry Pi Pico W Demo</title>
44
<style type="text/css">
55
body {
66
font-family: Verdana, Geneva, Tahoma, sans-serif;
@@ -18,8 +18,8 @@
1818

1919
.pinout {
2020
width: 100%;
21-
max-width: 1000px;
22-
min-width: 640px;
21+
max-width: 960px;
22+
min-width: 650px;
2323
display: grid;
2424
grid-template-columns: auto 1fr auto
2525
}
@@ -49,18 +49,26 @@
4949
}
5050

5151
.pins tr td div {
52-
width: 90%;
52+
width: 100%;
5353
text-align: center;
54-
padding: 5px 0;
54+
padding-top: 5px;
55+
padding-bottom: 5px;
5556
}
5657

5758
.pins tr td {
58-
padding: 0 5px;
59+
padding: 0 7px;
5960
}
6061

6162
#left_pins tr td:nth-last-child(1) div, #right_pins tr td:nth-child(1) div {
6263
background: #cccccc;
6364
color: black;
65+
padding-left: 4px;
66+
padding-right: 4px;
67+
}
68+
69+
#left_pins tr td:nth-last-child(2) div, #right_pins tr td:nth-child(2) div {
70+
padding-left: 4px;
71+
padding-right: 4px;
6472
}
6573

6674
.gpio_pin {
@@ -78,18 +86,21 @@
7886
.dynamic_selector {
7987
display: block;
8088
border: 1px solid black;
81-
margin: 0px 0px;
89+
margin: -1px 0px;
8290
}
8391

8492
.pinmode span {
8593
padding: 5px 5px;
94+
margin: 0px -1px;
8695
}
8796

8897
.pinvalue span {
8998
padding: 5px 10px;
99+
margin: 0px -1px;
90100
}
91101

92102
.selected_value {
103+
color: white;
93104
background: blue;
94105
}
95106

@@ -120,7 +131,7 @@
120131
</style>
121132
<script language="JavaScript">
122133

123-
function displayPinMode(id, mode) {
134+
function updateSelector(id, mode) {
124135
for (const span of document.getElementById(id).children) {
125136
if (span.dataset.option == mode)
126137
{
@@ -136,7 +147,11 @@
136147
}
137148

138149
function configurePin(id, mode, value) {
139-
displayPinMode(id + mode, value);
150+
var xhr = new XMLHttpRequest();
151+
152+
xhr.open("GET", `${window.location.protocol}//${window.location.host}/api/writepin/${id}?${mode}=${value}`, true);
153+
xhr.send();
154+
updateSelector(id + mode, value);
140155
}
141156

142157
function setlinks() {
@@ -157,15 +172,33 @@
157172
}
158173
}
159174
}
175+
176+
function refresh_values() {
177+
var xhr = new XMLHttpRequest();
178+
xhr.open("GET", `${window.location.protocol}//${window.location.host}/api/readpins`, true);
179+
xhr.send();
180+
xhr.onloadend = function () {
181+
var data = JSON.parse(this.responseText);
182+
for (const k of Object.keys(data)) {
183+
updateSelector(k, data[k]);
184+
}
185+
};
186+
}
187+
188+
function init_page() {
189+
setlinks();
190+
setInterval(refresh_values, 500);
191+
}
192+
160193
</script>
161194

162195
</head>
163196

164-
<body onload="setlinks()">
197+
<body onload="init_page()">
165198
<div class="main">
166199
<div class="header">
167200
<h1>Raspberry Pi Pico W Demo</h1>
168-
<p>Click on any I/O pin below to change its value:</p>
201+
<p>Use the selectors below to change the modes and values of GPIO pins:</p>
169202
</div>
170203
<div class="pinout">
171204
<table id="left_pins" class="pins">
@@ -200,23 +233,27 @@ <h1>Raspberry Pi Pico W Demo</h1>
200233
<tr><td><div>37</div></td><td><div class="pwr_pin">3V3_EN</div></td><td></td><td></td></tr>
201234
<tr><td><div>36</div></td><td><div class="pwr_pin">3V3_OUT</div></td><td></td><td></td></tr>
202235
<tr><td><div>35</div></td><td><div class="pwr_pin">ADC_VREF</div></td><td></td><td></td></tr>
203-
<tr><td><div>34</div></td><td><div class="gpio_pin">GPIO28</div></td><td><div id="gpio28d" class="pinmode"></td><td><div id="gpio28v" class="pinvalue"></div></td></tr>
236+
<tr><td><div>34</div></td><td><div class="gpio_pin">GPIO28</div></td><td><div id="gpio28d" class="pinmode"></div></td><td><div id="gpio28v" class="pinvalue"></div></td></tr>
204237
<tr><td><div>33</div></td><td><div class="gnd_pin">GND</div></td><td></td><td></td></tr>
205-
<tr><td><div>32</div></td><td><div class="gpio_pin">GPIO27</div></td><td><div id="gpio27d" class="pinmode"></td><td><div id="gpio27v" class="pinvalue"></div></td></tr>
206-
<tr><td><div>31</div></td><td><div class="gpio_pin">GPIO26</div></td><td><div id="gpio26d" class="pinmode"></td><td><div id="gpio26v" class="pinvalue"></div></td></tr>
238+
<tr><td><div>32</div></td><td><div class="gpio_pin">GPIO27</div></td><td><div id="gpio27d" class="pinmode"></div></td><td><div id="gpio27v" class="pinvalue"></div></td></tr>
239+
<tr><td><div>31</div></td><td><div class="gpio_pin">GPIO26</div></td><td><div id="gpio26d" class="pinmode"></div></td><td><div id="gpio26v" class="pinvalue"></div></td></tr>
207240
<tr><td><div>30</div></td><td><div class="pwr_pin">RUN</div></td><td></td><td></td></tr>
208-
<tr><td><div>29</div></td><td><div class="gpio_pin">GPIO22</div></td><td><div id="gpio22d" class="pinmode"></td><td><div id="gpio22v" class="pinvalue"></div></td></tr>
241+
<tr><td><div>29</div></td><td><div class="gpio_pin">GPIO22</div></td><td><div id="gpio22d" class="pinmode"></div></td><td><div id="gpio22v" class="pinvalue"></div></td></tr>
209242
<tr><td><div>28</div></td><td><div class="gnd_pin">GND</div></td><td></td><td></td></tr>
210-
<tr><td><div>27</div></td><td><div class="gpio_pin">GPIO21</div></td><td><div id="gpio21d" class="pinmode"></td><td><div id="gpio21v" class="pinvalue"></div></td></tr>
211-
<tr><td><div>26</div></td><td><div class="gpio_pin">GPIO20</div></td><td><div id="gpio20d" class="pinmode"></td><td><div id="gpio20v" class="pinvalue"></div></td></tr>
212-
<tr><td><div>25</div></td><td><div class="gpio_pin">GPIO19</div></td><td><div id="gpio19d" class="pinmode"></td><td><div id="gpio19v" class="pinvalue"></div></td></tr>
213-
<tr><td><div>24</div></td><td><div class="gpio_pin">GPIO18</div></td><td><div id="gpio18d" class="pinmode"></td><td><div id="gpio18v" class="pinvalue"></div></td></tr>
243+
<tr><td><div>27</div></td><td><div class="gpio_pin">GPIO21</div></td><td><div id="gpio21d" class="pinmode"></div></td><td><div id="gpio21v" class="pinvalue"></div></td></tr>
244+
<tr><td><div>26</div></td><td><div class="gpio_pin">GPIO20</div></td><td><div id="gpio20d" class="pinmode"></div></td><td><div id="gpio20v" class="pinvalue"></div></td></tr>
245+
<tr><td><div>25</div></td><td><div class="gpio_pin">GPIO19</div></td><td><div id="gpio19d" class="pinmode"></div></td><td><div id="gpio19v" class="pinvalue"></div></td></tr>
246+
<tr><td><div>24</div></td><td><div class="gpio_pin">GPIO18</div></td><td><div id="gpio18d" class="pinmode"></div></td><td><div id="gpio18v" class="pinvalue"></div></td></tr>
214247
<tr><td><div>23</div></td><td><div class="gnd_pin">GND</div></td><td></td><td></td></tr>
215-
<tr><td><div>22</div></td><td><div class="gpio_pin">GPIO17</div></td><td><div id="gpio17d" class="pinmode"></td><td><div id="gpio17v" class="pinvalue"></div></td></tr>
216-
<tr><td><div>21</div></td><td><div class="gpio_pin">GPIO16</div></td><td><div id="gpio16d" class="pinmode"></td><td><div id="gpio16v" class="pinvalue"></div></td></tr>
248+
<tr><td><div>22</div></td><td><div class="gpio_pin">GPIO17</div></td><td><div id="gpio17d" class="pinmode"></div></td><td><div id="gpio17v" class="pinvalue"></div></td></tr>
249+
<tr><td><div>21</div></td><td><div class="gpio_pin">GPIO16</div></td><td><div id="gpio16d" class="pinmode"></div></td><td><div id="gpio16v" class="pinvalue"></div></td></tr>
217250
</table>
218-
219251
</div>
252+
<div class="header">
253+
<table>
254+
<tr><td>Built-in LED state:</td>
255+
<td><div id="led0v" class="pinvalue" style="padding: 5px 0px;"></div></td></tr>
256+
</table>
220257
</div>
221258
</body>
222-
</html>
259+
</html>

0 commit comments

Comments
 (0)