1
+ < html >
2
+ < head >
3
+ <!--<link rel="stylesheet" href="css/main.css">-->
4
+ < style type ="text/css ">
5
+ body {
6
+ font-family : Verdana, Geneva, Tahoma, sans-serif;
7
+ }
8
+
9
+ .main {
10
+ display : grid;
11
+ place-items : center;
12
+ }
13
+
14
+ .header {
15
+ display : grid;
16
+ place-items : center;
17
+ }
18
+
19
+ .pinout {
20
+ width : 100% ;
21
+ max-width : 800px ;
22
+ min-width : 200px ;
23
+ display : grid;
24
+ grid-template-columns : auto 1fr auto
25
+ }
26
+
27
+ .header * {
28
+ margin : 5px 0px ;
29
+ }
30
+
31
+ .pico_image {
32
+ width : 100% ;
33
+ grid-column : 2 ;
34
+ }
35
+
36
+ # left_pins {
37
+ display : grid;
38
+ grid-template-rows : repeat (20 , 1fr );
39
+ grid-row-gap : 2px ;
40
+ position : relative;
41
+ top : 4% ;
42
+ height : 96% ;
43
+ }
44
+
45
+ # left_pins div {
46
+ font-size : auto;
47
+ margin : auto 0 ;
48
+ background : # eeeeee ;
49
+ }
50
+
51
+ # left_pins div span : nth-last-child (1 ) {
52
+ background : # cccccc ;
53
+ margin : 2px ;
54
+ }
55
+
56
+ .pinmode a {
57
+ margin : 2px ;
58
+ }
59
+
60
+ </ style >
61
+ < script language ="JavaScript ">
62
+ function setlinks ( ) {
63
+ for ( const span of document . getElementsByClassName ( 'pinmode' ) ) {
64
+ for ( const link of span . children ) {
65
+ link . href = 'javascript:setgpio(this)' ;
66
+ }
67
+ }
68
+ }
69
+ </ script >
70
+
71
+ </ head >
72
+
73
+ < body onload ="setlinks() ">
74
+ < div class ="main ">
75
+ < div class ="header ">
76
+ < h1 > Raspberry Pi Pico W Demo</ h1 >
77
+ < p > Click on any I/O pin below to change its value:</ p >
78
+ </ div >
79
+ < 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 >
102
+
103
+ < img src ="pinout.svg " class ="pico_image "/>
104
+ </ div >
105
+ </ div >
106
+ </ body >
107
+ </ html >
0 commit comments