NO.2　ウィンドウに取得した色を表示

#取得した色を画面にリアルタイムで表示する
複数の記事になります。　
ルービックキューブの色を取得して　[kociemba](https://github.com/muodov/kociemba)を利用して
最後は回転記号を取得します。


記事一覧　
[NO.1カメラ起動＋BGR取得](https://qiita.com/otoboke162/items/e5eebb6d1fdf4fdcf9cd)
[NO.3取得したいろが　何色なのか　区別する](https://qiita.com/otoboke162/items/c4130653bec267e7e11c)
[NO.4ルービックキューブの回転記号をえる](https://qiita.com/otoboke162/items/47e147aee8782069bd34)
[NO.５　最終コード　参考程度に,,,,]
(https://qiita.com/otoboke162/private/c8b5417cb8a8c5af12f8)


####サンプルコード（取得した色を画面に表示）
```python
import cv2

capture = cv2.VideoCapture(2)

x_s = 280
y_s = 280
x_e = 320
y_e = 320
#Y縦　X横

while True:
    ret, frame = capture.read()

    colorBGR = cv2.rectangle(frame, (x_s, y_s), (x_e, y_e), (255, 255, 255), 2)
    pixel = frame[300, 300]

    b = pixel[0]
    g = pixel[1]
    r = pixel[2]
    cv2.rectangle(frame, (50, 50), (100, 100), (int(b), int(g), int(r)), -1)

    cv2.imshow('camra',frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

capture.release()
cv2.destroyAllWindows()
```
追加したコード　↓

```
    b = pixel[0]
    g = pixel[1]
    r = pixel[2]
    cv2.rectangle(frame, (50, 50), (100, 100), (int(b), int(g), int(r)), -1)
```
<br>

コード真ん中あたりの　白い枠の中心部分
pixel = frame[300, 300]　で取得した色をひだりうえに　表示させてます
もしpixel が　[10, 20, 255]　を取得したばあい　赤く表示されます。

b = pixel[0]　は　[10, --, ---]の　10を表す。
g = pixel[1]　は　[--, 20, ---]の　20を表す。
r = pixel[2]　は　[--, --, 255]の　255を表す。

それを
cv2.rectangle(frame, (50, 50), (100, 100), (int(b), int(g), int(r)), -1)
で　表示させます　

<br>
<br>

####サンプルコード（取得した色を画面に表示）を実行
![NO２,サンプル１.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126388/ea3c2d95-4381-0e33-8d3c-37ef0ed5c27e.png)

#　□　を9カ所に増やす

みてのとおり　9個　色を取得するべきなので
この白い四角い枠を　9個　左上にも　9個　用意します。


<br>
<br>

#サンプルコード（９カ所に増やす）

```python
import cv2

capture = cv2.VideoCapture(2)
#今回　ウィンドウのサイズを指定しました
capture.set(cv2.CAP_PROP_FRAME_WIDTH, 1080) # 横幅
capture.set(cv2.CAP_PROP_FRAME_HEIGHT, 720) # 縦幅

x_s = 280
y_s = 280
x_e = 320
y_e = 320
#Y縦　X横

while True:
    ret, frame = capture.read()

    colorBGR0 = cv2.rectangle(frame, (x_s, y_s), (x_e, y_e), (255, 255, 255), 2)
    pixel0 = frame[300, 300]
    b0 = pixel0[0]
    g0 = pixel0[1]
    r0 = pixel0[2]
    cv2.rectangle(frame, (30, 30), (70, 70), (int(b0), int(g0), int(r0)), -1)
    cv2.putText(frame, "0", (30, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

    colorBGR1 = cv2.rectangle(frame, (x_s+150, y_s), (x_e+150, y_e), (255, 255, 255), 2)
    pixel1 = frame[300, 450]
    b1 = pixel1[0]
    g1 = pixel1[1]
    r1 = pixel1[2]
    cv2.rectangle(frame, (80, 30), (120, 70), (int(b1), int(g1), int(r1)), -1)
    cv2.putText(frame, "1", (80, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

    colorBGR2 = cv2.rectangle(frame, (x_s+300, y_s), (x_e+300, y_e), (255, 255
    , 255), 2)
    pixel2 = frame[300, 600]
    b2 = pixel2[0]
    g2 = pixel2[1]
    r2 = pixel2[2]
    cv2.rectangle(frame, (130, 30), (170, 70), (int(b2), int(g2), int(r2)), -1)
    cv2.putText(frame, "2", (130, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

    colorBGR3 = cv2.rectangle(frame, (x_s, y_s+150), (x_e, y_e+150), (255, 255, 255), 2)
    pixel3 = frame[450, 300]
    b3 = pixel3[0]
    g3 = pixel3[1]
    r3 = pixel3[2]
    cv2.rectangle(frame, (30, 80), (70, 120), (int(b3), int(g3), int(r3)), -1)
    cv2.putText(frame, "3", (30, 80), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

    colorBGR4 = cv2.rectangle(frame, (x_s+150, y_s+150), (x_e+150, y_e+150), (255, 255, 255), 2)
    pixel4 = frame[450, 450]
    b4 = pixel4[0]
    g4 = pixel4[1]
    r4 = pixel4[2]
    cv2.rectangle(frame, (80, 80), (120, 120), (int(b4), int(g4), int(r4)), -1)
    cv2.putText(frame, "4", (80, 80), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

    colorBGR5 = cv2.rectangle(frame, (x_s+300, y_s+150), (x_e+300, y_e+150), (255, 255, 255), 2)
    pixel5 = frame[450, 600]
    b5 = pixel5[0]
    g5 = pixel5[1]
    r5 = pixel5[2]
    cv2.rectangle(frame, (130, 80), (170, 120), (int(b5), int(g5), int(r5)), -1)
    cv2.putText(frame, "5", (130, 80), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

    colorBGR6 = cv2.rectangle(frame, (x_s, y_s+300), (x_e, y_e+300), (255, 255, 255), 2)
    pixel6 = frame[600, 300]
    b6 = pixel6[0]
    g6 = pixel6[1]
    r6 = pixel6[2]
    cv2.rectangle(frame, (30, 130), (70, 170), (int(b6), int(g6), int(r6)), -1)
    cv2.putText(frame, "6", (30, 130), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

    colorBGR7 = cv2.rectangle(frame, (x_s+150, y_s+300), (x_e+150, y_e+300), (255, 255, 255), 2)
    pixel7 = frame[600, 450]
    b7 = pixel7[0]
    g7 = pixel7[1]
    r7 = pixel7[2]
    cv2.rectangle(frame, (80, 130), (120, 170), (int(b7), int(g7), int(r7)), -1)
    cv2.putText(frame, "7", (80, 130), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

    colorBGR8 = cv2.rectangle(frame, (x_s+300, y_s+300), (x_e+300, y_e+300), (255, 255, 255), 2)
    pixel8 = frame[600, 600]
    b8 = pixel8[0]
    g8 = pixel8[1]
    r8 = pixel8[2]
    cv2.rectangle(frame, (130, 130), (170, 170), (int(b8), int(g8), int(r8)), -1)
    cv2.putText(frame, "8", (130, 130), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)


    cv2.imshow('camra',frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

capture.release()
cv2.destroyAllWindows()
```
<font color="red">＊frame[x, y]が　逆になってます
コードにかかれてるのは　
＊frame[y, x]
（numpyの仕様みたい？）
（よくわからず　申し訳ない)</font>


<br>
<br>
最初に　一つ表示できたということは　それを　９個に増やすだけです

```
 colorBGR0 = cv2.rectangle(frame, (x_s, y_s), (x_e, y_e), (255, 255, 255), 2)
 pixel0 = frame[300, 300]
 b0 = pixel0[0]
 g0 = pixel0[1]
 r0 = pixel0[2]
 cv2.rectangle(frame, (30, 30), (70, 70), (int(b0), int(g0), int(r0)), -1)
 cv2.putText(frame, "0", (30, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

```

<font color="red">colorBGR0,  pixel0,  b0,  g0,  r0,  (int(b0), int(g0), int(r0)</font>ここらの　０　の数字の部分を　１，２，３，４とかえていき
cv2.rectangle(frame, (開始X, 開始Y), (終点X, 終点Y), (int(b0), int(g0), int(r0)), -1)
cv2.putText(frame, "0", (開始X, 開始Y), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

開始X、開始Yと終点X　終点Yを　変えるだけです。
規則性があるので　５０ずつ増やすとかすればいいと思います。
<br>

画面上に表示する文字。

```
cv2.putText(frame, "0", (30, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)
```
”０”が表示したい　文字になります。
（３０，３０）どこの座標に表示するか（X,Y）で指定
cv2.FONT_HERSHEY_SIMPLEX　　文字のフォント？形？みたいです
↑のとなりにある　１，　は文字のサイズ
(0,0,0)は　文字の色
最後の　2)　２は文字の太さ

<br>
<br>

#サンプルコード（９カ所に増やす）を実行

![NO.2、サンプル２.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126388/f416477a-fbf2-4415-d45c-da22f48be84d.png)


これで　今　何色を取得しているのかがわかる

さすがに　ちょっと　コードが長いので
list, enumerate, zip関数をつかって　ちょっと　シンプルにします。
~~(めんどくさ、このままでいいじゃん)~~


#サンプルコード（９カ所に増やす list, enumerate, zip）

```python
import cv2

capture = cv2.VideoCapture(2)
capture.set(cv2.CAP_PROP_FRAME_WIDTH, 1080) # 横幅
capture.set(cv2.CAP_PROP_FRAME_HEIGHT, 720) # 縦幅


color_index =[[0,0,0],[0,0,0],[0,0,0],
            [0,0,0],[0,0,0],[0,0,0],
            [0,0,0],[0,0,0],[0,0,0]]
#Y縦　X横
frame_xy = [[300, 300],[300, 450],[300, 600],
            [450, 300],[450, 450],[450, 600],
            [600, 300],[600, 450],[600, 600]]

x_start = [280, 430, 580, 280, 430, 580, 280, 430, 580]
y_start = [280, 280, 280, 430, 430, 430, 580, 580, 580]
x_end   = [320, 470, 620, 320, 470, 620, 320, 470, 620]
y_end   = [320, 320, 320, 470, 470, 470, 620, 620, 620]

x_start2 = [30, 80, 130, 30, 80, 130, 30, 80, 130]
y_start2  = [30, 30, 30, 80, 80, 80, 130, 130, 130]
x_end2   = [70, 120, 170, 70, 120, 170, 70, 120, 170]
y_end2   = [70, 70, 70, 120, 120, 120, 170, 170, 170]


while True:
    ret, frame = capture.read()

    for k, (xs, ys, xe, ye, xs2, ys2, xe2, ye2) in enumerate(zip
            (x_start, y_start, x_end, y_end, x_start2, y_start2, x_end2, y_end2)):

        cv2.rectangle(frame, (xs, ys), (xe, ye), (255, 255, 255), 2)
        
        b1 = color_index[k][0]
        g1 = color_index[k][1]
        r1 = color_index[k][2]
        cv2.rectangle(frame, (xs2, ys2), (xe2, ye2), (int(b1), int(g1), int(r1)), -1)
        cv2.putText(frame, str(k), (xs2, ys2), cv2.FONT_HERSHEY_SIMPLEX, 1, (0,0,0), 2)

        #BGRの取得位置
        for i, (x, y) in enumerate(frame_xy):
          pixel = frame[x, y]
          b = pixel[0]
          g = pixel[1]
          r = pixel[2]
          BGR = [b,g,r] 
          color_index[i] = BGR
          print(color_index)

    cv2.imshow('camra',frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

capture.release()
cv2.destroyAllWindows()

```

急に　ちがうコードみたいですが　このコードでも同じ　結果になります。



![NO2,サンプル３-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1126388/8e72d495-7b40-cfb6-fc9e-c8a67ddb13fa.png)

enumatateとzipを一緒につかうことで　いっきに代入？することができます。
enumarateはインデックスをくれるので　
はじめに　ｋ　に０がはいります。
zipはまとめて　代入します。
赤い枠　
xs に x_start
ys に y_start
xe にx_end
,,,,
緑枠もおなじで
xs2　に x_start
....
順番にです。


一回目は

```
for k=0, (xs=280, ys=280, xe=320, ye=320, xs2=30, ys2=30, xe2=70, ye2=70) in enumerate(zip
            (x_start, y_start, x_end, y_end, x_start2, y_start2, x_end2, y_end2)):
```
そしたら　つぎの　for ループにいきます。
黄色い枠のところ　先ほどとおなじで　i　には０がはいります。

```
for i=0, (x=300, y=300) in enumerate(frame_xy)
```
そしたら　仮に　下のBGRを取得したら
BGR[0, 0, 255] 赤色
一番上の　color_indexの水色の枠　0　にはいります。
<br>
for k, (xs,ys,,,,,)
　　for i= 0~8, (x=300, y=450) in enumerate(frame_xy)
インデントがあるので　k　に　０がはいったら　 frame_xyが全部　インデックス０－８番目全部はいります
それが　おわったら　ｋ　に１がはいって　また　frame_xyが全部はいり　k に２　の繰り返し。



<font color="red">＊先ほど申し上げたことと同じですが
　このframeは（ｘ縦軸、ｙ横軸)になってるので注意です。
ほかは　ｘ横軸、　ｙ縦軸です。</font>

<br>
<br>
<br>
k  に　１がはいって　ピンクの枠がそれぞれ　入ります


```
for k=1, (xs=430, ys=280, xe=470, ye=320, xs2=80, ys2=30, xe2=120, ye2=70) in enumerate(zip
            (x_start, y_start, x_end, y_end, x_start2, y_start2, x_end2, y_end2)):

for i= 1, (x=300, y=450) in enumerate(frame_xy)


そしたら　仮に　下のBGRを取得したら
BGR[0, 255, 0]　緑色
一番上の　color_indexの水色の枠　1　にはいります。
```

print(color_index)としてるので
取得した　BGRが　ひったすら　プリントされます

<br>
キューブの枠の順番になっています

```
[[120,105,99]白0, [44,109,90]黄色1, [33,47,126]オレンジ2,
 [68, 25, 13]青3, [20, 17, 65]赤4, [77, 24, 11]青5,
 [20, 17, 69]赤6, [30, 50, 18]緑7, [20, 19, 66]赤8] 
```


最初と最後で　引数？代入する　x_sとかx_eがかえています
わかりにくいかもしれないですが　ゆるしてください。
雑なので　ご自身で　わかりやすいように変えてください


##参考サイト
[note.nkmk.me](https://note.nkmk.me/python-opencv-draw-function/)
python,opencvでお世話になってます