<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>iFish</title>
<!– Bootstrap –>
<link href=”./bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”./chartist/chartist.min.css”>
</head>
<body>
<nav class=”navbar navbar-default”>
<div class=”container-fluid”>
<!– Brand and toggle get grouped for better mobile display –>
<div class=”navbar-header”>
<img class=”navbar-brand” alt=”Brand” src=”./fish.png”>
<span class=”navbar-brand”> iFish</span>
</div>
</div><!– /.container-fluid –>
</nav>
<div class=”container”>
<div class=”row”>
<div class=”jumbotron”>
<h1>Bem vindo ao iFish!</h1>
<p>Aqui poderá controlar o seu aquário inteligente e interactivo. Poderá visualizar os dados obtidos de vários sensores em tempo real e ainda gerir remotamente o aquário.</p>
</div>
<div class=”col-sm-12″>
<div id=”general” class=”page-header”>
<h1>Controlo Remoto<small> Interacção com o aquário</small></h1>
</div>
</div>
<div class=”col-md-3 col-sm-6 text-center”>
<div class=”panel panel-warning”>
<div class=”panel-heading”>
<h3 class=”panel-title”><span class=”glyphicon glyphicon-lamp” aria-hidden=”true”></span> Lâmpada</h3>
</div>
<div class=”panel-body”>
<div class=”btn-group” role=”group” aria-label=”…”>
<button type=”button” class=”btn btn-primary” onClick=”httpGetAsync(‘http://192.168.1.98:8888/?cmd=RELAY1_ON’)”>Ligar</button>
<button type=”button” class=”btn btn-default” onClick=”httpGetAsync(‘http://192.168.1.98:8888/?cmd=RELAY1_OFF’)”>Desligar</button>
</div>
</div>
</div>
</div>
<div class=”col-md-3 col-sm-6 text-center”>
<div class=”panel panel-danger”>
<div class=”panel-heading”>
<h3 class=”panel-title”><span class=”glyphicon glyphicon-fire” aria-hidden=”true”></span> Aquecedor</h3>
</div>
<div class=”panel-body”>
<div class=”btn-group” role=”group” aria-label=”…”>
<button type=”button” class=”btn btn-primary” onClick=”httpGetAsync(‘http://192.168.1.98:8888/?cmd=RELAY2_ON’)”>Ligar</button>
<button type=”button” class=”btn btn-default” onClick=”httpGetAsync(‘http://192.168.1.98:8888/?cmd=RELAY2_OFF’)”>Desligar</button>
</div>
</div>
</div>
</div>
<div class=”col-md-3 col-sm-6 text-center”>
<div class=”panel panel-info”>
<div class=”panel-heading”>
<h3 class=”panel-title”><span class=”glyphicon glyphicon-tint” aria-hidden=”true”></span> Bomba de água</h3>
</div>
<div class=”panel-body”>
<div class=”btn-group” role=”group” aria-label=”…”>
<button type=”button” class=”btn btn-primary” onClick=”httpGetAsync(‘http://192.168.1.98:8888/?cmd=RELAY3_ON’)”>Ligar</button>
<button type=”button” class=”btn btn-default” onClick=”httpGetAsync(‘http://192.168.1.98:8888/?cmd=RELAY3_OFF’)”>Desligar</button>
</div>
</div>
</div>
</div>
<div class=”col-md-3 col-sm-6 text-center”>
<div class=”panel panel-success”>
<div class=”panel-heading”>
<h3 class=”panel-title”><span class=”glyphicon glyphicon-cutlery” aria-hidden=”true”></span> Alimentador</h3>
</div>
<div class=”panel-body”>
<div class=”btn-group” role=”group” aria-label=”…”>
<button type=”button” class=”btn btn-primary” onClick=”httpGetAsync(‘http://192.168.1.98:8888/?cmd=RELAY4_ON’)”>Ligar</button>
<button type=”button” class=”btn btn-default” onClick=”httpGetAsync(‘http://192.168.1.98:8888/?cmd=RELAY4_OFF’)”>Desligar</button>
</div>
</div>
</div>
</div>
<div class=”col-sm-12″>
<div id=”general” class=”page-header”>
<h1>Monitorização<small> Visualização dos dados obtidos dos sensores</small></h1>
</div>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<div class=”panel panel-primary”>
<div class=”panel-heading”>
Temperatura Externa
</div>
<div class=”panel-body text-center”>
<div id=”externalTemperatureGage” class=”200x160px”></div>
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<div class=”panel panel-primary”>
<div class=”panel-heading”>
Temperatura Interna
</div>
<div class=”panel-body”>
<div id=”internalTemperatureGage” class=”200x160px”></div>
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<div class=”panel panel-primary”>
<div class=”panel-heading”>
Humidade Relativa (Externa)
</div>
<div class=”panel-body”>
<div id=”externalHumidityGage” class=”200x160px”></div>
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<div class=”panel panel-primary”>
<div class=”panel-heading”>
pH
</div>
<div class=”panel-body”>
<div id=”pHGage” class=”200x160px”></div>
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<div class=”panel panel-primary”>
<div class=”panel-heading”>
Luminosidade
</div>
<div class=”panel-body”>
<div id=”luminosityGage” class=”200x160px”></div>
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6 -xs-12″>
<div class=”panel panel-primary”>
<div class=”panel-heading”>
Nivel agua
</div>
<div class=”panel-body”>
<div id=”waterLevelGage” class=”200x160px”></div>
</div>
</div>
</div>
</div>
</div>
<!– <div class=”ct-chart ct-perfect-fourth” style=”width:80%;padding-top:100px;”></div> –>
<!– <div id=”gauge” class=”200x160px”></div> –>
<!– jQuery –>
<script src=”./jquery/jquery-2.2.3.min.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”./bootstrap/js/bootstrap.min.js”></script>
<!– Site content goes here !–>
<!–<script src=”./chartist/chartist.min.js”></script>–>
<script src=”./lib/justGage/justgage.js”></script>
<script src=”./lib/justGage/raphael-2.1.4.min.js”></script>
<script>
var externalTemperature = new JustGage({
id: “externalTemperatureGage”,
value: 0,
min: 0,
max: 40
});
var externalHumidity = new JustGage({
id: “externalHumidityGage”,
value: 0,
min: 0,
max: 100
});
var waterLevel = new JustGage({
id: “waterLevelGage”,
value: 0,
min: 0,
max: 1,
levelColors: [‘#CE1B21’, ‘#D0532A’, ‘#FFC414’, ‘#85A137’]
});
var internalTemperature = new JustGage({
id: “internalTemperatureGage”,
value: 0,
min: 0,
max: 40
});
var luminosity = new JustGage({
id: “luminosityGage”,
value: 0,
min: 0,
max: 1000
});
var pH = new JustGage({
id: “pHGage”,
value: 0,
min: 0,
max: 14
});
ticket = 0;
window.setInterval(function(){
/**
* Refresh one Gage per second
**/
switch (ticket) {
case 0:
updateGage(‘http://192.168.1.98:8888/?cmd=GET_EXT_TEMP’,externalTemperature);
break;
case 1:
updateGage(‘http://192.168.1.98:8888/?cmd=GET_EXT_HUMIDITY’,externalHumidity);
break;
case 2:
updateGage(‘http://192.168.1.98:8888/?cmd=GET_WATER_LVL’,waterLevel);
break;
case 3:
updateGage(‘http://192.168.1.98:8888/?cmd=GET_INT_TEMP’,internalTemperature);
break;
case 4:
updateGage(‘http://192.168.1.98:8888/?cmd=GET_LUMINOSITY’,luminosity);
break;
case 5:
updateGage(‘http://192.168.1.98:8888/?cmd=GET_PH’,pH);
}
ticket++;
ticket = ticket % 6 // 6 is the number of gages to refresh
/*
updateGage(‘http://192.168.1.98:8888/?cmd=GET_EXT_TEMP’,externalTemperature)
updateGage(‘http://192.168.1.98:8888/?cmd=GET_EXT_HUMIDITY’,externalHumidity)
updateGage(‘http://192.168.1.98:8888/?cmd=GET_WATER_LVL’,waterLevel)
updateGage(‘http://192.168.1.98:8888/?cmd=GET_INT_TEMP’,internalTemperature)
updateGage(‘http://192.168.1.98:8888/?cmd=GET_LUMINOSITY’,luminosity)
updateGage(‘http://192.168.1.98:8888/?cmd=GET_PH’,pH)
*/
}, 1000);
/* My Functions */
function httpGetAsync(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
//callback(xmlHttp.responseText);
return;
}
xmlHttp.open(“GET”, theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
function updateGage(theUrl, theGage)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
theGage.refresh(xmlHttp.responseText)
}
xmlHttp.open(“GET”, theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
</script>
</body>
</html>