| <!-- |
| /******************************************************************************* |
| * Copyright (c) 2014, 2016 Orange. |
| * All rights reserved. This program and the accompanying materials |
| * are made available under the terms of the Eclipse Public License 2.0 |
| * which accompanies this distribution, and is available at |
| * https://www.eclipse.org/legal/epl-2.0/ |
| *******************************************************************************/ |
| --> |
| <!doctype html> |
| <html ng-app="app"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Smart Home | main page</title> |
| |
| <link rel="icon" type="image/png" href="../webapps/images/favicon.ico" /> |
| <link rel="stylesheet" href="../webapps/css/style.css"> |
| <link rel="stylesheet" href="../webapps/css/angular-ui-switch.css"> |
| <link rel="stylesheet" href="../webapps/css/bootstrap-3.0.1.min.css"> |
| <!-- WN Part --> |
| <script type="text/javascript" src="../webapps/js/jquery.js"></script> |
| <script type="text/javascript" src="../webapps/js/color_tools.js"></script> |
| <script type="text/javascript" src="../webapps/js/color_picker.js"></script> |
| <link rel="stylesheet" href="../webapps/css/color_picker.css" type="text/css" /> |
| <!-- End WN Part --> |
| |
| |
| <script src="../webapps/js/angular.min.js"></script> |
| <script src="../webapps/js/angular-ui-switch.js"></script> |
| <!-- <script src="../webapps/js/angular-load.js"></script> --> |
| <script src="../webapps/js/xml2json.min.js"></script> |
| <!-- <script src="../webapps/js/1_hls.min.js"></script> --> |
| <script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script> |
| <script src="../webapps/js/mjpeg.js"></script> |
| <script src="../webapps/js/app.js"></script> |
| <script> |
| function listHeight(){ |
| var bodyHeight = document.getElementById('page-wrap').clientHeight - 180; |
| document.getElementById("list").style.minHeight = bodyHeight +"px"; |
| } |
| </script> |
| </head> |
| |
| <body onLoad="listHeight()" onResize="listHeight()" data-ng-controller="MainController"> |
| <div class="page-wrap" id="page-wrap"> |
| |
| <!-- main page --> |
| <header class="top_bar"> |
| <div class="container"> |
| <figure> |
| <a href="#"><img src="../webapps/images/logo.png" alt=""></a> |
| <figcaption>Home Monitoring Application</figcaption> |
| </figure> |
| <div class="user"> |
| <span>hello, </span> |
| <label>{{name}}</label> |
| <a href="../security/logout" class="logout">Logout</a> |
| </div> |
| </div> |
| </header> |
| <div class="container" > |
| <div id="videoPart" class="left_side"> |
| <h3>Video from monitoring camera</h3> |
| <div class="btn-group-horizontal" role="group" |
| aria-label="coffee strength"> |
| <label ng-repeat="cam in cams" class="btn btn-default classButton" |
| ng-class="cam.btnClass" ng-click="loadWebcam(cam)"> |
| {{cam.deviceName}} |
| </label> |
| </div> |
| <div> |
| <canvas id="player" width="480" height="360" |
| style="background: #000;" ng-hide="hideMjpegVideo"> |
| </canvas> |
| </div> |
| <!-- <img width="320" height="240" ng-src="{{camera}}" ng-hide="hideMjpegVideo"/> --> |
| <div id="clappr" ng-hide="hideHlsVideo"></div> |
| <!-- <video id="video" ng-hide="hideHlsVideo"></video> --> |
| <!-- <button ng-click="test()">stop MJPEG</button> --> |
| </div> |
| <div class="right_side" id="list"> |
| <h3>Device</h3> |
| <form> |
| <ul> |
| <li ng-repeat='device in getDevicesAsArray() | filter: deviceFilter' |
| ng-class="{'backgroundRed' : device.isUpdated, 'backgroundGray' : !device.enable}"> |
| <div>{{device.name}}</div> |
| <table width="100%"> |
| <tr> |
| <td ng-repeat="module in getModulesFromDevice(device) | filter: moduleFilter"> |
| <div ng-repeat="el in getElementsToBeDisplayed(module)"> |
| <img ng-src="../webapps/images/{{el.img}}" /> |
| {{module.datapoints[el.dataPoint].value}} |
| </div> |
| </td> |
| <!-- <td ng-repeat="module in getModulesFromDevice(device) | filter: moduleFilter"> |
| <img ng-src="../webapps/images/{{moduleDisplay[module.name][0].img}}" /> |
| {{module.datapoints[moduleDisplay[module.name][0].dataPoint].value}} |
| </td> |
| --> <td class="tdSmall" |
| ng-repeat="module in getModulesFromDevice(device) | filter: switchFilter"> |
| <div ng-hide="module.hideSpinning" class="spinner"></div> |
| </td> |
| <td class="tdSmall" |
| ng-repeat="module in getModulesFromDevice(device) | filter: switchFilter"> |
| <switch class="adjustSwitch" name="moduleSwitch_{{module.id}}" id="moduleSwitch_{{module.id}}" |
| ng-model="module.state" |
| disabled="module.isReadOnly" |
| ng-change="changeState(device,module)"></switch> |
| </td> |
| </tr> |
| </table> |
| |
| <div class="pickerContainer" ng-repeat="module in getModulesFromDevice(device) | filter: colorFilter"> |
| |
| <!-- <div id="{{color_(module)}}"> </div> --> |
| |
| <div id="{{picker_id(module)}}" class="picker"> |
| <div class="colorPicker"> |
| <div class="color" id="{{picker_id(module)}}_color"></div> |
| <div class="ring" ng-mousedown="startHueRGBChange(module)"></div> |
| <div class="ringPointer pointer" ng-mousedown="startHueRGBChange(module)"></div> |
| </div> |
| </div> |
| |
| <div class="sliders"> |
| <label id="{{picker_id(module)}}_label_saturation" class="slidersLables">Saturation ({{module.colorPicker.hsv[1]*100 | number:0}}%)</label> |
| <div class="slider"> |
| <input id="{{picker_id(module)}}_slider_saturation" type="range" min="0.01" max="1.00" step="0.01" ng-change="module.colorPicker.setHSV(module.colorPicker.hsv)" ng-model="module.colorPicker.hsv[1]" ng-mousedown="startHueRGBChange(module)" number-formatter/> |
| </div> |
| <div id="{{picker_id(module)}}_TestArea1"></div> |
| <label id="{{picker_id(module)}}_label_lumination" class="slidersLables">Lumination ({{module.colorPicker.hsv[2]*100 | number:0}}%)</label> |
| <div class="slider"><input id="{{picker_id(module)}}_slider_lumination" type="range" min="0.01" max="1.00" step="0.01" ng-change="module.colorPicker.setHSV(module.colorPicker.hsv)" ng-model="module.colorPicker.hsv[2]" ng-mousedown="startHueRGBChange(module)" number-formatter/></div> |
| <div id="{{picker_id(module)}}_TestArea2"></div> |
| </div> |
| {{color_jq(module)}} |
| |
| </div> |
| </li> |
| </ul> |
| </form> |
| </div> |
| </div> |
| </div> |
| <footer class="site-footer"> © 2017 </footer> |
| </body> |
| </html> |
