/ WEB

Camp51.9 Kiosk Project (2)체온 입력칸 추가

Camp51.9_KioskProject (2)체온 입력칸 추가

html, css, javascript를 처음 공부하는 동시에 영등포고등학교 메이커스페이스 Camp51.9의 시설 이용 키오스크를 직접 개발하는 프로젝트.

개요

저번 글에서 메이커 스페이스를 위한 출입 웹 어플리케이션을 설계하고 구축하는 작업을 했습니다. 초기의 화면과 기능 구성은 처음 웹 개발을 공부하는 것이기 때문에 약 2개월 동안 가장 기본적인 틀을 잡았습니다. 어쩌면 힘들었을 수도 있지만 이 정도를 혼자서 독학하며 개발하다 보니 html에 대한 자신감이 생긴 것 같습니다. 이렇게 기본적인 틀을 잡아 주었으니 이제 살을 더할 차례입니다. 처음 개발목표에 체온 입력칸을 추가할것이라고 했습니다. 하지만 단순히 체온을 매니저가 측정해주고 직접 입력하는 것이 아닌 이용자가 자동으로 쉽게 측정할 수 있도록 아두이노와 파이썬을 활용하여 마스크 감지 인공지능 체온 측정 시스템을 구축하도록 할 것입니다.

개발 과정

목표하고 있는 과정은 이렇습니다.

  1. 이용자는 마스크를 착용한 채로 카메라 앞에 선다.
  2. 인공지능이 대상의 마스크 착용여부를 3초간 확인하고 체온측정을 진행한다.
  3. 단, 마스크를 착용하고 있지 않으면 체온측정을 진행하지 않고 초기화면으로 돌아간다.
  4. 체온측정을 마치면 자동으로 체온입력칸에 체온 정보가 입력된다.

기술

  • Python
    • 마스크 감지 인공지능을 구축하고 아두이노로 부터 받은 체온 측정 값을 웹에 전달합니다.
  • Arduino
    • 적외선 체온 센서를 활용하여 체온을 측정하고 파이썬 코드로 값을 전송합니다.
  • javascript
    • 파이썬 코드에서 전달 받은 체온 값을 웹에 출력해줍니다.

로그인 화면 수정

  • 기존 로그인 화면에서 체온 입력칸을 추가한 화면입니다.

마스크 감지 인공지능 구축

인공지능은 https://github.com/balajisrinivas/Face-Mask-Detection 이 분이 올려주신 코드와 데이터셋을 활용했습니다. 이 리포지토리를 다운 받아서 데이터셋을 학습시켜주면 .model 확장자의 결과가 나옵니다. 이 과정에서는 아나콘다3를 활용했습니다. 이 파일을 가지고 저는 다음과 같이 구축했습니다.

라이브러리

  • tensorflow>=1.15.2
  • keras==2.3.1
  • imutils==0.5.3
  • numpy==1.18.2
  • opencv-python==4.2.0.
  • matplotlib==3.2.1
  • scipy==1.4.1
  • selenium
  • firebase
  • serial (for Arduino)

코드

아두이노

int val;

void setup() {
  Serial.begin(9600);
}

void loop() {
  Serial.println(val++);
  delay(500);
}

체온센서의 값을 읽어서 시리얼 통신으로 보내는 간단한 코드입니다.


모두 납떔하고 레이저커터로 잘라 모양을 만들어주었습니다.

아두이노 연동(Python)

serial 라이브러리를 사용해 다음과 같이 아두이노 보드와 연동합니다.

ser = serial.Serial(
	port='COM6',
  	baudrate=9600,
)

웹 연동(Python)

selenium 라이브러리를 사용해 웹과 연동합니다. 파이썬에서 웹에 정보를 전달해야하기 때문에 파이썬에서 웹을 통제합니다.

driver = webdriver.Chrome(executable_path='chromedriver')
url = "file:///C:/CampKioskSystem/htmlProject/loginCamp.html"
driver.get(url)

selenium 라이브러리로 웹을 동작하기 위해서 사용하는 브라우저인 크롬의 chromedriver를 다운로드 받아 같은 위치에 저장해야 합니다.

코드 수정부

깃허브의 오픈 소스로 공개된 마스크 감지 인공지능 코드를 가져와서 구축하기 때문에 제 목적에 맞게 수정이 필요합니다. 인공지능이 동작하는 while문 안에 아두이노와 웹을 다루는 코드를 추가하여 수정해주었습니다.

if mask > withoutMask:
			#마스크착용 확률이 99% 초과라면
			if max(mask, withoutMask) * 100 > 99:	
				cnt += 1
				print(cnt)
				#cnt가 20이 되면(3초)
				if cnt > 20:
					if ser.readable():
                    	#아두이노에서 시리얼 통신으로 받은 체온값
						res = ser.readline()
						res = res.decode()[:-2]		
						res = float(res)
						#파이어베이스 동작부
						dir = db.reference('Temperature/tempTmp')
						dir.update({'null': res})
						#체온값 로드를 위해 새로고침
						driver.refresh()
						cnt = 0
				
if max(mask, withoutMask) * 100 < 99:
	cnt = 0

mask는 인공지능이 계산한 마스크를 착용하고 있는 확률입니다. 쓰고있다면 99.99%로 인식하기 떄문에 99%를 기준으로 잡습니다. 만약 99% 이하라면 시간을 나타내는 cnt를 0으로 초기화하고 인공지능이 다시 확인을 시작합니다. 마스크를 착용하고 3초가 지나면 파이썬에서 아두이노의 시리얼 통신을 받을 준비를 합니다. 여기서 손목으로 체온을 측정하면 아두이노가 측정 값을 시리얼로 보내고 파이썬이 자동으로 받아 res 변수에 다코딩하여 저장합니다. 그리고 저장된 값은 파이어베이스에 똑같이 저장되고 이를 웹이 가져와 출력하는 방식입니다. 이를 위해 웹을 새로고침 해줍니다.

결과

이것으로 마스크 감지 인공지능을 더한 자동 체온입력 시스템을 구축하였습니다. html을 이해하고 기존에 사용하던 기술(파이썬, 아두이노)들을 엮어서 개발하여 더 멋진 결과가 나온 것 같습니다. 다음으로는 구글의 파이어베이스와 스프레드 시트를 연동한 과정을 작성하겠습니다.

링크는 시연영상입니다.

영상

깃허브