bash (Matplotlib ) + eog > リアルタイム画像表示処理

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04 LTS desktop amd64
TensorFlow v1.2.1
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
ADDA v.1.3b6
```

### 前置き

- PyQtを知らない
- signal/slot/event/etcを学習するコストをかけてまでしたいことは今はない
- PyQtとPySideはライセンス的にどちらを選択するか
    - link: http://takumikim.blogspot.jp/2014/11/blog-post.html
- UDPでデータを受信して画像表示したいだけ

学習コストが少なく、自分の希望機能を実装する方法はないか。
以下を思いついた。

## 使用機能

### 画像生成部

Quaternion(もしくは三次元の加速度(ax,ay,az)）をUDPで受信し、グラフ画像として出力する。
ppm形式出力は簡単。他の形式もPythonのライブラリを使って適宜実装する。

### 画像表示部

Ubuntu(またはCentOS)においてはeogという画像表示プログラムが使用できる。

## code

### 画像生成部

とりあえずImageMagickを使った仮コードは以下の通り。
参考: [ImageMagick > 画像をずらす (+ 画像サイズを拡大) > convert green.png -page +0+20 -background none -extent 40x40 -flatten green_shift.png](https://qiita.com/7of9/items/0053e25772856308fda9)


image.pngというファイルでred, green, blueの色が5秒おきに切替わるというだけの実装。

```bash:change_image_180214_exec
#!/usr/bin/env bash

for idx in $(seq 1 100)
do
	for color in red green blue
		do
			echo $color
	    	convert -size 100x100 xc:$color image.png
	    	sleep 5
		done
done
```

### 画像表示

以下を実行する。

```bash
$eog image.png
```

### 結果

![blue.png](https://qiita-image-store.s3.amazonaws.com/0/32870/577137ca-0326-615d-6a0c-e109d1e36f61.png)

![green.png](https://qiita-image-store.s3.amazonaws.com/0/32870/39248da4-955f-a66e-fba9-a424f97bd56e.png)

![red.png](https://qiita-image-store.s3.amazonaws.com/0/32870/b8a30e4c-47c2-8394-2533-b838e907d663.png)

使えそう。
100msec程度の画像変更も問題なさそう。

MemoryEnhancer用の入力UIである[ESP8266+MPU-9250](https://qiita.com/7of9/items/64884e449fd3c425efeb)の調整用のソフトはこれでできるだろうか。

これは「UIとロジックの分離」の1例だろうか。

### 画像生成 > Matplotlib

bashの代わりにMatplotlibを使ってみる。
参考: [Jupyter / matplotlib > 2Dイメージをファイル保存する > plt.savefig("foo.png") / ただし、plt.show()があると保存に失敗する模様](https://qiita.com/7of9/items/a44a5c7124284f5ede4d)

```py:saveToFile_180215.ipynb
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.cm as cm
import time

for loop in range(100):
    data_1d = np.random.rand(22500)
    print(data_1d)
    data_2d = np.reshape(data_1d, (150,150))

    plt.imshow(data_2d, extent=(0,150,0,150),cmap=cm.gist_rainbow)
    #plt.show()

    plt.savefig("foo.png")
    
    time.sleep(1)

```

以下のような画像が１秒おきに更新されるようになった。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/9ba29d51-a1a1-5688-cbea-d2162a92d3db.png)

Matplotlibのplt.show()を繰り返し実行すると、画像のリアルタイム表示ではなく、画像が下に延々と追加されるようになる(下図)。
[matplotlibでリアルタイム描画](https://qiita.com/hausen6/items/b1b54f7325745ae43e47)に記載の`plt.pause(.01)`を使っても下に延々と追加される。
[このあたり](https://stackoverflow.com/questions/17835302/how-to-update-matplotlibs-imshow-window-interactively)も試したが結果は同じ。

この問題もあって、Matplotlibを使ったリアルタイム描画更新はあきらめていたが、上記の方法でリアルタイムの更新ができることが分かった。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/80bd69c5-d848-a5f8-d38f-80bd52ec291a.png)

### link

- [Jupyter notebookにMatplotlibでリアルタイムにチャートを書く](https://qiita.com/shinobu_shiva/items/bdba74d37d51421c287b)
    - こちらの方法はUbuntu 16.04 LTS環境で動作確認できた
- [Resolved: Matplotlib figures not showing up or displaying](https://www.pyimagesearch.com/2015/08/24/resolved-matplotlib-figures-not-showing-up-or-displaying/)