Skip to content

Commit 4b730c8

Browse files
sysprogssysprogs
committed
Separated in/out and 0/1 selectors
1 parent ff95d56 commit 4b730c8

File tree

1 file changed

+59
-54
lines changed

1 file changed

+59
-54
lines changed

‎PicoHTTPServer/www/index.html

+59-54
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
.pinout {
2020
width: 100%;
21-
max-width: 900px;
21+
max-width: 1000px;
2222
min-width: 640px;
2323
display: grid;
2424
grid-template-columns: auto 1fr auto
@@ -51,7 +51,7 @@
5151
.pins tr td div {
5252
width: 90%;
5353
text-align: center;
54-
padding: 5px;
54+
padding: 5px 0;
5555
}
5656

5757
.pins tr td {
@@ -75,35 +75,36 @@
7575
background: #E83131;
7676
}
7777

78-
.pinmode {
78+
.dynamic_selector {
7979
display: block;
8080
border: 1px solid black;
81-
margin: -1px 0px;
81+
margin: 0px 0px;
8282
}
8383

8484
.pinmode span {
85-
margin: 0px;
85+
padding: 5px 5px;
86+
}
87+
88+
.pinvalue span {
8689
padding: 5px 10px;
8790
}
8891

89-
.selected_pinmode {
90-
margin: 2px;
92+
.selected_value {
9193
background: blue;
9294
}
9395

94-
.deselected_pinmode {
95-
margin: 2px;
96+
.deselected_value {
9697
color: black;
9798
cursor: pointer;
9899
}
99100

100-
@media screen and (max-width: 1000px) {
101+
@media screen and (max-width: 980px) {
101102
.pins {
102-
font-size: 12px;
103+
font-size: 11px;
103104
}
104105
}
105106

106-
@media screen and (max-width: 900px) {
107+
@media screen and (max-width: 850px) {
107108
.pins {
108109
font-size: 11px;
109110
}
@@ -123,32 +124,36 @@
123124
for (const span of document.getElementById(id).children) {
124125
if (span.dataset.option == mode)
125126
{
126-
span.classList.add("selected_pinmode");
127-
span.classList.remove("deselected_pinmode");
127+
span.classList.add("selected_value");
128+
span.classList.remove("deselected_value");
128129
}
129130
else
130131
{
131-
span.classList.add("deselected_pinmode");
132-
span.classList.remove("selected_pinmode");
132+
span.classList.add("deselected_value");
133+
span.classList.remove("selected_value");
133134
}
134135
}
135136
}
136137

137-
function configurePin(id, mode) {
138-
displayPinMode(id, mode);
138+
function configurePin(id, mode, value) {
139+
displayPinMode(id + mode, value);
139140
}
140141

141142
function setlinks() {
142-
for (const div of document.getElementsByClassName('pinmode')) {
143-
for (const option of ["IN", "0", "1"]) {
144-
const span = document.createElement("span");
145-
span.appendChild(document.createTextNode(option));
146-
span.classList.add("deselected_pinmode");
147-
span.dataset.id = div.id;
148-
span.dataset.option = option;
149-
span.id = div.id + "_" + option;
150-
span.onclick = function(event) { configurePin(event.target.dataset.id, event.target.dataset.option); };
151-
div.appendChild(span);
143+
for (const line of [["pinmode", ["IN", "OUT"], "d"], ["pinvalue", ["0", "1"], "v"]]) {
144+
for (const div of document.getElementsByClassName(line[0])) {
145+
div.classList.add("dynamic_selector");
146+
for (const option of line[1]) {
147+
const span = document.createElement("span");
148+
span.appendChild(document.createTextNode(option));
149+
span.classList.add("deselected_value");
150+
span.dataset.id = div.id.substring(0, div.id.length - 1);
151+
span.dataset.mode = line[2];
152+
span.dataset.option = option;
153+
span.id = div.id + "_" + option;
154+
span.onclick = function(event) { configurePin(event.target.dataset.id, event.target.dataset.mode, event.target.dataset.option); };
155+
div.appendChild(span);
156+
}
152157
}
153158
}
154159
}
@@ -164,26 +169,26 @@ <h1>Raspberry Pi Pico W Demo</h1>
164169
</div>
165170
<div class="pinout">
166171
<table id="left_pins" class="pins">
167-
<tr><td><div></div></td><td><div id="gpio0" class="pinmode"></div></td><td><div class="gpio_pin">GPIO0</div></td><td><div>1</div></td></tr>
168-
<tr><td><div></div></td><td><div id="gpio1" class="pinmode"></div></td><td><div class="gpio_pin">GPIO1</div></td><td><div>2</div></td></tr>
172+
<tr><td><div id="gpio0v" class="pinvalue"></div></td><td><div id="gpio0d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO0</div></td><td><div>1</div></td></tr>
173+
<tr><td><div id="gpio1v" class="pinvalue"></div></td><td><div id="gpio1d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO1</div></td><td><div>2</div></td></tr>
169174
<tr><td></td><td></td><td><div class="gnd_pin">GND</div></td><td><div>3</div></td></tr>
170-
<tr><td><div></div></td><td><div id="gpio2" class="pinmode"></div></td><td><div class="gpio_pin">GPIO2</div></td><td><div>4</div></td></tr>
171-
<tr><td><div></div></td><td><div id="gpio3" class="pinmode"></div></td><td><div class="gpio_pin">GPIO3</div></td><td><div>5</div></td></tr>
172-
<tr><td><div></div></td><td><div id="gpio4" class="pinmode"></div></td><td><div class="gpio_pin">GPIO4</div></td><td><div>6</div></td></tr>
173-
<tr><td><div></div></td><td><div id="gpio5" class="pinmode"></div></td><td><div class="gpio_pin">GPIO5</div></td><td><div>7</div></td></tr>
175+
<tr><td><div id="gpio2v" class="pinvalue"></div></td><td><div id="gpio2d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO2</div></td><td><div>4</div></td></tr>
176+
<tr><td><div id="gpio3v" class="pinvalue"></div></td><td><div id="gpio3d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO3</div></td><td><div>5</div></td></tr>
177+
<tr><td><div id="gpio4v" class="pinvalue"></div></td><td><div id="gpio4d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO4</div></td><td><div>6</div></td></tr>
178+
<tr><td><div id="gpio5v" class="pinvalue"></div></td><td><div id="gpio5d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO5</div></td><td><div>7</div></td></tr>
174179
<tr><td></td><td></td><td><div class="gnd_pin">GND</div></td><td><div>8</div></td></tr>
175-
<tr><td><div></div></td><td><div id="gpio6" class="pinmode"></div></td><td><div class="gpio_pin">GPIO6</div></td><td><div>9</div></td></tr>
176-
<tr><td><div></div></td><td><div id="gpio7" class="pinmode"></div></td><td><div class="gpio_pin">GPIO7</div></td><td><div>10</div></td></tr>
177-
<tr><td><div></div></td><td><div id="gpio8" class="pinmode"></div></td><td><div class="gpio_pin">GPIO8</div></td><td><div>11</div></td></tr>
178-
<tr><td><div></div></td><td><div id="gpio9" class="pinmode"></div></td><td><div class="gpio_pin">GPIO9</div></td><td><div>12</div></td></tr>
180+
<tr><td><div id="gpio6v" class="pinvalue"></div></td><td><div id="gpio6d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO6</div></td><td><div>9</div></td></tr>
181+
<tr><td><div id="gpio7v" class="pinvalue"></div></td><td><div id="gpio7d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO7</div></td><td><div>10</div></td></tr>
182+
<tr><td><div id="gpio8v" class="pinvalue"></div></td><td><div id="gpio8d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO8</div></td><td><div>11</div></td></tr>
183+
<tr><td><div id="gpio9v" class="pinvalue"></div></td><td><div id="gpio9d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO9</div></td><td><div>12</div></td></tr>
179184
<tr><td></td><td></td><td><div class="gnd_pin">GND</div></td><td><div>13</div></td></tr>
180-
<tr><td><div></div></td><td><div id="gpio10" class="pinmode"></div></td><td><div class="gpio_pin">GPIO10</div></td><td><div>14</div></td></tr>
181-
<tr><td><div></div></td><td><div id="gpio11" class="pinmode"></div></td><td><div class="gpio_pin">GPIO11</div></td><td><div>15</div></td></tr>
182-
<tr><td><div></div></td><td><div id="gpio12" class="pinmode"></div></td><td><div class="gpio_pin">GPIO12</div></td><td><div>16</div></td></tr>
183-
<tr><td><div></div></td><td><div id="gpio13" class="pinmode"></div></td><td><div class="gpio_pin">GPIO13</div></td><td><div>17</div></td></tr>
185+
<tr><td><div id="gpio10v" class="pinvalue"></div></td><td><div id="gpio10d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO10</div></td><td><div>14</div></td></tr>
186+
<tr><td><div id="gpio11v" class="pinvalue"></div></td><td><div id="gpio11d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO11</div></td><td><div>15</div></td></tr>
187+
<tr><td><div id="gpio12v" class="pinvalue"></div></td><td><div id="gpio12d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO12</div></td><td><div>16</div></td></tr>
188+
<tr><td><div id="gpio13v" class="pinvalue"></div></td><td><div id="gpio13d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO13</div></td><td><div>17</div></td></tr>
184189
<tr><td></td><td></td><td><div class="gnd_pin">GND</div></td><td><div>18</div></td></tr>
185-
<tr><td><div></div></td><td><div id="gpio14" class="pinmode"></div></td><td><div class="gpio_pin">GPIO14</div></td><td><div>19</div></td></tr>
186-
<tr><td><div></div></td><td><div id="gpio15" class="pinmode"></div></td><td><div class="gpio_pin">GPIO15</div></td><td><div>20</div></td></tr>
190+
<tr><td><div id="gpio14v" class="pinvalue"></div></td><td><div id="gpio14d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO14</div></td><td><div>19</div></td></tr>
191+
<tr><td><div id="gpio15v" class="pinvalue"></div></td><td><div id="gpio15d" class="pinmode"></div></td><td><div class="gpio_pin">GPIO15</div></td><td><div>20</div></td></tr>
187192
</table>
188193

189194
<img src="pinout.svg" class="pico_image"/>
@@ -195,20 +200,20 @@ <h1>Raspberry Pi Pico W Demo</h1>
195200
<tr><td><div>37</div></td><td><div class="pwr_pin">3V3_EN</div></td><td></td><td></td></tr>
196201
<tr><td><div>36</div></td><td><div class="pwr_pin">3V3_OUT</div></td><td></td><td></td></tr>
197202
<tr><td><div>35</div></td><td><div class="pwr_pin">ADC_VREF</div></td><td></td><td></td></tr>
198-
<tr><td><div>34</div></td><td><div class="gpio_pin">GPIO28</div></td><td><div id="gpio28" class="pinmode"></div></td><td><div></div></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>
199204
<tr><td><div>33</div></td><td><div class="gnd_pin">GND</div></td><td></td><td></td></tr>
200-
<tr><td><div>32</div></td><td><div class="gpio_pin">GPIO27</div></td><td><div id="gpio27" class="pinmode"></div></td><td><div></div></td></tr>
201-
<tr><td><div>31</div></td><td><div class="gpio_pin">GPIO26</div></td><td><div id="gpio26" class="pinmode"></div></td><td><div></div></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>
202207
<tr><td><div>30</div></td><td><div class="pwr_pin">RUN</div></td><td></td><td></td></tr>
203-
<tr><td><div>29</div></td><td><div class="gpio_pin">GPIO22</div></td><td><div id="gpio22" class="pinmode"></div></td><td><div></div></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>
204209
<tr><td><div>28</div></td><td><div class="gnd_pin">GND</div></td><td></td><td></td></tr>
205-
<tr><td><div>27</div></td><td><div class="gpio_pin">GPIO21</div></td><td><div id="gpio21" class="pinmode"></div></td><td><div></div></td></tr>
206-
<tr><td><div>26</div></td><td><div class="gpio_pin">GPIO20</div></td><td><div id="gpio20" class="pinmode"></div></td><td><div></div></td></tr>
207-
<tr><td><div>25</div></td><td><div class="gpio_pin">GPIO19</div></td><td><div id="gpio19" class="pinmode"></div></td><td><div></div></td></tr>
208-
<tr><td><div>24</div></td><td><div class="gpio_pin">GPIO18</div></td><td><div id="gpio18" class="pinmode"></div></td><td><div></div></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>
209214
<tr><td><div>23</div></td><td><div class="gnd_pin">GND</div></td><td></td><td></td></tr>
210-
<tr><td><div>22</div></td><td><div class="gpio_pin">GPIO17</div></td><td><div id="gpio17" class="pinmode"></div></td><td><div></div></td></tr>
211-
<tr><td><div>21</div></td><td><div class="gpio_pin">GPIO16</div></td><td><div id="gpio16" class="pinmode"></div></td><td><div></div></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>
212217
</table>
213218

214219
</div>

0 commit comments

Comments
 (0)