Drive.google.com/drive/folders/1ahbeoEHkjxoo4NV1wReOmpoRWbl448z-
1.Tornadoプロフィール
トルネードは、非ブロッキングのサーバーだけでなく、非常に高速であり、比較的単純なノン・ブロッキングのWebサーバーを使用して、Pythonで書かれました。その非ブロックモードとのepollの使用の濃縮、トルネードは、毎秒数千の接続を処理することができますので、トルネードは、リアルタイムWebサービスのための理想的なフレームワークです。
公式サイト：のhttp：//www.tornadoweb.cn
公式書類ます。http：//www.tornadoweb.cn/documentation
Webページ上の文書全体、一般的に使用される機能は再びそれについてあるhttpサーバは、基礎をプログラムした場合、あなたはすぐに使い始めることができるはずです。
2.Tornadoインストール
モード1：インストールPIP：
sudoのPIPトルネードをインストール
実施例2：ソース・インストール：
https://pypi.python.org/packages/source/t/tornado/tornado-4.3.tar.gz wgetの
トルネードxvzfタール-4.3.tar.gzを
CD-トルネード4.3
Pythonのsetup.pyビルドの
sudoのPythonはsetup.py installを
第二に、基本的な原理
竜巻の公式は、Hello Worldの例を借ります：
輸入tornado.ioloop
輸入tornado.webの
クラスMainHandler（tornado.web.RequestHandler）：
デフを取得（自己）：
self.write（ "こんにちは、世界"）
アプリケーション= tornado.web.Application（[
（R "/"、MainHandler ）、
]）
であれば__name__ == "__main__"：
application.listen（8888）
tornado.ioloop.IOLoop.instance（））（開始。
一般的な考え方は次のとおりです。httpトルネードによってポートオープンリスニング、要求はルーティングルールを満たしたとき、プリセットルーティングルールです、ほとんどのWebサーバアプローチで処理するために対応するハンドラを呼び出します。取得し、ポストの要求をサポートしています。
それを拡張し、トルネードはhttpサーバをセットアップし使用し、Webページの一番上に置く、Webクライアントの着信GPIOピンの数や状態を制御する必要がある、サーバーが着信パラメータを受け取り、適切な治療を行い、制御GPIOピンのレベルを達成することができます出力。
第三に、実装手順
1.フロントエンドhtmlページ
<！DOCTYPE HTML>
<HTML LANG = "ZH-CN">
<HEAD>
<メタのcharset = "UTF-8">
<META HTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1">
<タイトル>树莓派のWeb控制中心</ TITLE>
<スクリプトSRC = "静的/ JS / jqueryの-3.2.1。 min.js "タイプ= "テキスト/ javascriptの"> </ SCRIPT>
<スクリプトSRC = "静的/ JS / bootstrap.min.js"タイプ= "テキスト/ javascriptの"> </ SCRIPT>
<リンクのhref =" /静的CSS / bootstrap.css "のrel = "スタイルシート"タイプ= "テキスト/ cssの"/>
<リンクのhref ="静的/ CSS /フォント-素晴らしい-4.7。0 / CSS /フォントawesome.min.css」REL = "スタイルシート"
タイプ= "テキスト/ CSS" />
<スタイルタイプ= "テキスト/ cssの">
.PAGEヘッダー{マージン：20ピクセル0。border-bottom：1pxの固体#eee。パディングボトム：0; テキスト整列：センター; }
.btn項目{テキスト整列：センター。}
I {マージン右：3px。表示：インラインブロック。}
H1 {テキスト整列：センター。}
.tip {フォント重量：太字。色：ブラック。}
.lead {フォントサイズ：小さいです。}
.gpio項目{テキスト整列：センター。}
.btn-GND、.btn-GPIO {パディング：10pxの5pxの。マージン下：5pxの; 幅：100％; フォントサイズ：小; }
.gpio .row {マージントップ：5pxの。}
</スタイル>
</ head>
<body>
<DIV CLASS = "コンテナ">
<DIV CLASS = "ページヘッダ">
<H3>
树莓派ウェブ控制中心</ H3>
<Pクラス= "つながる">
用于控制连接到树莓派的各种传感器
</ P>
</ div>
<divのクラス= "パネルパネル-デフォルト">
<DIV CLASS = "パネルの見出し">
设备</ DIV>
<DIV CLASS = "パネル体">
<DIV CLASS = "行">
<DIV CLASS = "COL-XS-3 BTN項目">
</ div>
<DIV CLASS = "COL-XS- 3 BTN項目">
<a class="btn btn-danger btn-trigger"> <Iクラス= "FA-FA電源OFF"> </ I>关机</a>の
</ div>
<DIV CLASS = "COL-XS-3 BTN項目">
<a class="btn btn-primary btn-trigger"> <I CLASS =" FA FA-リフレッシュ"> </ I>重启する</a>
</ DIV>
<DIV CLASS = "COL-XS-3 BTN項目">
</ div>
<スクリプトタイプ= "テキスト/ javascriptの">
のvar URL = "/";
$（関数（）{
$（ "BTN-トリガー"）。クリックしてください（関数（）{
VARのテキスト= $（この）の.text（）。、（/ /グラムを置き換える""）.replace（/ \ N / G、 ""）.replace（/ \ R / G、 ""）.replace（/ \ T / gであり、 ""）;
VAR CMD = "";
スイッチ（テキスト）{
ケース"关机"：
破る;
ケース"重启"：
CMD ="
}
IF（ "？あなたは必ず、コマンドを実行したい"（確認して））{
$アヤックス（{
タイプの"POST"、
URL：URL、
データ：{
アクション：「RUN-シェル-CMD "
CMD：CMD
}、
成功：機能（結果）{
// $（"。。チップ」）HTML（結果）。
}
}）。
}
}）。
}）;
</スクリプト>
</ div>
</ div>
</ div>
<divのクラス= "パネルパネル-デフォルト">
<DIV CLASS = "パネルの見出し">
GPIO（蓝色- >低电平、红色- >高电平）</ DIV>
<DIV CLASS = "パネル本体GPIO">
<DIV CLASS = "行">
<DIV CLASS = "COL-XS-6 GPIO項目">
左侧
</ DIV>
<DIVクラス= "COL-XS-6 GPIO項目">
右侧
</ div>
<ボタンが無効= "無効"クラス= "GND BTN-BTN-INFO BTN">
GND（9）左05 </ボタン>
</ div>
<DIV CLASS = "COL-XS-6 GPIO項目">
<ボタン無効= "無効"クラスは= "GND BTN-BTN BTN-INFO">
GND（6）右03 </ボタン>
</ div>
</ div>
<DIV CLASS = "行">
<DIV CLASS = "col- XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="17"> 17（11）左06 </a>の
</ div>
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="18"> 18（12）右06 </a>の
</ div>
</ div>
<DIV CLASS = "行">
<DIV CLASS =」 COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="27"> 27（13）左07 </a>の
</ div>
<DIV CLASS =" col- XS-6 GPIO-アイテム">
<ボタンを無効化="無効」クラス= "BTN BTN-情報BTN-GND">
GND（14）右07 </ボタン>
</ div>
</ DIV>
<DIV CLASS = "行">
<DIVクラス= "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="22"> 22（15）左08 </a>の
</ div>クラス= "BTN BTNプライマリBTN-GPIO"端子= "22"> 22（15）左08 </a>の
</ div>
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="23"> 23（16）右08 </a>の
</ div>
</ DIV>
<DIV CLASS = "行">
<DIV CLASS = "COL-XS-6 GPIO項目">
無効<ボタン= "無効"クラス= "GND BTN-BTN BTN-INFO">
GND（25）左13 </ボタン>
</ div>
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="24">24（18）右09 </a>の
</ div>
<DIV CLASS = "行">
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="5"> 05（29）左15 </a>の
</ DIV>
<DIV CLASS = "COL-XS-6 GPIO項目">
= "無効"クラス= "GND BTN-BTN BTN-INFO">無効<ボタン
GND（20）右10 </ボタン>
</ div>
</ DIV>
<DIV CLASS = "行">
<DIV CLASS = "COL-XS-6 GPIO項目">
<クラス=」BTNプライマリBTN-GPIO BTN」端子= "6"> 06（31）左16 </a>の
</ div>
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="25"> 25（22）右11 </a>の
</ div>
</ div>
<DIV CLASS = "行">
<DIV CLASS =」 COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="13"> 13（33）左17 </a>の
</ div>
<DIV CLASS =" col- XS-6 GPIO項目">
<ボタンを無効に="無効」クラス= "BTN BTN-INFO-BTN GND">
GND（30）右15 </ボタン>
</ div>
</ DIV>
<DIV CLASS = "行">
<DIVクラス= "COL-XS-6 GPIO項目">
<クラス= "BTN BTNプライマリBTN-GPIO"端子= "19"> 19（35）左18 </a>の
</ div>
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="12"> 12（32）右16 </a>の
</ div>
</ DIV>
<DIV CLASS = "行">
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="26"> 26（37）左19 </a>の
</ div>
<DIV CLASS = "COL-XS-6 GPIO項目">
<ボタンを無効に= "無効"クラスは= "BTN-GND BTN BTN-INFO">
GND（34）右17 </ボタン>
</ div>
</ div>
<DIV CLASS = "行">
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="20"> 20（37）右19 </a>の
</ DIV>
<DIVクラス= "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="16"> 16（36）右18 </a>の
</ div>
</ div>
<DIV CLASS = "行">
<DIV CLASS = "COL-XS-6 GPIO項目">
<ボタンは無効になって= "無効"クラス= "BTN BTN-INFO GND BTN-">
GNDを（39）右20 </ボタン>
</ div>
<DIV CLASS = "COL-XS-6 GPIO項目">
<a class="btn btn-primary btn-gpio" pin="21"> 21（40）右20 </a>の
</ div>
</ div>
<スクリプトタイプ= "テキスト/ javascriptの">
$（関数（）{
$（ "BTN-GPIO。 "）をクリックします（関数（）{。
VAR GPIO = $（この）.ATTR（"ピン"）;
場合（$（この）.hasClass（" BTN-危険"）） {
$（この）.removeClass（ "BTN-危険"）addClass（ "BTN-プライマリ"）;
}他{
$（この）.removeClass（ "BTN原色"）addClass（」。BTN-危険"）;
}
VARステータス= $（この）.hasClass（ "BTN-危険"）？1：0。
$アヤックス（{
タイプ： "POST"、
URL：URL、
データ：{
アクション： "セットGPIOピン"、
ピン：GPIO、
ステータス：ステータス
}、
成功：関数（結果）{
//$(".tip").html （結果）;
}
}）。
}）;
}）
</スクリプト>
</ div>
</ div>
</ div>
</ BODY>
</ HTML>
2.Pythonスクリプト
#coding：UTF8の
インポートsysが
GPIOのようRPi.GPIOをインポートする
インポート時間
インポートOS
インポートtornado.ioloopの
インポートtornado.webの
tornado.httpserverインポート
インポートtornado.options
tornado.optionsからは、定義オプションインポート
＃初始化
デフのinit（）：
GPIO.setwarnings （偽）
GPIO.setmode（GPIO.BCM）
＃设置GPIO针脚电平输出
デフSetPinStatus（ピン、ステータス）：
GPIO.cleanup（int型（ピン））
GPIO.setup（INT（ピン）、GPIO.OUT）
の場合（ INT（ステータス）== 0）：
GPIO.output（int型（ピン）、GPIO.LOW）
他：
GPIO.output（int型（ピン）、GPIO.HIGH）
＃1路由の处理の
クラスIndexHandler（tornado.web.RequestHandler）：
DEF（自己）GET：
self.render（ "index.htmlの"）
DEF POST（自己）：
のinit（）
アクション= self.get_argument（ 'アクション'）
＃設定GPIOピンレベル出力
の場合（アクション==「セット- PIN-GPIO "）：
PIN = self.get_argument（ 'PIN'）
ステータス= self.get_argument（ 'ステータス'）
SetPinStatus（PIN、ステータス）
self.write（"真「）の
ような＃シェルスクリプト、：シャットダウン、再起動
elif（==アクション"RUN-シェル-CMD"）：
CMD = self.get_argument（ 'CMD'）
os.system（CMD）
__name__ == '__main__' IF：
＃コンソール出力応答結果、正式な環境が開かないことが
＃1 tornado.options。parse_command_line（）
設定= {
"static_path"：os.path.join（OS。path.dirname（__ファイル__）、 "静的"）
}
アプリ= tornado.web.Application（
ハンドラー= [
（R "/"、IndexHandler）、
（R "（アップルタッチ-icon \ .PNG）」、tornado.web.StaticFileHandler、辞書（パス=設定[ 'static_path']））
]、**設定）
HTTP_Serverの= tornado.httpserver.HTTPServer（APP）
http_server.listen（8020）
竜巻。 ioloop.IOLoop.instance（）。（スタート）
GPIO.cleanupを（）
3.ディレクトリ構造
4.展開のデバッグ
ターミナルに入力します：python /var/www/html/pi/gpio/gpio.py（ファイルパスに私のパスのラズベリーパイ、独自の環境への実際のパスが優先。）
します。http：// localhost：端末がエラーではない場合は、ブラウザを開いて、その後、アドレス入力ページへのアクセスに8020を、リスニングポート8020でのPythonスクリプトで、あなた自身を設定することができます。
5.ファイル名を指定して実行結果
6.ソースコードをダウンロードしてください
http://download.csdn.net/download/a497785609/9990088