Skip to content

Commit 6a6497e

Browse files
sysprogssysprogs
committed
Switched pin list to a HTML table
1 parent 27c29d7 commit 6a6497e

File tree

1 file changed

+98
-36
lines changed

1 file changed

+98
-36
lines changed

‎PicoHTTPServer/www/index.html

+98-36
Original file line numberDiff line numberDiff line change
@@ -33,36 +33,98 @@
3333
grid-column: 2;
3434
}
3535

36-
#left_pins {
37-
display: grid;
38-
grid-template-rows: repeat(20, 1fr);
39-
grid-row-gap: 2px;
36+
.pins {
4037
position: relative;
41-
top: 4%;
38+
top: 3.8%;
4239
height: 96%;
40+
color: white;
41+
}
42+
43+
#left_pins {
44+
margin: 0 10px 0 0;
45+
}
46+
47+
.pins tr td div {
48+
width: 90%;
49+
text-align: center;
50+
padding: 5px;
4351
}
4452

45-
#left_pins div {
46-
font-size: auto;
47-
margin: auto 0;
48-
background: #eeeeee;
53+
.pins tr td {
54+
padding: 0 5px;
4955
}
5056

51-
#left_pins div span:nth-last-child(1) {
57+
#left_pins tr td:nth-last-child(1) div {
5258
background: #cccccc;
59+
color: black;
60+
}
61+
62+
.gpio_pin {
63+
background: #7AC943;
64+
}
65+
66+
.gnd_pin {
67+
background: #000000;
68+
}
69+
70+
.pinmode {
71+
display: block;
72+
padding: 0px 2px;
73+
border: 1px solid black;
74+
}
75+
76+
.pinmode span {
77+
margin: 5px;
78+
padding: 5px 15px;
79+
}
80+
81+
.selected_pinmode {
5382
margin: 2px;
83+
color: white;
84+
background: blue;
5485
}
5586

56-
.pinmode a {
87+
.deselected_pinmode {
5788
margin: 2px;
89+
color: black;
90+
cursor: pointer;
5891
}
92+
93+
5994

6095
</style>
6196
<script language="JavaScript">
97+
98+
function displayPinMode(id, mode) {
99+
for (const span of document.getElementById(id).children) {
100+
if (span.dataset.option == mode)
101+
{
102+
span.classList.add("selected_pinmode");
103+
span.classList.remove("deselected_pinmode");
104+
}
105+
else
106+
{
107+
span.classList.add("deselected_pinmode");
108+
span.classList.remove("selected_pinmode");
109+
}
110+
}
111+
}
112+
113+
function configurePin(id, mode) {
114+
displayPinMode(id, mode);
115+
}
116+
62117
function setlinks() {
63-
for (const span of document.getElementsByClassName('pinmode')) {
64-
for (const link of span.children) {
65-
link.href='javascript:setgpio(this)';
118+
for (const div of document.getElementsByClassName('pinmode')) {
119+
for (const option of ["Input", "0", "1"]) {
120+
const span = document.createElement("span");
121+
span.appendChild(document.createTextNode(option));
122+
span.classList.add("deselected_pinmode");
123+
span.dataset.id = div.id;
124+
span.dataset.option = option;
125+
span.id = div.id + "_" + option;
126+
span.onclick = function(event) { configurePin(event.target.dataset.id, event.target.dataset.option); };
127+
div.appendChild(span);
66128
}
67129
}
68130
}
@@ -77,28 +139,28 @@ <h1>Raspberry Pi Pico W Demo</h1>
77139
<p>Click on any I/O pin below to change its value:</p>
78140
</div>
79141
<div class="pinout">
80-
<div id="left_pins">
81-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
82-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
83-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
84-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
85-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
86-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>12</span></div>
87-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
88-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
89-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
90-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
91-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
92-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
93-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
94-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
95-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
96-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
97-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
98-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
99-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
100-
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
101-
</div>
142+
<table id="left_pins" class="pins">
143+
<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>
144+
<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>
145+
<tr><td></td><td></td><td><div class="gnd_pin">GND</div></td><td><div>3</div></td></tr>
146+
<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>
147+
<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>
148+
<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>
149+
<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>
150+
<tr><td></td><td></td><td><div class="gnd_pin">GND</div></td><td><div>8</div></td></tr>
151+
<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>
152+
<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>
153+
<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>
154+
<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>
155+
<tr><td></td><td></td><td><div class="gnd_pin">GND</div></td><td><div>13</div></td></tr>
156+
<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>
157+
<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>
158+
<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>
159+
<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>
160+
<tr><td></td><td></td><td><div class="gnd_pin">GND</div></td><td><div>18</div></td></tr>
161+
<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>
162+
<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>
163+
</table>
102164

103165
<img src="pinout.svg" class="pico_image"/>
104166
</div>

0 commit comments

Comments
 (0)