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

〔PICの動かせ方入門に戻る〕
〔その1〕 〔PING〕 〔TELNET〕 〔SMTP〕 〔XC16編〕 〔TCPclient〕 〔TCPserver〕


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

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

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

《MPFS》

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"

MPFS変換方法

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

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

MPFSの起動画面
1.の場所に変換するHTMLファイル群を収めているディレクトリを設定します。
2.の場所で出力するファイルの種類を設定します。
今回は24EP256MC202なので"PIC24 Image"を選びます
"BIN Image"はバイナリイメージなのでEEPROM用だと思われるがぁ..
3.の場所にファイルの出力先を設定します。
ファイル名は"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されます。

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

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

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

《モジュール構成》


これが今回のHTTPサーバー構成でのモデルです。
ア プリケーション層
HTTP2
ト ランスポー ト層 
TCP
インターネット 層
IP (ICMP)
ARP
Stack Task
物理層
     ENC28J60

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

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

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

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

 ※ ICMPの実験は、"その2(PING)"の実験1を参照下さい。

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

HTTP2

 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サーバーの実装
上記の2モジュールのみ実装しましょう。
"STACK_USE_ICMP_SERVER"のみなのでPING応答のみ可能です。

追加されるファイル構成

mpfs2.c
Microchip File System (MPFS) File Access API(AN833)
内部プログラムメモリまたは外部シリアルEEPROMメモリからWebページやその他のファイルにアクセスするための単独APIを提供
mpfs_img1.s
このファイルは、MPFS Generator Utilityによって自動的に生成されます。
プ ログラムメモリに格納されるMPFS2イメージ(HTMLファイル群で構成)を定義します。
Webページを外部の不揮発性ストレージ又は内蔵フラッシュプログラムメモリに効率的に保存できる形式にパッケージ化した物です。
http_print.h
このファイルは、MPFS Generator Utilityによって自動的に生成されます。
ユー ザーのカスタム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、Mozilla FirefoxなどのWebブラウザに動的ページを提供します。
tcp.c
TCPプ ロトコルのモジュールファイル(RFC 793)
Transmission Control Protocol
信頼性の高い、フ ロー制御によるアプリケーションストリーム指向データのハンドシェイク転送を 提供します。

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

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

《実験回路》

ENC28J60モジュールの ピン構成
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

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

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

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

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

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








《実験》

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

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

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

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

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

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

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

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

 LEDs:

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

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

 Potentiometer:
  可変抵抗の値(アナログ値)を表示させています、ツマミを回せば変化するでしょう。

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

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

forms.htmの画面
こんな感じで表示されます。

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



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


《その他》

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



【きむ茶工房ガ レージハウス】
Copyright (C) 2006-2017 Shigehiro Kimura All Rights Reserved.