前回までの状況はこちら。
前回はラズパイからセンサーで収集したデータを送信させていましたが、フォーマットがJsonなので、このままでは使用できません。
ラズパイ側のソースコードをgitHubにアップしました。
https://github.com/takishita2nd/pi/blob/master/http.py
今回はこのデータを見やすいように加工します。
GUIのほうが見やすいと思って、軽い気持ちで作ってみたのですが、思った以上にがっつりなことになってしまいました。
WPFを使用しようと思うのですが、今回はPrismという拡張機能を使用してMVVMモデルで作成しようと思います。
メニューの拡張機能からPrismを検索し、Prismをインストールします。
Visual Studioを再起動すると、新規プロジェクトにPrismが追加されているので、Prismのプロジェクトを作成します。
まずは、XAMLの作成。
<Window x:Class="BlankApp1.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="180" Width="350">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="温度" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Grid.Row="1" Grid.Column="0" Content="湿度" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Grid.Row="2" Grid.Column="0" Content="気圧" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Grid.Row="0" Grid.Column="1" Content="{Binding Temperature}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Grid.Row="1" Grid.Column="1" Content="{Binding Humidity}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Grid.Row="2" Grid.Column="1" Content="{Binding Pressure}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Content="Monitor" Command="{Binding ButtonClickCommand}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="20" />
</Grid>
</Window>
温度、湿度、気圧を表示するだけです。
あとはデータの待ち受けを開始するボタンを配置します。
Jsonを展開するためのクラスを定義します。
[JsonObject("sensorModel")]
class Sensor
{
[JsonProperty("temperature")]
public int Temperature { get; set; }
[JsonProperty("humidity")]
public int Humidity { get; set; }
[JsonProperty("pressure")]
public int Pressure { get; set; }
}
クラス名は何でもいいですが、パラメータの名前は送信側と合わせる必要があります。
最後にViewModelの処理です。
public class MainWindowViewModel : BindableBase
{
private string _title = "ラズパイモニター";
public string Title
{
get { return _title; }
set { SetProperty(ref _title, value); }
}
private int _temperature;
private int _humidity;
private int _pressure;
public int Temperature
{
get { return _temperature; }
set { SetProperty(ref _temperature, value); }
}
public int Humidity
{
get { return _humidity; }
set { SetProperty(ref _humidity, value); }
}
public int Pressure
{
get { return _pressure; }
set { SetProperty(ref _pressure, value); }
}
public DelegateCommand ButtonClickCommand { get; }
public MainWindowViewModel()
{
ButtonClickCommand = new DelegateCommand(() =>
{
Thread thread = new Thread(new ThreadStart(() => {
try
{
HttpListener listener = new HttpListener();
listener.Prefixes.Add("http://192.168.1.3:8000/");
listener.Start();
while (true)
{
HttpListenerContext context = listener.GetContext();
HttpListenerRequest req = context.Request;
using (StreamReader reader = new StreamReader(req.InputStream, req.ContentEncoding))
{
string s = reader.ReadToEnd();
Sensor sensor = JsonConvert.DeserializeObject<Sensor>(s);
Temperature = sensor.Temperature;
Humidity = sensor.Humidity;
Pressure = sensor.Pressure;
}
HttpListenerResponse res = context.Response;
res.StatusCode = 200;
byte[] content = Encoding.UTF8.GetBytes("HELLO");
res.OutputStream.Write(content, 0, content.Length);
res.Close();
}
}
catch (Exception ex)
{
}
}));
thread.Start();
});
}
}
ボタンを押すとHTTPを待ち受け開始し、HTTPを受信したらデータ(Json)を展開しオブジェクト化します。
そして、各パラメータをプロパティに設定します。
動作結果はこうなりました。
うん、想定通り。
