自作IoTデバイスをつくろう--.NET Micro Frameworkと.NET Gadgeterを使いこなす技術者ルポ

builder by ZDNet Japan Ad Special
2014-03-05 11:00:00
  • このエントリーをはてなブックマークに追加

.NET Gadgeteerで作る自作IoT家電

 IoT(Internet of Things)的な機能を持った家電を多く見るようになってきた。TVや冷蔵庫、エアコンに、照明など、色々なモノにインターネット経由でアクセスし、稼働状況を見たり制御ができるようになってきた。

 しかし、これくらいの機能なら自分でも作れるかも? と感じる人も多いのではないだろうか。

 わざわざ買わなくても、builderの読者であれば、欲しい機能は自分で作ってしまえばいいのだ。

 もちろん、家電の詳細な情報にアクセスしたり、細かい制御をすることは難しいが、外部からでも、加速度センサやカメラといった様々なセンサを使って、家電の動作状況を検知するなど、ある程度のことは、工夫次第で実現可能だ。

 そんな時に便利なのが、.NET Gadgeteerだ。.NET Gadgeteerとは、2011年にMicrosoft Research Labの社内プロジェクトとしてスタートした「.NET Micro Framework」をベースとした小規模な組み込みシステム用のプラットフォームで、現在では「.NET Micro Framework」同様にオープンソースとして提供されている。 「.NET Micro Framework」をベースとしているため、Visual Basic.NETやC#を使ってコードを書くことができ、ちょっとしたデバイスをお手軽に作るのにはもってこいだ。

 今回は.NET Gadgeteer対応のハードウェアを使って、今ある家の家電をちょっとだけIoT化してみよう。作るものは、洗濯機の終了を検知して、洗濯が終わると、メールで知らせてくれるガジェットだ。

.NET Gadgeteer対応のハードウェアを選ぼう

 .NET Gadgeteerに対応したハードウェアは、GHI Electronics社など数社から発売されている。搭載しているメモリやソケットの数によって拡張性が変わってくるので、スペックをよく検討して購入しよう。

 今回は、GHI Electronics社から発売されている次のモジュールを利用する。

メインボート

FEZ Cerbuino Net

メインボート
主な仕様と価格

プロセッサー

168 Mhz 32-bit Cortex-M4

使用可能なFlash容量

384 KB

使用可能なRAM容量

119 KB(イーサネットを使わない場合)
104 KB(イーサネットを使う場合)

価格

54.95ドル(直販価格)

ディスプレイモジュール

Display N18モジュール

ディスプレイモジュール
主な仕様と価格

解像度

160 x 128

価格

24.95ドル(直販価格)

センサーモジュール

Accelerometerモジュール(加速度センサー)

センサーモジュール
価格

価格

16.95ドル(直販価格)

 これらのキットは、GHI Electrics社のオンラインストア、もしくは製品輸入販売代理店の株式会社デバイスドライバーズから購入することができる。

開発に必要なソフトウェアを入手しよう

 開発に必要なソフトウェアを入手しよう。まずは、次のソフトウェアを準備しよう。

  • Windows 7以降のWindows OS
  • Visual Studio 2010、もしくは、Visual Studio 2012

 なお、「Visual Studio 2013」は2014年現在、「.NET Micro Framework」に対応していないので注意が必要だ。Visual Studio 2013が.NET Micro Frameworkに対応するまでは、「Visual Studio 2012」や「Visual Studio 2010」を使おう。「Visual Studio Professional 2013 with MSDN」であれば、過去のバージョンも使うことができるのでおすすめだ。

 Visual Studioのインストールが完了したら

  • NETMF SDK
  • NETMF and Gadgeteer Package

をインストールしよう。それぞれの最新版のダウンロードリンクは、GHI Electronicsのこちらのページにまとまっている。

Hello .NET Gadgeteer!

プロジェクトの作成

 まずは「Hello World」を書いてみよう。使う機材は、メインボードとディスプレイモジュールだ。

(1) Visual Studio起動後に、メニューから「ファイル」→「新規作成」→「プロジェクト」を選ぶと、プロジェクトを保存するフォルダを選ぶ画面が表示されるので、「名前」欄にプロジェクト名を入力し、OKをクリック。

screen01
※クリックすると拡大画像が見られます

(2)次にメインボードを選択する画面が表示されるので、「FEZ Cerbuino Net」を選択し、「Create」をクリック。

screen02
※クリックすると拡大画像が見られます

モジュールの配線

(3) Program.gadgeteerを開いたデザイナー画面になる。この画面でキットを追加し、配線することができる。

screen03
※クリックすると拡大画像が見られます

(4) 左端の「ツールボックス」をクリックし、ツールボックスを表示させよう。ここには、対応しているキットの一覧が表示される。ここから、「Display N18」を探し、メインボードの横にドラッグ&ドロップで配置しよう。

screen04
※クリックすると拡大画像が見られます

(5)「Display N18」が配置されると、次のように表示される。

screen05
※クリックすると拡大画像が見られます

(6)次にボードの横の空白を右クリックして、コンテキストメニューより、「Connect all modules」をクリックし、配線しよう。

screen06
※クリックすると拡大画像が見られます

(7) 次のように配線した結果が表示されるので、実物のハードウェアもその通りに配線を行おう。また、パソコンとメインボードはUSBで接続しておく。

screen07
※クリックすると拡大画像が見られます
Visual Studioのデザイナー画面で表示しされた通りに、ソケットにコードを差し込む
Visual Studioのデザイナー画面で表示しされた通りに、ソケットにコードを差し込む

プログラムコードの記述

(8)タブに表示されている「Program.cs」をクリックすると、プログラムコードを記述する画面となる。

screen08
※クリックすると拡大画像が見られます

(9) ここで、Hello World!のプログラムコードを記述しよう。

              Debug.Print("Program Started");

というコードが自動生成されているので、この行の下に、

display_N18.SimpleGraphics.DisplayText(
                "Hello World!",
                Resources.GetFont(Resources.FontResources.NinaB),
                GT.Color.White, 0, 0); 

という行を追加し、実行してみよう。

実行結果: Hello World!が表示されただろうか
実行結果: Hello World!が表示されただろうか

 ディスプレイモジュールは、SimpleGraphicsというその名の通り簡単に文字や図形を描画できる機能を提供している。文字を描画するのには、SimpleGraphics.DisplayTextメソッドを使うことができる。

SimpleGraphics.DisplayText

public void DisplayText(string text, Font font, Color color, uint x, uint y)

引数名

説明

text

System.String

描画するテキスト

font

Font

フォント

color

Gadgeteer.Color

文字色

x

System.UInt32

描画を開始するX座標

y

System.UInt32

描画を開始するY座標

 フォントは、Display N18モジュールでは、NinaBもしくはsmallを使うことができる。

 また、指定された範囲内で文字を描画するSimpleGraphics.DisplayTextInRectangleメソッドもある。こちらのメソッドでは、改行コードを含んだ複数行の描画も行うことができる。

SimpleGraphics.DisplayTextInRectangle

public void DisplayTextInRectangle(string text, uint x, uint y, uint width, uint height, Color color, Font font)

public void DisplayTextInRectangle(string text, uint x, uint y, uint width, uint height, Color color, Font font,  Module.DisplayModule.SimpleGraphicsInterface.TextAlign textAlignment)

public void DisplayTextInRectangle( string text, uint x, uint y, uint width, uint height, Color color, Font font,  Module.DisplayModule.SimpleGraphicsInterface.TextAlign textAlignment,  Module.DisplayModule.SimpleGraphicsInterface.WordWrap wordWrap,  Module.DisplayModule.SimpleGraphicsInterface.Trimming trimming,  Module.DisplayModule.SimpleGraphicsInterface.ScaleText scaleTextToFit) 

引数名

説明

text

System.String

描画するテキスト

x

System.UInt32

描画を開始するX座標

y

System.UInt32

描画を開始するY座標

width

System.UInt32

描画範囲の横幅

height

System.UInt32

描画範囲の縦幅

color

Gadgeteer.Color

文字色

font

Font

フォント

textAlignment

Module.DisplayModule.SimpleGraphicsInterface.TextAlign

行揃え位置の指定

wordWrap

Module.DisplayModule.SimpleGraphicsInterface.WordWrap

WordWrap処理をするかどうか

Trimming

Module.DisplayModule.SimpleGraphicsInterface.Trimming

トリミング処理をWord単位でするか文字単位でするか

scaleTextToFit

DisplayModule.SimpleGraphicsInterface.ScaleText

文字列が指定範囲からはみ出す場合に、描画範囲を縦方向に広げる処理をするか

図形の描画

 また、SimpleGraphicsには、簡単な図形を描画する機能もある。SimpleGraphicsの楕円描画機能を使って、簡単な図を描画してみよう。

 楕円描画には、SimpleGraphics.DisplayEllipseメソッドを用いる。また、描画したテキストメッセージを消すために、矩形を描画するSimpleGraphics.DisplayRectangleメソッドを用いる。

SimpleGraphics.DisplayEllipse

public void DisplayEllipse(Color outlineColor, uint x, uint y, uint xRadius, uint yRadius)

引数名

説明

outlineColor

Gadgeteer.Color

描画色

System.UInt32

楕円の中心のX座標

System.UInt32

楕円の中心のY座標

xRadius

System.UInt32

楕円のX方向の半径

yRadius

System.UInt32

楕円のY方向の半径

SimpleGraphics.DisplayRectangle

public void DisplayRectangle(Color outlineColor, uint thicknessOutline, Color fillColor, uint x, uint y, uint width, uint height)

引数名

説明

outlineColor

Gadgeteer.Color

線の色

thicknessOutline

System.UInt32

線の太さ

fillColor

Gadgeteer.Color

塗りつぶしの色

x

System.UInt32

描画を開始するX座標

System.UInt32

描画を開始するY座標

width

System.UInt32

横幅

height

System.UInt32

縦幅

Program.cs

using System;
using System.Collections;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Presentation.Shapes;
using Microsoft.SPOT.Touch;

using Gadgeteer.Networking;
using GT = Gadgeteer;
using GTM = Gadgeteer.Modules;
using Gadgeteer.Modules.GHIElectronics;

namespace HelloZiddy
{
     public partial class Program 
          {
          // This method is run when  the mainboard is powered up or reset.   
          void ProgramStarted()
          {
                // Use Debug.Print to show  messages in Visual Studio's "Output" window during debugging. 
               Debug.Print("Program Started");

               // Ziddyちゃんを描画 
               DrawZiddy();

                // メッセージ表示 
               Msg("Hello! I'm  Ziddy!");
               }

// Ziddyちゃんを描画 
void DrawZiddy()
{
     const int x = 35;
     const int y = 138;

     // 耳 
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, x - 25, y - 25, 10,  10);
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, x + 28, y - 20, 10,  10);

     // 輪郭 
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, x, y, 30, 27);


     // 口 
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, x - 6, y + 4, 5, 3);
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, x + 5, y + 5, 5, 4);
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.Black, x - 7, y + 3, 5, 3);
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.Black, x + 6, y + 3, 5, 4);

     // 鼻 
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, x, y, 2, 2);

      // 目 
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, x - 10, y - 8, 1, 1);
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, x + 11, y - 7, 1, 1);

      // リボン 
     display_N18.SimpleGraphics.DisplayText("ZD",
     Resources.GetFont(Resources.FontResources.NinaB),GT.Color.Red, x - 29, y - 27);

     // 吹き出し
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, 85, 140, 5, 5);
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, 100, 120, 7, 7);
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, 90, 90, 10, 10);
     display_N18.SimpleGraphics.DisplayEllipse(GT.Color.White, 70, 0, 130, 70);
}

// メッセージ表示 
private void Msg(string msg)
{
     Debug.Print(msg);
     display_N18.SimpleGraphics.DisplayRectangle(GT.Color.Black, 0, GT.Color.Black, 0, 0, 128, 50);
     display_N18.SimpleGraphics.DisplayTextInRectangle(msg, 0, 0, 128, 50,  GT.Color.White, Resources.GetFont(Resources.FontResources.NinaB), GTM.Module.DisplayModule.SimpleGraphicsInterface.TextAlign.Left, GTM.Module.DisplayModule.SimpleGraphicsInterface.WordWrap.Wrap, GTM.Module.DisplayModule.SimpleGraphicsInterface.Trimming.WordEllipsis, GTM.Module.DisplayModule.SimpleGraphicsInterface.ScaleText.None);
          }
     }
}
実行結果:Ziddyちゃん(リンク:http://japan.zdnet.com/sp/ziddy/)を楕円とテキストのみで描画してみた。胴体はなかなか難しかったので顔のみだ
実行結果:Ziddyちゃんを楕円とテキストのみで描画してみた。胴体はなかなか難しかったので顔のみだ
  • コメント(1件)
#1 ZDちゃんファン   2014-07-07 22:05:05
Ziddyちゃんは楕円描画でできてるとは!
  • 新着記事
  • 特集
  • ブログ