Nefry BT LED를 웹에서 제어하기 #nefry
참고: Nefry 클라우드는 테스트적으로 만들고 있으므로 갑자기 사라질 수 있습니다. 이용은 자신의 책임으로.
참고: Nefry 클라우드 (임시)를 만들었습니다.
버그라고 했으므로 그 중 수정 호스팅도 했으므로 여기에 키 넣는 것만으로도 할 수 있을 것 같습니다 h tps : // 0 비스케. 기주 b. 이오 / 네 fryc ぉ d /
환경
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 색상이 변경됩니다.
제어용 웹사이트 작성
다음 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>
사용해보기
설명할 때까지도 없을 정도로 간단한 양식 밖에 없습니다. 웃음
User와 apikey를 넣고 버튼을 누르면 Nefry BT의 LED 색상이 변경되었습니다!끝에
Nefry BT -> Web에는 몇 가지 구현이 있었지만 Web -> Nefry BT의 예는 적었기 때문에 도움이되면 다행입니다.
Reference
이 문제에 관하여(Nefry BT LED를 웹에서 제어하기 #nefry), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/n0bisuke/items/ff0d1ddf41eaa13fd72a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
