나노 33 IoT + EC/pH/ORP + WebAPK

tx_Characteristic은 웹 페이지가 표시할 EC 측정과 같은 정보를 장치가 보내는 곳입니다. rx_Characteristic은 웹페이지에서 실행할 명령을 수신하는 곳입니다.

이 프로젝트는 ArduinoBLE 라이브러리를 사용합니다. 보시면 몇 가지 다른 특성을 선언했다는 것을 알 수 있습니다. 이 프로젝트는 BLEStringCharacteristic을 사용합니다. String 유형을 다룰 것이기 때문에 더 간단하지만 BLECharCharacteristic을 선택할 수도 있습니다. 또는 BLEByteCharacteristic 소수의 사람들 중에서.

또한 특성을 부여할 수 있는 몇 가지 속성이 있습니다. tx_특성 BLENotify 있음 옵션으로. 즉, 웹 페이지의 값이 변경되면 알림을 받게 됩니다. rx_Characteristic BLEWrite 있음 그러면 웹페이지에서 수정할 수 있습니다. 다른 사람들도 있습니다.

그런 다음 이 모든 것을 하나로 묶는 약간의 코드 접착제가 있습니다.

BLE.setLocalName("uFire BLE");
BLE.setAdvertisedService(uFire_Service);
uFire_Service.addCharacteristic(tx_Characteristic);
uFire_Service.addCharacteristic(rx_Characteristic);
BLE.addService(uFire_Service);
rx_Characteristic.setEventHandler(BLEWritten, rxCallback);
BLE.advertise(); 

다소 자명하지만 몇 가지 요점을 살펴보겠습니다.

rx_Characteristic.setEventHandler(BLEWritten, rxCallback); 

변경되는 값에 대한 알림을 이용하는 곳입니다. 이 줄은 rxCallback 함수를 실행하도록 클래스에 지시합니다. 값이 변경될 때.

BLE.advertise(); 모든 일이 시작되는 것입니다. BLE 장치는 외부에 있고 연결할 수 있음을 알리는 작은 정보 패킷을 주기적으로 보냅니다. 그것 없이는 보이지 않을 것입니다.

텍스트 명령

앞서 언급했듯이 이 장치는 간단한 텍스트 명령을 통해 웹페이지와 통신합니다. 힘든 작업이 이미 완료되었으므로 모든 것이 구현하기 쉽습니다. uFire 센서는 명령을 보내고 받기 위한 JSON 및 MsgPack 기반 라이브러리와 함께 제공됩니다. 설명서 페이지에서 EC 및 ISE 명령에 대한 자세한 내용을 읽을 수 있습니다.

이 프로젝트는 바이너리인 MsgPack 형식과 달리 작업하기 쉽고 읽기가 조금 더 쉽기 때문에 JSON을 사용합니다.

다음은 이 모든 것이 어떻게 연결되는지에 대한 예입니다.

웹페이지

이 프로젝트의 웹 페이지는 프런트 엔드에 Vue.js를 사용합니다. 백엔드가 필요하지 않습니다. 또한 작업을 좀 더 단순하게 유지하기 위해 빌드 시스템이 사용되지 않습니다. 일반 폴더, javascript용 js, CSS용 css, 아이콘용 에셋으로 분할됩니다.

그것의 html 부분은 특별한 것이 아닙니다. 스타일링을 위해 bulma.io를 사용하고 사용자 인터페이스를 만듭니다. 에서 많은 것을 알 수 있습니다. 부분. 모든 CSS와 아이콘을 추가하지만 특히 한 줄도 추가합니다.

이는 모든 PWA 작업을 수행하는 manifest.json 파일을 로드하는 것입니다. 이 웹페이지를 앱으로 전환할 수 있음을 휴대폰에 알리는 일부 정보를 선언합니다.

자바스크립트는 대부분의 흥미로운 일이 일어나는 곳입니다. 파일로 나누어져 있고, app.js에는 모든 UI 관련 변수 및 기타 몇 가지 사항과 함께 Vue 웹 페이지를 가져오는 기본 사항이 포함되어 있습니다. ble.js에는 블루투스 기능이 있습니다.

자바스크립트 및 웹 블루투스

첫째, 이것은 Chrome 및 Opera에서만 작동합니다. 다른 브라우저에서 지원했으면 좋겠지만 어떤 이유로든 지원하지 않습니다.

app.js를 살펴보면 펌웨어에서 사용한 것과 동일한 UUID를 볼 수 있습니다. 하나는 uFire 서비스용이고 하나는 tx 및 rx 특성용입니다.

이제 ble.js를 보면 connect() 및 disconnect() 기능.

connect() 함수에는 UI를 동기화 상태로 유지하는 몇 가지 논리가 포함되어 있지만 대부분 특성에 대한 정보를 주고받도록 설정합니다.

웹 블루투스를 다룰 때 몇 가지 특이한 점이 있습니다. 연결은 버튼을 누르는 것과 같은 일종의 물리적 사용자 상호 작용에 의해 시작되어야 합니다. 예를 들어 웹 페이지가 로드되면 프로그래밍 방식으로 연결할 수 없습니다.

연결을 시작하는 코드는 다음과 같습니다.

this.device =await navigator.bluetooth.requestDevice({
 필터:[
 {
 namePrefix:"uFire"
 }
 ], 
 optionalServices:[this.serviceUuid]
}); 

필터:및 optionalServices 섹션은 모든 단일 BLE 장치가 표시되는 것을 방지하는 데 필요합니다. 필터 섹션만 있으면 된다고 생각하겠지만 optionalService 부분도 필요합니다.

위의 코드는 연결 대화 상자를 표시합니다. Chrome 인터페이스의 일부이며 변경할 수 없습니다. 사용자는 목록에서 선택합니다. 앱이 연결할 장치가 하나만 있더라도 보안 문제로 인해 사용자는 여전히 이 선택 대화 상자를 거쳐야 합니다.

나머지 코드는 서비스 및 특성을 설정하는 것입니다. 펌웨어 알림 콜백과 유사한 콜백 루틴을 설정했습니다.

service =await server.getPrimaryService(this.serviceUuid);
characteristic =await service.getCharacteristic(this.txUuid);
characteristic.startNotifications()를 기다립니다.
특성 .addEventListener(
 "characteristicvaluechanged",
 this.value_update
 ); 

this.value_update 이제 tx 특성에 대한 새로운 정보가 있을 때마다 호출됩니다.

마지막으로 하는 일 중 하나는 5초마다 정보를 업데이트하도록 타이머를 설정하는 것입니다.

value_update()는 새로운 JSON 정보가 들어오기를 기다리고 UI를 업데이트하는 긴 함수입니다.

ec.js, ph.js 및 orp.js에는 정보를 검색하고 장치를 보정하는 명령을 보내는 많은 작은 기능이 포함되어 있습니다.

이를 시도하려면 웹 블루투스를 사용하려면 HTTPS를 통해 제공되어야 한다는 점을 염두에 두어야 합니다. 로컬 HTTPS 서버에 대한 많은 옵션 중 하나는 serve-https입니다. 펌웨어가 업로드되고 모든 것이 연결되고 웹페이지가 제공되면 모든 것이 작동하는 것을 볼 수 있습니다.

PWA 부분

웹페이지를 실제 앱으로 전환하는 몇 가지 단계가 있습니다. Progressive Web Apps는 이 프로젝트에서 사용하는 것보다 훨씬 더 많은 작업을 수행할 수 있습니다.

시작하려면 많은 파일을 생성해야 합니다. 첫 번째는 manifest.json 파일입니다. 앱 매니페스트 생성기(App Manifest Generator)가 그 중 하나인 이 작업을 수행하는 소수의 사이트가 있습니다.

이해해야 할 몇 가지 사항:

json 파일로 끝납니다. index.html과 함께 웹페이지의 루트에 바로 배치해야 합니다.

다음으로 필요한 것은 서비스 워커입니다. 다시 말하지만, 그들은 많은 일을 할 수 있지만 이 프로젝트는 이 앱을 오프라인으로 액세스할 수 있도록 캐싱만 사용할 것입니다. 서비스 워커 구현은 대부분 상용구입니다. 이 프로젝트는 Google 예제를 사용하고 캐시할 파일 목록을 변경했습니다. 도메인 외부에 파일을 캐시할 수 없습니다.

FavIcon Generator로 이동하여 아이콘을 만드세요.

마지막은 Vue mounted()에 코드를 추가하는 것입니다. 기능.

mounted:function () {
 if (내비게이터의 'serviceWorker') {
 navigator.serviceWorker.register('service-worker.js');
 }
 }, 

그러면 브라우저에 작업자가 등록됩니다.

모든 것이 제대로 작동하는지 확인할 수 있으며, 그렇지 않은 경우 Lighthouse를 사용하여 이유를 알 수 있습니다. 사이트를 분석하고 모든 것을 알려줍니다.

모든 것이 제대로 작동했다면 웹페이지로 이동하면 Chrome에서 팝업 배너와 함께 설치할 것인지 묻습니다.

코드

Arduino 코드 생성

깃허브