ah_meter.html | searchcode

/cordova_controller/platforms/ios/www/ah_meter.html

https://gitlab.com/bafang/cordova_controller
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>