Arduino - 웹 오실로스코프(지원 트리거)

이 프로젝트 정보

초보자라면 Arduino - Wifi에 대해 자세히 알아볼 수 있습니다.

데모

기능

사용자 인터페이스

작동 원리

Web Oscilloscope는 PHPoC에서 Web Serial Monitor를 수정한 것이므로 Web Serial Monitor가 어떻게 작동하는지 먼저 설명하겠습니다.

PHPoC 쉴드에는 "Web Serial Monitor"라는 내장 웹 앱이 있습니다. Arduino IDE의 직렬 모니터와 유사합니다. Arduino IDE에서 직렬 모니터의 차이점은 다음과 같습니다.

구체적으로 PHPoC Shield는 SPI를 통해 Arduino와 통신합니다. 사용자가 웹 브라우저에서 Web Serial Monitor에 접속할 때. 페이지가 로드된 후 페이지는 PHPoC Shield에 WebSocket 연결을 만듭니다. 이때 PHPoC Shield는 Arduino에 스택되어 Arduino TX 핀에서 데이터를 캡처한 다음 WebSocket을 통해 웹 브라우저의 Web Serial Monitor에 이 데이터를 보냅니다. Web Serial은 데이터를 수신하여 웹에 표시합니다.

이를 통해 사용자는 PC에서 데이터를 볼 수 있을 뿐만 아니라 모바일 또는 웹 브라우저를 지원하는 모든 장치에서 데이터를 볼 수 있습니다.

이제 웹 오실로스코프의 작동 방식을 살펴보겠습니다.

Web Oscilloscope는 마지막 부분을 제외하고 Web Serial Monitor와 동일하게 작동합니다.

Web Oscilloscope는 웹에 원시 데이터를 표시하는 대신 그래프에 데이터를 시각화합니다. 사용자가 UI를 조정하고 트리거를 수행할 수 있는 다른 기능이 추가되었습니다.

Arduino에서 전송되는 데이터 정보

Arduino는 ADC 핀(A0에서 A5까지)에서 데이터를 읽고 타임스탬프(마이크로초)를 읽습니다.

ADC 데이터는 전압으로 변환되어 다음 형식에 따라 타임스탬프와 함께 직렬 포트로 인쇄됩니다.

참고: 최대 6채널이지만 1,2,3채널의 데이터만 보낼 수도 있습니다.

소스 코드

소스 코드는 두 부분으로 구성됩니다.

사용 방법

다음을 입력하여 PC 또는 스마트폰의 웹 브라우저에서 웹 오실로스코프에 액세스합니다. http:// replace_ip_address /oscilloscope.php

신호 측정 방법:두 개의 와이어를 사용하면 됩니다. 하나는 GND에 연결하고 다른 하나는 Arduino의 모든 아날로그 핀에 연결합니다(A0 ~ A5). 이 두 핀을 신호를 확인하려는 지점에 연결합니다.

6채널이기 때문에 6개의 접지선이 필요합니다. 그러나 편의상 Arduino에는 두 개의 GND 핀만 있습니다. 더 많은 GND 핀을 확장하기 위해 아래와 같이 합니다.

초보자를 위한 최고의 Arduino 스타터 키트

Arduino 키트를 찾고 있다면 초보자를 위한 최고의 Arduino 키트를 참조하십시오.

함수 참조

코드

WebOscilloscope.inoArduino

#include #include #define AREF 5.0#define ADC_MAX 1023.0float ratio =AREF / ADC_MAX;void setup() { Serial.begin (115200); Phpoc.begin();}void loop() { //부호 없는 시스템 시간 읽기 long time_a =micros(); // 아날로그 값을 읽고 전압으로 변환:float voltageChannel0 =analogRead(A0) * ratio; float voltageChannel1 =analogRead(A1) * 비율; float voltageChannel2 =analogRead(A2) * 비율; float voltageChannel3 =analogRead(A3) * 비율; float voltageChannel4 =analogRead(A4) * 비율; float voltageChannel5 =analogRead(A5) * 비율; // 시스템 시간을 먼저 보냅니다. Serial.print(time_a); Serial.print(" "); // " " 또는 "\t"로 구분하여 각 채널의 값을 보냅니다. Serial.print(전압 채널0); Serial.print(" "); Serial.print(전압 채널1); Serial.print(" "); Serial.print(전압 채널2); Serial.print(" "); //Serial.print(voltageChannel3); //Serial.print(" "); Serial.print(전압 채널4); Serial.print(" "); //마지막 채널은 새 줄 문자와 함께 보내야 합니다. Serial.println(voltageChannel5);}

오실로스코프.phpPHP

<스타일>본문 { text-align:center; 배경색:#595959; 색상:흰색; 디스플레이:플렉스; justify-content:space- between;}.graph_container {display:inline-block;}.setting_container {display:inline-block; 플로트:오른쪽; 배경색:#595959; 패딩:0px; 너비:260px;}.setting { 정당화 내용:센터; 너비:260px; 패딩:3px; 디스플레이:플렉스; justify-content:space- between;}.button { 배경색:#999999; 테두리:없음; 색상:흰색; 패딩:5px; 텍스트 정렬:가운데; 디스플레이:인라인 블록; 글꼴 두께:굵게; 글꼴 크기:115%;}.button2, .select { 테두리:없음; 패딩:5px; 텍스트 정렬:가운데; 디스플레이:인라인 블록; 글꼴 두께:굵게; 글꼴 크기:115%;}.select {폭:100%; 배경색:#F2F2F2; 색상:#4CAF50;}.button_channel {테두리 반경:50%; 너비:14%;}.button_trigger {테두리 반경:4px; 너비:60%;}.button_go {테두리 반경:4px; 너비:35%;}.button_mode {테두리 반경:8px; 너비:32%;}.button_setting {테두리 반경:45%; 너비:33%;}.input_text {폭:50%; 배경색:#F2F2F2; 색상:#4CAF50;}.label {폭:50%; 배경색:투명; 색상:#4CAF50;}버튼:초점{ 외곽선:없음;}#knob { 패딩:5px;}
 
 
 <버튼 class="button button_channel" id="0">0 1  2 3 4 5 
 
  <입력 유형="텍스트" class="button2 input_text" id="trigger_value" value="1.5"> 
 
  <옵션 값=" 0">하락 상승  하락 및 상승  
 
 TRIGGER GO 
 
 자동 일반 단일 
 <캔버스 id=" 노브"> 
 ms/div
 V / div
 오프셋
 

회로도