/cordova_controller/www/ah_meter.html
HTML | 529 lines | 500 code | 27 blank | 2 comment | 0 complexity | 2f4c3b3be6cbd5d49b26ee716976fdbd MD5 | raw file
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="format-detection" content="telephone=no" />
- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
- <!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
- <title>8fun</title>
- <link href="lib/ionic/css/ionic.css" rel="stylesheet">
- <script type="text/javascript" src="cordova.js"></script>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/index.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
- <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
- <script type="text/javascript" src="js/canvasjs-1.8.0/canvasjs.min.js"></script>
- <!--<script src="/assets/socket.io-1.3.5.js"></script>-->
- <style>
- #content{
- position: absolute;
- top: 0px;
- bottom: 49px;
- left: 0px;
- right: 0px;
- -webkit-overflow-scrolling: touch;
- overflow-y:auto;
- }
- .content_tab{
- }
- .input-label{
- font-size: 19px;
- }
- .stage{
- border: solid;
- border-width: 0px;
- width: 0;
- height:0;
- }
- .debug_text{
- color: #0000FF;
- font-size: 14px;
- }
- .info_text{
- color: #00FF00;
- font-size: 14px;
- }
- .error_text{
- color: #FF0000;
- font-size: 14px;
- }
- .log_window{
- position: absolute;
- background-color: #111111;
- top: 115px;
- bottom: 5px;
- left: 5px;
- right: 5px;
- -webkit-overflow-scrolling: touch;
- overflow-y:auto;
- }
- body{
- font: 62.5% "Trebuchet MS", sans-serif;
- margin: 50px;
- }
- .demoHeaders {
- margin-top: 2em;
- }
- #AH_Div {
- color: #000000;
- font-size: 18px;
- }
- #dialog-link {
- padding: .4em 1em .4em 20px;
- text-decoration: none;
- position: relative;
- }
- #dialog-link span.ui-icon {
- margin: 0 5px 0 0;
- position: absolute;
- left: .2em;
- top: 50%;
- margin-top: -8px;
- }
- #icons {
- margin: 0;
- padding: 0;
- }
- #icons li {
- margin: 2px;
- position: relative;
- padding: 4px 0;
- cursor: pointer;
- float: left;
- list-style: none;
- }
- #icons span.ui-icon {
- float: left;
- margin: 0 4px;
- }
- .fakewindowcontain .ui-widget-overlay {
- position: absolute;
- }
- select {
- width: 200px;
- }
-
- .chartContainer{
- height: 200px;
- width: 90%;
- }
- </style>
- <script type="text/javascript">
- var chart_obj = {
- zoomEnabled: false,
- animationEnabled: false,
- title:{
- text: "Volts & Amps"
- },
- axisY2:{
- //valueFormatString:"0.0 bn",
- maximum: 30,
- interval: 2,
- interlacedColor: "#F5F5F5",
- gridColor: "#D7D7D7",
- tickColor: "#D7D7D7"
- },
- theme: "theme1",
- toolTip:{
- shared: true
- },
- data: [
- {
- type: "line",
- lineThickness:3,
- axisYType:"secondary",
- showInLegend: true,
- name: "Volts",
- dataPoints: [
- { x: 0, y: 0 }
- ]
- },
- {
- type: "line",
- lineThickness:3,
- showInLegend: true,
- name: "Amps",
- axisYType:"secondary",
- dataPoints: [
- { x: 0, y: 0 }
- ]
- }
- ],
- legend: {
- verticalAlign: "bottom",
- horizontalAlign: "center",
- fontSize: 15,
- fontFamily: "Lucida Sans Unicode",
- cursor:"pointer",
- itemclick : function(e) {
- if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
- e.dataSeries.visible = false;
- }
- else {
- e.dataSeries.visible = true;
- }
- chart.render();
- }
- }
- };
- var chart_obj1 = {
- zoomEnabled: false,
- animationEnabled: false,
- title:{
- text: "Watts"
- },
- axisY2:{
- //valueFormatString:"0.0 bn",
- maximum: 100,
- interval: 10,
- interlacedColor: "#F5F5F5",
- gridColor: "#D7D7D7",
- tickColor: "#D7D7D7"
- },
- theme: "theme1",
- toolTip:{
- shared: true
- },
- data: [
- {
- type: "line",
- lineThickness:3,
- showInLegend: true,
- name: "Watts",
- axisYType:"secondary",
- dataPoints: [
- { x: 0, y: 0 }
- ]
- }
- ],
- legend: {
- verticalAlign: "bottom",
- horizontalAlign: "center",
- fontSize: 15,
- fontFamily: "Lucida Sans Unicode",
- cursor:"pointer",
- itemclick : function(e) {
- if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
- e.dataSeries.visible = false;
- }
- else {
- e.dataSeries.visible = true;
- }
- chart1.render();
- }
- }
- };
-
- var meter_data = {
- V: [],
- I: [],
- W: [],
- T: []
- };
-
- var view_live = true;
- function update_chart(){
- chart_obj.data[0].dataPoints = new Array();
- chart_obj.data[1].dataPoints = new Array();
- chart_obj1.data[0].dataPoints = new Array();
- for(var i=0; i<meter_data.V.length;i++){
- chart_obj.data[0].dataPoints.push({x: i, y:meter_data.V[i]});
- chart_obj.data[1].dataPoints.push({x: i, y:meter_data.I[i]});
- chart_obj1.data[0].dataPoints.push({x: i, y:meter_data.W[i]});
- }
- chart.render();
- chart1.render();
- }
-
- var chart = null;
- var chart1 = null;
- function log_messages(data){
- //console.log(data.message);
- //console.log(data);
- var html_tag = '<p class="';
- switch(data.tag){
- case 'error':
- html_tag += "error_text";
- break;
- case 'info':
- html_tag += "info_text";
- break;
- case 'debug':
- html_tag += "debug_text";
- break;
- default:
- html_tag += "";
- }
- html_tag += '">';
- html_tag += data.message;
- html_tag += "</p>";
- $( "#log_window" ).append(html_tag);
-
- //arduino: V0.00I-0.04AH0.00
- }
- function log_chart(data){
- if(view_live){
- var VOffset = data.message.indexOf('V');
- var IOffset = data.message.indexOf('I');
- var AhOffset = data.message.indexOf('AH');
- //var WOffset = data.message.indexOf('W');
- var volts = data.message.substr(VOffset+1, IOffset-VOffset-1)/1;
- var amps = data.message.substr(IOffset+1, AhOffset-IOffset-1);
- console.log(amps);
- amps = Math.abs(amps/1);
- //console.log(amps);
- var ampHours = data.message.substr(AhOffset+2, data.message.length);
- $("#AH_Div").html(ampHours);
- if(typeof(amps) == 'number' && !isNaN(amps)){
- var watts = volts * amps;
- //var amps = data.message.substr(IOffset+1, WOffset-IOffset-1)/1;
- //var watts = data.message.substr(WOffset+1, data.message.length)/1;
- meter_data.V.push(volts);
- meter_data.I.push(amps);
- meter_data.W.push(watts);
- meter_data.T.push(Date.now()); //won't work in <=ie8
-
- update_chart();
- }
- }
- }
- var keys = null;
- function get_keys(){
- try {
- keys = new Array();
- for (var key in localStorage){
- keys.push(key);
- }
- var html = "";
- for(var i=0;i<keys.length;i++){
- //html += '<label id="key_'+i+'" class="saved_data_keys_label" onclick="select_data_label(this)">'+keys[i]+'</label></br>';
- html += '<option>'+keys[i]+'</option>';
- }
- $( "#saved_data_keys" ).html(html);
- $('#saved_data_keys').selectmenu();
- } catch(e){
- console.error(e);
- }
- }
- function get_data_from_key(key, callback){
- var r = localStorage.getItem( key );
- try{
- callback(JSON.parse(r));
- } catch(e){
- console.error(e);
- }
- }
- function save_data_to_key(key, callback){
- localStorage.setItem( key, JSON.stringify(meter_data) );
- try{
- callback(JSON.parse(r));
- } catch(e){
- console.error(e);
- }
- }
- function bytesToString(buffer) {
- return String.fromCharCode.apply(null, new Uint8Array(buffer));
- }
- var bt = {
- service_uuid: "FFE0",
- characteristic_uuid_r: "FFE1",
- characteristic_uuid_w: "FFE1",
- isConnected: false,
- connectedDeviceID: null,
- enableBLE: function(callBack){
- ble.enable(function(){
- //log.info("ble is enabled");
- if(typeof(callBack) == 'function'){
- callBack();
- }
- }, function(){
- //log.info("ble is still disabled");
- //the following works on android but is dumb
- /*ble.showBluetoothSettings(function(){
- log.info("ble is enabled!");
- }, function(){
- log.info("ble is still disabled !<");
- });*/
- bt.enableBLE(callBack);
- });
- },
- autoConnect: function(){
- var deviceId = null;
- if(device.platform == "Android"){
- //deviceId = "20:C3:8F:F6:7B:48"; //"20:C3:8F:F6:4D:C9"
- deviceId = "5C:F8:21:80:6E:ED"; //"20:C3:8F:F6:4D:C9"
- } else {//iOS
- deviceId = "4536E29C-FEAC-2FAB-6977-8CBC26866C9C"; //"652A9E75-5367-8FF4-64F9-D32529D4CFC1"
- }
- ble.scan([], 5, function(device){
- log.info(device);
- if(device.id == deviceId){
- bt.connectDevice(device.id);
- }
- }, log.error);
- },
- connectDevice: function(deviceId){
- //log.info("connecting: "+deviceId);
- ble.connect(deviceId, function(d) {
- try{
- log.info(d);
- bt.isConnected = true;
- bt.connectedDeviceID = deviceId;
- ble.startNotification(bt.connectedDeviceID, bt.service_uuid, bt.characteristic_uuid_r, bt.onNotify, log.error);
- $("#bt_image").attr("src","bluetooth_blue.png");
- //$('#content').show(); $('#log_view').hide();
- } catch(e){
- log.error(e);
- }
- }, log.error);
- },
- disconnectDevice: function() {
- ble.disconnect(bt.connectedDeviceID, function(){ bt.isConnected = false; bt.connectedDeviceID = null; }, log.error);
- $("#bt_image").attr("src","bluetooth_grey.png");
- },
- onNotify: function(buffer){
- try {
- //var d = new Uint8Array(buffer); //if using Serial.write(); on Arduino
- var d = bytesToString(buffer);//if using Serial.print(); on arduino
- log.info("onNotify: "+d);
- //log_chart(d);
- /*var VOffset = d.indexOf('V');
- var IOffset = d.indexOf('I');
- var AhOffset = d.indexOf('AH');
- var V = d.substr(VOffset+1, IOffset-VOffset-1)/1;
- var I = Math.abs(d.substr(IOffset+1, AhOffset-IOffset-1)/1);
- var AH = d.substr(AhOffset+2, d.length)/1;
- var W = V * I;
-
- if(W > MaxW){
- MaxW = W;
- }
- if(I > MaxI){
- MaxI = I;
- }
- $("#voltage").html("Voltage: "+V.toFixed(2));
- $("#current").html("Current: "+I.toFixed(2));
- $("#ah").html("Ah: "+AH.toFixed(2));
- $("#wattage").html("Watts: "+W.toFixed(2));
- $("#MaxW").html("Max W: "+MaxW.toFixed(2));
- $("#MaxI").html("Max I: "+MaxI.toFixed(2));*/
-
- } catch(e){
- log.error(e);
- }
- }
- };
- var screen = {
- w: document.documentElement.clientWidth,
- h: document.documentElement.clientHeight
- };
- function onPause(){
- bt.disconnectDevice();
- }
-
- function onResume(){
- bt.autoConnect();
- }
- function init(){
- //log.info("init: "+device.platform);
- keepscreenon.enable();
- bt.enableBLE(bt.autoConnect);
- //setInterval(getGPS, 500);
- //setInterval(getAccelleration, 500);
- $( "#load_button" ).button().click(function(event){
- var selected_key = $( "#saved_data_keys" ).selectmenu().find('option:selected').val();
- console.log("selected_key: "+selected_key);
- get_data_from_key(selected_key, function(r){
- console.log(r);
- view_live = false;
- meter_data = {
- V: [],
- I: [],
- W: [],
- T: []
- };
- for(var i=0;i<r.V.length;i++){
- var V = r.V[i]/1;
- var I = r.I[i]/1;
- meter_data.V.push(V);
- meter_data.I.push(I);
- meter_data.W.push(V * I);
- }
- update_chart();
- });
- });
- $( "#save_button" ).button().click(function(event){
- if(view_live){
- var val = $("#session_name").val();
- if(val.length > 4){
- save_data_to_key(val, function(r){
- console.log(r);
- });
- } else {
- alert("name must be longer than 4 characters");
- }
- }
- });
- $( "#live_button" ).button().click(function(event){
- view_live = true;
- $("#session_name").val("")
- meter_data = {
- V: [],
- I: [],
- W: [],
- T: []
- };
- update_chart();
- });
- chart = new CanvasJS.Chart("chartContainer", chart_obj);
- chart1 = new CanvasJS.Chart("chartContainer1", chart_obj1);
- chart.render();
-
- get_keys();
- }
-
- try{
- app.initialize();
- } catch(e){
- alert(e);
- log.error(e);
- }
- </script>
- </head>
-
- <body ng-controller="MyCtrl">
- <div id="content">
- <img id="bt_image" src="bluetooth_grey.png" width="26" height="35" style=""/>
- <div id="session">
- <h3>Saved Sessions</h3>
- <select id="saved_data_keys"></select></br>
- <button id="load_button">Load</button>
- <button id="live_button">New Session</button>
- </div>
- <h3>Current Session</h3>
- <input id="session_name" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"></input>
- <button id="save_button">Save</button>
- <div>
- <h3>Amp Hours:</h3><div id="AH_Div"></div>
- </div>
- <div id="chartContainer" class="chartContainer"></div>
- <div id="chartContainer1" class="chartContainer"></div>
- </div>
- </body>
- </html>