質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.07%

RaspberryPiで習得したnunchuckの値をmilkcocoaを通じて、ブラウザでnunchuckの挙動の可視化をしたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 457

BlueberryPi

score 13

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

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る