10.6. 대시보드 만들기#

카메라의 JSON API는 curl에는 좋지만, 소유자는 휴대폰을 URL로 향하게 하여 무언가를 보고 싶어 합니다. 즉, API와 함께 카메라에서 HTML, JS, CSS를 제공해야 한다는 뜻입니다.

10.6.1. 파일 시스템에서 제공하는 정적 파일#

microdot.Response.send_file()은 카메라의 파일 시스템에서 파일을 읽어, 확장자로부터 추론한 올바른 Content-Type과 함께 되돌려 보냅니다. 라우팅 테이블 맨 아래의 포괄(catch-all) 라우트 하나가 API 라우트에 일치하지 않은 모든 것을 전송합니다:

@app.get('/<path:filename>')
async def static(request, filename):
    if '..' in filename or filename.startswith('/'):
        abort(403)
    return Response.send_file('/sdcard/static/' + filename)

지난 페이지의 <path:filename> 변환기는 슬래시를 포함하는 세그먼트와 일치합니다 – app.js와 css/site.css 둘 다 통과합니다. 두 줄짜리 안전성 검사는 ..이나 절대 경로로 /sdcard/static/을 벗어나려는 모든 경로를 거부합니다 – 이것이 없으면 호기심 많은 클라이언트가 ../../boot.py나 /flash/secrets.txt를 읽을 수 있습니다. send_file() 자체는 어떤 정화(sanitization)도 하지 않습니다: 넘겨받은 경로가 무엇이든 그대로 엽니다.

10.6.2. 대시보드 파일#

카메라의 /sdcard/static/ 아래에 있는 세 개의 파일:

<!-- /sdcard/static/index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Backyard cam</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Backyard cam</h1>
    <img id="stream" src="/stream.jpg">
    <label>Threshold:
      <input id="threshold" type="range" min="0" max="100">
      <span id="threshold-value"></span>
    </label>
    <h2>Recent events</h2>
    <ul id="events"></ul>
    <script src="app.js"></script>
  </body>
</html>

// /sdcard/static/app.js
const slider = document.getElementById('threshold');
const sliderValue = document.getElementById('threshold-value');

async function loadConfig() {
    const r = await fetch('/config');
    const cfg = await r.json();
    slider.value = cfg.threshold;
    sliderValue.textContent = cfg.threshold;
}
loadConfig();

slider.addEventListener('change', async () => {
    sliderValue.textContent = slider.value;
    await fetch('/config', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({threshold: parseInt(slider.value)}),
    });
});

/* /sdcard/static/style.css */
body { font-family: sans-serif; max-width: 720px; margin: 1em auto; }
img#stream { width: 100%; }

HTML은 MJPEG 스트림을 곧바로 <img>에 로드합니다 – 브라우저가 multipart 응답을 투명하게 처리합니다. 슬라이더는 페이지 로드 시 /config에서 임계값을 읽고, 변경될 때마다 새 값을 다시 게시합니다.

10.6.3. MIME 타입과 압축#

send_file()은 파일의 확장자를 읽고 microdot.Response.types_map에서 Content-Type을 선택합니다. .html은 text/html, .js는 text/javascript, .css는 text/css, .jpg는 image/jpeg가 됩니다. 대시보드에 추가한 확장자(.svg, .ico)는 이미 등록되어 있습니다. 알 수 없는 것은 application/octet-stream으로 기본 설정됩니다 – 새 매핑을 추가하려면 시작 시점에 Response.types_map을 한 번 확장하세요.

미리 압축해 둔 자산(style.css.gz, app.js.gz)의 경우 compressed=True를 전달하면 microdot가 .gz 파일을 Content-Encoding: gzip과 함께 제공합니다. 브라우저는 투명하게 압축을 해제하고, 페이지 로드마다 수 KB를 절약하게 됩니다.

이제 소유자는 http://yard-cam.local/index.html을 열어 실시간 피드, 현재 임계값, 그리고 비어 있는 이벤트 로그를 봅니다.