[스마트미러] 라즈베리파이를 활용한 스마트미러 만들기 : 화면 커스텀

 

2022.08.15 - [Project & Event : 프로젝트 & 이벤트/Project : 프로젝트] - [스마트미러] 라즈베리파이를 활용한 스마트미러 만들기 : 제작 계기 및 준비물

2022.08.16 - [Project & Event : 프로젝트 & 이벤트/Project : 프로젝트] - [스마트미러] 라즈베리파이를 활용한 스마트미러 만들기 : 라즈베리파이 기본 세팅 및 Magic mirror 다운로드

 

이전 글을 통해 초기의 스마트미러 화면을 구성했다. 이제 남은 건 자신이 원하는 화면으로 설정하는, 즉 커스텀하는 방법에 대해 설명하겠습니다.

화면 커스텀은 매뉴얼에 맞게 커스텀했습니다.

 

스마트미러 초기 화면

위 사진은 이전 글에 보였던 초기의 스마트미러 화면이다. 화면 커스텀을 위해서는 config/config.js 파일의 수정해야 하며, 레이아웃에 맞게 배치를 해야 한다.

그리고 화면을 끄는 방법은 Contorl + Q이다.

 

Magic mirror layout

위 사진은 화면의 레이아웃이므로 참고하면 된다.

 

 

 

 

1. 사용 안 하는 문구 지우기

먼저 초기 화면 중앙에 보이는 Hi, Sexy!! 문구와 하단의 뉴스 헤드라인을 없애보자.

 

뉴스 헤드라인 부분

위 사진은 뉴스 헤드라인 부분을 주석 처리한 모습으로 주석 처리함으로 인해 해당 부분이 화면에 더 이상 보이지 않을 것이다.

중앙의 Hi, Sexy!! 부분

위 사진은 중앙의 Hi, Sexy!! 부분을 주석 처리한 것으로 주석 처리하여 더 이상 화면에 안 보일 것이다.

 

2. 날씨 정보 한국으로 변경

날씨 정보를 변경하기 위해서는 locationID 및 apiKey가 필요하다. 먼저 아래의 사이트에서 회원가입을 한 후 apikey를 발급받는다.

Members

회원 가입을 한 후 발급받은 apikey를 복사하여 config.js 파일의 apiKey에 붙여 넣는다.

 

그다음으로 한국에 맞는 locationID를 찾아야 한다.

Find - OpenWeatherMap

위 사이트에서 한국의 ID를 찾을 수 있다.

 

한국의 날씨 정보

위 사진과 같이 해당 사이트에서 Seoul, KR을 검색한 후 나온 결과에서 제일 위에 것을 선택한다.

 

서울의 날씨 정보

locationID를 찾아야 하는데 페이지를 아무리 뒤져도 ID는 나오지 않으며, Contorl + F를 이용하여 찾아도 안 나온다. 해당 ID는 URL을 잘 보면 쉽게 찾을 수 있으니 여러분들은 고생하지 마세요...

서울의 locationID는 1835848이다. 본인의 apikey와 locationID를 config.js  파일에 붙여 넣고 실행을 한다.

 

날씨 설정을 한 모습

날씨에 대한 설정을 완료하게 되면 위 사진과 같이 해당 지역의 날씨 정보가 나타난 것을 볼 수 있다. 이렇게 날씨 정보를 수정할 수 있다.

다음으로는 좌측에 있는 캘린더를 한국에 대한 정보로 변경한다.

 

 

 

 

3. 캘린더 정보 한국으로 변경

캘린더의 정보를 한국으로 변경

캔린더의 내용을 한국으로 변경하기 위해서는 위 사진과 같이 설정하면 된다. 내용적인 것은 url 정보를 변경하는 것 말고는 없어 자세한 내용은 생략하겠습니다. 그리고 추가적으로 글자의 크기가 작아 글자의 크기를 확대했습니다.

 

4. 글자크기 변경

화면에 보이는 글자의 크기를 변경하기 위해서는 CSS/main.css 파일을 수정하여 글자의 크기를 수정해야 한다.

 

글자 크기 변경

위 사진과 같이 main.css 파일에서 font-size의 크기를 변경한다.

 

모든 설정이 끝난 스마트 미러

위 사진은 디자인 적인 부분은 모두 완료된 스마트미러이다. 좌측에는 시간 및 한국 캘린더, 우측에는 서울의 날씨가 나와있는 것을 볼 수 있다.

 

다음 글에서는 자동실행 설정에 대해 알아보겠습니다.