MLAのFrameworkでTCP/IPを試して見るその８
(HTTPサーバーアプリケーションの実装)

〔ＰＩＣの動かせ方入門に戻る〕
〔その１〕〔PING〕〔TELNET〕〔SMTP〕〔XC16編〕〔TCPclient〕〔TCPserver〕

前ページの"その１"では、FrameworkのTCP/IPスタックファイルの話と、tcpipプロジェクト作成方法の
話を書きましたので先ずはそちらからご覧下さい。
又、"その７"ではクライアントから送信されたデータを送り返すだけの単純なTCPサーバーでしたが、
このページではＰＣのブラウザーからの要求により、HTMLのコンテンツをPICが送り出す
HTTPサーバーのアプリケーションデモを実装して実験を行います。

HTMLコンテンツの内容
・PIC側のLEDとボタンの状態表示と可変抵抗の値を表示させます。(定期的に自動更新)
・ブラウザーからLEDのON/OFFを切り替え出来ます。
・ブラウザーから入力された文字列をPIC側のLCDに表示させます。

使用するPICは24EP256MC202(16ビット)です。

《ＭＰＦＳ》

PIC側はウェブサーバーですので、HTMLファイルを持つ仕掛けが必要になります。
MPFS(Microchip File System)は、HTML関連ファイル群を保存する為の簡易なファイルシステムです、
概要等は電子工作実験室のこちら(MPFSとWebページの作成方法)を一読しましょう。

上記サイトは、古いTCP/IPスタックでの記事なのでMPFS変換方法を書いて置きます。
又、MPFSはプログラムのメモリかEEPROM或いは外部のSPIメモリを使用するのかを選択できます、
これは"tcpip_config.h"ファイルに下記の様な記述が有ります。

//#define MPFS_USE_EEPROM             // EEPROMを使う場合はコメントを外す
//#define MPFS_USE_SPI_FLASH          // 外付けSPIメモリを使う場合はコメントを外す
両方コメントの場合は、プログラム領域のメモリが使用されます、今回はこのメモリを使います。

Web Page

これには、ウェブサイトを表示する為に必要な全てのHTML及び関連イメージ、
CSSスタイルシート、及びJavaScriptファイルが含まれます。(Jpeg/cgi等も可能)
これらのコンポーネントを全て含むサンプルアプリケーションは、"webpages"フォルダにあります。

尚、今回の実験用ウェブページは、
"C:\microchip\mla\v2016_11_07\apps\tcpip\wifi_easy_configuration\firmware\src\easy_config_webpages"
の物をベースに作成しています、"forms.htm"は以下のフォルダーの物を使いました。
"C:\microchip\mla\v2016_11_07\apps\tcpip\wifi_demo_app\firmware\src\demo_app_webpages"

ＭＰＦＳ変換方法

ダウンロードしたファイル(HTTPServer_ENC28J60.zip)の中に、ここの実験で使用したサンプルページの
HTMLファイル群が"webpages"のディレクトリ下に収めて有るのでこれでの例となります。

① ”C:\microchip\mla\v2016_11_07\framework\tcpip\utilities\mpfs2\mpfs2.jar”を起動させます。

１．の場所に変換するHTMLファイル群を収めているディレクトリを設定します。
２．の場所で出力するファイルの種類を設定します。
今回は24EP256MC202なので"PIC24 Image"を選びます
"BIN Image"はバイナリイメージなのでEEPROM用だと思われるがぁ．．
３．の場所にファイルの出力先を設定します。
ファイル名は"mpfs_img2"です、今回は"mpfs_img1"にしました。

※ [PIC24 Image]の場合のファイルは"mpfs_img1.s"のアセンブラソースで、
　　[PIC18/PIC32 Image]では"mpfs_img1.c"のC言語ソースとなります。
※ Generateを行うと"mpfs_img1.s"/"http_print.h"/"http_print.idx"が作成されます。
　　"http_print.h"はインクルードする為にパスが通っているフォルダーに置かないとだめなので、
　　今回は"framework"フォルダーを"3."で設定していますからここにGenerateされます。

② [Generate]ボタンをクリックしましょう。

こんな感じに変換情報が表示されます
[OK]ボタンをクリックして終了です。

※ 当然HTMLページを変更したら再Generateし再コンパイルを行う必要が有るのでチョイ面倒ですがぁ

《モジュール構成》

これが今回のHTTPサーバー構成でのモデルです。

アプリケーション層	HTTP2
トランスポート層	TCP
インターネット層	ＩＰ(ICMP)	ARP
	StackTask
物理層	ENC28J60

Ｓｔａｃｋ　Ｔａｓｋ
　着信パケットのチェックを行い、上層のスタックモジュールにルーティングします。
　このタスクが"ENC28J60.c"のドライバーを呼び出す事になります。
　タイムリーな応答を確保するために、この関数を定期的に呼び出さなければなりません。
　なのでぇ、アプリケーションを作成する場合は必要最小限のDelayを使い、ステートマシン的な
　小刻みな処理を施す必要が有ります。

ＡＲＰ
　インターネットの世界ではＩＰアドレスで送受信を行っていますが、インターネットは
　イーサネットプロトコルを利用しているので相手先のMACアドレスを知らないと送る事が出来ません。
　でぇ、このＩＰアドレスからMACアドレスの交換を行ってくれるのがARPです。
　交換の仕方はこちら「アドレス解決とＡＲＰ」を参照下さい。
　通知されたMACアドレスは通常キャッシュに記憶されるのですが、このARPにはキャッシュ無りません

ＩＰ
　TCP/IPのデバイス間でＩＰアドレスによるデータの送受信を行います。
　単純にパケットの交換のみが役割で、データの分割も行う。
　ＩＰプロトコルのフレームフォーマットやヘッダ内容はこちらとこちらを参照しましょう。

ＩＣＭＰ
　ＩＰは通信異常が発生しても報告する機能が無いのでこれを補う為にICMPで通信エラーや
　ネットワークの状況を通知してくれるらしい。
　ICMPには色々な要求メッセージが有る様だが、TCP/IPスタックのICMPは”エコー要求”と
　”エコー応答”のみっぽいです。
　ICMPのフレームフォーマットは「ICMPとPINGコマンド」を参照しましょう、
　ICMPヘッダについてはこちらも参照しましょう。

　※ ＩＣＭＰの実験は、"その２(PING)"の実験１を参照下さい。

ＴＣＰ
　通信異常や送信完了等の確認を行わない比較的単純な通信を行うＵＤＰに対して
　ＴＣＰは1対1の通信を確立し、送信確認やパケット順のチェックに欠損パケットの再送といった
　事を行うので信頼性の必要な通信で使用されます。
　ＴＣＰヘッダについてはこちらも参照しましょう。

ＨＴＴＰ２
　Webサーバーモジュールです。
　標準のWebブラウザを使用して状態情報を表示し、アプリケーションを制御する簡単な方法が
　出来る様になります、これを実現するには3つの主要なコンポーネントが必要です。
　Webページ、MPFS2ユーティリティ、及びソースファイルcustom_http_app.cとhttp_print.hが
　含まれます。

《ファイル構成》

"tcpip_config.h"の変更

#define STACK_USE_ICMP_SERVER   　       // ICMP(PING)はサーバー(Ping query応答)機能を実装する
#define STACK_USE_HTTP2_SERVER           // POST、Cookie、認証などを含む新しいHTTPサーバーの実装

上記の２モジュールのみ実装しましょう。
"STACK_USE_ICMP_SERVER"のみなのでPING応答のみ可能です。

追加されるファイル構成

mpfs2.c	Microchip File System (MPFS) File Access API(AN833) 内部プログラムメモリまたは外部シリアルEEPROMメモリからWebページやその他のファイルにアクセスするための単独APIを提供
mpfs_img1.s	このファイルは、MPFS GeneratorUtilityによって自動的に生成されます。プログラムメモリに格納されるMPFS2イメージ(HTMLファイル群で構成)を定義します。 Webページを外部の不揮発性ストレージ又は内蔵フラッシュプログラムメモリに効率的に保存できる形式にパッケージ化した物です。
http_print.h	このファイルは、MPFS GeneratorUtilityによって自動的に生成されます。ユーザーのカスタムHTTPアプリケーションのコールバックヘッダーと解決方法を提供します。クライアントから要求されたページを送信する際に、HTML内に[~xxxx~]の文字列が有れば、"HTTPPrint_xxxx()"の関数呼び出しが作成されますので、 "custom_http_app.c"内に"HTTPPrint_xxxx()"コールバック関数を作成し文字列をHTML内に埋め込む事により動的なページが作成できます。
custom_http_app.c	Microchip TCP /IPスタックでのHTTP2モジュールのサポート(RFC 1002) 各HTMLコンテンツに対応した、アプリケーションを実装するこのファイルはmicrochipのデモボード用だったのでMyサイトの実験用に改編し、無線LAN機能を取り外した物となります。
HTTP2.c	マイクロチップTCP / IPスタック用Webサーバーモジュール(RFC 2616) HyperText Transfer Protocol (HTTP) Server Microsoft Internet Explorer、MozillaFirefoxなどのWebブラウザに動的ページを提供します。
tcp.c	TCPプロトコルのモジュールファイル(RFC 793) Transmission Control Protocol 信頼性の高い、フロー制御によるアプリケーションストリーム指向データのハンドシェイク転送を提供します。

※ ”その２”の最小ファイル構成に上記ファイルを加えたものになります。

※ この構成でコンパイルすると、使用メモリは「Program=19464word Data=700byte」です。

《実験回路》

ENC28J60モジュールのピン構成

	VCC	電源3.3V　パケット転送中動作電流180mA 十分に流せる電源を準備しましょう。
	GND	グランド
	RESET	LOWでリセットなので通常はHIGH
	CS	SPIのチップセレクト入力ピン
	SCK	SPIのクロック入力ピン
	SI	SPIのデータ入力ピン
	SO	SPIのデータ出力ピン
	WOL	ウェイクアップ用割り込み出力新チップはNCになっている。
	INT	割り込み出力ピン
	CLKOUT	クロック出力ピン

※ 灰色背景色のピンは今回利用しません。

LCD表示器についての配線等の詳細はこちらのページを参照下さい。
又、半固定抵抗は10kΩか20kΩ辺りで良いでしょう。

ENC28J60のRESETピンについて
RESETピンはPICのRC1ピンに接続されていますが、これは"ENC28J60,c"の初期化関数(MACInit)でHIGHを出力しているだけなので、直接VDDに配線すればPICピンが1本利用可となります。
その際は、"system_config.h"の"#define ENC_RST_IO"をコメントにします。

回路電源について
ENC28J60モジュールが3.3Vなので回路電源は3.3Vで統一していますが、
ENC28J60自体の消費電流がパケット転送中で最大180mA、転送していない時で120mAと
結構電気食いで変動も激しいです。十分に流せる安定化された電源を準備しましょう。

《ダウンロードファイルについて》

↓ここからプログラムソースをダウンロードして下さい。
HTTPServer_ENC28J60.zip

プロジェクトの構成

ファイルの説明とプロジェクトの作成方法は”その１”を参照下さい。
又、"mpfs_img1.s"/"http_print.h"のファイルも確実にプロジェクトに
取り込みましょう。

左の様な感じになります。

MPLAB X IDE v3.60 とMPLAB(R)XC16 C Compiler Version 1.30
コンパイラを使用しています。

※ ダウンロードファイルに含まれる"skI2Clib.c/skI2Clib.h"ファイルは
　　１６ビットＭＣＵ専用となっています、このファイルについては
　　こちらのページを参照下さい。

※ "webpages"フォルダは、ここの実験で使用したサンプルページの
　　HTMLファイル群が収めれれています。

《実験》

このサンプルでは、PCのブラウザーからウェブページを要求する事により表示させる事が出来ます。
ウェブページではＰＩＣ側のボタンやＬＥＤ状態の表示にアナログ値の表示と入力文字列をＬＣＤに表示します。
ＰＩＣの収集したデータの表示や設定等のサンプル(雛型)として利用出来るでしょう。

① "tcpip_config.h"のMACアドレス・ＩＰアドレス・サブネットマスクは”その１”を見て自分ちの
　　ネット環境に合わせて設定は完了していますね。

② プログラムをコンパイルしＰＩＣに書き込みましょう。
　　tcp_client.c: In function 'main':
　　tcp_client.c:101:6: warning: 'TICK' is deprecated
　　とワーニングが出るかもですがぁ、気にしなくても良いでしょう、たぶん。
　　(HTMLページを変更した場合は、MPFSで変換を行い、再コンパイルしますよ)

③ ENC28J60をネットワークに接続し、回路電源を入れましょう。
　　(私はYAHOO!プロバイダーのトリオモデムのAPに繋いでの実験です)

④ LCDの1行目に[HTTP Server Test]が表示されます。

⑤ でぇ、３秒後に処理開始です、ＬＥＤ１(赤)が１秒毎に点滅します。
　　LCDの２行目に"tcpip_config.h"で設定したＩＰアドレスが表示されます。
　　[ My IP Address ]
　　[192.168.3.105 ]
　　この後はクライアントからの接続待ちを行っている事でしょう。

⑥ PCのブラウザーに"http://192.168.3.105/index.htm"と入力しましょう。
　　(ブラウザーは、"Microsoft Edge/IE11"での検証です)

こんな感じで表示されます。
右上でPIC側の情報を約500ms毎に更新しています。

　ＬＥＤｓ：
　　右○がLED0_IO(橙)、左がLED1_IO(赤)の状態(ONは●でOFFは〇)を表示しています、
　　でぇLED1は１秒毎に点灯させているので点滅を行っている事でしょう。
　　又、○の部分をクリックすればそれに該当するLEDのON/OFFを行う事が出来ます。

　Ｂｕｔｔｏｎｓ：
　　BUTTON0_IOのスイッチ状態を表しています、スイッチはプルアップ接続ですね、
　　"∧"印がSW-UPで押してない状態(1)で、"∨"印がSW-DOWNでスイッチを押した状態(0)です。
　　スイッチを押せば変化するでしょう。

　Ｐｏｔｅｎｔｉｏｍｅｔｅｒ：
　　可変抵抗の値(アナログ値)を表示させています、ツマミを回せば変化するでしょう。

　メニュー：
　　[Overview] 現在のページです(上のHTMLページ)
　　[Form Processing] ”POST”の発行を行うサンプルのフォーム処理ページ(下のHTMLページ)

⑦ メニューの[Form Processing] をクリックしましょう。

こんな感じで表示されます。

LEDのON/OFF操作が出来ます。("GET"発行処理)
プルダウン操作でONかOFFを選択し[Send]ボタンをクリックします。
(表示更新は行われません)

ＬＣＤの操作フォーム

ここに入力した文字がI2CLCDに表示されます。("POST"発行処理)
文字を入力(最大32文字)し[Send]ボタンをクリックします。

《その他》

ふう、o'ω')o□~　やっとここまで出来たぞぉ、長かったなぁ（￣ -￣）
今回の実験でブラウザーを通じてPICとコミュニケーションが出来る様になったと思う、
後はぁ、HTTPS(SSL)とぉ、無線LAN辺りかぁ．．．．んん．．．
こちらのさくらの通信モジュール(LTE)をいじってみたい．．．値段が高いなぁ．．．

MLAのFrameworkでTCP/IPを試して見るその８ (HTTPサーバーアプリケーションの実装)