Contrôler l’accès à votre serrure à distance en utilisant un module Arduino, SensorMonkey et RF (3 / 6 étapes)

Étape 3: Installation jQuery et SensorMonkey

J’ai modifié le code pour remplir le besoin fondamental ici pour permettre à l’utilisateur de choisir entre les options - LOCK et UNLOCK.
Il dispose d’un curseur qui, une fois glissé à la droite ouvre la gâche électrique et vers la gauche il verrouille.

Voici le code final :

< ! DOCTYPE html >
< html >
< tête >
< titre > télécommande contrôlée Strike électrique en utilisant Arduino, SensorMonkey, jQuery < /title >
< link rel = « stylesheet » type = « text/css » href = « jquery-ui-1.10.4.custom.css » / >
< style type = « text/css » >


{#pan-slider
marge-bottom : 10px ;
Largeur : 320px ;
}
{#pan-affichage
text-align : center ;
Largeur : 320px ;
}
.rotation {}
couleur : #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 >
< corps >

système de sécurité de résidence isolée < h1 > < / h1 >

< div id = « pan-slider » >< / div >
< div id = « pan-affichage » > droit Slide pour déverrouiller et gauche à verrou < span class = « rotation » >< / span >< / div >
< script type = « text/javascript » >
Convertit un entier (ou une représentation de chaîne d’un) un caractère hexadécimal (0-9 a-F).
function toHex (i) {}
Retour à parseInt (i) .toString (16) .toUpperCase() ;
}

$(function() {}

Créer pan slider.
$("#pan-slider") .slider ({
gamme: « min »,
valeur: 0,
min: 0,
Max : 15,
étape : 15,
diapositive : function (event, ui) {}
Mettre à jour l’interface utilisateur.
$("#pan-affichage .rotation") .html (180 * ui.value / 15) ;

Calculer combinée des angles de rotation pan/tilt et envoyer à l’éditeur de flux de données
comme une paire de caractères hexadécimaux. Pan est élevés 4 bits ; Tilt est 4 bits de poids faible. Par
préfixant par « # », nous disons SensorMonkey à interpréter comme des données binaires.
pan de var = toHex (ui.value) ;

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

}
} );

// 1. Se connecter à SensorMonkey
// 2. Rejoignez l’espace de noms
// 3. S’abonner au flux de données

var client = new SensorMonkey.Client ("https://sensormonkey.eeng.nuim.ie") ;
client.on ("se connecter", function() {}
client.joinNamespace ("Your_Namespace", « Your_private_key », function (e) {}
Si (e) {}
Alert ("Impossible de rejoindre l’espace de noms:" + e) ;
retour ;
}

client.subscribeToStream ("/ private/Sensor_name", function (e) {//Sensor_name à donner dans SensorMonkey lorsque vous créez un capteur il
Si (e) {}
Alert ("n’a pas pu s’abonner au flux de données:" + e) ;
retour ;
}
} );
} );

client.on ("déconnecter", function() {}
Alert ("Client a été déconnecté!") ;
} );
} );
} );
< /script >
< / body >
< / html >

Je suggère à nouveau pour vérifier sur l' étape 6 de afin d’obtenir un meilleur aperçu de code jQuery et des informations concernant les bibliothèques jQuery, CSS et les fichiers image et des fichiers html.

Une fois le jQuery UI est configuré, obtenir un compte gratuit sur SensorMonkey et créer un capteur appelé « Homelock ». Vous pouvez lui donner n’importe quel nom, mais veillez à ce que le même est utilisé dans le code html.

client.subscribeToStream ( « / private/Sensor_name », function (e) {//Sensor_name à donner dans SensorMonkey lorsque vous créez un capteur il

J’utilise le port - 8000 pour le capteur.

Dans cette configuration, je suis en utilisant un seul PC pour servir le système qui exécute SensorMonkey, Bloom et aussi connecté à Freeduino.
Si l’adresse IP resterait comme 127.0.0.1 pour le capteur.