villivateur
/
pinout.vvzero.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Lots of hackery

This commit is contained in:
Phil Howard 2016-11-01 20:40:35 +00:00
parent e42a3e559b
commit 6712e171e9
18 changed files with 687 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,4 +2,5 @@ output/
*.py[cod]
env/
.DS_store
.sass_cache/

1
Makefile
View File

@ -7,6 +7,7 @@ LANG := $(firstword $(LANG))
.PHONY: resources
all:
scss resources/pinout.scss > resources/pinout.scss.css
./generate-html.py $(LANG)
cp -r resources output/$(LANG)/

39
common/layout.html Normal file
View File

@ -0,0 +1,39 @@
<!doctype html>
<html lang="{{langcode}}">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>{{title}}</title>
<meta name="description" content="{{description}}" />
<link href='//fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css' />
<link href='{{resource_url}}prettify/prettify.css' rel='stylesheet' />
<link href="{{resource_url}}pinout.scss.css?v={{v}}" rel="stylesheet">
<link href="{{resource_url}}print.css?v={{v}}" rel="stylesheet" media="print">
{{hreflang}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{{analytics_id}}', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="{{body_class}}">
<div id="container">
<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/"><img src="{{resource_url}}pinout-logo.png" /><span>Raspberry Pi</span>n<span class="out">out</span></a></h1>
{{main_content}}
{{footer}}
</div>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/prettify/0.1/prettify.js"></script>
<script src='{{resource_url}}prettify/lang-ruby.js'></script>
<script src='{{resource_url}}prettify/lang-bash.js'></script>
<script src='{{resource_url}}pinout.js?v={{v}}'></script>
<script src='{{resource_url}}boards.js?v={{v}}'></script>
</body>
</html>

65
generate-html.py
View File

@ -22,6 +22,8 @@ GROUND_PINS = [6,9,14,20,25,30,34,39]
lang = "en"
default_strings = {
'home': 'Home',
'boards': 'Boards',
'pin_header': '{} pin header',
'form_undefined': 'Undefined',
'group_other': 'other',
@ -40,6 +42,7 @@ default_strings = {
'github_repository': 'GitHub Repository',
'buy_now': 'Buy Now',
'translate_msg': '<a href="https://github.com/gadgetoid/Pinout2">This page needs translating, can you help?</a><br><br>',
'browse_addons': 'Browse more HATs, pHATs and add-ons'
}
@ -494,6 +497,7 @@ url_suffix = pinout.get_setting('url_suffix', '') # '.html'
template_main = open('src/{}/template/layout.html'.format(lang)).read()
template_boards = open('src/{}/template/boards.html'.format(lang)).read()
template_footer = open('src/{}/template/footer.html'.format(lang)).read()
pages = {}
navs = {}
@ -524,7 +528,7 @@ overlay_subnav = ['featured']
featured_boards_count = 0
featured_boards_html = ''
boards_page = {}
boards_page = []
boards_manufacturers = []
'''
@ -535,6 +539,7 @@ overlays_html is generated with all types for legacy reasons
'''
for overlay in overlays:
link = (overlay['page_url'], overlay['name'])
overlays_html += [link]
@ -565,11 +570,11 @@ for overlay in overlays:
if 'formfactor' not in overlay:
print('Warning! -> {name} missing formfactor'.format(name=overlay['name']))
if overlay['manufacturer'] not in boards_page.keys():
'''if overlay['manufacturer'] not in boards_page.keys():
boards_page[overlay['manufacturer']] = []
boards_manufacturers.append(overlay['manufacturer'])
boards_manufacturers.append(overlay['manufacturer'])'''
boards_page[overlay['manufacturer']].append({'name': overlay['name'], 'html': '<li class="board" data-type="{type}" data-manufacturer="{manufacturer}" data-form-factor="{formfactor}"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong></a></li>'.format(
boards_page.append({'name': overlay['name'], 'html': '<li class="board" data-type="{type}" data-manufacturer="{manufacturer}" data-form-factor="{formfactor}"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong></a></li>'.format(
image=image,
name=overlay['name'],
page_url=overlay['page_url'],
@ -580,15 +585,23 @@ for overlay in overlays:
resource_url=resource_url)})
#boards_page = [x['html'] for x in sorted(boards_page, key=lambda k: k['name'])]
pages['boards'] = {'rendered_html':''}
boards_manufacturers = sorted(boards_manufacturers);
def interfaces_menu(current):
interfaces = [overlay for overlay in overlays if overlay['class'] == 'interface']
for manufacturer in boards_manufacturers:
boards_page[manufacturer] = [x['html'] for x in sorted(boards_page[manufacturer], key=lambda k: k['name'])]
pages['boards']['rendered_html'] += '<li class="title"><a name="manufacturer=' + manufacturer + '"></a><h2>' + manufacturer + '</h2></li>'
pages['boards']['rendered_html'] += ''.join(boards_page[manufacturer])
html = ''
for interface in interfaces:
sel = ''
if current is not None and 'name' in current and interface['name'] == current['name']:
sel = ' class="selected"'
html += '<li{}><a href="{}{}">{}</a></li>'.format(sel, base_url, interface['page_url'], interface['name'])
return html
boards_page = [x['html'] for x in sorted(boards_page, key=lambda k: k['name'])]
pages['boards'] = {'rendered_html':''.join(boards_page)}
'''
Manually add the index page as 'pinout', this is due to how the
@ -615,7 +628,7 @@ if page404 is not None:
navs['404'] = default_nav
#pages['boards'] = {'rendered_html': ''.join(boards_page)}
crumbtrail = '<div id="crumbtrail"><p><a class="more" href="/boards">' + strings['browse_addons'] + ' &raquo;</a></p></div>'
navs['boards'] = default_nav
@ -631,6 +644,8 @@ for pin in range(1, len(pinout.pins) + 1):
pin_nav = render_nav(pin_url)
pin_html = pinout.render_html(template_main,
template_footer,
analytics_id=pinout.settings['analytics_id'],
lang_links="\n\t\t".join(langlinks),
hreflang="\n\t\t".join(hreflang),
nav=pin_nav,
@ -642,8 +657,9 @@ for pin in range(1, len(pinout.pins) + 1):
featured_boards=featured_boards_html,
langcode=lang,
nav_html=nav_html,
interfaces=interfaces_menu(None),
body_class='pin',
crumbtrail=''
crumbtrail=crumbtrail
)
print('>> Saving: pinout/{}.html'.format(pin_url))
@ -676,23 +692,33 @@ for url in pages:
if not 'description' in pages[url]:
pages[url]['description'] = pinout.settings['default_desc']
name = pinout.settings['default_title']
if 'name' in pages[url]:
pages[url]['name'] = pages[url]['name'] + pinout.settings['title_suffix']
else:
pages[url]['name'] = pinout.settings['default_title']
name = pages[url]['name'] + pinout.settings['title_suffix']
feat_boards_html = featured_boards_html
body_class = ''
crumbtrail = ''
crumbtrail = '<div id="crumbtrail"><p><a class="more" href="/boards">' + strings['browse_addons'] + ' &raquo;</a></p></div>'
if 'class' in pages[url] and pages[url]['class'] == 'board':
feat_boards_html = ''
body_class = 'board'
crumbtrail = '<div id="crumbtrail"><p><a href="/boards">Boards</a> &raquo; <a href="/boards#manufacturer={manufacturer}">{manufacturer}</a></p></div>'.format(title=pages[url]['name'], manufacturer=pages[url]['manufacturer'])
crumbtrail = '<div id="crumbtrail"><p><a href="/">{home}</a> &raquo; <a href="/boards">{boards}</a> &raquo; <a href="/boards#manufacturer={manufacturer}">{manufacturer}</a></p></div>'.format(
title=pages[url]['name'],
manufacturer=pages[url]['manufacturer'],
home=strings['home'],
boards=strings['boards']
)
if url == 'boards':
body_class = 'boards-page'
html = pinout.render_html(template,
template_footer,
analytics_id=pinout.settings['analytics_id'],
lang_links="\n\t\t".join(langlinks),
hreflang="\n\t\t".join(hreflang),
nav=nav,
@ -700,10 +726,11 @@ for url in pages:
overlays=overlays_html,
resource_url=resource_url,
description=pages[url]['description'],
title=pages[url]['name'],
title=name,
featured_boards=feat_boards_html,
langcode=lang,
nav_html=nav_html,
interfaces=interfaces_menu(pages[url]),
body_class=body_class,
crumbtrail=crumbtrail
)

7
pinout.py
View File

@ -13,6 +13,8 @@ SETTINGS_FILE = 'settings.yaml'
pins = None
settings = None
master_template = open('common/layout.html').read()
def get_setting(setting, default = None):
if setting in settings and settings[setting] != None:
@ -21,7 +23,10 @@ def get_setting(setting, default = None):
def render_html(*args, **kwargs):
html = args[0]
html = master_template
html = html.replace('{{main_content}}',args[0])
html = html.replace('{{footer}}',args[1])
kwargs['v'] = str(int(time.time()))
for key in kwargs:
if type(kwargs[key]) == dict:

3
resources/boards.js
View File

@ -1,8 +1,7 @@
jQuery(document).ready(function(){
var dom_boards = $('#boards .board');
var dom_titles = $('#boards .title');
dom_titles.hide();
if(dom_boards.length == 0) return;
var facets = {};
var filters = {};

33
resources/pinout.css
View File

@ -169,7 +169,7 @@ Featured Boards
overflow: hidden;
}
#sections .featured, #boards .board, #featured .board {
#boards .board, #featured .board {
box-sizing:border-box;
width:25%;
display:block;
@ -177,9 +177,7 @@ Featured Boards
text-align:center;
}
#featured .board {width:25%;}
#sections .group li.featured {
margin-right:0px;
}
#boards .board a, #featured .board a {
padding-top: 20px;
padding-bottom: 0px;
@ -191,34 +189,24 @@ Featured Boards
padding-top: 10px;
padding-bottom: 10px;
}
#sections .featured img, #boards .board img, #featured .board img {
#boards .board img, #featured .board img {
max-width:80%;
height:auto;
display:block;
margin:0 auto;
}
#featured .board img {max-width:50%;}
#sections .featured a, #boards .board a, #featured .board a {
background:none;
}
#sections .boards hr {
clear:both;
border:none;
border-top:3px solid #D33682;
margin-bottom:5px;
#boards .board a, #featured .board a {
background:none;
}
#sections .boards .featured a:hover {
background: #D33682;
}
#featured .board a:hover {
background: #D33682;
}
#boards .board a:hover {
background: #fdfaf0;
}
#sections .featured strong, #boards .board strong, #featured .board strong {
#boards .board strong, #featured .board strong {
font-size:16px;
font-family: 'Avenir', sans-serif;
font-weight: 500;
@ -256,7 +244,7 @@ Featured Boards
top: 5px;
}
#sections .featured span, #boards .board span, #featured .board span {
#boards .board span, #featured .board span {
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
@ -357,6 +345,11 @@ Left Column
color:#fff;
}
#crumbtrail a.more {
text-align:center;
display:block;
}
#crumbtrail a:hover {
text-decoration: underline;
}
@ -620,10 +613,6 @@ ol.linenums {margin-left:30px;}
.board {
right:1200px;
}
#sections ul .dropdown {
min-width:700px;
max-width:700px;
}
#content {
width:700px;
}

540
resources/pinout.scss.css Normal file
View File

@ -0,0 +1,540 @@
ul, li, a, body, h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
text-decoration: none; }
body {
font-family: 'Avenir', sans-serif;
font-weight: 500; }
table {
margin: 20px 0;
border-collapse: collapse;
text-align: left;
font-size: 13px; }
table td, table th {
border: 1px solid #073642;
padding: 5px; }
table th {
background: #073642;
color: #EBE6D3; }
table.details {
width: 100%; }
table.details td, table.details th {
border: none;
font-size: 16px;
vertical-align: top; }
table.details img {
margin-top: 54px; }
table.pin-functions {
width: 100%; }
table.pin-functions td {
width: 16.6666%; }
.prettyprint {
word-wrap: break-word; }
.logo {
width: 250px;
font-size: 24px;
line-height: 23px;
cursor: pointer;
position: absolute;
left: 0px;
top: 28px;
z-index: 1;
font-weight: 600; }
.logo a {
color: #FFFFFF; }
.logo img {
float: left;
margin: 0 13px;
top: 8px; }
.logo a:hover span, .logo a:hover, .logo a:hover span.out {
color: #FFFFFF; }
img.grayscale {
filter: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;filter id='grayscale'&gt;&lt;feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
/* Firefox 10+, Firefox on Android */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+, Safari 6+, Safari 6+ iOS */ }
#container {
width: 1000px;
margin: 0 auto;
position: relative;
padding-top: 4px; }
/*
Footer language nav
*/
#lang {
display: block;
overflow: hidden;
background: #C7C2AE;
position: absolute;
bottom: 0px;
width: 100%; }
.lang-nav {
line-height: 30px;
display: block;
overflow: hidden;
float: right;
margin: 0;
padding: 0;
margin-right: 10px;
list-style: none; }
.lang-nav li {
margin: 0;
padding: 0;
float: left; }
.lang-nav li:last-child {
border-right: none;
padding-right: 0px; }
.lang-nav li a {
padding-left: 10px;
color: #6D6D6D;
font-size: 16px; }
.lang-nav li a:hover {
color: #D6264E; }
/*
Content Area
*/
#content {
float: left;
background: #EBE6D3;
width: 500px;
min-height: 640px;
position: relative;
padding-bottom: 50px; }
#content hr {
border: none;
background: none;
border-top: 2px solid #d4c99e; }
#content h1 {
font-size: 30px; }
#content h2 {
font-size: 20px;
margin-top: 20px; }
#content h1, #content h2, #content h3, #content h4, #content h5 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
#content article {
padding: 15px; }
.boards-page #content {
width: 698px; }
#content
p.intro {
color: #268BD2; }
p, pre {
margin-top: 10px;
font-size: 16px;
line-height: 150%; }
h3 {
color: #D33682;
font-size: 22px;
font-weight: bold; }
article a {
color: #859900;
text-decoration: underline; }
article ul {
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px; }
/*
Boards Page
*/
#boards .board, #featured .board {
box-sizing: border-box;
width: 25%;
display: block;
float: left;
text-align: center; }
#boards .board a, #featured .board a {
padding-top: 20px;
padding-bottom: 0px;
min-height: 190px;
display: block;
background: none; }
#boards .board img, #featured .board img {
max-width: 80%;
height: auto;
display: block;
margin: 0 auto; }
#boards .board strong, #featured .board strong {
font-size: 16px;
font-family: 'Avenir', sans-serif;
font-weight: 500;
color: #FFFFFF;
margin: 0;
padding: 0 5px;
display: block; }
#boards .board span, #featured .board span {
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
margin: 0;
padding: 0 5px;
display: block; }
#boards .board a:hover {
background: #fdfaf0; }
#boards .board strong {
color: #333333; }
.facets {
position: relative;
top: 90px;
padding: 4px 15px 15px 15px;
background: #073642;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-right: 18px; }
.facets h4 {
text-transform: capitalize;
font-size: 16px;
margin: 10px 0 0 0;
color: #ffffff; }
.facets ul, .facets li {
margin: 0;
padding: 0;
list-style: none; }
.facets .facet li {
display: inline-block;
padding: 0px 10px 0px 10px;
margin-top: 2px;
margin-right: 2px;
background: #859900;
color: #FFF;
font-size: 13px;
line-height: 23px;
height: 22px;
cursor: pointer;
text-transform: capitalize; }
.facets .facet li:hover, .facets .facet li.selected {
color: #859900;
background: #FFF; }
.facets .facet:nth-of-type(2) li {
background: #D33682; }
.facets .facet:nth-of-type(2) li:hover, .facets .facet:nth-of-type(2) li.selected {
color: #D33682;
background: #FFF; }
.facets .facet:nth-of-type(1) li {
background: #268BD2; }
.facets .facet:nth-of-type(1) li:hover, .facets .facet:nth-of-type(1) li.selected {
color: #268BD2;
background: #FFF; }
/*
Featured Boards
*/
#featured {
overflow: hidden;
background: #C32672; }
#featured ul {
overflow: hidden; }
#featured .board {
width: 25%; }
#featured .board a {
min-height: 130px;
padding-top: 10px;
padding-bottom: 10px; }
#featured .board a:hover {
background: #D33682; }
#featured .board img {
max-width: 50%; }
/*
Footer
*/
.footer {
clear: both;
padding: 20px 0px;
text-align: center; }
.footer a {
color: #5F8645; }
/*
Left Column
*/
#leftcolumn {
float: left;
width: 500px; }
.boards-page #leftcolumn {
width: 302px; }
#crumbtrail {
background: #073642; }
#crumbtrail p {
color: #fff;
margin: 0;
padding: 5px 15px; }
#crumbtrail a, #crumbtrail a:hover, #crumbtrail a:active {
color: #fff; }
#crumbtrail a.more {
text-align: center;
display: block; }
#crumbtrail a:hover {
text-decoration: underline; }
#interfaces {
background: #6c71c4;
padding: 0px 2px 2px 2px;
display: block;
clear: both;
line-height: 2px; }
#interfaces ul, #interfaces li {
list-style: none;
margin: 0;
padding: 0; }
#interfaces li {
display: inline-block; }
#interfaces li a {
display: inline-block;
padding: 3px 10px 3px 10px;
margin-top: 2px;
margin-right: 2px;
background: #5a5fbd;
color: #FFF;
font-size: 14px;
line-height: 23px;
height: 22px; }
#interfaces li a:hover {
color: #5a5fbd;
background: #e2e3f3; }
#interfaces li.selected a {
background: #484fb5;
color: #FFF;
text-decoration: underline; }
/*
GPIO nav
*/
nav {
position: relative;
width: 292px;
background: #5F8645;
min-height: 653px;
margin-right: 208px;
border-top-right-radius: 46px;
border-bottom-right-radius: 46px; }
.boards-page nav {
margin-right: 0; }
nav:before, nav:after {
content: '';
display: block;
width: 28px;
height: 28px;
background: #FFFFFF;
border-radius: 50%;
border: 14px solid #F7DF84;
right: 19px;
top: 19px;
position: absolute; }
nav:after {
top: auto;
bottom: 19px; }
.phys {
color: #002B36;
font-size: 12px;
opacity: 0.8;
position: absolute;
left: 30px;
text-indent: 0; }
.bottom .phys {
text-align: right;
left: auto;
right: 30px; }
#gpio ul {
position: absolute;
top: 87px;
list-style: none; }
#gpio .top {
left: 246px; }
#gpio .top li {
text-indent: 56px; }
#gpio .top a {
color: #063541; }
#gpio .bottom {
left: 0px; }
#gpio .bottom a {
color: #E9E5D2; }
#gpio a {
display: block;
position: relative;
font-size: 15px;
line-height: 23px;
height: 22px;
margin-bottom: 2px; }
#gpio .top a {
width: 250px;
border-top-left-radius: 13px;
border-bottom-left-radius: 13px; }
#gpio .bottom a {
width: 244px;
border-top-right-radius: 13px;
border-bottom-right-radius: 13px; }
#gpio a:hover,
#gpio .active a {
background: #f5f3ed;
color: #063541; }
#gpio .pin1 a:hover, #gpio .pin1.active a {
border-radius: 0; }
#gpio li a small {
font-size: 11px; }
#gpio .overlay-pin a {
background: #ebe6d3;
color: #063541; }
#gpio .overlay-pin a:hover {
background: #f5f3ed;
color: #063541; }
#gpio .overlay-power .phys {
color: #FFFFFF;
opacity: 1; }
#gpio .overlay-power a {
background: #073642;
color: #FFFFFF; }
#gpio .overlay-ground .phys {
background: #073642;
color: #FFFFFF;
opacity: 1;
position: absolute;
top: 0px;
width: 20px;
height: 22px;
border-radius: 11px;
text-indent: 0px;
line-height: 22px; }
#gpio .overlay-ground a:hover .phys {
background: #268bd2; }
#gpio .bottom .overlay-ground .phys {
padding-right: 32px;
right: 0; }
#gpio .top .overlay-ground .phys {
padding-left: 31px;
left: 0; }
#gpio .overlay-power a:hover {
background: #268bd2; }
#gpio li.overlay-ground span.pin {
background: #073642; }
article .pin-hover {
cursor: help; }
article .pin-hover:hover {
color: #880000; }
article img {
max-width: 100%; }
#gpio ul li.hover-pin a,
#gpio ul.bottom li.hover-pin a {
color: #FFF;
background: rgba(200, 0, 0, 0.6); }
#gpio ul.bottom a {
text-indent: 10px; }
#gpio .pin {
display: block;
border: 1px solid transparent;
border-radius: 50%;
width: 16px;
height: 16px;
background: #002B36;
position: absolute;
right: 2px;
top: 2px; }
#gpio .pin:after {
content: '';
display: block;
border-radius: 100%;
background: #FDF6E3;
position: absolute;
left: 5px;
top: 5px;
width: 6px;
height: 6px;
font-size: 7px; }
#gpio .top .pin {
left: 2px;
top: 2px; }
.bottom .gnd a {
color: rgba(233, 229, 210, 0.5); }
.bottom .gnd a:hover {
color: rgba(6, 53, 65, 0.5); }
.top .gnd a {
color: rgba(6, 53, 65, 0.5); }
#gpio .pin1 .pin {
border-radius: 0; }
#gpio .pow3v3 .pin {
background: #B58900; }
#gpio .pow5v .pin {
background: #DC322F; }
#gpio .gpio .pin {
background: #859900; }
#gpio .i2c .pin {
background: #268BD2; }
#gpio .spi .pin {
background: #D33682; }
#gpio .uart .pin {
background: #6c71c4; }
#pinbase {
width: 58px;
position: absolute;
left: 216px;
height: 493px;
background: #073642;
top: 80px; }
span.alternate {
display: none; }
@media (min-width: 1200px) {
#container {
width: 1200px; }
.board {
right: 1200px; }
#content {
width: 700px; }
.boards-page #content {
width: 898px; } }

1
src/de/settings.yaml
View File

@ -5,6 +5,7 @@ title_suffix: " at Raspberry Pi GPIO Pinout"
base_url: /pinout/
resource_url: /resources/
domain: de.pinout.xyz
analytics_id: UA-69846516-4
url_suffix:
urls:
GND: masse_ground

4
src/en/index.md
View File

@ -1,4 +1,6 @@
###Pinout! The comprehensive GPIO Pinout guide for the Raspberry Pi.
#Pinout!
###The comprehensive GPIO Pinout guide for the Raspberry Pi.
This GPIO Pinout is designed to be both a quick, interactive reference to the Raspberry Pi GPIO pins, plus a comprehensive guide to your Raspberry Pi's GPIO interfaces. It also includes dozens of pinouts for Raspberry Pi add-on boards, HATs and pHATs.

4
src/en/settings.yaml
View File

@ -5,10 +5,13 @@ title_suffix: " at Raspberry Pi GPIO Pinout"
base_url: /pinout/
resource_url: /resources/
domain: pinout.xyz
analytics_id: UA-69846516-1
url_suffix:
urls:
GND: ground
strings:
- home: 'Home'
- boards: 'Boards'
- details: 'Details'
- group_other: 'other'
- form_undefined: 'Undefined'
@ -31,6 +34,7 @@ strings:
- more_information: 'More Information'
- github_repository: 'GitHub Repository'
- buy_now: 'Buy Now'
- browse_addons: 'Browse more HATs, pHATs and add-ons'
featured:
- pijack
- ab-servo-pwm-pi-zero

69
src/en/template/boards.html
View File

@ -1,45 +1,26 @@
<!doctype html>
<html lang="{{langcode}}">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>{{title}}</title>
<meta name="description" content="{{description}}" />
<link href='//fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css' />
<link href='{{resource_url}}prettify/prettify.css' rel='stylesheet' />
<link href="{{resource_url}}pinout.css?v={{v}}" rel="stylesheet">
<link href="{{resource_url}}print.css?v={{v}}" rel="stylesheet" media="print">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{{hreflang}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69846516-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="boards-page">
<div id="container">
<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/"><img src="{{resource_url}}pinout-logo.png" style="top:8px;" /><span>Raspberry Pi</span>n<span class="out">out</span></a></h1>
<div id="leftcolumn">
<nav id="boardsnav">
<div class="facets"></div>
</nav>
<div id="interfaces">
<h2>Interfaces</h2>
<ul>
{{nav_html_interface}}
</ul>
</div>
</div>
<div id="content">
<div id="pages">
<article><h1>Raspberry Pi HATs, pHATs &amp; Add-ons</h1>
<h3>Click on a HAT, pHAT or add-on for more details and to see which pins it uses!</h3>
<div id="interfaces">
<ul>
{{interfaces}}
</ul>
</div>
<div id="crumbtrail">
<p>
<a class="more" href="/">&laquo; Return to the Raspberry Pi GPIO Pinout</a>
</p>
</div>
<div id="boards_header">
<article>
<h1>Raspberry Pi HATs, pHATs &amp; Add-ons</h1>
<p>Click on a HAT, pHAT or add-on for more details and to see which pins it uses!</p>
</article>
</div>
<div id="pages">
<div id="boards"><ul>{{content}}</ul></div>
</div>
<div id="lang">
@ -47,20 +28,4 @@
{{lang_links}}
</ul>
</div>
</div>
<div class="footer" style="clear: both;padding: 20px 0px;text-align:center;">
<p>Spotted an error, want to add your board's pinout? <a href="https://github.com/gadgetoid/Pinout2">Head on over to our GitHub repository</a> and submit an Issue or a Pull Request!</p>
<p>Originally part of <a href="http://pi.gadgetoid.com">pi.gadgetoid.com</a></p>
<p>Tweet us at <a href="https://twitter.com/pipinout"> @PiPinout</a>. Maintained by <a href="https://twitter.com/gadgetoid">@Gadgetoid</a> and <a href="https://twitter.com/roguehal13">@RogueHAL13</a></p>
</ul>
</div>
</div>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/prettify/0.1/prettify.js"></script>
<script src='{{resource_url}}prettify/lang-ruby.js'></script>
<script src='{{resource_url}}prettify/lang-bash.js'></script>
<script src='{{resource_url}}pinout.js?v={{v}}'></script>
<script src='{{resource_url}}boards.js?v={{v}}'></script>
</body>
</html>
</div>

6
src/en/template/footer.html Normal file
View File

@ -0,0 +1,6 @@
<div class="footer">
<p>Spotted an error, want to add your board's pinout? <a href="https://github.com/gadgetoid/Pinout2">Head on over to our GitHub repository</a> and submit an Issue or a Pull Request!</p>
<p>Originally part of <a href="http://pi.gadgetoid.com">pi.gadgetoid.com</a></p>
<p>Tweet us at <a href="https://twitter.com/pipinout"> @PiPinout</a>. Maintained by <a href="https://twitter.com/gadgetoid">@Gadgetoid</a> and <a href="https://twitter.com/roguehal13">@RogueHAL13</a></p>
</ul>
</div>

57
src/en/template/layout.html
View File

@ -1,49 +1,21 @@
<!doctype html>
<html lang="{{langcode}}">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>{{title}}</title>
<meta name="description" content="{{description}}" />
<link href='//fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css' />
<link href='{{resource_url}}prettify/prettify.css' rel='stylesheet' />
<link href="{{resource_url}}pinout.css?v={{v}}" rel="stylesheet">
<link href="{{resource_url}}print.css?v={{v}}" rel="stylesheet" media="print">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{{hreflang}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69846516-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="{{body_class}}">
<div id="container">
<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/"><img src="{{resource_url}}pinout-logo.png" /><span>Raspberry Pi</span>n<span class="out">out</span></a></h1>
<div id="leftcolumn">
<nav id="gpio">
<div id="pinbase"></div>
{{nav}}
</nav>
<div id="interfaces">
<h2>Interfaces</h2>
<ul>
{{nav_html_interface}}
</ul>
</div>
</div>
<div id="content">
<div id="interfaces">
<ul>
{{interfaces}}
</ul>
</div>
{{crumbtrail}}
<div id="featured">
<ul>
{{featured_boards}}
</ul>
<a class="more" href="/boards">See more HATs, pHATs and add-ons</a>
</div>
{{crumbtrail}}
<div id="pages">
{{content}}
</div>
@ -52,19 +24,4 @@
{{lang_links}}
</ul>
</div>
</div>
<div class="footer">
<p>Spotted an error, want to add your board's pinout? <a href="https://github.com/gadgetoid/Pinout2">Head on over to our GitHub repository</a> and submit an Issue or a Pull Request!</p>
<p>Originally part of <a href="http://pi.gadgetoid.com">pi.gadgetoid.com</a></p>
<p>Tweet us at <a href="https://twitter.com/pipinout"> @PiPinout</a>. Maintained by <a href="https://twitter.com/gadgetoid">@Gadgetoid</a> and <a href="https://twitter.com/roguehal13">@RogueHAL13</a></p>
</ul>
</div>
</div>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/prettify/0.1/prettify.js"></script>
<script src='{{resource_url}}prettify/lang-ruby.js'></script>
<script src='{{resource_url}}prettify/lang-bash.js'></script>
<script src='{{resource_url}}pinout.js?v={{v}}'></script>
</body>
</html>
</div>

1
src/es/settings.yaml
View File

@ -5,6 +5,7 @@ title_suffix: " at Raspberry Pi GPIO Pinout"
base_url: /pinout/
resource_url: /resources/
domain: es.pinout.xyz
analytics_id: UA-69846516-5
url_suffix:
urls:
GND: tierra

1
src/fr/settings.yaml
View File

@ -5,6 +5,7 @@ title_suffix: " Raspberry Pi GPIO Pinout"
base_url: /pinout/
resource_url: /resources/
domain: fr.pinout.xyz
analytics_id: UA-69846516-3
url_suffix:
urls:
GND: masse

1
src/it/settings.yaml
View File

@ -5,6 +5,7 @@ title_suffix: " - Assegnazione pin GPIO del Raspberry Pi"
base_url: /pinout/
resource_url: /resources/
domain: it.pinout.xyz
analytics_id: UA-69846516-6
url_suffix:
urls:
GND: massa

1
src/tr/settings.yaml
View File

@ -5,6 +5,7 @@ title_suffix: " - Raspberry Pi Pinleri"
base_url: /pinout/
resource_url: /resources/
domain: tr.pinout.xyz
analytics_id: UA-69846516-2
url_suffix: ''
urls:
GND: toprak