아두이노 아날로그 게이지 디자인 응용

이전 글에서 아날로그 게이지를 나름 예쁘게 디자인해 보았습니다.

 

이번 글에서는 약간 응용하여 변화를 주도록 하겠습니다.

 

먼저 디자인 결과물은 이렇게 표시됩니다.

 

1.3인치 128X64픽셀 OLED 아날로그 게이지 디자인

 

변경된 것은 게이지 원의 크기가 작아졌고, 바늘침이 원을 넘어서 표시되도록 하였습니다.

값 표시도 작은 글씨로 하였고 바늘침 기준점도 살짝 위로 올렸습니다.

 

이 디자인의 스케치입니다.

 

#include "U8glib.h" U8GLIB_SH1106_128X64 u8g(U8G_I2C_OPT_DEV_0|U8G_I2C_OPT_FAST); // 게이지를 그리기 위해 필요한 변수들 int px1=64, py1=50;   // 바늘침의 시작 위치 int px2, py2;         // 바늘침의 그려지는 위치 int circle, pin;      // 게이지 큰원, 바늘침 길이 int angle;            // 변수값에 따라 바늘침이 움직여야 하는 각도값 double rad;           // px2, py2 위치값을 알아내기 위한 라디언값 // 데이터를 처리하기 위한 변수들 (필요시 추가로 선언) int val; void setup(void) {   circle = 40;          // px1, py1을 기준으로 큰 원을 63으로 설정   pin = 44;             // 바늘침 크기 설정 } void Disp() {   angle = map(val, 0, 3000, 180, 360);    // 180~360구간만 사용 (****중요)   rad = angle * 3.14 / 180;               // 각도를 라디안값으로 변환   px2 = px1+(cos(rad)*pin);               // 바늘침 x좌표 위치 계산   py2 = py1+(sin(rad)*pin);               // 바늘침 y좌표 위치 계산      u8g.firstPage();    do {                  // 겉에 가장 큰 원 2겹으로     u8g.drawCircle(px1, py1, circle, U8G_DRAW_UPPER_RIGHT);     u8g.drawCircle(px1, py1, circle, U8G_DRAW_UPPER_LEFT);     u8g.drawCircle(px1, py1, circle-2, U8G_DRAW_UPPER_RIGHT);     u8g.drawCircle(px1, py1, circle-2, U8G_DRAW_UPPER_LEFT);          u8g.drawLine(px1, py1, px2, py2);                      // 바늘침 그리기     u8g.drawDisc(px1, py1, 5, U8G_DRAW_UPPER_RIGHT);       // 바늘침 시작점 반원 그리기     u8g.drawDisc(px1, py1, 5, U8G_DRAW_UPPER_LEFT);             u8g.setFont(u8g_font_profont11r);                     // 6*10크기의 폰트를 사용     u8g.setPrintPos(50,30);     u8g.print(val);   }   while( u8g.nextPage() ); } void loop(void) {   val = random(100, 3000);   Disp();   delay(500); }

코드를 변경한 곳은 딱 3군데입니다.

 

int px1=64, py1=50;

이 코드는 바늘침 기준점을 살짝 위쪽으로 올려주었습니다.

 

circle = 40; 
pin = 44;

이 코드는 게이지 원의 반지름을 40으로 줄였고, 바늘침의 크기를 44로 해서 게이지 원보다 크게 그려지도록 설정하였습니다.

 

이 3줄로 게이지를 얼마든지 디자인 변경할 수 있습니다.

원하시는대로 응용하여 예쁜 게이지를 만들어 보시기 바랍니다.

 

참 쉽죠~^^;;