Skip to content

Instantly share code, notes, and snippets.

@ABeltramo

ABeltramo/index.html

Last active October 23, 2015 09:18
Show Gist options
  • Save ABeltramo/5ce5d562f4665359a930 to your computer and use it in GitHub Desktop.
Save ABeltramo/5ce5d562f4665359a930 to your computer and use it in GitHub Desktop.
Download ZIP
[Phonegap] App Marco
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Remote House</title>
<style>
.riquadro{
text-align: center;
padding:10px 5px 5px 5px;
margin-top:20px;
margin-bottom:20px;
border-radius: 10px;
border-color: cornflowerblue;
border-width: 2px;
border-style: solid;
}
.riquadro .progress{
margin-top:5px;
}
</style>
</head>
<body>
<div class="app">
<h1 style="text-align:center;">Remote House</h1>
<div class="col-xs-10 col-xs-offset-1" style="margin-top:50px;">
<form id="connectionForm" action="#connect">
<div class="form-group">
<label for="exampleInputEmail1">Server Address</label>
<input type="url" class="form-control" id="url" placeholder="http://127.0.0.1">
</div>
<button id="connectBtn" type="submit" class="btn btn-primary btn-block">Connect</button>
</form>
</div>
<div id="results" class="">
<div class="col-xs-12">
<div id="RElettrica" class="riquadro col-xs-5">
<p>Rete Elettrica</p>
<div class="kw"><b>0,26 kW</b></div>
<div class="progress">
<div class="progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
20%
</div>
</div>
</div>
<div id="Fotovoltaico" class="riquadro col-xs-5 col-xs-offset-2">
<p>Fotovoltaico</p>
<div class="kw"><b>1,55 kW</b></div>
<div class="progress">
<div class="progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
80%
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div id="Consumi" class="riquadro col-xs-5 center-block" style="float: none;">
<p>Consumi</p>
<div class="kw"><b>1,76 kW</b></div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 80%">
</div>
<div class="progress-bar progress-bar-danger" style="width: 20%">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script>
$("#connectionForm").submit(function(){
$("#connectBtn").removeClass("btn-primary")
.addClass("btn-warning")
.text("Connecting...");
$.get($("#url").val(),function(data,status){
$("#connectBtn").removeClass("btn-warning")
.addClass("btn-success")
.text("Disconnect");
$("#results").removeClass("hidden");
processData(getRemoteValue(data)); // Avvio l'analisi dei dati
localStorage.setItem("lastURL",$("#url").val()); // Salvo l'ultimo URL visitato
}).fail(function() { // In caso di errore
$("#connectBtn").removeClass("btn-warning")
.addClass("btn-danger")
.text("Unable to connect. Retry");
});
});
// DATA ANALYSIS
var html;
function getRemoteValue(data){
//console.log(data);
html = $('<div></div>').append(data);
var tr1 = html.find("table tr").eq(1);
var tr2 = html.find("table tr").eq(2);
var dati = {
'AP' : [tr1.find("td").eq(1).text(), tr1.find("td").eq(2).text()],
'IRMS' : [tr2.find("td").eq(1).text(), tr2.find("td").eq(2).text()]
}
return dati;
}
function processData(risultati){
//console.log(risultati);
var reteElettrica = risultati.AP[0] - risultati.AP[1];
if(reteElettrica < 0)
reteElettrica = 0;
$("#RElettrica .kw b").text(reteElettrica + " W");
$("#Fotovoltaico .kw b").text(risultati.AP[1] + " W");
$("#Consumi .kw b").text(risultati.AP[0] + " W");
}
if(localStorage.lastURL){ // Ha già visitato un URL
$("#url").val(localStorage.lastURL);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment