Intel Edisonでスマートウォッチもどきを作ってみた話


SlideShareはこちらから　http://www.slideshare.net/jotaroshigeyama/jtr-watch

大学の授業の自主制作の時間で、スマートウォッチを作った時のメモ。3週間もなかったぐらいの期間で制作するので、そんなに凝ったものはできませんｗ

初心者向けに書くつもりです。
![写真 Dec 21, 23 59 26.jpg](https://qiita-image-store.s3.amazonaws.com/0/86040/12416703-3ed8-cdac-1096-d10f615a6e52.jpeg "写真 Dec 21, 23 59 26.jpg")

##仕様をざっくり決めてみる
スマートウォッチはインターネット技術・計算機性能の向上・バッテリー技術の向上により、極めて小型化する ことの可能となったパーソナルコンピュータであると言える。Apple の Apple Watch に代表されるスマートウォッ チは、現実の腕時計に匹敵するほど小型なボディに、高速な CPU とな液晶画面、Wifiネットワーク・Bluetooth、 アクチュエータや各種センサなど多機能を詰め込むことに成功している。しかしながら、今年度の短い期間でこのようなデバイスを全てひと通り揃えることが困難であろうとの考えから、ある程度機能 を限定した上での制作となることを踏まえて計画をねる。

![Untitled Diagram.png](https://qiita-image-store.s3.amazonaws.com/0/86040/4ded98c9-4488-6ebd-bd52-5178207830ba.png "Untitled Diagram.png")


- 液晶画面と振動モーターによるフィードバック 
- 時刻表示、文字・画像表示機能
- 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 の場合、

```shell-session
screen /dev/tty.usbserial 115200
```

とか。configure-edison で Wifi 設定を変えていく。設定をしたら試しに外部のネットワークに接続を試みる。

```shell-session
ping www.google.com
```
など。最終的にワイヤレス・ネットワーク内での個体 IP は ifconfig で調べられるので、Edison に例えば jotaro でログインしているならば、

```shell-session
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 で読み込んで出力している様子である。
![写真 Dec 04, 19 58 01.jpg](https://qiita-image-store.s3.amazonaws.com/0/86040/034d9b3d-da27-9b89-d3c3-0138e5bc1c1c.jpeg "写真 Dec 04, 19 58 01.jpg")


![写真 Dec 03, 18 39 08.jpg](https://qiita-image-store.s3.amazonaws.com/0/86040/5dc85934-fa9a-d2a8-2719-99de2ba900a9.jpeg "写真 Dec 03, 18 39 08.jpg")



##画面レイアウトデザイン

携帯端末の画面デザインはユーザーインターフェースを決定づける非常に重要な視覚要素である。今回は携帯 端末で多く用いられるヘッダ・コンテナからなる画面レイアウトを元に、デバイスの情報表示コンセプトを決定 した。まず Illustrator で画面レイアウトをデザインした。上 10px を Header として用いて、下の領域をメイン で用いることにし、各パーツの位置関係を調整した。時計は円と線を描画するだけのシンプルなものとし、その右側に時刻とニュース・天気情報の表示エリアを設けるようにした。
プログラムでは、まずドライバを読み込んでから、LCD をスタートさせるメソッドで必要な初期設定をしてから描画する。 

```js

//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 をパースしてコールバック関数か ら表示文字列内容を更新するようにした。

```js
//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側

```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デバイスを用いる際にはこれを使うと良い。基板も非常に小型なため、コンパクトに仕上げられるだろうと思う。

#未完。画像とかも追加する予定です