Better power pin labelling.

pinout-xyz · Sep 18, 2024 · 469d258 · 469d258
1 parent 2af416b
commit 469d258
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 <link rel="manifest" href="manifest.json">
 <title>Raspberry Pi Pico W GPIO Pinout</title>
 <meta name="description" content="An interactive, accessible and beautiful GPIO Pinout guide for the Raspberry Pi Pico W" />
-<link rel="stylesheet" href="pinout.css?v=20240917" type="text/css" media="screen" />
+<link rel="stylesheet" href="pinout.css?v=20240918" type="text/css" media="screen" />
 </head>
 <body>
     <header>
@@ -67,8 +67,8 @@ <h1>Raspberry Pi Pico W Pinout</h1>
                 <th scope="col">Pin</th><th scope="col">Name/ADC</th><th scope="col">SPI</th><th scope="col">I2C</th><th scope="col">UART</th><th scope="col">PWM</th>
             </thead>
             <tbody>
-            <tr aria-label="First pin."       ><th>40</th><td class="power" title="Power: USB input voltage">VBUS</td></tr>
-            <tr aria-label="Second pin."      ><th>39</th><td class="power" title="Power: System voltage">VSYS</td></tr>
+            <tr aria-label="First pin."       ><th>40</th><td class="power" title="Power: USB input voltage">VBUS 5V</td></tr>
+            <tr aria-label="Second pin."      ><th>39</th><td class="power" title="Power: System voltage">VSYS 5V<sup>*</sup></td></tr>
             <tr aria-label="Third pin."       ><th>38</th><td class="ground" title="Ground">Ground</td></tr>
             <tr aria-label="Forth pin."       ><th>37</th><td class="system" title="System: 3v3 regulator enable">3V3 En</td></tr>
             <tr aria-label="Fifth pin."       ><th>36</th><td class="power" title="Power: 3v3 output">3V3 Out</td></tr>
@@ -95,6 +95,10 @@ <h1>Raspberry Pi Pico W Pinout</h1>
             <thead>
                 <th scope="col">Pin</th><th scope="col">Function</th><th scope="col">Notes</th>
             </thead>
+            <tbody class="power_pins">
+                <tr><td>VSYS</td><td>System voltage in/out</td><td><sup>*</sup>5V <em>out</em> when powered by USB (diode to VBUS),<br>1.8V to 5.5V <em>in</em> if powered externally</td></tr>
+                <tr><td>3V3 Out</td><td>Chip 3V3 supply</td><td>Can be used to power external circuitry,<br>recommended to keep the load less than 300mA</td></tr>
+            </tbody>
             <tbody>
                 <tr><td>GP23</td><td>Wireless Power On</td><td></td></tr>
                 <tr><td>GP24</td><td>Wireless SPI Data</td><td></td></tr>

diff --git a/pinout.css b/pinout.css
@@ -32,25 +32,22 @@ nav {
 header {
     background: #002b36;
     color: #e9e5d2;
-    display: block;
     width: 100%;
     line-height: 22px;
     padding: 10px;
     border-bottom: 5px solid #268bd2;
     display: grid;
-    grid-template-columns: 10px auto auto 10px;
+    grid-template-columns: auto auto;
 }
 header h1 {
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 10px;
     font-size: 20px;
-    grid-column: 2;
 }
 header ul {
-    grid-column: 3;
     list-style: none;
     margin: 0;
-    padding: 0;
+    padding: 0 10px 0 0;
     text-align: right;
 }
 header li {
@@ -152,6 +149,10 @@ td, th {
 }
 .extra td {
     border: none;
+    background-color: #9e9d9b22;
+    padding: 5px;
+}
+.extra tr:nth-child(odd) td {
     background-color: #9e9d9b33;
 }
 .extra th {
@@ -163,8 +164,23 @@ td, th {
     top: 5px;
 }
 .extra .wl_gpio td {
+    background-color: #d3368222;
+}
+.extra .wl_gpio tr:nth-child(odd) td {
     background-color: #d3368233;
 }
+.extra .power_pins td {
+    background-color: #dc322f22;
+}
+.extra .power_pins tr:nth-child(odd) td {
+    background-color: #dc322f33;
+}
+.extra .tpads td {
+    background-color: #85990022;
+}
+.extra .tpads tr:nth-child(odd) td {
+    background-color: #85990033;
+}
 
 /* Hide advanced labels by default */
 .labels .advanced {visibility: hidden;}
@@ -251,6 +267,13 @@ td, th {
 .underside-view .labels.left td {border-width:0 4px 0 0;}
 .underside-view .labels.right td {border-width:0 0 0 4px;}
 
+sup {
+    position: absolute;
+    top: -25%;
+    font-size: 70%;
+    vertical-align: middle;
+}
+
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #000000;
@@ -266,7 +289,6 @@ td, th {
         color: #666666;
     }
     footer a.selected {
-        text-decoration: none;
         color: #666666;
     }
     footer a, footer a:visited {