Skip to content

Sebastián Collado Montañez / proyecto-micro

Go to a project
Commit 2cea7cd8 by Sebastián Collado Montañez
Options

mejora indentado y readme

parent fb6ddc62
Inline Side-by-side
Showing with 248 additions and 200 deletions
README.md
# Sistema de control para puerta automática desde cliente web
Proyecto final para la asignatura Microprocesadores y Microcontroladores
## Autores
Sebastián Collado Montañez
Juan Carlos Castillo Alcántara
## Introducción
Diseño e implementación de un sistema para controlar la apertura y cierre de una puerta de forma remota, mediante el uso de tecnologías web en tiempo real.
Partes del proyecto:
- Servicio de gestión GPIO sobre Raspberry Pi 3.
- Servidor web (Node.js, Express, WebSocket).
- Aplicación web cliente.
## Despliegue
1. Preparación de paquetes necesarios
`sudo apt-get update`
`sudo apt-get install git`
`sudo apt-get install build-essential`
`sudo apt-get install nodejs`
`sudo apt-get install npm`
`sudo npm install -g forever`
2. Clonar proyecto desde GitLab UJA
`git clone http://gitlab.ujaen.es/scollado/proyecto-micro.git`
3. Ejecución con `forever` desde la carpeta del proyecto
Lanzar servidor: `sudo forever start webserver.js --debug`
Reiniciar servidor: `sudo forever start webserver.js --debug`
Parar servidor: `sudo forever stopall`
public/assets/main.css
.puerta{
width: 100%;
right: 0px;
overflow: hidden;
position: relative;
-webkit-transition-duration: 10s; /* Safari */
transition-duration: 10s;
.puerta {
width: 100%;
right: 0px;
overflow: hidden;
position: relative;
-webkit-transition-duration: 10s;
/* Safari */
transition-duration: 10s;
}
#fondo{
width: 100%;
background-image:url(https://i.imgur.com/xdEiuJ1.jpg);
background-size: 100%;
background-repeat: no-repeat;
#fondo {
width: 100%;
background-image: url(https://i.imgur.com/xdEiuJ1.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
.btn-large{
width:100%;
.btn-large {
width: 100%;
}
public/assets/main.js
//Variables
var socket = io(); //socket.io-client and connect
var timeCloseOpen = 10000;
var estado = 0;
//Variables
var socket = io(); //socket.io-client and connect
var timeCloseOpen = 10000;
var estado = 0;
/*
Procedimiento que se ejecuta al cargar la pagina
*/
window.addEventListener("load", function() {
/*
Procedimiento que se ejecuta al cargar la pagina
*/
window.addEventListener("load", function(){
//Inicializacion del menu izquierdo
$(".button-collapse").sideNav();
//Inicializacion del menu izquierdo
$(".button-collapse").sideNav();
//Maneja las peticiones GET que puedan existir
manejadorGET();
});
//Maneja las peticiones GET que puedan existir
manejadorGET();
});
/*
Escucha mensajes de inicializacion por parte del servidor
*/
socket.on('inicializacion', function(data) {
/*
Escucha mensajes de inicializacion por parte del servidor
*/
socket.on('inicializacion', function(data) {
estado = data;
estado = data;
// Puerta se encuentra abierta, hay que cambiar su inicializacion
if(estado == 1){
// Puerta se encuentra abierta, hay que cambiar su inicializacion
if (estado == 1) {
// Situa la puerta abierta, sin animacion
document.getElementById('puerta').style.transition = 'none';
document.getElementById('puerta').style.right = -$("#puerta").width() + "px";
......@@ -32,95 +31,95 @@
document.getElementById('abrir').style.display = 'none';
document.getElementById('cerrar').disabled = false;
document.getElementById('cerrar').style.display = 'initial';
}
});
}
});
/*
Escucha mensajes de actualizacion por parte del servidor
*/
socket.on('actualizarEstado', function(data) {
/*
Escucha mensajes de actualizacion por parte del servidor
*/
socket.on('actualizarEstado', function(data) {
// Si el estado entrante es distinto del local
if(estado != data){
// Actualiza estado local
estado = data;
// Habilita las transiciones CSS para la animacion
document.getElementById('puerta').style.transition = '';
// El nuevo estado es cerrado
if(estado == 0){
// Cambia botones y hace la animacion
document.getElementById('cerrar').disabled = true;
document.getElementById('puerta').style.right = 0 + "px";
setTimeout(function(){
document.getElementById('cerrar').style.display = 'none';
document.getElementById('abrir').disabled = false;
document.getElementById('abrir').style.display = 'initial';
}, timeCloseOpen);
}
// El nuevo estado es abierto
if(estado == 1){
// Cambia botones y hace la animacion
document.getElementById('abrir').disabled = true;
document.getElementById('puerta').style.right = -$("#puerta").width() + "px";
setTimeout(function(){
document.getElementById('abrir').style.display = 'none';
document.getElementById('cerrar').disabled = false;
document.getElementById('cerrar').style.display = 'initial';
}, timeCloseOpen);
}
}
// Si el estado entrante es distinto del local
if (estado != data) {
// Actualiza estado local
estado = data;
// Habilita las transiciones CSS para la animacion
document.getElementById('puerta').style.transition = '';
// El nuevo estado es cerrado
if (estado == 0) {
// Cambia botones y hace la animacion
document.getElementById('cerrar').disabled = true;
document.getElementById('puerta').style.right = 0 + "px";
setTimeout(function() {
document.getElementById('cerrar').style.display = 'none';
document.getElementById('abrir').disabled = false;
document.getElementById('abrir').style.display = 'initial';
}, timeCloseOpen);
}
// El nuevo estado es abierto
if (estado == 1) {
// Cambia botones y hace la animacion
document.getElementById('abrir').disabled = true;
document.getElementById('puerta').style.right = -$("#puerta").width() + "px";
setTimeout(function() {
document.getElementById('abrir').style.display = 'none';
document.getElementById('cerrar').disabled = false;
document.getElementById('cerrar').style.display = 'initial';
}, timeCloseOpen);
}
}
});
});
/*
Lee los parametros GET si existen para abrir o cerrar directamente, sin boton
*/
function manejadorGET(){
var url = new URL(window.location.href);
var ordenAbrir = url.searchParams.get("abrir");
var ordenCerrar = url.searchParams.get("cerrar");
/*
Lee los parametros GET si existen para abrir o cerrar directamente, sin boton
*/
function manejadorGET() {
var url = new URL(window.location.href);
var ordenAbrir = url.searchParams.get("abrir");
var ordenCerrar = url.searchParams.get("cerrar");
//Lanza apertura o cierre segun la peticion GET
if(ordenAbrir == "1" && ordenCerrar == null) abrirPuerta();
if(ordenCerrar == "1" && ordenAbrir == null) cerrarPuerta();
}
//Lanza apertura o cierre segun la peticion GET
if (ordenAbrir == "1" && ordenCerrar == null) abrirPuerta();
if (ordenCerrar == "1" && ordenAbrir == null) cerrarPuerta();
}
/*
Funcion para abrir la puerta
*/
function abrirPuerta() {
// Habilita las transiciones CSS para la animacion
document.getElementById('puerta').style.transition = '';
// Emite la orden de apertura
socket.emit("emisionOrden", Number(1));
// Limpia los parametros GET de la URL
window.history.replaceState({}, document.title, "/");
// Cambia botones y hace la animacion
document.getElementById('abrir').disabled = true;
document.getElementById('puerta').style.right = -$("#puerta").width() + "px";
setTimeout(function(){
document.getElementById('abrir').style.display = 'none';
document.getElementById('cerrar').disabled = false;
document.getElementById('cerrar').style.display = 'initial';
}, timeCloseOpen);
}
/*
Funcion para abrir la puerta
*/
function abrirPuerta() {
// Habilita las transiciones CSS para la animacion
document.getElementById('puerta').style.transition = '';
// Emite la orden de apertura
socket.emit("emisionOrden", Number(1));
// Limpia los parametros GET de la URL
window.history.replaceState({}, document.title, "/");
// Cambia botones y hace la animacion
document.getElementById('abrir').disabled = true;
document.getElementById('puerta').style.right = -$("#puerta").width() + "px";
setTimeout(function() {
document.getElementById('abrir').style.display = 'none';
document.getElementById('cerrar').disabled = false;
document.getElementById('cerrar').style.display = 'initial';
}, timeCloseOpen);
}
/*
Funcion para cerrar la puerta
*/
function cerrarPuerta(){
// Habilita las transiciones CSS para la animacion
document.getElementById('puerta').style.transition = '';
// Emite la orden de apertura
socket.emit("emisionOrden", Number(0));
// Limpia los parametros GET de la URL
window.history.replaceState({}, document.title, "/");
// Cambia botones y hace la animacion
document.getElementById('cerrar').disabled = true;
document.getElementById('puerta').style.right = 0 + "px";
setTimeout(function(){
document.getElementById('cerrar').style.display = 'none';
document.getElementById('abrir').disabled = false;
document.getElementById('abrir').style.display = 'initial';
}, timeCloseOpen);
}
/*
Funcion para cerrar la puerta
*/
function cerrarPuerta() {
// Habilita las transiciones CSS para la animacion
document.getElementById('puerta').style.transition = '';
// Emite la orden de apertura
socket.emit("emisionOrden", Number(0));
// Limpia los parametros GET de la URL
window.history.replaceState({}, document.title, "/");
// Cambia botones y hace la animacion
document.getElementById('cerrar').disabled = true;
document.getElementById('puerta').style.right = 0 + "px";
setTimeout(function() {
document.getElementById('cerrar').style.display = 'none';
document.getElementById('abrir').disabled = false;
document.getElementById('abrir').style.display = 'initial';
}, timeCloseOpen);
}
views/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control de Acceso</title>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control de Acceso</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../public/assets/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../public/assets/main.css">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo"><img src="https://i.imgur.com/uik6gYY.png" width="60" style="margin-left:0.5em"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="contact.html">Servicio técnico</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="contact.html">Servicio técnico</a></li>
</ul>
</div>
</nav>
<!-- Navbar -->
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo"><img src="https://i.imgur.com/uik6gYY.png" width="60" style="margin-left:0.5em"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="contact.html">Servicio técnico</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="contact.html">Servicio técnico</a></li>
</ul>
</div>
</nav>
<!-- Container -->
<div class="container text-center">
<!-- Container -->
<div class="container text-center">
<div class="col-12">
<h3>Control de Acceso</h3>
</div>
<div class="col-12">
<h3>Control de Acceso</h3>
</div>
<div class="row form-group">
<div class="col-12">
<div id="fondo">
<img id="puerta" class="puerta" src="../public/assets/puerta.jpg">
<div class="row form-group">
<div class="col-12">
<div id="fondo">
<img id="puerta" class="puerta" src="../public/assets/puerta.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="row form-group">
<button id="abrir" class="btn-large" onclick="abrirPuerta();Materialize.toast('Abriendo puerta', 10000)" style="display:initial">Abrir</button>
<button id="cerrar" class="btn-large" onclick="cerrarPuerta();Materialize.toast('Cerrando puerta', 10000)" style="display:none">Cerrar</button>
<div class="row form-group">
<button id="abrir" class="btn-large" onclick="abrirPuerta();Materialize.toast('Abriendo puerta', 10000)" style="display:initial">Abrir</button>
<button id="cerrar" class="btn-large" onclick="cerrarPuerta();Materialize.toast('Cerrando puerta', 10000)" style="display:none">Cerrar</button>
</div>
<p>
<div id="messages"></div>
</p>
</div>
<p>
<div id="messages"></div>
</p>
</div>
<!-- JavaScript-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> <!-- include socket.io client side script -->
<script src="../public/assets/main.js"></script>
<!-- JavaScript-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<!-- include socket.io client side script -->
<script src="../public/assets/main.js"></script>
</body>
</html>
webserver.js
......@@ -7,21 +7,21 @@ var io = require('socket.io')(server);
GPIO
*/
var Gpio = require('onoff').Gpio;
var LED = new Gpio(4,'out');
var LED = new Gpio(4, 'out');
var blinkInterval = setInterval(blinkLED, 250);
function blinkLED(){
if(LED.readSync() === 0){
LED.writeSync(1);
}else{
LED.writeSync(0);
}
function blinkLED() {
if (LED.readSync() === 0) {
LED.writeSync(1);
} else {
LED.writeSync(0);
}
}
function endBlink(){
clearInterval(blinkInterval);
LED.writeSync(0);
LED.unexport();
function endBlink() {
clearInterval(blinkInterval);
LED.writeSync(0);
LED.unexport();
}
setTimeout(endBlink, 5000);
......@@ -30,11 +30,11 @@ setTimeout(endBlink, 5000);
/*
WEB SERVER
*/
app.use('/public', express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/views/index.html');
});
server.listen('8080');
app.use('/public', express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/views/index.html');
});
server.listen('8080');
/*
......@@ -43,32 +43,32 @@ setTimeout(endBlink, 5000);
var estadoPuerta = 0; //cerrada
io.sockets.on('connection', function (socket) {// WebSocket Connection
io.sockets.on('connection', function(socket) { // WebSocket Connection
console.log("Cliente conectado");
console.log("Cliente conectado");
//Al conectarse el cliente, emite un valor de inicializacion sobre el estado de la puerta
socket.emit("inicializacion", Number(estadoPuerta));
//Al conectarse el cliente, emite un valor de inicializacion sobre el estado de la puerta
socket.emit("inicializacion", Number(estadoPuerta));
//Escucha la orden del cliente
socket.on('emisionOrden', function(data) { //get light switch status from client
//Escucha la orden del cliente
socket.on('emisionOrden', function(data) { //get light switch status from client
var ordenRecibida = data;
var ordenRecibida = data;
if(estadoPuerta == 0 && ordenRecibida == 0) console.log("La puerta ya se encuentra cerrada");
if(estadoPuerta == 0 && ordenRecibida == 1){
console.log("Abriendo puerta");
}
if(estadoPuerta == 1 && ordenRecibida == 0){
console.log("Cerrando puerta");
}
if(estadoPuerta == 1 && ordenRecibida == 1) console.log("La puerta ya se encuentra abierta");
if (estadoPuerta == 0 && ordenRecibida == 0) console.log("La puerta ya se encuentra cerrada");
if (estadoPuerta == 0 && ordenRecibida == 1) {
console.log("Abriendo puerta");
}
if (estadoPuerta == 1 && ordenRecibida == 0) {
console.log("Cerrando puerta");
}
if (estadoPuerta == 1 && ordenRecibida == 1) console.log("La puerta ya se encuentra abierta");
estadoPuerta = ordenRecibida;
estadoPuerta = ordenRecibida;
socket.broadcast.emit("actualizarEstado", Number(estadoPuerta));
socket.emit("actualizarEstado", Number(estadoPuerta));
socket.broadcast.emit("actualizarEstado", Number(estadoPuerta));
socket.emit("actualizarEstado", Number(estadoPuerta));
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment