중급 예제

약간은 익숙하시거나 익숙해지셨나요? 그렇다면 조금더 깊이 다뤄볼까요?

압력센서-데이터 스트림 시각화

2014-08-12 12:54:54

개요 & 부품목록

*본 예제를 학습하기 전에 프로세싱에 대한 소개와 설치 를 먼저 학습해 주세요.
*본 예제를 학습하기 전에 압력센서를 활용하여 힘 측정하기 를 먼저 학습해 보시길 권장합니다.


정보시각화 data visualization 분야에서는 다양한 혹은 방대한 양의 정보를 사용자가 한눈에 알기 쉽게
시각적 요소로 보여주며 다양한 영역에서 활용되고 있습니다.

 

 

출처 : smashingmagazine

아두이노 역시 아날로그 센서값을  프로세싱과 연동하여 시각화 할수 있습니다.
본 예제에서 프로세싱 과 아두이노를 연동하여 센서의 센서값을 시각화 하는 방법에 대해 알아보고
다양한 영역으로 자신의 아이디어를 확장시켜 봅시다.


 

 

 

 

 

미리보기 동영상

 

 

 

 

 

부품목록

NO 부품명 수량 상세설명
1 아두이노  1 아두이노
2 브레드보드 1 브레드보드
3 점퍼 케이블 4 점퍼 케이블
4 압력 센서 1 가변저항
5 10㏀ 저항 1 저항

 

부품명 아두이노  브레드보드 점퍼케이블 압력센서 10㏀ 저항
파트 x1 x1 x4  x1 x1

 

 

 

 

하드웨어 Making

 

 

 

회로도

 

 

 

브레드보드 레이아웃

 

 

 

소프트웨어 Coding

아래의 코드를 아두이노에 업로드 합니다.
 

int sensorPin = A0;    // 압력센서를 아날로그 0번핀에 연결합니다.
int sensorValue = 0;  // 센서값을 초기화 합니다.
 
void setup() { 
  Serial.begin(9600); // 시리얼 통신을 준비합니다.
}
 
void loop() {
  sensorValue = analogRead(sensorPin)/4;// 센서값을 읽고(0부터 1023의 센서값) 4로 나누어 줍니다.
  Serial.write(sensorValue); //센서값을 시리얼 모니터로 출력합니다.
  delay(10);//10밀리초 만큼 대기합니다.
}


소프트웨어 & 하드웨어 설명

1. 스케치설명 - 아두이노

 

 

void setup() { 
  Serial.begin(9600); // 시리얼 통신을 준비합니다.
}
 
void loop() {
  sensorValue = analogRead(sensorPin)/4;// 센서값을 읽고(0부터 1023의 센서값) 4로 나누어 줍니다.
  Serial.write(sensorValue); //센서값을 시리얼 모니터로 출력합니다.
  delay(10);//10밀리초 만큼 대기합니다.
}


시리얼 통신을 통해 아두이노와 프로세싱간에 데이터를 주고 받을수 있습니다.
따라서 시리얼 모니터를 실행하고
그값을 시리얼 모닌터로 출력해주었습니다.

2. 스케치설명 - 프로세싱

아래의 코드를 프로세싱에 작성하고 실행을 합니다.

*아두이노에 먼저 아두이노 스케치를 업로드 합니다. 
*아두이노와 컴퓨터는 케이블로 연결되어 있어야 합니다.

 

 

 

 

//출처 : www.dustynrobots.com/news/seeing-sensors-how-to-visualize-and-save-arduino-sensed-data/ 
//한글주석 : www.kocoafab.cc
import processing.serial.*;//시리얼 통신 라이브러리를 불러옵니다.
Serial myPort;        // 불러온 라이브러리로부터 시리얼 포트를 생성합니다.

float xPos = 0;             // 그래프의 수평위치를 초기화 합니다.
 
void setup () {
  size(800, 600);        // 생성될 윈도우 창의 크기(가로,세로)를 설정합니다.
 
  // 사용 가능한 시리얼 포트를 나열합니다.
  println(Serial.list());
 
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
 
  background(#EDA430);// 배경색상을 설정합니다.
}
 
void draw () {
  //본 스케치에서는 draw(그리기)는 사용하지 않습니다.
}
 
void serialEvent (Serial myPort) {
  // 시리얼 포트로부터 데이터(Byte)를 읽습니다.
  int inByte = myPort.read();
  // 읽어 온 데이터 프린트 합니다.:
  println(inByte);
 
  float yPos = height - inByte;
  //#A8D9A7 컬러로 색을 그립니다 :
  stroke(#A8D9A7);
  line(xPos, height, xPos, height - inByte);
 
  // 그래프가 화면에 가장 끝자리로 위치하면 화면을 초기화 합니다.
  if (xPos >= width) {
    xPos = 0;
    // 초기화 시 배경색상을 재설정 합니다.
    background(#081640);
  }
  else {
    // 다음순서로 수평위치를 증가시킵니다.
    xPos++;
  }
}

 

 

 

  println(Serial.list());
 
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);


사용 가능한 시리얼 포트 리스트를 나열하고 통신을 위한 설정을 합니다.
Serial . list()[0] 로 연결한 첫 번째 포트는 아두이노가 연결되어 있어야 합니다.

연결이 원활하게 이루어지지 않는다면 , 아두이노 보드의 포트를 확인하고 해당번호를 []사이에 기입해주세요.

 

 

 

void serialEvent (Serial myPort) {
  // 시리얼 포트로부터 데이터(Byte)를 읽습니다.
  int inByte = myPort.read();
  // 읽어 온 데이터 프린트 합니다.:
  println(inByte);


압력센서로 부터 센서값을 읽어 Byte 로 표기합니다 .
이 Byte 값을 받아서,

 

 

 

 

float yPos = height - inByte;
  //#A8D9A7 컬러로 색을 그립니다 :
  stroke(#A8D9A7);
  line(xPos, height, xPos, height - inByte);


색상을 정하고 그래프의 높이값을 센서값으로 변경합니다.

 

 

 

 

if (xPos >= width) {
    xPos = 0;
    // 초기화 시 배경색상을 재설정 합니다.
    background(#081640);
  }
  else {
    // 다음순서로 수평위치를 증가시킵니다.
    xPos++;


만약 x위치가 가로 선상의 최대값(화면의 끝)과 같거나 클때,
x좌표의 위치를 초기화합니다.
최기화시 배경색을 #081640 의 컬로코드로 변경하고,
x좌표값을 계속 증가시킵니다.

 

 

 

 

kocoafabeditor

항상 진취적이고, 새로운 것을 추구하는 코코아팹 에디터입니다!

압력센서, 아두이노