상세 컨텐츠

본문 제목

라즈베리파이로 magic mirror 만들기

취미/IOT

by 다휘 2024. 7. 25. 22:14

본문

옛날부터 라즈베리파이4를 이용해서 magic mirror를 사용하고 있었다.

 

magic mirror를 서버, 클라이언트 모드로 사용해서

 

서버는 집에 있는 좀 성능 괜찮은 미니 pc를 이용하고

 

라즈베리파이에서는 최소한의 리소스 및 설치만 하게 브라우저로 띄울수만 있게 했다.

 

작업과정을 크게 나눠보면

 

1. 서버 컴퓨터에다가 magic mirror2를 서버 모드로 실행

2. 라즈베리파이에 브라우저로 띄움

 

이렇게 두가지 과정이 된다.

 

구글 검색을 통해서 많이 뒤져보면 다양한 방법들이 많지만 대부분 라즈베리파이에다가 magic mirror 그냥 설치해버리고 띄우는 예제가 많다.

 

나는 그렇게 할 수 없는 이유가 있었는데

1. 라즈베리파이 4도 있고 3b+도 있는데, 4를 magic mirror에만 쓰기에는 뭔가 좀 아깝다

2. 3b+을 이용하고, 잘 된다면 이걸 제로2w사서 좀더 콤팩트 해지고 싶다

3. 홈 서버에다가 왠만한 서비스 기능은 다 몰아두고 싶다

 

그래서 원래 사용하고 있던 4를 떼서 작업실에 놔두고, 네트워크 프린터 호스팅용 + 장난감용으로 사용하고

서랍에 고이 모셔뒀던 이제 케이스 색이 다 바래버린 라즈베리파이3을 꺼냈다...

 

 

1. 서버 설치 과정

 

서버 컴퓨터는 지금 docker를 이용해서 다양한 서비스를 돌리고 있기 때문에 (게임 서버나.. 광고 차단 서버나.. homebridge 등등...) 여기에 그냥 컨테이너만 추가해서 올리면 간단하다.

 

이미 이런 블로그를 찾아본다는건 docker 사용법과 docker-compose 사용법은 잘 알고 있을꺼라 생각해서 설치 방법이나 이런것들은 생략함.

 

docker-compose.yml 파일

version: '3'

services:
  magicmirror:
    image: karsten13/magicmirror:latest
    container_name : magic_mirror 
    ports:
      - 8081:8080
    volumes:
      - ./magic_mirror/config:/opt/magic_mirror/config
      - ./magic_mirror/modules:/opt/magic_mirror/modules
      - ./magic_mirror/css:/opt/magic_mirror/css
    restart: unless-stopped
    command:
      - npm
      - run
      - server

 

그리고 docker-compose.yml 파일과 같은 경로에 magic_mirror 폴더와

그 하위에 config, modules, css 폴더를 만들어둔다.

 

또 ufw를 이용해서 포트 관리를 하기 때문에 8081 포트는 열어둔다.

 

magicmirror 실행하고 magic_mirror/config/config.js 파일 열어보면

 

다양한 설정들이 있는데 ipWhitelist에다가 내가 사용할 라즈베리파이 ip는 나중에 적어준다. 그리고 그냥 확인용으로 내가 쓰는 데스크탑 ip도 적어두면 좋음

 

그러고 magicmirror 실행하면 서버는 준비 끝

 

데스크탑에서 접속해가지고 잘 되는지 확인 해보자.

 

 

이런식으로 잘 뜬다 싶으면 된거

 

나는 몇가지 유명한 모듈들 깔아서 사용해가지고 이것저것 좀더 추가가 되어 있다.

 

설치한 모듈들 (config.js 파일 기준으로 그냥 이름만 적음)

- alert (기본)

- updatenotification (기본)

- clock (기본)

- calendar (기본, 개인적으로 사용하는 google calendar랑 연동해둠)

- weather (기본, openweathermap이랑 연동해둠)

- newsfeed( 기본, 연합뉴스 rss랑 연동해둠)

- MMM-MoonPhase ( 달 위상 띄워주는거)

- MMM-AirQuality (공기질 알려주는거)

- MMM-Wallpaper (나사 api랑 연동해서 우주 사진들 배경으로 띄워주게 해뒀다)

 

모듈들은 사용하는게 크게 어렵진 않다. apikey 이런거만 받을줄 안다면...

 

원래 검은 배경이었는데 wallpaper 모듈로 나사 api 연동이 가능하다길래 신기해서 해보고 액자처럼 쓰는중

 

2. 라즈베리파이에 띄우기

 

사실 이런류는 gpt 도움을 잘 받으면 왠만한건 잘 된다.

 

라즈베리에 띄우는 과정은 대충 2가지 정도만 하면 충분하다

 

1. kiosk 모드로 부팅하자마자 특정 주소의 브라우저 띄우기

2. 한글 폰트 설치하기

 

큰 골자는 이런데 하다보면 세세한 부분들을 좀 건드려줘야한다.

 

일단 라즈비안 이미지 설치하는거 부터..

 

1. 라즈비안 이미지

라즈베리파이 공홈 들어가면 raspberry pi Imager라고 sd카드에 이미지 쉽게 구울 수 있게 하는 툴이 있다. 옛날엔 이런거 없었는데.. 참 좋아졌다.

 

툴을 켜보면 디바이스 선택은 raspberry pi 3로,

운영체제는 raspberry pi os 32bit 짜리로 (legacy 버전이랑 그냥 32버전이랑 메뉴 같은게 좀 차이가 난다. gpt가 이런거 구분을 잘 못해서 중구난방으로 알려주기 때문에 그냥 32짜리로 설치)

 

그러고 설치 직전에 무슨 환경 설정 어쩌고 하는데, 환경설정 해두면 그냥 바로 ssh 로 접속해서 세팅할 수 있으니까 왠만하면 해둔다. wifi 활성화 하고 뭐 이것저것 한다고 키보드 꼽고 모니터꼽고 하면 귀찮다..

 

 

 

2. kisok 모드로 브라우저 띄우기

설치 후 부팅하고 나면 update, upgrade 한번씩 해주고

 

sudo apt install unclutter
sudo apt install surf
sudo apt install fonts-nanum

 

unclutter, surf, 나눔폰트를 설치해준다.

 

 

나는 kiosk 모드 쓸 때 surf 쓸껀데, 기본 내장되어 있는 크로미움은 메모리 사용량이 많아서 나약한 라즈베리파이3는 금방 뻗어버린다.

 

unclutter는 브라우저 켤때 마우스 커서 사라지게 해주는거고

surf는 경량화 브라우저다

나눔폰트는 한글 깨지는거 때문에 설치함

 

nano ~/.config/lxsession/LXDE-pi/autostart

 

autostart 파일을 만들어준다.

 

안에 내용물은

@xset s off
@xset -dpms
@xset s noblank
@unclutter -idle 0
@surf -F http://{magicmirror 서버 ip주소}:8081

 

이러고 재부팅 하면 된다.

 

그러면 부팅되고나서 알아서 매직 미러가 켜짐

 

 

이런 느낌으로 잘 뜬다.

 

모니터는 옛날에 쓰던걸 분해해서 벽에 걸 수 있도록 해뒀는데, 

밑에 기판 부분이 들어있는걸 어쩌진 못해서 그냥 저렇게 해두고 짐같은걸로 가려둠

 

 

삭막한 집에 그래도 벽에 전자 액자같은거라도 걸려있으니 좀 나은거 같긴하다

티스토리툴바