3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TJBot Zero用にWeb UIを作った話

Posted at

まず、TJBot Zeroとは…

fig1.jpg

RaspberryPi Zero WHを基盤として作る、段ボール(というか厚紙)のロボットです。
作り方やレシピについては、様々な方によって紹介されていますが、設計書も公開されており電子工作初心者でも作りやすい内容となっています。
(一番の難所は部品の調達かもしれません…)
また、BMXUG TJBot Fan Workshopにより、ハンズオンも運営されています。
(大盛況なので抽選になっていますが…)

(関連サイト)

そんなロボットに一工夫を…

休日を使って作成して子供達(幼児)に見せたところ大好評で、おしゃべりするおもちゃとして大いに楽しんでくれました。名前は「ななこ」ちゃんと言うらしいです:relaxed:
が、公開されているTJBot Zero用のレシピNODE-REDのコーディング用GUIから操作するものばかりなので、LEDの点灯や会話のアクションを行う時には大人の手助けが必要です。
それならば、Web GUIを作ってリモコン的な役割を持たせたら面白いかなーと思い、サクッと作ってみました。

作り方

node-red-dashboadを使いました。
まずは、RaspberryPiに、インストールしていきます。私の場合は下記のコマンドでインストールできました。

sudo npm --unsafe-perm -g install node-red-dashboard

インストールが出来たら、あとは必要なパーツをダッシュボードとして埋め込んでいきます。
この時に、各機能についてはREST API化して出来るだけ再利用が出来る様に工夫をしています。

ダッシュボードの画面イメージ

dashboad-ui.PNG

ダッシュボードのフロー

dashboad-flow.PNG

LEDを点灯させるフロー

led-on.PNG

LEDを消灯するフロー

led-off.PNG

Watson AssistantとTextToSpeechを使ってお話をするフロー

※リクエストパラメータとして、Speechを受け取り、それをWatson Assistantへ連携しています。その返答を音声化します。
speak.PNG

最後に

この方法だとHTMLを作る必要すらなくこの様なGUIを作る事が出来るので、挑戦してみてはいかがでしょうか~。
※ちなみにもっとすごい例はこちら

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?