RaspberryPiで習得したnunchuckの値をmilkcocoaを通じて、ブラウザでnunchuckの挙動の可視化をしたい
https://qiita.com/tfujiwar/items/31ba0623c44eb71b0b72
現在、上記URLのようなシステムを作成しています。
しかし、ブラウザには、Wiiヌンチャクの状態が表示されません。
また、milkcocoaのデータストアには、データが格納されません。
該当のソースコード
Raspberry Pi のソースコード
#!/usr/bin/env python # coding:utf-8 try: from import_directory.Nunchuck.RaspberryPi import nunchuck #for python3.0 except ImportError: from nunchuck import nunchuck #for python2.7 try: from import_directory.python_sdk.milk_cocoa import milkcocoa as milkcocoa #for python3.0 except ImportError: from milkcocoa import milkcocoa as milkcocoa #for python2.7 # nunchuckとmilkcocoaの準備 try: wii = nunchuck.nunchuck() #for python3.0 except AttributeError: wii = nunchuck() #for python 2.7 APP_ID = "xxxxxxxxxxxx.mlkcca.com" API_KEY = "xxxxxxxxxxxx" API_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" try: milkcocoaClient = milkcocoa.Milkcocoa.connectWithApiKey(APP_ID, API_KEY, API_SECRET, useSSL=False, blocking=True) except AttributeError: milkcocoaClient = milkcocoa.Milkcocoa.connect(APP_ID, API_KEY, useSSL=False, blocking=True) datastore = milkcocoaClient.datastore("nunchuck") print'While starts!' #for python2.7 while True: # ボタンとジョイスティックの状態を取得し、送信 joyx = wii.joystick_x() joyy = wii.joystick_y() butz = wii.button_z() print(joyx, joyy, butz) #for python3 #print joyx, joyy, butz #for python2.7 datastore.send({"joyx":joyx, "joyy":joyy, "butz":butz}) #send: 通知する。 datastore.push({"joyx":joyx, "joyy":joyy, "butz":butz}) #push: 保管と通知
受信側
Windows PCのブラウザ側のindex.html
<!DOCTYPE html> <html> <head> <title>Milkcocoa</title> <meta http-equiv="content-type" charset="utf-8"> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div id="pointer"></div> <script type="text/javascript" src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
Javascript main.js
// ジョイスティックの出力値の範囲 var min_x = 34; var max_x = 226; var min_y = 25; var max_y = 217; var API_ID = "xxxxxxxxxxxx.mlkcca.com"; var API_KEY = "xxxxxxxxxxxxxxxx"; var API_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // Milkcocoaの準備 app-id, API-key, API-secretは各自の値を入力すること。 //var milkcocoa = new MilkCocoa(API_ID); //var milkcocoa = new MilkCocoa('xxxxxxxxxxxx.mlkcca.com'); var milkcocoa = MilkCocoa.connectWithApiKey(API_ID, API_KEY, API_SECRET); //MilkCocoaのインスタンスを作ることで、コネクションを確立できる。DataStoreの取得やログイン機能等もこのインスタンスを通して行う。 //new MilkCocoa(host) host:MilkCocoaのデータストアのホストへのURLをString型で渡す。ホストサーバーへのURLはapp-id.milkcca.comとなっており、app-idはそれぞれのアプリに固有のIDで、アプリケーションの作成の時に取得できる。 var ds = milkcocoa.dataStore("nunchuck"); //DataStoreオブジェクトを取得する。このDataStoreオブジェクトを介してデータストアを操作することができる。 //dataStore(path):path データストアのパスを指定する。 戻り値:指定したパスへのDataStoreオブジェクトを返す。 // データが送られた時の処理 ds.on("send", function(d) { var left = (d.value.joyx - min_x) / (max_x - min_x) * 100; var top = (max_y - d.value.joyy) / (max_x - min_y) * 100; jQuery('#pointer').animate({left: left+"%", top: top+"%" } ,300); $('#pointer').queue([]); if (d.value.butz == true) { $('#pointer').addClass('shoot'); } else { $('#pointer').removeClass('shoot'); } });
main.css
#pointer { width: 50px; height: 50px; border-radius: 25px; background-color: #4e83ff; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; } .shoot { background-color: #ff4e4e !important; /*使用したプロパティを最優先で使用すること*/ }
###Raspberry Piにての実行
ヌンチャク自体は、認識されています。
$sudo python main_nunchuck.py While starts! (122, 134, False) .....
ヌンチャクのZボタンを押すと以下のように変わります。よって、ヌンチャクの認識は大丈夫です。
(122, 134, True)
###ブラウザの実行環境(localhost)
XAMPPのApacheを使用しています。http://localhost/dashboard/
をクロームで入力すると、XAMPP Apache + MariaDB + PHP + Perl
のホームページが表示れるので、localhostの設定は、問題ないはずです。
C:\xampp\htdocs\nunchuck_status\index.html
C:\xampp\htdocs\nunchuck_status\main.css
C:\xampp\htdocs\nunchuck_status\main.js
を置いています。
http://localhost/nunchuck_status/
を入力すると、htmlが起動します。
###milkcocoaの環境
認証済みクライアント以外を接続不可にする。
をONにしています。
新しいAPI KeyとAPI Secretのペアを生成する
をONにし、その生成されたペアをラズパイのpythonに組み込んでいます。(今回は、非表示にしています。)
環境
Python 2.7.13
Raspberry Pi 3 B+
Milkcocoa
よろしくお願いします。
あなたの回答
tips
プレビュー