Paso 3: Configurar jQuery y SensorMonkey
Como no soy un desarrollador JavaScript, hice uso del código de este enlace.
He modificado el código para satisfacer la necesidad básica aquí para permitir al usuario seleccionar entre las opciones - bloqueo y desbloqueo.
Tiene un control deslizante que, cuando deslizó a la derecha abre la huelga eléctrica y a la izquierda que quede.
Este es el código final:
<! Html DOCTYPE >
< html >
< head >
< title > remoto controlado huelga eléctrica usando Arduino, SensorMonkey, jQuery < / title >
< link rel = "stylesheet" type = "text/css" href = "jquery-ui-1.10.4.custom.css" / >
< estilo tipo = "text/css" >
{} #pan-slider
margen-bottom: 10px;
ancho: 320px;
}
visualización de panorámica # {}
texto-alinee: Centro;
ancho: 320px;
}
{.rotation}
color: #F6931F;
font-weight: bold;
}
< / estilo >
< script tipo = "texto/javascript" src = «jquery-1.7.2.min.js» >< / script >
< script tipo = "texto/javascript" src = «jquery-ui-1.10.4.custom.min.js» >< / script >
< script tipo = "texto/javascript" src = "https://sensormonkey.eeng.nuim.ie/socket.io/socket.io.js" >< / script >
< script tipo = "texto/javascript" src = "https://sensormonkey.eeng.nuim.ie/js/client.min.js" >< / script >
< /HEAD >
< cuerpo >
sistema de seguridad remoto Inicio < h1 > < / h1 >
< div id = "pan-slider" >< / div >
< div id = "visualización de panorámica" > deslice de derecha a izquierda para bloquear y desbloquear < span clase = "rotación" >< / span >< / div >
< script tipo = "texto/javascript" >
Convierte un entero (o una representación de una cadena) a un carácter hexadecimal (0-9A-F).
función toHex (i) {}
volver a parseInt (i) .toString (16) .toUpperCase();
}
$(function() {}
Crear slider de pan.
$("#pan-slider") .slider ({}
gama: "min",
valor: 0,
min: 0,
máximo: 15,
paso: 15,
diapositiva: función (event, ui) {}
Actualización de interfaz de usuario.
$("visualización de panorámica # .rotation") .html (180 * ui.value / 15);
Cálculo combinado ángulos de rotación pan/tilt y enviar al editor de flujo
como un par de caracteres hexadecimales. Pan es alta 4 bits; la inclinación es baja 4 bits. Por
prefijo con '#', decimos SensorMonkey interpretar como datos binarios.
pan de var = toHex (ui.value);
client.deliverToStreamPublisher ("/ privado/Homelock", "#" + pan + pan);
}
} );
// 1. Conectarse a SensorMonkey
// 2. Únete a espacio de nombres
// 3. Suscribirse al flujo de
var cliente = new SensorMonkey.Client ("https://sensormonkey.eeng.nuim.ie");
Client.on ("connect", function() {}
client.joinNamespace ("Your_Namespace", "Your_private_key", función (e) {}
Si (e) {}
ALERT ("error a espacio de nombres:" + e);
retorno;
}
client.subscribeToStream ("/ privado/Sensor_name", (e) {//Sensor_name a tener en SensorMonkey al crear un sensor que la función
Si (e) {}
ALERT ("error al suscribirse a Arroyo:" + e);
retorno;
}
} );
} );
Client.on ("desconexión", function() {}
ALERT ("cliente se desconectó!");
} );
} );
} );
< /script >
< /body >
< / html >
Otra vez le sugerimos Revise el paso 6 de con el fin de obtener una mejor comprensión en la información sobre bibliotecas de jQuery, CSS y archivos de imágenes y archivos html y código jQuery.
Una vez que el jQuery UI es configuración, obtener una cuenta gratuita en SensorMonkey y crear un Sensor llamado "Homelock". Usted puede darle cualquier nombre pero asegúrese de que el mismo es utilizado en el código html.
client.subscribeToStream ( "/ privado/Sensor_name", (e) {//Sensor_name a tener en SensorMonkey al crear un sensor que la función
Yo uso el puerto - 8000 para el sensor.
En esta configuración estoy usando un PC para servir como el sistema que se ejecuta SensorMonkey, floración y también conectado a Freeduino.
Así que la IP se mantendría como 127.0.0.1 para el Sensor.
