linux系のosが入っているとの事で、先日遅ればせながらM5stackのunitv2を購入致しました。
金額が1万弱でM5stackシリーズでは少々割高ではありますが、なんといってもM5stickC程の小ささでかつカメラが付いていてなおlinuxが入っていると。。これは言わばシングルコンピューターボードのraspberrypiと同じであります。名刺サイズどころかなんだろ、ブラックサンダーサイズ位になっています。素晴らしい。
ただまあ性能はraspberrypi3とか4には及ばないけど、それでもこのサイズにlinuxが入っている事は色々出来そうな予感がしますね。
なんでもunitv2は「AIカメラ」に特化しているようで、様々な画像処理機能を手軽に扱えて、それを外部デバイスとつなげたりしてIOTやらに役立てるのが本筋なそうな。
ただ、私はこのサイズでlinuxが扱えるなら、めっちゃ小型な「2足歩行ロボ」が作れるんじゃないか？と思いましたので、本筋とはかなりズレますが、とりあえずunitv2にwebサーバーを立てて、htmlで操作画面をぶち込み、jsとcgiでpythonスクリプトを制御してサーボモーターを動かせる仕組みを作ってみようと思いました。（まあかなり無駄な事をやっているのは承知ですが。。）
とりあえず、結論から言えば「可能」ですので、これから備忘録としてまとめていこうかと思います。
無意味な事かもしれませんが、なにかひとつでもお役に立てたなら幸いです。
今回は、「unitv2でWEBサーバーを立ててカメラ画像を埋め込んでみる」所までをまとめようかと思います。
初めに
unitv2はクセが強い
初めに、unitv2は「想像してたんとちゃう。。」でした。というのも、まず「ターミナルが自由に扱えない」です。sudo等の管理者権限が使えないので、設定の変更やファイルの追加などが一切できません。
デフォルトでunitv2のipを打ち込めば、ブラウザからAIカメラに関する機能が色々使えるのですが、それも有線（USB）で接続した状態じゃないと出来ない。
したがって、最初ははっきりいってlinuxの恩恵はほぼ皆無のように感じました。後々アップデートで色々解禁されていくとの情報はありましたが。（現在はアップデートでsudoが使えるようになっているようですね。）
ところが、我らがTwitterの猛者たちが、この問題を次々と解決してくれるのです。
sudo使えない問題
まずJupyter Notebookがよく分からなかったんですが、これはWebブラウザからPythonのプログラムを実行することのできるツールみたいで、unitv2は基本これを使うようになっているっぽいです。
そこで先人方が、これやるとsudo使えるようになるよ～と。ほんと、凄いですよね。化け物ですよね。
とりあえず初期はこれしか方法が無かったので、皆これを参考にしてたと思います。
WIFIつながらない問題
こちらはラズパイの設定とかと同じですかね。linuxに詳しければイージーなんでしょうかね？とにかく私は全く知りませんでしたので、今回は色々と勉強になりました。
これでステーションモードですが、unitv2を家庭の無線LANに接続できます。つまり、USBで接続せずとも、unitv2のipを同じLAN環境下のデバイスからブラウザでアクセスすれば、unitv2に立てたサーバーにアクセスが可能になります。
SSHで必要ファイルを作成する
Tera Term等を使って、unitv2にssh接続し、WEBサーバーに配置するファイルを作成します。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cam"> <img src="http://ローカルIP/○○"> </div> <main> <ul> <div class="a"> <li id="forward" class="ledoff">前進</li> </div> <div class="bc"> <div class="b"> <li id="left" class="ledoff">左旋回</li> </div> <div class="n"> <li></li> </div> <div class="c"> <li id="right" class="ledoff">右旋回</li> </div> </div> <div class="d"> <li id="backward" class="ledoff">後退</li> </div> </ul> </main> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html> |
適当な場所にフォルダを作成し、その配下にhtmlファイルを作成します。一応サーボモーターの操作画面としています。カメラの画像も埋め込みたいので、今回はunitv2で元々ストリーミング配信しているカメラ映像のURLをそのまま張り付けています。URLは、unitv2のカメラ画像を表示させた状態でchromeのデベロッパーツールで確認すると分かります。(ローカルIP/video_feed)
続いてCSS。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
* { margin: 0px; padding: 0px; } body { max-width: 600px; font-size: 25px; width: 100%; -webkit-touch-callout: none; -webkit-user-select: none; } img { width: 100%; } main { height: 40vh; background: skyblue; } ul { display: block; height: 40vh; list-style: none; padding-top: 10px; } .bc { display: flex; } .a ,.bc, .d { height: 12vh; } li { width: 100px ; height: 90% ; margin-left: auto; margin-right: auto; background: yellow; } .b { margin-left: auto; } .c { margin-right: auto; } ul li { text-align: center; } .a li, .b li, .c li, .d li { border: solid 1px; } .ledon { background: #f88888; } .n li { background: skyblue; } a:active { color: #ff2020; } |
スタイリングしているだけです。CSSはhtmlと同じ階層に配置する事とします。
動作確認
それでは、とりあえずこの状態で、htmlの格納場所でpythonのhttp serverを起動します。
python3 -m http.server 8000
その後、ブラウザからunitv2のip:8000にアクセスします。↓
ちなみに、カメラ映像は初めに起動（unitv2のデフォルトのポートのやつ）を起動させてからじゃないとカメラ映像が反映しないので注意です。
それでは、次回は「uart」のシリアル通信についてまとめようかと思います。（unitv2は実はi2cが使えない。。）
「SSHで必要ファイルを作成する」という項目についてですが、今のところはパソコン内にフォルダを作成し、その配下にhtmlとCSSファイルがが配置完了であり、Tera Term上でunitv2にssh接続も完了しました。その後は、作ったフォルダをwebサーバーに配置する方法がちょっとわかりませんが、説明させていただけないでしょうか？
すみませんよろしくお願いいたします。
はじめまして、管理人です。
質問についてですが、先ず、unitv2にWEBサーバーを立てなければなりません。
そしてそのサーバーのドキュメントルートにhtmlファイルを配置する必要があります。
とりあえず簡易的にサーバーを立てるのならば、python http.serverが簡単です。
方法は以下の通りです。
unitv2のindex.htmlがある階層に移動し、そこでpython http.serverを立ち上げる。↓
python -m http.server 8000
これでhtmlファイルが公開されます。