Help us understand the problem. What is going on with this article?

Nefry BTのLEDをWebから制御する #nefry

More than 1 year has passed since last update.

Nefryクラウドを使ってWebブラウザからNefry BTのLEDの色を変えてみます。

注: Nefryクラウドはテスト的に作ってるので急になくなる場合もあります。ご利用はご自身の責任で。

参考: Nefryクラウド(仮)をつくってみた

バグってたのでそのうち修正 ホスティングもしたのでここにキー入れるだけでも出来そうです https://n0bisuke.github.io/nefrycloud/

環境

  • Nefry BT R2
  • Nefry ライブラリ v1.1.1
  • Arduino IDE v1.8.5
  • macOS High Sierra
  • Google Chrome v63

Nefryクラウド登録

こちらから登録します。

APIキーを取得しましょう。

Nefry BTにプログラムを書き込む

Nefry CloudライブラリをArduino IDEに読み込ませます。

以下のスケッチをNefry BTに書き込みます。

led.ino
#include <Nefry.h>
#include <NefryCloud.h>

NefryCloud nefryCloud;

void onpush(String message);

void setup() {
  nefryCloud.begin("user","apikey");//サイトで登録したuser,メールで受け取ったapikeyを入力してください
  nefryCloud.on(onpush);
  Nefry.setProgramName("NefryBT Nefry Cloud");
  analogRead(A0);
}

void loop() {
  nefryCloud.loop();
}

void onpush(String message) {//Nefryクラウド(仮)から通知が来ます
  Nefry.print("onpush : ");
  Nefry.println(message);

  if(message.equals("red")){
    Nefry.setLed(255,0,0);
  }else if(message.equals("green")){
    Nefry.setLed(0,255,0);
  }else if(message.equals("blue")){
    Nefry.setLed(0,0,255);
  }
}

これでNefryクラウドから情報が送られてきたらLEDの色が変わるようになりました。

制御用のWebサイト作成

以下のhtmlファイルを作成し、ブラウザで確認します。

index.html
<html>
    <head>
        <meta charset="utf-8">
        <title>Nefry BT LED制御するやつ</title>
    </head>

    <body>
        <h1>Nefry BT LED制御するやつ</h1>

        <div>
            User: <input type="text" id="user" />
        </div>

        <div>
            API Key: <input type="text" id="apikey" />
        </div>

        <div>
            LED Color: 
            <input type="button" class="red" value="red" />
            <input type="button" class="green" value="green" />
            <input type="button" class="blue" value="blue" />
        </div>

        <a href="http://cloud.nefry.studio:1880/nefrysetting/" target="_blank">API Keyの取得</a>

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            'use strict';

            const $buttons = document.querySelectorAll('input[type=button]');
            const BASE_URL = `http://cloud.nefry.studio:1880/nefrysetting/setdata`;

            const ncPost = (ref) => {
                const USER = document.querySelector('#user').value;
                const APIKEY = document.querySelector('#apikey').value;
                const COLOR = ref.toElement.value;
                const API_ENDPOINT = `${BASE_URL}?user=${USER}&key=${APIKEY}&data=${COLOR}`

                axios.post(BASE_URL,{
                    user: USER,
                    key: APIKEY,
                    data: COLOR
                })
                .then(response => console.log(response))
                .catch(error => console.log(error));

                //GETの場合
                // axios.get(API_ENDPOINT)
                // .then(response => console.log(response))
                // .catch(error => console.log(error));
            }

            $buttons[0].addEventListener('click', ncPost);
            $buttons[1].addEventListener('click', ncPost);
            $buttons[2].addEventListener('click', ncPost);

        </script>

    </body>
</html>

使ってみる

説明するまでもないくらいシンプルなフォームしかないです。笑

Userapikeyを入れてボタンを押すとNefry BTのLEDの色が変わりました!

終わりに

Nefry BT -> Webにはいくつか実装がありましたが、 Web -> Nefry BTの例は少なかったので参考になれば幸いです。

n0bisuke
プロトタイピング専門スクール「プロトアウトスタジオ」で教えたりしてます。 プロフ -> https://dotstud.io/members/n0bisuke
https://protoout.studio
dotstudio
全ての人がモノづくりを楽しむ世界を目指して活動しています。
https://dotstud.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした