Toegang tot uw LOCK op afstand met behulp van Arduino, SensorMonkey en RF module (3 / 6 stap)

Stap 3: Setup jQuery en SensorMonkey

Ik wijzigde de code om te voldoen aan de fundamentele behoefte hier kan de gebruiker om te kiezen tussen de opties - LOCK en UNLOCK.
Het heeft een schuif die toen gleed naar de juiste opent de elektrische staking en links het sluit het.

Dit is de definitieve code:

<! Html DOCTYPE >
< html >
< head >
< titel > Remote controlled elektrische Strike met behulp van Arduino, SensorMonkey, jQuery < / title >
< link rel = "stylesheet" type = "text/css" href = "jquery-ui-1.10.4.custom.css" / >
< stijl type = "text/css" >


#pan-schuifregelaar {}
margin-bottom: 10px;
breedte: 320px;
}
pan-display # {}
text-align: Midden;
breedte: 320px;
}
.Rotation {}
kleur: #F6931F;
font-weight: bold;
}
< / style >
< 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 Home security system < / h1 >

< div id = "pan-slider" >< / div >
< div id = "pan-display" > Slide recht om te ontgrendelen en links naar LOCK < span klasse = "rotation" >< / span >< / div >
< script type = "text/javascript" >
Een geheel getal (of een tekenreeksweergave van een) omgezet in een hexadecimaal teken (0-9A-F).
functie toHex (i) {}
keren parseInt (i) .toString (16) de .toUpperCase();
}

$(function {}

Pan slider maken
$("#pan-slider") .slider ({}
bereik: "min",
waarde: 0,
min: 0,
Max: 15,
stap: 15,
dia: function (gebeurtenis, ui) {}
UI update.
$("pan-display # .rotation") .html (180 * ui.value / 15);

Berekenen gecombineerd pan/tilt rotatiehoeken en verzenden van de stream Uitgever
Als een hexadecimaal teken paar. Pan is hoog 4 bits; Tilt is lage 4 bits. Door
voorvoegsel met '#', vertellen we SensorMonkey te interpreteren als binaire gegevens.
var pan = toHex (ui.value);

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

}
} );

// 1. Verbinden met SensorMonkey
// 2. Lid worden van de naamruimte
// 3. Abonneer je op stroom

var client = nieuwe SensorMonkey.Client ("https://sensormonkey.eeng.nuim.ie");
client.on ("verbinden", function {}
client.joinNamespace ("Your_Namespace", "Your_private_key", functie (e) {}
Als (e) {}
alert ("Failed to join naamruimte:" + e);
terugkeer;
}

client.subscribeToStream ("/ private/Sensor_name", functie (e) {//Sensor_name worden gegeven in SensorMonkey wanneer u er een sensor maakt
Als (e) {}
alert ("abonneren op stream mislukt:" + e);
terugkeer;
}
} );
} );

client.on ("verbinding verbreken", function {}
alert ("Client is verbroken!");
} );
} );
} );
< / script >
< / body >
< / html >

Ik stel opnieuw om te controleren op de stap 6 van om een beter inzicht in de jQuery code en informatie over bibliotheken van jQuery, CSS en afbeeldingsbestanden en HTML-bestanden.

Zodra de jQuery UI ingesteld is, krijgen een gratis account op SensorMonkey en maak een Sensor genaamd "Homelock". U kunt het elke gewenste naam geven, maar zorg ervoor dat hetzelfde wordt gebruikt in de HTML-code.

client.subscribeToStream ( "/ private/Sensor_name", functie (e) {//Sensor_name worden gegeven in SensorMonkey wanneer u er een sensor maakt

Ik gebruik de haven - 8000 voor de sensor.

In deze opzet ben ik met behulp van een enkele PC om te dienen als het systeem loopt SensorMonkey, Bloom en ook aangesloten op Freeduino.
Zo zou het onderzoektijdvak als 127.0.0.1 blijven voor de Sensor.