5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 <meta name="description" content="TEST PAGE">
7 <meta name="author" content="salt">
9 <title>Tizen IoT</title>
11 <!-- 합쳐지고 최소화된 최신 CSS -->
12 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
13 <link href="css/style.css" rel="stylesheet">
17 <div id="main-container">
18 <div id="text-container">
19 <div id="project-title">Tizen IoT<br>Smart Surveillance Camera</div>
20 <div id="project-main-text">
22 <li class="step1">Captures images continuously with a USB camera</li>
23 <li class="step2">Detects motion of objects in the images</li>
24 <li class="step3">Controls servomotors to follow the motion</li>
25 <li class="step4">Sends the images to connected web clients</li>
26 <li class="step5">Displays a live view of images in each web client</li>
27 <li class="step6">Sends motion info to SmartThings Cloud</li>
28 <li class="step7">Displays motion info on SmartThings Mobile App</li>
29 <li class="step8 nobull"><span class="try-it-bullet">TRY IT!</span>You can manually control servomotors using the SmartThings Mobile App</li>
33 <div id="diagram-container">
34 <div id="diagram-bg"></div>
35 <div id="diagram-title">Tizen IoT made in Craftroom</div>
36 <div id="diagram-top" class="diagram-main">
37 <div class="arrow-02 arrow step2"></div>
38 <div class="d-text-tizen step3 step8">Peripheral IO</div>
39 <div class="arrow-04 arrow step3 step8"><span class="caption-arrow">moving</span></div>
40 <div class="d-text-tizen step3 step8">Servomotor</div>
42 <div id="diagram-middle" class="diagram-main">
43 <div class="d-text-tizen step1" id="d-text-camera">Camera<span class="caption-text">capturing</span></div>
44 <div class="arrow-01 arrow step1"></div>
45 <div class="d-text-tizen step2" id="d-text-vision">Vision<span class="caption-text">analysing</span></div>
46 <div class="arrow-01 arrow step2"></div>
47 <div class="d-text-tizen step4">IoT.js</div>
48 <div class="arrow-06 arrow step4"><span class="caption-arrow">live streaming (<span id="fps">0</span> fps)</span></div>
49 <div class="d-text-st step5">Web Client<span class="caption-text">(this screen)</span></div>
51 <div id="diagram-bottom" class="diagram-main">
52 <div class="arrow-03 arrow step2"></div>
53 <div class="d-text-tizen step6 step8">SmartThings SDK</div>
54 <div class="arrow-05 arrow step6 step8"><span class="caption-arrow">transferring</span></div>
55 <div class="d-text-st two-line step6 step8">SmartThings<br>Cloud</div>
56 <div class="arrow-04 arrow step6 step8"></div>
57 <div class="d-text-st two-line step7 step8">SmartThings<br>Mobile App</div>
59 <div id="diagram-right">
60 <div class="arrow-07 arrow step5"></div>
61 <div class="arrow-08 arrow step7 step8"></div>
63 <div id="mobile-detection">Motion<br>Detected</div>
64 <div id="mobile-caption" class="image-caption">Mobile Device</div>
68 <div id="camera-container">
69 <div id="canvas-container">
70 <canvas id="camera-view-canvas" width="640" height="480"></canvas>
72 <div id="camera-view-bg"></div>
73 <img id="camera-view"/>
74 <div id="camera-view-caption" class="image-caption">Camera Live View</div>
78 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
79 crossorigin="anonymous"></script>
80 <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
81 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
83 <script src="js/app.js"></script>
84 <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>