IoT 도어락¶

모바일 앱과 웹에서 동작하는 스마트 IoT 도어락 시스템을 쉽게 만들 수 있습니다.

이 예제에서는 Flask 프레임워크를 사용했습니다. Node.js 또는 다른 언어, 프레임워크를 사용할 수 있습니다.

_images/iot_door_lock.gif

소스코드¶

서버 door_lock.py

from dynamikontrol import Module
from flask import Flask, request, render_template

module = Module()

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/change', methods=['POST'])
def change():
    is_locked = request.form['is_locked']

    if is_locked == 'true':
        module.motor.angle(85)
        module.led.off(color='r')
        module.led.on(color='g')
    else:
        module.motor.angle(-45)
        module.led.off(color='g')
        module.led.on(color='r')

    return {'result': True}

if __name__ == '__main__':
    app.run()
    module.disconnect()

클라이언트 templates/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>IoT Door Lock System</title>
  </head>

  <body>
    <div class="d-flex justify-content-center mt-5">
      <h5>IoT Door Lock System</h5>
    </div>
    <div class="d-flex justify-content-center">
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="lockSwitch">
        <label class="custom-control-label" for="lockSwitch">Lock the Door</label>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(function() {
        $('#lockSwitch').change(function(e) {
          $.ajax({
            method: 'POST',
            url: '/change',
            data: { is_locked: this.checked }
          })
          .done(function(msg) {
            console.log(msg);
          });
        });
      })
    </script>
  </body>
</html>