Styra åtkomsten till din låsa distans med Arduino, SensorMonkey och RF modul (3 / 6 steg)

Steg 3: Ställa jQuery och SensorMonkey

Jag ändrade koden för att uppfylla grundläggande behovet här att tillåta användaren att välja mellan alternativen - låsa och låsa upp.
Det har ett reglage som när gled till de högra låser upp elektriska strejken och till vänster det låser det.

Detta är den sista koden:

<! DOCTYPE html >
< html >
< head >
< title > Remote kontrolleras elektrisk Strike använder Arduino, SensorMonkey, jQuery < / title >
< länka rel = "stylesheet" type = "text/css" href = "jquery-ui-1.10.4.custom.css" / >
< style type = "text/css" >

#pan-reglaget {
marginal-botten: 10px;
bredd: 320px;
}
#pan-display {
text-align: center;
bredd: 320px;
}
.rotation {
färg: #F6931F;
font-weight: bold;
}
< / stil >
< script type = "text/javascript" src = "jquery-1.7.2.min.js" >< / script >
< script type = "text/javascript" src = "jquery-ui-1.10.4.custom.min.js" >< / script >
< script type = "text/javascript" src = "https://sensormonkey.eeng.nuim.ie/socket.io/socket.io.js" >< / script >
< script type = "text/javascript" src = "https://sensormonkey.eeng.nuim.ie/js/client.min.js" >< / script >
< / head >
< body >

< h1 > Remote hem trygghetssystemet < / h1 >

< div id = "pan-reglaget" >< / div >
< div id = "pan-display" > Skjut rätt att låsa upp och vänster för att låsa < span class = "rotation" >< / span >< / div >
< script type = "text/javascript" >
Konverterar ett heltal (eller en strängrepresentation av en) till en hexadecimal tecken (0-9A-F).
funktion toHex (i) {
returnera parseInt (i) .toString (16) .toUpperCase();
}

$(function() {

Skapa pan slider.
$("#pan-reglaget") .slider ({
utbud: "min",
värde: 0,
min: 0,
Max: 15,
steg: 15,
bild: funktion (händelse, ui) {
Uppdatera UI.
$("#pan-display .rotation") .html (180 * ui.value / 15);

Beräkna kombinerat pan/tilt rotation vinklar och skicka till stream förlaget
parvis hexadecimala tecken. Pan är hög 4 bitar; Tilt är låg 4 bitar. Genom
skapar prefix med '#', berättar vi SensorMonkey att tolka som binära data.
var pan = toHex (ui.value);

client.deliverToStreamPublisher ("/ private/Homelock", "#" + kastrull + pan);

}
} );

// 1. Ansluta till SensorMonkey
// 2. Gå med i namnområdet
// 3. Prenumerera på ström

var kund = nya SensorMonkey.Client ("https://sensormonkey.eeng.nuim.ie");
client.on ("connect", function() {
client.joinNamespace ("Your_Namespace", "Your_private_key", funktion (e) {
om (e) {
Alert ("kunde inte ansluta namnområde:" + e);
hemkomst.
}

client.subscribeToStream ("/ private/Sensor_name", funktion (e) {//Sensor_name ges i SensorMonkey när du skapar en sensor där
om (e) {
Alert ("Det gick inte att prenumerera på ström:" + e);
hemkomst.
}
} );
} );

client.on ("koppla", function() {
Alert ("klienten har kopplats!");
} );
} );
} );
< / script >
< / body >
< / html >

Jag föreslår igen för att kolla på steg 6 av för att få en bättre inblick i jQuery kod och information om jQuery bibliotek, CSS och bildfiler och HTML-filer.

När jQuery UI är inställt, få ett gratis konto på SensorMonkey och skapa en Sensor som kallas "Homelock". Du kan ge några namn men se till att samma används i HTML-koden.

client.subscribeToStream ( "/ private/Sensor_name", funktion (e) {//Sensor_name ges i SensorMonkey när du skapar en sensor där

Jag använder porten - 8000 för sensorn.

I denna setup använder jag en enda dator för att fungera som det system som kör SensorMonkey, Blom och också anslutna till Freeduino.
Undersökningsperioden skulle förbli som 127.0.0.1 för sensorn.