SlideShareはこちらから http://www.slideshare.net/jotaroshigeyama/jtr-watch
大学の授業の自主制作の時間で、スマートウォッチを作った時のメモ。3週間もなかったぐらいの期間で制作するので、そんなに凝ったものはできませんｗ
初心者向けに書くつもりです。
仕様をざっくり決めてみる
スマートウォッチはインターネット技術・計算機性能の向上・バッテリー技術の向上により、極めて小型化する ことの可能となったパーソナルコンピュータであると言える。Apple の Apple Watch に代表されるスマートウォッ チは、現実の腕時計に匹敵するほど小型なボディに、高速な CPU とな液晶画面、Wifiネットワーク・Bluetooth、 アクチュエータや各種センサなど多機能を詰め込むことに成功している。しかしながら、今年度の短い期間でこのようなデバイスを全てひと通り揃えることが困難であろうとの考えから、ある程度機能 を限定した上での制作となることを踏まえて計画をねる。
- 液晶画面と振動モーターによるフィードバック
- 時刻表示、文字・画像表示機能
- Twitter のリアルタイム通知機能
- 新着メールの内容表示
- 最新ニュースを RSS で取得して表示
以上の機能を盛り込むことに挑戦することとした。また、筐体はウォッチとしての機能を損なわない程度に小さく
制作することにする。
Edison のセットアップ
http://trac.switch-science.com/wiki/IntelEdisonStartOSX を参考にする。
Edison での GPIO ポートの制御、ネットワーク関連や画面関連のドライブはすべて node.jsで記述するように する。Edison は Mac に USB で電源と通信線を接続しておき、 Mac 内の作業ディレクトリにファイルを sshfs でマウントしてから、Mac のエディタでソースを編集して、 Edison に直接変更内容を保存する形を取るように する。 Edison へのコマンドは ssh 接続でアクセスし、 Edison 上の LinuxOS にアクセスしてプログラムの実行 などをさ せるようにする。 プログラムはウォッチの電源を入れたら独立して動作するように、シェルスクリプトに実行コマンドを書き込んでおくようにするといい。
Edison に接続
Edison に接続するには SSH 接続という方法が最も一般的だろう。SSH とは Secure Shell の略で、FTP や Telnet と異なり、通信が暗号化されたセキュアな環境下で接続が可能である。しかし SSH は相手の IP アドレスを固定 したり、同一ネットワーク上に配置しなければならず、はじめのセットアップには USB シリアル通信による接続 が必要である。Mac の場合、
screen /dev/tty.usbserial 115200
とか。configure-edison で Wifi 設定を変えていく。設定をしたら試しに外部のネットワークに接続を試みる。
ping www.google.com
など。最終的にワイヤレス・ネットワーク内での個体 IP は ifconfig で調べられるので、Edison に例えば jotaro でログインしているならば、
ssh jotaro@192.xxx.xxx.xx
で Mac から SSH 接続でき、Edison には電源を投入するだけで無線で操作できるようになる。当然、Wifi ネッ トワークは同じネットワーク内にいないといけないが、utroam 環境でも問題なく動作した。また、SSH 接続が安 定しない時は、sshd configure ファイルを設定するとよい。接続している間に数秒おきに ping を送り合うことで SSH 接続の切断を防ぐことができる。基本的に学内の WiFi ネットワークは混雑しているため、不安定かもしれ ない。とくにこのようなデバイスは隣に Wifi 機器が存在するだけで ping が急激に増加することもある。
ローカルにマウント
このような SSH 接続で Edison 環境下のエディタを立ち上げて(vi や emacs)、長いコードを書くのは非常に効 率が悪く、最悪データが消えてしまうおそれすらあるため、予め Edison 内のプロジェクトディレクトリをローカ ル環境に移して、ローカル環境の高機能なエディタで効率的に作業してから保存する際に自動的にリモート環境 に移されるようにしたい。そこで、sshfs コマンドでファイルマウントを行う。このウェブサイト (http://shokai.org/blog/archives/10042) が非常に役 立った。Mac の場合は homebrew というパッケージマネージャを用いてインストールする必要がある。
XDK
Intel Edison が単体でプログラム実行な統合開発環境があるが、プロジェクトのひな形を作成するために Edison XDK を用いるとよい。プロジェクトは node.js ベースで動作するが、npm インストーラなどの設定ファイルを一 度生成してくれるので、最初のプログラムを書くときにだけ使う。その後はファイルマウントをしてからローカル環境で Edit すると良い。
環境構築
XDKやドライバを一つのプロジェクトフォルダにまとめて、以下の構成でプログラムを作成する。
- main.js –描画・ニュース API・GmailAPI
- weather.js –天気関係
- twit_app.js –Twitter 関係
- ssd1306.js –ディスプレイ・I2C 関係(ggったら出る
- Adafruit GFX.js –グラフィックスライブラリ glcdfont.js –フォント(ggったら出る
液晶画面のテスト
使用した OLED ディスプレイは Xadow のウェアラブルデバイス用の OLED デバイスで、内部コントローラ SSD1306 に I2C でアクセスして制御する機構を取る。 SSD1306 のドライバは別途入手しておき、図形 (直線・円 などプリミティブ図形) ・画像描画のプログラムは、 Adafruit GFX のプログラムを node.js と SSD1306 ドライ バにチューニングして用いる。フォントは glcdfont.h という標準液晶 Sans-serif フォントを同じく Adafruit GFX のソースから用いた。 Adafruit GFX は BSD ライセンスで提供されている。 画像は、別途作成した二値化 png の画像を Edison で読み込んで出力している様子である。
画面レイアウトデザイン
携帯端末の画面デザインはユーザーインターフェースを決定づける非常に重要な視覚要素である。今回は携帯 端末で多く用いられるヘッダ・コンテナからなる画面レイアウトを元に、デバイスの情報表示コンセプトを決定 した。まず Illustrator で画面レイアウトをデザインした。上 10px を Header として用いて、下の領域をメイン で用いることにし、各パーツの位置関係を調整した。時計は円と線を描画するだけのシンプルなものとし、その右側に時刻とニュース・天気情報の表示エリアを設けるようにした。
プログラムでは、まずドライバを読み込んでから、LCD をスタートさせるメソッドで必要な初期設定をしてから描画する。
//main.js
var SSD1306 = require('./ssd1306.js');
var AFGFX = require('./Adafruit_GFX.js');
var lcdTest = null; var ada = null;
function startLCD() {
lcdTest = new SSD1306();
ada = new AFGFX(128,64);
lcdTest.init();
lcdTest.clear();
lcdTest.display();
setInterval(function(){drawMenu();},10);
}
function drawMenu(){
lcdTest.clear();
//header
ada.drawString(0,0,"JTRWatch",1,1,1);
ada.drawString(100,0,"100%",1,1,1);
ada.drawLine(0,10,128,10,1);
//clock
ada.drawCircle(25,37,18,1);
ada.drawLine(25,37,parseInt(25+17*Math.sin(-_min*6.0*Math.PI/180+Math.PI)), parseInt(37+17*Math.cos(-_min*6.0*Math.PI/180+Math.PI)),1);
ada.drawLine(25,37,parseInt(25+14*Math.sin(-(_hr*30.0+_min*0.5)*Math.PI/180+Math.PI)), parseInt(37+14*Math.cos(-(_hr*30.0+_min*0.5)*Math.PI/180+Math.PI)),1); //cal
ada.drawString(52,20,""+day,1,1,1);
//time
ada.drawString(52,31,""+time,1,2,2);
}
Web からのの情報取得
天気情報
天気情報は日本各地の天気を XML 形式で無料で配信している Webサイトから取得するようにした。数分 に一度この Web サイトに HTTP リクエストを送り、結果が帰ってきたら XML をパースしてコールバック関数か ら表示文字列内容を更新するようにした。
//weather.js
module.exports={
getRain : function(callback){
var rain;
request(url,function (error, response, body) {
if (!error && response.statusCode == 200) {
parseString(body, function (err, result) {
rain=result.weatherforecast.pref[0].area[3].info[0].rainfallchance[0].period[3]._;
callback(null,rain);
});
} else {
console.log(error + " : " + response);
}
});
return rain;
}
main.js側
function startLCD(){
//...
setInterval(function(){getWeather.getRain(returnRainResult);},30000);
//...
}
//...
function returnRainResult(err,result){
console.log("hi");
console.log(result);
str = result+"%";
}
ニュース
RSSはParseして用いる必要があるがnpmのFeedParserモジュールをインストールすることで簡単に使える。コールバック関数系はお天気情報と全く同じように構築して、情報ディスプレイに表示する文字列を編集することで実現した。（HTTPリクエストの部分、URLを少し改変して、Parseをかけるだけで使える。後々追加します）
その他ハードウェア
小型breakout board
今回、FutureStandard社様にスポンサーいただき、基板の提供をしていただきました。
FutureStandardのホームページはこちら > http://www.futurestandard.jp/
ケース
ケースの設計は Autodesk Fusion 360 を使って曲線的なデザインを意識した。手首にフィットするように、手首 に触れる部分は滑らかなカーブを描くようにしている。
Autodesk Fusion360は学生にはフリーで提供している、フリーにしては非常に高機能な3DCADで、Macに対応しているそれの唯一使い勝手の良いものだと思う。プロジェクトはクラウドにアップロードされ、メジャーな3DCADと操作性はあまり変わらず、自由曲面のデザインや模型のレンダリング出力などが可能で、3Dプリント形式にデータを出力することもできる。これを用いてすべての部品を3Dに起こし、本体内の部品レイアウトもこのソフトで全て決めたが、バッテリーやモーターのサイズが思ったよりも大きく、AppleWatchの小型には到底及ばなかった。ハードウェアレイアウトの難しさを実感するが、非常にやりがいのある作業だったように思う。Fusion360の自由曲面成形は非常にアウトプットクォリティが高いので、これを見た方にはぜひ試していただきたい。
ケースの中に必要な部品はグルーガンで固定してしまった。本来ならばM1のネジ止めるべきだが、ここは必要な妥協点だと考えた。
振動モーター
Twitter の通知を受け取るためにiPhoneのように振動モーターを使用して知らせるようにした。振動モーターは秋葉原の千石電 商の本店2Fにある一個 200円の小型振動モーターを用いて、トランジスタ駆動で IO ポートから制御している。小型の振動モーターはワイヤ部分が振動モーターの勢いで切れやすいので注意するべきだ。また、もっと小型な板状の振動モーターもあったが高価なので手が出なかった。
Bidirectional I2C Level Converter
EdisonCPU のロジック電圧と OLED のロジック電圧が異なるため、レベルコンバーター基板を用いた。秋月 電子で一つ 100 円。注意することとしては、基板表面に設定用のジャンパラインが引いてあるため、用途におおじてジャンパラインを数本切る必要がある。これに関しては詳しいWebサイトがある。OLEDに限らず、モータードライバやLEDドライバなど、I2Cデバイスを用いる際にはこれを使うと良い。基板も非常に小型なため、コンパクトに仕上げられるだろうと思う。