#UIFlow의 BLE UART를 사용하는 #M5 Stack_코어 2(#M5 Stack)와 브라우저의 양방향 무선 통신

17147 단어 M5stackCore2JavaScriptWebBluetoothuiflowM5stack
최신 UIFlow(M5 Stack 시리즈의 시각적 프로그래밍 환경)에 BLE 통신을 구현하기 위한 블록이 추가되었기 때문에 이전에는 M5 Stack Core2와 브라우저 간의 BLE 통신(브라우저 측면에서는 웹 블루투스 API 사용)을 시도했다.
● [JavaScript2020] #UIFlow의 BLE UART 사용 브라우저 중 #M5 Stack_코어 2(#M5 Stack)에 문자 보내기 - Qiita
　 https://qiita.com/youtoy/items/3da58570972803134f6c
이 때 양방향 통신을 시도하지 않고 브라우저에서 M5Stack Core2로만 문자열을 보냅니다.
따라서 이번에도 M5 Stack Core2에서 브라우저에 문자열을 보내 양방향 통신을 시도해 봤다.

주의사항


처음에 소개한 기사에 앞서 쓴 다음 기사에는 현재 UIFlow의 BLE UART를 사용할 수 있는 것이'M5 Stack Fire'인지'M5 Stack Core2'인지 기재되어 있다.
● #UIFlow의 BLE UART를 사용하여 문자 교환 #M5 Stack_Core 2에서 시도됨(#M5 Stack) - Qiita
　 https://qiita.com/youtoy/items/0aeac01927d60c33f421

양방향 통신을 실현하다.


이번에는 실시 내용을 주로 실었다.

UIFlow에서 구성 프로그램 만들기


프로비저닝


화면에 태그를 배치하고 일본어를 처리할 수 있도록 글꼴을'Unicode24'로 선택했습니다.

프로그램


블록을 조합하여 만드는 절차는 다음과 같다.

브라우저 측면 소스 코드


브라우저 측면에서 M5 Stack Core2에서 데이터를 수신하여 화면에 표시하거나 M5 Stack Core2에 데이터를 보내는 소스는 다음과 같습니다.HTML 파일로 로컬로 저장합니다.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>UIFlow と BLE</title>
  </head>

  <body>
    <h1>UIFlow と BLE</h1>
    <button onclick="onStartButtonClick()">接続</button>
    <br />
    <button onclick="sendMessage()">テキスト書き込み</button>
    <br />
    <textarea id="text"></textarea>

    <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_A, characteristic_B;
      const textarea = document.getElementById("text");

      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_A = await service.getCharacteristic(UUID_2);
          console.log("Getting Characteristic...");
          characteristic_B = await service.getCharacteristic(UUID_3);
          await characteristic_B.startNotifications();
          console.log("> Notifications started");
          characteristic_B.addEventListener(
            "characteristicvaluechanged",
            handleNotifications
          );
        } catch (error) {
          console.log("Argh! " + error);
        }
      }

      async function sendMessage() {
        if (!characteristic_A) {
          return;
        }
        const text = "aaa";
        const arrayBuffe = new TextEncoder().encode(text);
        try {
          await characteristic_A.writeValue(arrayBuffe);
        } catch (error) {
          console.log("Argh! " + error);
        }
      }

      async function handleNotifications(event) {
        if (characteristic_B) {
          try {
            let value = event.target.value;
            const text = new TextDecoder().decode(value);
            textarea.textContent = text;
            console.log(text);
          } catch (error) {
            console.log("Argh! " + error);
          }
        }
      }
    </script>
  </body>
</html>
UUID 3개는 작성첫머리에 실린 이전의 보도할 때 조사됩니다.

양방향 통신 시도


브라우저에서 위의 HTML 파일을 열고 페이지의 연결 버튼을 눌러 M5 Stack Core2와 페어링하십시오.
그런 다음 브라우저에서 열린 페이지의 쓰기 테스트 버튼을 누르면 M5 Stack Core2 화면 배경의 텍스트와 텍스트가 변경됩니다.또한 M5 Stack Core2의 C 버튼을 누르면 배경 색상이 처음 색상으로 돌아갑니다.
또한 M5 Stack Core2의 A 버튼, B 버튼을 각각 눌러 브라우저에서 열린 페이지의 텍스트 영역에 텍스트를 표시합니다.이 문자는 M5 Stack Core2에서 보낸 내용을 표시합니다.
실제 동작의 상황은 다음과 같다.
BLE UART#UIFlow#M5Stack_Core2와 브라우저의 양방향 무선 통신을 사용합니다.M5 Stack Core2 버튼을 누르면 텍스트 데이터가 브라우저의 텍스트 영역에 표시되거나 브라우저 측면에서 버튼을 누르면 M5 Stack Core2 배경색 등의 동작이 변경됩니다.#M5Stack — you (@youtoy) pic.twitter.com/oXLKmIk13F
동작이 좋다p>
그러나 프로그램에서'수신 데이터'라는 문자를 표시해야 하는데 단말기의 디스플레이에서'수신 데이터'로 바뀌었기 때문에 다자간 문자의 부분은 검사해야 할 부분이 있는 것 같다p>

[추기] 브라우저 옆에 시각화 처리를 넣은 제품을 만들어 봤어요.


M5Stack Core2의 터치스크린 터치 위치 좌표를 전송 데이터로 브라우저 측면에서 실시간으로 묘사p>

●#UIFlow의 BLE UART를 사용한 #M5 Stack_Core 2(#M5 Stack)에서 브라우저로 데이터 전송 및 도표화 - Qiita

　 January 19, 2021



Linux-4.15.1 커널을 컴파일할 때 "error: openssl/bio.h: No such file or folder"
괄호 일치 M

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage