dashboard/public/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <meta charset="utf-8">
   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">
   8
   9     <title>Tizen IoT</title>
  10
  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">
  14 </head>
  15
  16 <body>
  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">
  21                 <ul>
  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>
  30                 </ul>
  31             </div>
  32         </div>
  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>
  41             </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>
  50             </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>
  58             </div>
  59             <div id="diagram-right">
  60                 <div class="arrow-07 arrow step5"></div>
  61                 <div class="arrow-08 arrow step7 step8"></div>
  62                 <div id="mobile">
  63                     <div id="mobile-detection">Motion<br>Detected</div>
  64                     <div id="mobile-caption" class="image-caption">Mobile Device</div>
  65                 </div>
  66             </div>
  67         </div>
  68         <div id="camera-container">
  69             <div id="canvas-container">
  70                 <canvas id="camera-view-canvas" width="640" height="480"></canvas>
  71             </div>
  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>
  75         </div>
  76     </div>
  77     <!-- jQuery -->
  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>
  82
  83     <script src="js/app.js"></script>
  84     <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
  85 </body>
  86
  87 </html>