#UIFlow의 BLE UART를 사용하는 #M5 Stack_코어 2(#M5 Stack)에서 브라우저로 데이터 전송 및 차트 작성
● [JavaScript2020] MQTT가 수신한 데이터를 Smoothie Charts(smoothie.js) 이외의 실시간 도표화: Chart.js와 플러그인 사용하기 - Qiita
https://qiita.com/youtoy/items/252f255c9d794bf3d964
개요
우선 이번 시도의 내용이 움직이는 모습을 보세요.
M5 Stack Core2의 터치스크린을 터치할 때 이 x 좌표나 y 좌표의 값(비 단추를 누르면 변경할 수 있는 구조가 있음)을 얻어 BLE를 통해 브라우저로 보냅니다.브라우저에서 받은 값을 사용하여 차트를 실시간으로 그립니다.
BLE UART#UIFlow를 계속 시도하십시오.#M5Stack_Core2 화면에서 터치한 좌표를 BLE로 브라우저에 전송하여 실시간으로 그래프로 묘사합니다.중간에 보내는 값을 x좌표 또는 y좌표로 설정하거나 교체합니다.#M5Stack pic.twitter.com/wHvN4vdoB8 — you (@youtoy) January 20, 2021
프로그램
M5Stack Core2에서 실행되는 UIFlow 프로그램과 브라우저 측면에서 실행되는 HTML+JavaScript의 출처p>
UIFlow
UIFlow 측면은 다음과 같은 구조를 사용합니다.p>
- A 버튼을 누르면⇒ 300ms 간격으로 이동하기 시작하는 타이머
- B 버튼을 누르면⇒ 전환해서 얻을 수 있는 값(터치스크린에 있는 터치 위치의 좌표)이 x/y 중 어느 것입니까
- C 버튼 누르기⇒ 타이머 정지
- 타이머의 처리⇒ BLE를 통해 터치스크린에서 터치한 위치의 좌표x/y를 전송하고 화면에도 표시
타이머 처리의 마지막 조각입니다. "텍스트로 변환"을 넣지 않으면 잘 움직일 수 없기 때문에 넣었습니다.
위의 블록은 화면의 라벨에 표시되는 것은 필요하지 않지만 텍스트로 전환하는 프로그램을 각각 보았습니다. 화면은 뒷면에 표시되어 텍스트로 전환하는 처리를 했습니다.p>
HTML＋JavaScript
브라우저 측 처리(BLE 관련 처리 및 차트 묘사 처리)는 다음과 같습니다.
사용할 때 이 파일을 HTML 파일로 설정하고 브라우저에서 열려면 먼저 화면의 연결 버튼을 눌러 짝짓기부터 시작합니다.다음은 M5 Stack Core2 측면을 조작하는 프로세스입니다.p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UIFlow と BLE</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<h1>UIFlow と BLE ＋ グラフ描画</h1>
<button onclick="onStartButtonClick()">接続</button>
<br />
<canvas id="myChart"></canvas>
<script>
const UUID_1 = "6e400001-b5a3-f393-e0a9-e50e24dcca9e";
const UUID_2 = "6e400002-b5a3-f393-e0a9-e50e24dcca9e"; // Write、今回は使わない
const UUID_3 = "6e400003-b5a3-f393-e0a9-e50e24dcca9e"; // Notify
let bluetoothDevice;
let characteristic;
async function onStartButtonClick() {
try {
console.log("Requesting Bluetooth Device...");
const device = await navigator.bluetooth.requestDevice({
filters: [{ namePrefix: "m5ble" }],
optionalServices: [UUID_1],
});
console.log("Connecting to GATT Server...");
const server = await device.gatt.connect();
console.log("Getting Service...");
const service = await server.getPrimaryService(UUID_1);
console.log("Getting Characteristic...");
characteristic = await service.getCharacteristic(UUID_3);
await characteristic.startNotifications();
console.log("> Notifications started");
characteristic.addEventListener(
"characteristicvaluechanged",
handleNotifications
);
} catch (error) {
console.log("Argh! " + error);
}
}
const ctx = document.getElementById("myChart").getContext("2d");
let chart = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
data: [],
},
{
data: [],
},
],
},
options: {
scales: {
xAxes: [
{
type: "realtime",
realtime: {
delay: 200,
},
},
],
},
},
});
async function handleNotifications(event) {
if (characteristic) {
try {
const value = event.target.value;
const inputValue = new TextDecoder().decode(value);
console.log(inputValue);
chart.data.datasets[0].data.push({
x: Date.now(),
y: inputValue,
});
chart.update({
preservation: true,
});
} catch (error) {
console.log("Argh! " + error);
}
}
}
</script>
</body>
</html>
도표 묘사 주위의 처리에 대한 설명은 기사에 실린 다음과 같은 보도를 보십시오p>
● [JavaScript2020] MQTT가 수신한 데이터를 Smoothie Charts(smoothie.js) 이외의 실시간 도표화: Chart.js와 플러그인 사용하기 - Qiita
https://qiita.com/youtoy/items/252f255c9d794bf3d964
Reference
이 문제에 관하여(#UIFlow의 BLE UART를 사용하는 #M5 Stack_코어 2(#M5 Stack)에서 브라우저로 데이터 전송 및 차트 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/youtoy/items/1bf6e9390b5dc5d2ba51텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
