【ラズパイ】受信したセンサーデータを表示する。

前回までの状況はこちら。

【ラズパイ】ネットワークでセンサーデータを送信する。

前回はラズパイからセンサーで収集したデータを送信させていましたが、フォーマットが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)を展開しオブジェクト化します。

そして、各パラメータをプロパティに設定します。

動作結果はこうなりました。