smartthings-plugin/plugin/index.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <!-- Stylesheet Template Bulma IO-->
   5                 <meta charset="utf-8">
   6                 <meta name="viewport" content="width=device-width, initial-scale=1">
   7                 <meta http-equiv="X-UA-Compatible" content="ie=edge">
   8                 <title>Smart Surveillance Camera</title>
   9                 <link rel="stylesheet" href="css/bulma.min.css">
  10                 <link rel="stylesheet" href="css/bulma-switch.min.css">
  11                 <link rel="stylesheet" href="css/helper.css">
  12         </head>
  13
  14         <body>
  15                 <!-- Action bar-->
  16                 <div class="columns is-marginless is-mobile" style="background-color:#fafafa;">
  17                         <div class="column is-narrow">
  18                                 <figure class="image is-24x24 margin-left-s" onclick="backAction()">
  19                                         <img src="res/board_ic_arrow_left.png">
  20                                 </figure>
  21                         </div>
  22                 </div>
  23
  24                 <!-- Left -->
  25                 <div class="dividecolumn leftSide padding-bottom-l border-right" style="background-color:#fafafa;">
  26
  27                         <!-- Header-->
  28                         <div id="app-title" class="column is-mobile is-paddingless margin-left-l margin-top-s">
  29                                 <div class="has-text-weight-bold has-text-grey-light is-size-7">Tizen IoT</div>
  30                                 <div class="has-text-weight-bold">Smart Surveillance Camera</div>
  31                         </div>
  32
  33                         <div class="columns is-mobile is-centered margin-top-m" align="center">
  34                                 <div class="column is-narrow">
  35                                         <div id="camera_controller" data-state="auto_mode_on">
  36                                                 <div id="move-up" class="icon-move" onclick="onMoveUpBtnClicked()"></div>
  37                                                 <div id="move-left" class="icon-move" onclick="onMoveLeftBtnClicked()"></div>
  38                                                 <div id="motion_area" align="center" data-state="no_motion">
  39                                                         <p class="is-size-10 has-text-weight-bold"></p>
  40                                                 </div>
  41                                                 <div id="move-right" class="icon-move" onclick="onMoveRightBtnClicked()"></div>
  42                                                 <div id="move-down" class="icon-move" onclick="onMoveDownBtnClicked()"></div>
  43                                                 </span>
  44                                         </div>
  45                                 </div>
  46                         </div>
  47
  48                 </div>
  49
  50                 <!-- Right -->
  51                 <div class="dividecolumn rightSide">
  52                         <hr class="is-hidden-tablet" />
  53                         <!-- Auto Mode Option -->
  54                         <div class="columns is-mobile is-marginless margin-left-s">
  55                                 <div id="auto_mode" data-state="on" class="column">
  56                                         <p id="mode_name">Auto Control Mode</p>
  57                                         <p class="is-size-7 has-text-info" id="auto_mode_on_text">On</p>
  58                                         <p class="is-size-7 has-text-grey-light" id="auto_mode_off_text">Off</p>
  59                                 </div>
  60                                 <div class="field column margin-top-s">
  61                                         <input type="checkbox" id="auto_mode_check" name="auto_mode_check" class="switch is-rounded is-info" checked="checked" onclick="onModeBtnClicked()">
  62                                         <label class="is-pulled-right" for="auto_mode_check"></label>
  63                                 </div>
  64                         </div>
  65                         <hr/>
  66                 </div>
  67         </body>
  68
  69         <!-- SAMSUNG CONNECT API -->
  70         <script type="text/javascript" src="lib/SCPluginApi.js"></script>
  71         <script type="text/javascript" src="js/capability_servoMotor.js"></script>
  72         <script type="text/javascript" src="js/capability_motionSensor.js"></script>
  73         <script type="text/javascript" src="js/capability_modeSwitch.js"></script>
  74         <script type="text/javascript" src="js/index.js"></script>
  75 </html>