-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·226 lines (218 loc) · 13.1 KB
/
index.html
File metadata and controls
executable file
·226 lines (218 loc) · 13.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!doctype html>
<head>
<link href="/resources/pinout.scss.css?v=4c5780" rel="stylesheet">
<meta name="generator" content="Pinout.xyz @ https://github.com/pinout-xyz/pinout.xyz, timestamp: 1707749688">
<script src="RPiGPIO.js"></script>
<script defer src="/resources/pinout.js" type="text/javascript"></script>
<script defer src="/resources/boards.js" type="text/javascript"></script>
<style>
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 20px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*Correction for font size issues from css from pinout.xyz*/
body {
font-size: 1em;
}
</style>
<script>
//Scan all the IO and add containers for control
document.addEventListener('DOMContentLoaded',async ()=>{
//Get Board Mode
let Mode = await RPi.GPIO.Mode.Get();
document.getElementById('Mode').innerHTML = Mode;
document.querySelectorAll('li a').forEach(async Pin=>{
//Get BCM Pin Number
let NameDiv = Pin.querySelector('.name');
if(!NameDiv) return;
let Name = NameDiv.innerText;
let PinNum = Name.split('').slice(5).join('');
let PinVal = '?';
let Checked = PinVal == 1 ? 'Checked':'';
Pin.insertAdjacentHTML('beforeend',` <var id='Pin${PinNum}_Val' style='color:red'>${PinVal}</var><label class='switch'><input type='checkbox' onclick='ChangeGPIO(this,${PinNum})' ${Checked}><span class='slider round'></span></label>`)
})
})
async function ChangeGPIO(e,PinNum){
let Value = e.checked ? 1:0;
await RPi.GPIO.Set(PinNum,Value)
let ValDiv = document.getElementById(`Pin${PinNum}_Val`);
if(ValDiv) ValDiv.innerText=Value;
}
//Scan all the IO and update status periodically
/*
setInterval(()=>{
document.querySelectorAll("[id^='Pin']").forEach(async IO=>{
IO.innerText = '?';
let PinNum = IO.id.split('_')[0].substring(3); //Nasty but work as long as nothing changes
let PinVal = await RPi.GPIO.Get(PinNum);
let Checked = PinVal == 1 ? 'Checked':'';
IO.innerText = PinVal.trim();
//Need to add something here for updating the slider
IO.nextSibling.querySelector('input').cheked = Checked;
})
},5000)
*/
</script>
</head>
<body>
<h3>Raspberry Pi Pinout. <var id='Mode'></var> Mode</h3>
<div id="leftcolumn">
<nav id="gpio">
<div id="pinbase"></div>
<ul class="bottom">
<li class="pin1 pow3v3"><a href="/pinout/3v3_power" title=""><span class="default"><span class="phys">1</span> 3v3 Power</span><span class="pin"></span></a></li>
<li class="pin3 gpio i2c"><a href="/pinout/pin3_gpio2" title="Wiring Pi pin 8"><span class="default"><span class="phys">3</span> <span class="name">GPIO 2</span> <small>(I2C1 SDA)</small></span><span class="pin"></span></a></li>
<li class="pin5 gpio i2c"><a href="/pinout/pin5_gpio3" title="Wiring Pi pin 9"><span class="default"><span class="phys">5</span> <span class="name">GPIO 3</span> <small>(I2C1 SCL)</small></span><span class="pin"></span></a></li>
<li class="pin7 gpio"><a href="/pinout/pin7_gpio4" title="Wiring Pi pin 7"><span class="default"><span class="phys">7</span> <span class="name">GPIO 4</span> <small>(GPCLK0)</small></span><span class="pin"></span></a></li>
<li class="pin9 gnd"><a href="/pinout/ground" title=""><span class="default"><span class="phys">9</span> Ground</span><span class="pin"></span></a></li>
<li class="pin11 gpio"><a href="/pinout/pin11_gpio17" title="Wiring Pi pin 0"><span class="default"><span class="phys">11</span> <span class="name">GPIO 17</span></span><span class="pin"></span></a></li>
<li class="pin13 gpio"><a href="/pinout/pin13_gpio27" title="Wiring Pi pin 2"><span class="default"><span class="phys">13</span> <span class="name">GPIO 27</span></span><span class="pin"></span></a></li>
<li class="pin15 gpio"><a href="/pinout/pin15_gpio22" title="Wiring Pi pin 3"><span class="default"><span class="phys">15</span> <span class="name">GPIO 22</span></span><span class="pin"></span></a></li>
<li class="pin17 pow3v3"><a href="/pinout/3v3_power" title=""><span class="default"><span class="phys">17</span> 3v3 Power</span><span class="pin"></span></a></li>
<li class="pin19 gpio spi"><a href="/pinout/pin19_gpio10" title="Wiring Pi pin 12"><span class="default"><span class="phys">19</span> <span class="name">GPIO 10</span> <small>(SPI0 MOSI)</small></span><span class="pin"></span></a></li>
<li class="pin21 gpio spi"><a href="/pinout/pin21_gpio9" title="Wiring Pi pin 13"><span class="default"><span class="phys">21</span> <span class="name">GPIO 9</span> <small>(SPI0 MISO)</small></span><span class="pin"></span></a></li>
<li class="pin23 gpio spi"><a href="/pinout/pin23_gpio11" title="Wiring Pi pin 14"><span class="default"><span class="phys">23</span> <span class="name">GPIO 11</span> <small>(SPI0 SCLK)</small></span><span class="pin"></span></a></li>
<li class="pin25 gnd"><a href="/pinout/ground" title=""><span class="default"><span class="phys">25</span> Ground</span><span class="pin"></span></a></li>
<li class="pin27 gpio i2c"><a href="/pinout/pin27_gpio0" title="Wiring Pi pin 30"><span class="default"><span class="phys">27</span> <span class="name">GPIO 0</span> <small>(EEPROM SDA)</small></span><span class="pin"></span></a></li>
<li class="pin29 gpio"><a href="/pinout/pin29_gpio5" title="Wiring Pi pin 21"><span class="default"><span class="phys">29</span> <span class="name">GPIO 5</span></span><span class="pin"></span></a></li>
<li class="pin31 gpio"><a href="/pinout/pin31_gpio6" title="Wiring Pi pin 22"><span class="default"><span class="phys">31</span> <span class="name">GPIO 6</span></span><span class="pin"></span></a></li>
<li class="pin33 gpio"><a href="/pinout/pin33_gpio13" title="Wiring Pi pin 23"><span class="default"><span class="phys">33</span> <span class="name">GPIO 13</span> <small>(PWM1)</small></span><span class="pin"></span></a></li>
<li class="pin35 gpio pcm"><a href="/pinout/pin35_gpio19" title="Wiring Pi pin 24"><span class="default"><span class="phys">35</span> <span class="name">GPIO 19</span> <small>(PCM FS)</small></span><span class="pin"></span></a></li>
<li class="pin37 gpio"><a href="/pinout/pin37_gpio26" title="Wiring Pi pin 25"><span class="default"><span class="phys">37</span> <span class="name">GPIO 26</span></span><span class="pin"></span></a></li>
<li class="pin39 gnd"><a href="/pinout/ground" title=""><span class="default"><span class="phys">39</span> Ground</span><span class="pin"></span></a></li>
</ul>
<ul class="top">
<li class="pin2 pow5v"><a href="/pinout/5v_power" title=""><span class="default"><span class="phys">2</span> 5v Power</span><span class="pin"></span></a></li>
<li class="pin4 pow5v"><a href="/pinout/5v_power" title=""><span class="default"><span class="phys">4</span> 5v Power</span><span class="pin"></span></a></li>
<li class="pin6 gnd"><a href="/pinout/ground" title=""><span class="default"><span class="phys">6</span> Ground</span><span class="pin"></span></a></li>
<li class="pin8 gpio uart"><a href="/pinout/pin8_gpio14" title="Wiring Pi pin 15"><span class="default"><span class="phys">8</span> <span class="name">GPIO 14</span> <small>(UART TX)</small></span><span class="pin"></span></a></li>
<li class="pin10 gpio uart"><a href="/pinout/pin10_gpio15" title="Wiring Pi pin 16"><span class="default"><span class="phys">10</span> <span class="name">GPIO 15</span> <small>(UART RX)</small></span><span class="pin"></span></a></li>
<li class="pin12 gpio pcm"><a href="/pinout/pin12_gpio18" title="Wiring Pi pin 1"><span class="default"><span class="phys">12</span> <span class="name">GPIO 18</span> <small>(PCM CLK)</small></span><span class="pin"></span></a></li>
<li class="pin14 gnd"><a href="/pinout/ground" title=""><span class="default"><span class="phys">14</span> Ground</span><span class="pin"></span></a></li>
<li class="pin16 gpio"><a href="/pinout/pin16_gpio23" title="Wiring Pi pin 4"><span class="default"><span class="phys">16</span> <span class="name">GPIO 23</span></span><span class="pin"></span></a></li>
<li class="pin18 gpio"><a href="/pinout/pin18_gpio24" title="Wiring Pi pin 5"><span class="default"><span class="phys">18</span> <span class="name">GPIO 24</span></span><span class="pin"></span></a></li>
<li class="pin20 gnd"><a href="/pinout/ground" title=""><span class="default"><span class="phys">20</span> Ground</span><span class="pin"></span></a></li>
<li class="pin22 gpio"><a href="/pinout/pin22_gpio25" title="Wiring Pi pin 6"><span class="default"><span class="phys">22</span> <span class="name">GPIO 25</span></span><span class="pin"></span></a></li>
<li class="pin24 gpio spi"><a href="/pinout/pin24_gpio8" title="Wiring Pi pin 10"><span class="default"><span class="phys">24</span> <span class="name">GPIO 8</span> <small>(SPI0 CE0)</small></span><span class="pin"></span></a></li>
<li class="pin26 gpio spi"><a href="/pinout/pin26_gpio7" title="Wiring Pi pin 11"><span class="default"><span class="phys">26</span> <span class="name">GPIO 7</span> <small>(SPI0 CE1)</small></span><span class="pin"></span></a></li>
<li class="pin28 gpio i2c"><a href="/pinout/pin28_gpio1" title="Wiring Pi pin 31"><span class="default"><span class="phys">28</span> <span class="name">GPIO 1</span> <small>(EEPROM SCL)</small></span><span class="pin"></span></a></li>
<li class="pin30 gnd"><a href="/pinout/ground" title=""><span class="default"><span class="phys">30</span> Ground</span><span class="pin"></span></a></li>
<li class="pin32 gpio"><a href="/pinout/pin32_gpio12" title="Wiring Pi pin 26"><span class="default"><span class="phys">32</span> <span class="name">GPIO 12</span> <small>(PWM0)</small></span><span class="pin"></span></a></li>
<li class="pin34 gnd"><a href="/pinout/ground" title=""><span class="default"><span class="phys">34</span> Ground</span><span class="pin"></span></a></li>
<li class="pin36 gpio"><a href="/pinout/pin36_gpio16" title="Wiring Pi pin 27"><span class="default"><span class="phys">36</span> <span class="name">GPIO 16</span></span><span class="pin"></span></a></li>
<li class="pin38 gpio pcm"><a href="/pinout/pin38_gpio20" title="Wiring Pi pin 28"><span class="default"><span class="phys">38</span> <span class="name">GPIO 20</span> <small>(PCM DIN)</small></span><span class="pin"></span></a></li>
<li class="pin40 gpio pcm"><a href="/pinout/pin40_gpio21" title="Wiring Pi pin 29"><span class="default"><span class="phys">40</span> <span class="name">GPIO 21</span> <small>(PCM DOUT)</small></span><span class="pin"></span></a></li>
</ul>
</nav>
<div id="legend">
<div>
<h2>Legend</h2>
<p>Orientate your Pi with the GPIO on the right and the HDMI port(s) on the left.</p>
<ul>
<li class="gpio">
<a href="/pinout/wiringpi" title="GPIO (General Purpose IO)">
<span class="default"></span>
<span class="pin"></span> GPIO <small>(General Purpose IO)</small>
</a>
</li>
<li class="spi">
<a href="/pinout/spi" title="SPI (Serial Peripheral Interface)">
<span class="default"></span>
<span class="pin"></span> SPI <small>(Serial Peripheral Interface)</small>
</a>
</li>
<li class="i2c">
<a href="/pinout/i2c" title="I2C (Inter-integrated Circuit)">
<span class="default"></span>
<span class="pin"></span> I<sup>2</sup>C <small>(Inter-integrated Circuit)</small>
</a>
</li>
<li class="uart">
<a href="/pinout/uart" title="UART (Universal Asynchronous Receiver/Transmitter)">
<span class="default"></span>
<span class="pin"></span> UART <small>(Universal Asynchronous Receiver/Transmitter)</small>
</a>
</li>
<li class="pcm">
<a href="/pinout/pcm" title="PCM (Pulse Code Modulation)">
<span class="default"></span>
<span class="pin"></span> PCM <small>(Pulse Code Modulation)</small>
</a>
</li>
<li class="gnd">
<a href="/pinout/ground" title="Ground">
<span class="default"></span>
<span class="pin"></span> Ground
</a>
</li>
<li class="pow5v">
<a href="/pinout/5v_power" title="5v (Power)">
<span class="default"></span>
<span class="pin"></span> 5v <small>(Power)</small>
</a>
</li>
<li class="pow3v3">
<a href="/pinout/3v3_power" title="3.3v (Power)">
<span class="default"></span>
<span class="pin"></span> 3.3v <small>(Power)</small>
</a>
</li>
</ul>
</div>
<img src="/resources/pi-orientation.png" width="196" height="297">
</div>
</div>
<div id="content"></div>
<div class="footer">Please Check <a href='https://pinout.xyz' target='_blank'>Raspberry Pi Pinout</a> For more Details</div>
</body>
</html>