M5Stackで日本語表示（2）

M5Stackでの日本語表示の続きです。
前回とは別の自作ライブラリをM5Stack対応の修正を行いました。

利用ライブラリ
 ・Arduino-KanjiFont-Library-SD
    Arduino用のマルチサイズ漢字フォントを利用するためのライブラリ(SDカード版）
    https://github.com/Tamakichi/Arduino-KanjiFont-Library-SD

ライブラリを使って、「吾輩は猫である」の文書を表示してみました。

     

動いている様子
    

8ドットから24ドットのフォントサイズを変えて繰り返し表示しています。

動画を見れば分かると思いますが、表示はあまり速くないです。
逐次、SDカードから読んでいるためかと思われます。
まあ、とりあえずは良しとします。

スケッチ

表示の高速化のため、M5Stackで利用されている液晶パネルILI9341のWindows機能を利用してフォントの表示を行っています。
drawPixel()を使うよりもコマンド送信数が少なくて済むので多少は速くなると思います。
ただし、SDカードアクセスが遅いためあまり効果としては現れませんね。

ちょっとハマった..

今回はテキストをスクロールさせるつもりでscrollUp()関数を作成したのですが、
期待通りに動きませんでした。
プログラム的には、指定座標のピクセル色を読んで、１文字分上に表示でスクロールさせようとしたのですが..

「何故だろう..？」と調べると、
なんとMISO（LCDからデータを読む）が使われていません。


（回路図は公式サイトより入手し引用）

これでは、物理的にデータの取得は出来ないですね。
ですので用意されている readPixel()、 readRect() は正常に動きません。
ためしてみると、ピクセルの色は常に 65535の値が返されます。

もう一点、ウィンドウ設定でsetAddrWindow()を使っているのですが、
setWindow()だと正しく表示出来ませんでした。
setAddrWindow()は、内部的にsetWindow()を読んでいるのですが、
SPIの設定を行ってからsetWindow()が呼び出されています。
SPIがSDカードのアクセスと共用のため、SPIの設定が必要だったのだと思われます。

とりあえずは、ウィンドウ設定の関数が用意されているのが分かったのは収穫でした。

追記
  MOSIを双方向にてデータを読む方法があるようです。

  関連情報
   ・M5Stackで画面キャプチャーを取得する
      https://qiita.com/fukuebiz/items/8aff6cad2f6048f02f12

   ・Bodmer/TFT_eSPI
      Arduino and PlatformIO IDE compatible TFT library optimised for the STM32,
      ESP8266 and ESP32 that supports different driver chips
      https://github.com/Bodmer/TFT_eSPI

  M5Stackのライブラリ=v0.2.9)のTFT_eSPIが古いため、現時点で readPixel()、 readRect() が使えないようです。
  まあ、いずれ、TFT_eSPIの最新版を取り込んで利用可能になると思います。

M5StackでMML単音演奏

以前 Arduino用に作成したMML文演奏ライブラリをM5Stackにて利用してみました。
M5Stackにて、単音演奏をやってみました。
数日前にやった、「M5Stackのビープ音、Tone音の爆音対策」を適用して音量が出来るようにもしました。



■ ライブラリ
   MML文演奏ライブラリ  MML_Play
   https://github.com/Tamakichi/MML_Play

   ライブラリ本体は、ESP32ではコンパイルエラーが発生したため修正＆更新しました。
   ついでに、M5Stack用のサンプルスケッチ（本記事のスケッチ）を追加しました。

動いている様子
  

スケッチ（ライブラリに添付）

演奏操作は、
  ボタンAで演奏開始（または先頭から演奏しなおし）、
  ボタンBで演奏中断、
  ボタンCで中断した演奏を途中から再開
です。

音量は最低にしているため、小さめです。
音量を上げるには、MML文先頭のv1の値を1～9(爆音)の範囲で調整して下さい。

ノイズ等もなくとりあえずは、まともに演奏出来ているようです。
効果音的な何かには使えると思います。

M5Stackのビープ音、Tone音の爆音対策

M5Stackはスピーカーが搭載されており、
標準のAPIを使ってビープ音やTone音（周波数を指定して鳴らす）を簡単に鳴らすことが出来ます。
ただし、「爆音」です。
これには、ちょっと困りました。鳴らすとやかましいです。

ググってみると、多くの利用者が同様に困っているようです。
何とかならないかなぁ、と思い試行錯誤してみました。
結論としては、とりあえず、何とかなりました。



とりあえず、単音440Hz（ラ）の音を音量指定して鳴らしてみました。

サンプルスケッチ
音量指定できる新しいtone関数、toneEx()を作成しました。
音の大きさの制御は、デューティ比を操作で制御しています。

toneEx()の３番目の引数、volに0(無音)、1(最小) ～ 9(最大)の指定にて音量を指定することが出来ます。
サンプルスケッチでは、M5Stackの左ボタンで最小音、真ん中ボタンで3、左ボタンで５を指定して音を鳴らすことが出来ます。

耳で聞いた感じでは、いい感じで音量制御出来ています。
最小の１でも十分聞こえ、ちょうど良いかもしれません。

次の段階として、Arduino用に作成したMML演奏ライブラリを試してみます。

M5stackで日本語表示

Arduino Uno用に作成したフォントライブラリをM5Stackで試してみました。

ライブラリ
  ・Arduino用 美咲フォントライブラリ 教育漢字・内部フラッシュメモリ乗せ版
    https://github.com/Tamakichi/Arduino-misakiUTF16

とりあえず、LCDにライブラリ無修正で利用出来ました。

ノーマルのサイズでは、文字が小さすぎて読めません。

3倍角にして表示してみました。


まあ、8ドットフォントなのでこんなもんでしょう。

動いている様子


コントラストの関係で動画が綺麗に取れないため、背景色を青に変更しました。
8ドットフォントを1～4倍にして繰り返し表示しています。

スケッチ

スケッチは、OLED(SSD1306)で美咲フォントを使った漢字表示 のものを修正して作成しました。

フォント表示については、他の自作ライブラリの動作も検証したいと思います。

M5Stack始めました

M5Stackを購入しました。これからESP32関連もやっていきたいと思います。

「Z80-CP/M 2.2 emulator running on ESP8266」でのファイル転送

「Z80-CP/M 2.2 emulator running on ESP8266を試してみました」の続きです。



パソコンと cpm8266(Z80-CP/M 2.2 emulator running on ESP8266)間で
ファイルのやり取りの方法の質問があり、私も知りたいと思っていたので、
ちょっと調べてみました。

その際の調査のメモです。

方法としては、XMODEMプロトコルを使う方法があります。
XMODEMは昔、電話回線（モデム利用）でパソコン通信をやっていた頃に
ファイル転送手段として使っていました。

cpm8266では、CP/Mの標準コマンドXMODEMコマンドが正常動作しないようで、
cpm8266の開発者さんが別途、専用コマンドを用意しています。
下記のリンク先に、コマンドの使い方が解説されています。

関連情報
  ・ Xmodem for CP/M Z80 for CON:
     https://github.com/SmallRoomLabs/xmodem80

Windows 10上で試してみる

・TeraTermでは転送出来ず
   XMODEMに対応しているTeraTermで試してみたのですが、
   XSにコマンドによる、Winfows => cpm8266   は出来たのですが、
   XRにコマンドによる、cpm8266 => Winfows    は出来ませんでした。

   下記のサイトのページの一番下にTeraTermで転送出来ている記載があるので
   私の環境に問題がある可能性もあります。

   関連情報
   ・ Homecomputer DDR - cpm8226

     https://hc-ddr.hucki.net/wiki/doku.php/cpm/cpm8266

・Windows 10上で動くUbuntu環境(WSL)のminicom コマンドで転送成功
   環境がちょっとややこしいですが、

   「Windows 10上にWSLを使ってUbuntuをインストールする」で構築したUbuntu環境に
   minicom コマンドをインストールして使ったところ、転送出来ました。

   minicomのインストール
    %sudo apt install minicom

   XMODEM関連コマンドのインストール
    %sudo apt install lrzsz

   minicomの使い方、XMODEMの使い方については、下記の情報を参考にしました。

   参考にしたサイト
   ・ シリアル端末ソフト/minicom
   ・職業としてのプログラミング Linuxでシリアル通信 - Ubuntu+minicom

   日本語環境の場合、セットアップメニューが崩れるので
   LANGを変更して起動した方が良いです。

   minicomのセットアップ
   % sudo LANG=c minicom -s

   -sオプションを付けて起動すると、初期画面にメニューが表示されます。
   管理者権限で起動しないと、シリアルポートのアクセスに失敗します。

   

   [Serial prot setup] を選択してシリアルポートの設定を行います。
   WSL環境では、シリアルポートは、
     COMn => /dev/ttySn
   の対応となります。

   

   [Save setup as dfl]で 設定の保存
   

   [Exit from Minicom]にて一旦、終了します。


minicomでcpm8266を利用する

   % sudo LANG=c minicom

   日本語環境でも動作しますが、メニューボックス内の表示が崩れるため
   英語モードでの利用を推奨します。
   また、日本語環境では画面下のステータスバーが表示出来ないようです。

   起動後、ENTERキーをたたくと、起動メッセージが表示されます。

   
   minicom を終了する場合は、CTRL-A入力後、Xキーを押します。


   XMODEMによるファイル転送
   
   1)Windows 10(Ubuntu) => cpm8266
    ①cpm8266側でXRコマンドを実行する
     a>A:XR F:test.txt
   

    ②minicomによるファイル転送
     とりあえず、今月のカレンダーを送ってみます。
     ubuntu端末をもう一つ起動し、ユーザーホームディレクトリに
       % cal > test.txt
     と実行し、ファイルを作成しました。
   
    minicomにて、CTRL-X入力後、Sキーを押します。
    カーソルキーでxmodemを選択し、ENTERキーを押します。

   
 
    ファイル選択状態となります。
    カーソルキー[↑][↓]でファイルを選択、スペースキーで確定、
    カーソル[←][→]で下のメニューのコマンドの選択、ENTERキーで実行します。
    [OKay]選択&ENTERキーで転送開始です。

   

   転送状況が表示され、完了したら何かキーを押します。

   

  ③転送されたファイルの確認
   転送されたファイルを確認すると、ちゃんと転送出来ていました。
   中身を表示すると改行コードがlinuxと異なるため、ちゃんと表示出来ませんが、
   転送自体は上手くいっています。

   

   2)cpm8266 => Windows 10(Ubuntu) 
    試しに、GドライブにあるBIO.BASを転送してみます。

   ①cpm8266側でXSコマンドを実行する
     a>A:XS g:bio.bas

   

   これで、cpm8266側は送信待機状態となります。

   ②minicom側での受信
    minicomにて、CTRL-X入力後、Rキーを押します。
    カーソルでxmodemを選択し、ENTERキーを押します。

   

    ファイル名を入力し、ENTERキーを押します。
    これで転送が始まります。

   

    転送中は、その状況が表示されます。
    完了したら、何かキーを押します。

   

    転送が正常の場合は、次のメッセージが表示されます。

   

   ③転送されたファイルの確認
    別端末画面にて、カレントホームにファイルがちゃんとあるのを確認します。

   

    minicomを管理者権限で実行したため、アクセスが権限がないため
    sudoコマンドでheadコマンドを実行して、先頭の10行を表示しています。

    ちゃんと受信も出来ています。

これで、パソコンとのファイルのやり取りが出来るようになりました。
これで、もう少し使い込めるようになりました。


XMODEMプロトコル、組み込みマイコン用に使いには意外と良いプロトコルかもしれません。
ArduinoにもXMODEMライブラリがあるようなので、ちょっと調べてみたいと思います。
豊四季タイニーBASICでのファイル転送の手段として利用価値がありそうです。
   

関連記事

・「Z80-CP/M 2.2 emulator running on ESP8266」でのファイル転送 （この記事です)

・「Z80-CP/M 2.2 emulator running on ESP8266」を試してみました
・ESP-01モジュールにcpm8266を載せてみました

ESP-01モジュールにcpm8266を載せてみました

前回の続きです。

ESP8266がのっている安価なESP-01モジュールに無理やりcpm8266を載せて、
Z80 CP/M 2.2 エミュレータを動かしてみました。
前回試したESPr Developerは二千円近くするので、これで動けば大変お安いですね^^

ESP-01は、2、3前にAliexpressにて購入したのですが、
技適無しのため放置していました。

製品的には、sparkfunのWiFi Module - ESP8266 WRL-13678 と同じだと思われます。
（この製品と、ESP-01、ESP-01SでRESETピン等のプルアップ有り無しの違いがあるようです）

フラッシュメモリの容量は1Mバイトしかなく、このままでは動かないので、
手持ちの4MバイトのフラッシュメモリW25Q32に置き換えてみました。
W25Q32はeBayで購入しました。

はんだ吸い取り線ではんだを吸い取りピンセットで横ひねりして取外せました。

ちょっと幅が広いですが、乗っかりました。
WiFiは使わないので、アンテナ部をカットします。

完成しました。
サイズも小さくなりました。

USBシリアルモジュールにて書き込みを行いなす。
接続には一緒に買っていた、アダプターを使いました。

結線表


cpm8266の書き込み
フラッシュメモリも認識されて、ちゃんと書き込めました。

CP/M の実行

結線を下記に修正し、

RESETはワイヤーの抜き差しでGND接続⇒切り離し
でリセットしました。あとで、ちゃんとタクトスイッチでリセットボタンをつけることにします。

起動出来ました。
マイクロソフトBASICも問題なく動作しました。

こんな、小さなモジュールでCP/M が動くのはすごいですね。

関連記事
・「Z80-CP/M 2.2 emulator running on ESP8266」でのファイル転送
・「Z80-CP/M 2.2 emulator running on ESP8266」を試してみました
・ESP-01モジュールにcpm8266を載せてみました（この記事です）

「Z80-CP/M 2.2 emulator running on ESP8266」を試してみました

DEKOさんが面白そうなこと（RunCPM (Z80 CP/M 2.2 エミュレータ)）をやっていたので、

手持ちのESP-WROOM-2(ESPr Developer)で、
別のエミュレータ cpm8266(Z80-CP/M 2.2 emulator running on ESP8266)を試してみました。
cpm8266の存在もDEKOさんのSNSでの投稿記事で知りました（感謝！）。

     2018/11/03  追記
       DEKOさんがcpm8266のコンパイル手順を分かりやすくまとめています。
       チャレンジする方は、こちらの手順を参考にした方が良いでしょう。
        qiita@ht_deko -  WSL（Windows Subsystem for Linux）で CP/M 8266 をビルドする

     2018/11/04  追記
       cpm8266では、フラシュメモリの容量が4Mバイト必要みたいです。
       250kバイトの仮想フロッピディスク x 15本 =  3,750kバイト
       ESP-WROOM-2は、フラッシュメモリが4Mバイトから2Mバイトに変更があったので
       最近流通しているESP-WROOM-2では利用出来ないかもしれません。

公式配布サイト

・cpm8266(Z80-CP/M 2.2 emulator running on ESP8266)
  https://github.com/SmallRoomLabs/cpm8266

先に結果をいうと、完成が高く、問題なく動作しました。


構築とインストール作業について

cpm8266の構築とインストールは、公式配布サイトに掲載されている
「Installing, Compiling and Running」の手順に従て行いました。

作業にはDebian/Ubuntu環境が必要となりますが、
先日構築したWindows 10上で動くUbntu環境(WSL)を利用しました。

「Installing, Compiling and Running」の手順のコマンドをコピペして、
管理者権限が必要なコマンドはsudoで実行していきます。

$sudo apt-get install git
$sudo apt-get install make unrar-free autoconf automake libtool gcc g++ 
$sudo apt-get install gperf flex bison texinfo gawk ncurses-dev 
$sudo apt-get install libexpat-dev python-dev python python-serial 
$sudo apt-get install sed git unzip bash help2man wget bzip2 libtool-bin

esp-open-sdkのコンパイル結構時間がかかりました。
私のcore i5マシンではこのコンパイルに1時間かかりました。
Windows 10上のUbuntuは若干パフォーマンスが悪いかもしれません。

$git clone --recursive https://github.com/pfalcon/esp-open-sdk.git
$cd esp-open-sdk
$make
$export PATH=~/esp-open-sdk/xtensa-lx106-elf/bin:$PATH
$cd ..

cpm8266本体のコンパイルとインストール、ボードへの書き込み

Windows 10上のUbuntu環境では、公開サイトの手順ではうまくいきませんでした。
また、esp-open-sdkのバージョンアップに対応するためにパッチを当てる必要がありました。

$sudo apt-get install z80asm cpmtools zip vim-common
$git clone https://github.com/SmallRoomLabs/cpm8266.git
$cd cpm8266/code
$export ESP8266SDK=~/esp-open-sdk
$export ESPTOOL=~/esp-open-sdk/esptool/esptool.py
$export ESPPORT=/dev/ttyS6
$sudo chmod 666 /dev/ttyS6

環境変数ESPPORTにはESP-WROOM-2をWindows 10に接続した際の
シリアルポートをLinux形式で指定します。
Windows 10からみて、COM6の場合、数字の6をttySの後ろに指定します。
   COMn -> /dev/ttySn
の対応となります。

また、アクセス権限も一般ユーザーが利用出来るように変更します。

次にパッチを当てます。そのままではコンパイルエラーとなります。
パッチファイル(diffファイル)は、issues#21にてdrawkulaさんが公開している
cpm8266-master-2-local.diff.gz を当ててからコンパイルします。

・issues#21
  https://github.com/SmallRoomLabs/cpm8266/issues/21


パッチ当て作業とコンパイル

$cd ~/cpm8226
$wget https://github.com/SmallRoomLabs/cpm8266/files/2088791/cpm8266-master-2-local.diff.gz
$gzip -d cpm8266-master-2-local.diff.gz
$cd code
$patch -u < ../cpm8266-master-2-local.diff
$make full

これで、コンパイルとボードへの書き込みが行われます。

CP/M のシリアルポートはデフォルトでは9600bpsに設定されています。
これを変更したい場合は、MakefileのEMULATIONBAUD の設定を変更すれば良いようです。
変更後は再度、make fullでコンパイルと書き込みを行います。

私は115200bpsに変更しました。

私の利用しているボードでは書き込み後、
TeraTermにて接続すると起動時が不安定なのか、次のような画面になってしまいます。

TeraTermにて次の操作を行うことで正常に利用出来るようになりました。
・ 1) メニュー [編集] - [画面クリア]
・ 2) メニュー [コントロール] - [端末リセット]
・ 3) [Enter]キーを2～3回たたく

これで、利用可能状態になりました。

改行コードは下記の設定にしています。

CP/Mについては、私は知識がないので、MS-DOSのノリで操作してみました。

試行錯誤の上、マイクロソフトBASICが利用出来ました。

う～ん、いい感じ
かなり、まともに動作します。

TeraTermでの動作が確認できました。

せっかくなのでスタンドアロンなCP/Mマシンとして動かしてみたいと思い、
以前試したプロペラマイコンのVT100エミュレーション(VGA出力とPS/2キーボード)を
利用してパソコン無しで動かしてみました。

ブレッドボードのプロペラマイコン

シリアルポートを接続して、起動すると問題なく動作しました。

全体はこんな感じです。
小型のVGAモニタ、PS/2キーボードを接続しています。
部品点数も少なく意外とシンプルな構成です。

マイクロソフトBASICでスタートレックのゲームプログラムを実行している様子

ユニバーサル基板に実装すれば、コンパクトなCP/Mマシンが実装出来そうですね。
ケースなんかも作れば小型パソコンが出来そうです。

関連記事

・「Z80-CP/M 2.2 emulator running on ESP8266」でのファイル転送（この記事です)

・「Z80-CP/M 2.2 emulator running on ESP8266」を試してみました
・ESP-01モジュールにcpm8266を載せてみました
・プロペラでVT100端末の実装

ESP-WROOM-02を始めました（４） WiFi経由でLEDを制御

ESP-WROOM-02のGPIOまわりの雰囲気が分かったので、
本来の目的のIoTをボチボチとやり始めました。

まずは、Arduino IDEのサンプルソースのSDWebserverを修正して
簡単なLED制御プログラムを作って見ました。

スマートフォンにてESP-WROOM-02にて稼働するWebサーバーに接続して
LEDを制御しています。

動作の様子

動作としては単純なのですが、ESP-WROOM-02が具体的に何をやっていると言うと
  1)WiFiアクセスポイント 機能の提供
  2)接続したスマートフォンにIPアドレスの配布(DHCP)
  3)Webサーバー
  4)WebコンテンツをSDカードから配信
  5)URL名前解決(DNSサーバー)
  6)LEDの制御

てな感じです。

ESP-WROOM-02がWiFiアクセスポイントになっているので、既存ネットワークが無くても
スマートフォンから接続することが出来ます。

動画見ると分かりますが、表示レスポンス等、Webサーバーとしてはさすがに遅いです。
ですので、ボタン操作によるLED制御は、非同期通信を使ってページ更新が発生しない
ようにしました。

結線

05ピン    LEDのアノードへ接続
13ピン    microSDカードモジュールのMOISに接続
12ピン    microSDカードモジュールのMISOに接続
14ピン    microSDカードモジュールのCLKに接続
15ピン    microSDカードモジュールのCSに接続

microSDカードの接続・使い方はスイッチサイエンスさんの記事
   ESP-WROOM-02を使ったWi-Fi機能付き温度ロガーを作る（1）
が参考になると思います。

スケッチ
ダウンロード SDWebServerEx.zip (64.5K)

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <SPI.h>
#include <SD.h>

#define DBG_OUTPUT_PORT Serial
#define LED_PIN 5

const char* ssid = "esp8266";
const char* password = "xxxxxxx";
const char* host = "sd.local";
const byte DNS_PORT = 53;

IPAddress apIP(192, 168, 0, 1);
DNSServer dnsServer;
ESP8266WebServer server(80);

static bool hasSD = false;

void returnOK() {
  server.send(200, "text/plain", "");
}

void returnFail(String msg) {
  server.send(500, "text/plain", msg + "\r\n");
}

bool loadFromSdCard(String path){
  String dataType = "text/plain";
  if(path.endsWith("/")) path += "index.htm";

  if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));
  else if(path.endsWith(".htm")) dataType = "text/html";
  else if(path.endsWith(".css")) dataType = "text/css";
  else if(path.endsWith(".js")) dataType = "application/javascript";
  else if(path.endsWith(".png")) dataType = "image/png";
  else if(path.endsWith(".gif")) dataType = "image/gif";
  else if(path.endsWith(".jpg")) dataType = "image/jpeg";
  else if(path.endsWith(".ico")) dataType = "image/x-icon";
  else if(path.endsWith(".xml")) dataType = "text/xml";
  else if(path.endsWith(".pdf")) dataType = "application/pdf";
  else if(path.endsWith(".zip")) dataType = "application/zip";

  File dataFile = SD.open(path.c_str());
  if(dataFile.isDirectory()){
    path += "/index.htm";
    dataType = "text/html";
    dataFile = SD.open(path.c_str());
  }

  if (!dataFile)
    return false;

  if (server.hasArg("download")) dataType = "application/octet-stream";

  if (server.streamFile(dataFile, dataType) != dataFile.size()) {
    DBG_OUTPUT_PORT.println("Sent less data than expected!");
  }

  dataFile.close();
  return true;
}

void handleNotFound(){
  if(hasSD && loadFromSdCard(server.uri())) return;
  String message = "SDCARD Not Detected\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  DBG_OUTPUT_PORT.print(message);
}

// LEDの制御
void handleLED() {
  if (!server.hasArg("LED")) {
    String msg = "Command Error\n";
    returnFail(msg);
    return;
  }

  String cmd = server.arg("LED");
  if (cmd == "on") {
    digitalWrite(LED_PIN, HIGH);
    DBG_OUTPUT_PORT.println("LED ON");
  }    
  if (cmd == "off") {
    digitalWrite(LED_PIN, LOW);
    DBG_OUTPUT_PORT.println("LED OFF");
  }
  returnOK();
}

void setup(void){
  pinMode(LED_PIN, OUTPUT);
  digitalWrite(LED_PIN, LOW);  
  DBG_OUTPUT_PORT.begin(115200);
  DBG_OUTPUT_PORT.setDebugOutput(true);
  DBG_OUTPUT_PORT.print("\n");

  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP(ssid, password);

  dnsServer.setTTL(300);
  dnsServer.setErrorReplyCode(DNSReplyCode::ServerFailure);
  dnsServer.start(DNS_PORT, host, apIP);

  server.onNotFound(handleNotFound);
  server.on("/do",HTTP_GET, handleLED);
  
  server.begin();
  DBG_OUTPUT_PORT.println("HTTP server started");

  if (SD.begin(SS)){
     DBG_OUTPUT_PORT.println("SD Card initialized.");
     hasSD = true;
  }
}

void loop(void){
  dnsServer.processNextRequest();
  server.handleClient();
}

Webページ
とりあえず、トップ画面のみ掲載します。ファイルはSDカードに入れています。
SDカードライブラリの制約でファイル名は8.3文字となります。

スマートフォンに表示されているページや画像はSDカードに入れています。
ページは２ページ構成です。

簡単な説明
スマートフォンからは、まずssidがesp8266のアクセスポイントに接続します。
このあたりは、ESP-WROOM-02 で

  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP(ssid, password);

でやってます。

次にスマートフォンからブラウザにて、URL http://led.local  にアクセスして
LED制御画面を(index.htm)を表示します。

ESP-WROOM-02 でこのアクセスによるコンテンツ画面配信のための、
名前解決は DNSServer dnsServer にて生成したDNSサーバーがやってくれています。

コンテンツの配信は下記のコードでやっています。まずはハンドラの設定は

  server.onNotFound(handleNotFound);
  server.on("/do",HTTP_GET, handleLED);

です。 LEDを制御するためのURL（GET)は、スマートフォンから
   http://led.local/do?LED=on    でLED点灯
   http://led.local/do?LED=off   でLED消灯
のアクセスでやっています。

このled.local/do のURLでアクセスされた場合にLEDの制御を行うため

  server.on("/do",HTTP_GET, handleLED);

と記述して、処理を行う関数 habdleLED() を指定しています。またdo?LED=on 形式で
スマートフォンから変数LEDの値を渡す方式（GET）を指定するためにHTTP_GET を
指定しています。

led.local/do 以外のURLでアクセスされた場合は、

  server.onNotFound(handleNotFound);

と記述して、関数 handleNotFound() を呼び出すように指定しています。

handleNotFound()では、loadFromSdCard(String path) を呼び出して
URLで指定したファイルがあればそのファイルをSDカードから
読みだして、配信を行っています（"/" の場合は"/index.htm"ファイルを配信）。

今回はサンプルを参照してサクッと作成しましたが、
Webサーバーを操るにあたり、HTTPのプロトコルをちょっと突っ込んで学ばないと
いけないようです。

ただし、ライブラリが充実しており、ちょっとしたプログラムも意外と簡単に作れることが分かりました。

ESP-WROOM-02を始めました（３） SPIFFSの利用

2016/07/02 追記更新

前回はSDカードに漢字フォントとビットマップファイルをを載せていたのですが、
そのデータを標準搭載のフラッシュメモリ上に置けることが分かりました。

ということで、実際にフラッシュメモリ上に漢字フォントをおいて動かしてみました。
取りあえず、動作しました。

だだし若干、表示にチラつきが出ます。
フラッシュメモリにアクセスする時にダイナミック駆動に利用しているタイマー割り込みが
中断させられるのかもしれません。

今後、WiFi通信等の利用も考えると、1msecの割り込みのダイナミック駆動はちょっと
負担が大きそうです。

フラッシュメモリの具体的な利用方法

ESP-WROOM-02には4MバイトのSPI接続フラッシュメモリが搭載されており、
そのうち、1M or 3Mバイトをデータ用のファイルシステムとして利用出来ます。

この領域は、専用に確保されておりスケッチを書き換えても影響を受けません。

  Flash layout

  ※公式サイトのリファレンスマニュアル ESP8266 Arduino Core /  File System /  より引用
    http://esp8266.github.io/Arduino/versions/2.3.0/doc/filesystem.html

ファイルシステムに利用する領域はArduino IDEにて選択が出来ます。

フラッシュサイズが4MバイトのESP-WROOM-02は1M or 3Mバイトが選択出来ます。

Arduino IDEから任意のファイルを配置出来る

やり方は、公式サイトのリファレンスマニュアル
  ESP8266 Arduino Core /  File System / Uploading files to file system
     http://esp8266.github.io/Arduino/versions/2.3.0/doc/filesystem.html#uploading-files-to-file-system
に記載されています。

ブラグインをダウンロードして、Arduino IDEに組み込み、Arduino IDEを再起動、
これで、ツールメニューに「EPS8266 Sketch data upload」というメニューが追加されます。

現在開いているスケッチが置いてあるフォルダにフォルダ data を作成してその中に
データファイルを置いておきます。

そんでもって、メニュー 「EPS8266 Sketch data upload」 をクリックしてアップロードします。

実際に漢字フォントとビットマップファイルの約1.75Mバイトをアップロードしてみると
数分かかりましたが、エラーなく完了出来ました。

プログラムからのファイルアクセス

ヘッダーファイル fs.h をインクルドします。これにより、File system object (SPIFFS)が
利用出来ます。

ファイルシステムの操作はSPIFFSオブジェクトを使って行います。
SDライブラリのSDオブジェクトとほとんど同じ感覚で利用出来ます。

SDオブジェクトからSPIFFSオブジェクトへの移行は関数がほぼ１対１でかつ、
パラメタも類似しているためすんなりと行えました。

ただ、どうもSDライブラリとの相性が悪いのかSD.hも別途インクルドするFileクラス関連の
コンパイルエラーが発生しました（これは要調査です）。
まあ、今回は、併用しないのでSD.hのインクルドを止めました。

プログラム（スケッチ）

現時点のバージョンを置いておきます。
     ダウンロード sample5v2_esp.zip (14.1K)   

ココログでは、1Mバイト以上のファイルを置けないので、フォントデータは下記より
ダウンロードして下さい。
     https://github.com/Tamakichi/Arduino-KanjiFont-Library-SD/archive/master.zip

フォントの著作権は私ではなくフォント作成者にあります。
解凍し、README.TXTのライセンス等に関する記載内容を確認の上お使い下さい。

解凍したフォルダのfontbin内のFONT.BINが利用するフォントデータとなります。
このフォントデータをスケッチ配置フォルダ下のdataフォルダに入れて、ESP-WROOM-02
にアップロードして利用します。

最後に

最終的にはESP-WROOM-02用の漢字フォントライブラリを整備したいと思います。

2016/07/02 追記

ライブラリ化し、下記にて公開しました。
  ・ESP8266用漢字フォントライブラリ SPIFFS版 ESP8266-KanjiFont-Library-SPIFFS
    https://github.com/Tamakichi/ESP8266-KanjiFont-Library-SPIFFS