코코아팹은 누구나 창의적 아이디어를 현실로 만들어 낼 수 있도록
만들고, 공유하고, 배울 수 있는 터전이
되고자 합니다.
아이디와 비밀번호를 잊으셨나요?아이디 / 비밀번호 찾기
코코아팹 회원이 아니신가요? 회원가입
2014-08-12 12:54:54
*본 예제를 학습하기 전에 프로세싱에 대한 소개와 설치 를 먼저 학습해 주세요.
*본 예제를 학습하기 전에 압력센서를 활용하여 힘 측정하기 를 먼저 학습해 보시길 권장합니다.
정보시각화 data visualization 분야에서는 다양한 혹은 방대한 양의 정보를 사용자가 한눈에 알기 쉽게
시각적 요소로 보여주며 다양한 영역에서 활용되고 있습니다.
아두이노 역시 아날로그 센서값을 프로세싱과 연동하여 시각화 할수 있습니다.
본 예제에서 프로세싱 과 아두이노를 연동하여 센서의 센서값을 시각화 하는 방법에 대해 알아보고
다양한 영역으로 자신의 아이디어를 확장시켜 봅시다.
NO | 부품명 | 수량 | 상세설명 |
1 | 아두이노 | 1 | 아두이노 |
2 | 브레드보드 | 1 | 브레드보드 |
3 | 점퍼 케이블 | 4 | 점퍼 케이블 |
4 | 압력 센서 | 1 | 가변저항 |
5 | 10㏀ 저항 | 1 | 저항 |
부품명 | 아두이노 | 브레드보드 | 점퍼케이블 | 압력센서 | 10㏀ 저항 |
파트 | x1 | x1 | x4 | x1 | x1 |
아래의 코드를 아두이노에 업로드 합니다.
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
항상 진취적이고, 새로운 것을 추구하는 코코아팹 에디터입니다!