다시 쓰는 라즈베리 파이 Flask 와이파이 모듈에 의한 웹브라우저 시간 정보 출력 파이선 3 코딩

라즈베리 파이선3 코드에서 현재의 시간 정보를 불러 들여서 이 정보를 파라메터화 하여 Flask 모듈의 지원 하에 웹으로 전송하도록 한다. 웹에서는 파이선으로부터 시간 정보를 받아 HTML로 작성된 시간 출력 코드에서 시간 파라메터로 설정된 부분에 파라메터로 넘어온 시간 정보를 출력하게 된다. 이러한 방법은 Flask 말고도 여타의 Framework 에서도 비슷한 형식을 취한다.

 

이미 아두이노 ESP8266WifFi NodeMCU DHT11 온습도센서 코딩에서 C/C++로 읽어 들인 온습도 데이터를 스미트 폰 웹브라우저에 출력하기 위해서 비슷한 방법을 사용하였다. 그밖에도 우베브라우저 아날로그 시계에서 온습도계를 추가하기 위해 웹브라우저 내에 위치한 Java Script 코드에 파라메터로 온습도 데이터를 출력해본 경험도 참조하기 바란다.

 

아래에서 hello-template.py 예제 코드를 분석해 보도록 하자.

Flask 기본 틀에 해당하는 부분은 그대로 고정이며 수정이란 있을 수 없다.

Flask root 데렉토리 설정 부분은 괄호 따옴표 안의 내용은 코드에 따라 변경 될 수 있다

함수 설정은 파이선 코딩이지만 templateData 설정과정은 내용물을 제외하고는 Flask 기본 틀에 해당한다. 여기에서는 title 부분에 해당하는 문자열 내용 즉 Raspberry ⚫⚫⚫ 와 time에 해당하는 문자화된 시간 정보 즉 timeString을 파라메타로 웹에 전달하게 된다.

 

⚫⚫⚫.now() 명령에서 실 시간 데이터를 받아서 now.strftime()에서 원하는 디스플레이 양식으로 정리하여 timeString에 문자열로 저장한다.

return render-template() 도 Flask 기본 틀에 해당하며 내용 물만 코딩하면 된다. ‘main.html’ 은 파라메타를 받는 웹브라우저의 HTML 코드명을 뜻한다. 따라서 Flask 모듈 사용의 규칙 상 hello-template.py 코드가 들어 있는 디렉토리에 templates 로 명명된 디렉토리가 생성되어 있어야 하며 그 안에 main.html을 넣어 두어야 한다. main.html은 텍스트 편집기를 사용하여 편집하면 된다.

 

마지막 Flask 기본 틀에서 app.run()의 내용물은 코딩이 가능하다. 특히 예제에 따라서는 port 번호를 지정하는 경우가 있는데 Flask 모듈은 아예 5000으로 지정되어 있기 때문에 굳이 포트 번호를 코딩할 필요는 없다. Django 의 경우는 8000을 사용하며 일반 용도로 80을 사용하는 경우도 있음을 참조하되 Flask 모듈은 반드시 5000 임에 유의하자. 혹 바꾸고 싶다면 다음과 같이 수정 후 실행시켜 보자.

 

app.run(port=5678,debug=True, host=’0.0.0.0’)

 

단 웹을 불러 낼 때 바뀐 port 번호를 웹 url 주소의 마지막에 붙여야 한다.

127.0.0.1:5678

 

main.html HTML 코드를 살펴보자. <title>태그 부분에 {{ title }}의 용법은 Framwork 분야에서는 보편화된 표현이다. 즉 파이선의 templateData의 ‘title’과 매치되는 부분이다.

아래쪽 부분의 {{ time }} 은 파이선의 templateData의 ‘time’ 에 매치되는 부분으로 그 해당 변수가 timeString 이므로 파이선에서 특정 양식으로 정리된 시간 정보를 파라메타로 넘겨받아 출력된다.

이러한 용법은 아두이노 NodeMCU의C/C++로 작성된 코드에서 웹브라우저의 HTML이나 JavaScript 코드에 파라메타를 client.print(⚫⚫⚫)에 의해서 넘겨주는 용법과 유사하다.

아래의 출력 화면에서 연월일 및 시간 정보를 볼 수 있다. 이 시간 정보는 일회용이며 시간 업데이트가 필요하면  업데이트 아이콘을 누르자.