Domotique basée sur le Web basée sur l'IOT utilisant Raspberry Pi

Salut les gars, bienvenue dans le tutoriel d'aujourd'hui, l'une des bonnes choses à propos du Raspberry Pi est la grande capacité et la facilité avec lesquelles il vous donne la possibilité de connecter des appareils à Internet, en particulier pour les projets liés à la domotique. Aujourd'hui, nous allons explorer la possibilité de contrôler les appareils CA en cliquant sur des boutons sur une page Web via Internet. Grâce à ce système domotique basé sur l'IoT, vous pouvez contrôler vos appareils électroménagers de n'importe où dans le monde. Ce serveur Web peut être exécuté à partir de n'importe quel appareil pouvant exécuter des applications HTML, comme un téléphone intelligent, une tablette, un ordinateur, etc.

Composants requis:

Pour ce projet, les exigences relèveront de deux catégories, matériel et logiciel:

I. Exigences matérielles:

1. Raspberry Pi 3 (toute autre version sera sympa)
2. Carte mémoire 8 ou 16 Go exécutant Raspbian Jessie
3. Relais 5v
4. Transistors 2n222
5. Les diodes
6. Fils de cavalier
7. Blocs de connexion
8. LED à tester.
9. Lampe CA à tester
10. Planche à pain et câbles de démarrage
11. Résistance de 220 ou 100 ohms

II. Logiciels requis:

Outre le système d'exploitation Raspbian Jessie fonctionnant sur le raspberry pi, nous utiliserons également le cadre WebIOPi, notepad ++ fonctionnant sur votre PC et filezila pour copier des fichiers du PC vers le raspberry pi, en particulier les fichiers de l'application Web.

De plus, vous n'avez pas besoin de coder en Python pour ce projet domotique, WebIOPi fera tout le travail.

Préparation du Raspberry Pi:

C'est une habitude pour moi et je pense que c'est une bonne chose, la première chose que je fais à chaque fois que je veux utiliser le Raspberry Pi est de mettre à jour le PI. Pour ce projet, cette section comprendra les procédures de mise à jour de Pi et l' installation du framework WebIOPi qui nous aidera à gérer la communication de la page Web vers le raspberry pi. Je devrais probablement dire que cela peut également être fait d'une manière sans doute plus facile en utilisant le cadre de python Flask, mais l'un des aspects intéressants du bricolage est lorsque vous regardez sous le capot et que vous faites le travail difficile. C'est là que vient toute la joie du bricolage.

Pour mettre à jour le raspberry Pi ci-dessous les commandes, puis redémarrer le RPi;

sudo apt-get update sudo apt-get upgrade sudo reboot

Une fois cela fait, la prochaine chose à faire est d' installer le framework webIOPi.

Assurez-vous que vous êtes dans le répertoire personnel en utilisant;

cd ~

Utilisez wget pour obtenir le fichier à partir de leur page sourceforge;

wget

Une fois le téléchargement terminé, extrayez le fichier et accédez au répertoire;

tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /

À ce stade, avant d'exécuter l'installation, nous devons installer un correctif car cette version du WebIOPi ne fonctionne pas avec le raspberry pi 3 que j'utilise et je n'ai pas pu trouver une version du WebIOPi qui fonctionne expressément avec le Pi 3.

Les commandes ci-dessous sont utilisées pour installer le correctif tout en restant dans le répertoire WebIOPi, exécutez;

wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch

Ensuite, nous pouvons exécuter l'installation de configuration pour WebIOPi en utilisant;

sudo./setup.sh

Continuez à dire oui si vous êtes invité à installer des dépendances lors de l'installation de l'installation. Une fois terminé, redémarrez votre pi;

redémarrage sudo

Tester l'installation de WebIOPi:

Avant de passer aux schémas et aux codes, avec le Raspberry Pi de retour, nous devrons tester notre installation WebIOPi pour nous assurer que tout fonctionne bien comme vous le souhaitez.

Exécutez la commande;

sudo webiopi -d -c / etc / webiopi / config

Après avoir émis la commande ci-dessus sur le pi, pointez le navigateur Web de votre ordinateur connecté au raspberry pi vers http: // raspberrypi. mshome.net:8000 ou http; // thepi'sIPaddress: 8000. Le système vous demandera le nom d'utilisateur et le mot de passe.

Le nom d'utilisateur est webiopi Le mot de passe est framboise

Cette connexion peut être supprimée plus tard si vous le souhaitez, mais même votre système domotique mérite un niveau de sécurité supplémentaire pour empêcher n'importe qui avec les appareils de contrôle IP et les appareils IOT dans votre maison.

Après la connexion, regardez autour de vous, puis cliquez sur le lien d'en-tête GPIO.

Pour ce test, nous allons connecter une LED à GPIO 17, alors continuez et définissez GPIO 17 comme sortie.

Cela fait, connectez la led à votre raspberry pi comme indiqué dans les schémas ci-dessous.

Après la connexion, revenez à la page Web et cliquez sur le bouton de la broche 11 pour allumer ou éteindre le voyant. De cette façon, nous pouvons contrôler le GPIO Raspberry Pi à l'aide de WebIOPi.

Après le test, si tout a fonctionné comme décrit, nous pouvons revenir au terminal et arrêter le programme avec CTRL + C.Si vous rencontrez un problème avec cette configuration, contactez-moi via la section commentaires.

Plus d'informations sur Webiopi peuvent être trouvées sur sa page Wiki (http://webiopi.trouch.com/INSTALL.html)

Une fois le test terminé, nous sommes alors prêts à démarrer le projet principal.

Création de l'application Web pour la domotique Raspberry Pi:

Ici, nous éditerons la configuration par défaut du service WebIOPi et ajouterons notre propre code à exécuter lors de l'appel. La première chose que nous ferons est d' installer filezilla ou tout autre logiciel de copie FTP / SCP sur notre PC. Vous conviendrez avec moi que le codage sur le pi via le terminal est assez stressant, donc filezilla ou tout autre logiciel SCP sera utile à ce stade. Avant de commencer à écrire les codes de script html, css et java pour cette application Web domotique IoT et de les déplacer vers le Raspberry Pi, créons le dossier du projet où tous nos fichiers Web seront.

Assurez-vous que vous êtes dans le répertoire de base en utilisant, puis créez le dossier, allez dans le dossier créé et créez un dossier html dans le répertoire:

cd ~ mkdir webapp cd webapp mkdir html

Créez un dossier pour les scripts, CSS et images dans le dossier html

mkdir html / css mkdir html / img mkdir html / scripts

Avec nos fichiers créés, passons à l'écriture des codes sur notre PC et ensuite au Pi via filezilla.

Le code JavaScript:

Le premier morceau de code que nous écrirons est celui du javascript. C'est un simple script pour communiquer avec le service WebIOPi.

Il est important de noter que pour ce projet, notre application Web sera composée de quatre boutons, ce qui signifie que nous prévoyons de contrôler seulement quatre broches GPIO, bien que nous ne contrôlerons que deux relais dans notre démonstration. Vérifiez la vidéo complète à la fin.

webiopi (). ready (function () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). setFunction (22, "out"); webiopi ().setFunction (23, "out"); var content, button; content = $ ("# content"); button = webiopi (). createGPIOButton (17, "Relay 1"); content.append (button); bouton = webiopi (). createGPIOButton (18, "Relais 2"); content.append (bouton); bouton = webiopi (). createGPIOButton (22, "Relais 3"); content.append (bouton); bouton = webiopi ().createGPIOButton (23, "Relais 4"); content.append (bouton);});

Le code ci-dessus s'exécute lorsque WebIOPi est prêt.

Ci-dessous, nous avons expliqué le code JavaScript:

webiopi (). ready (function (): Ceci indique simplement à notre système de créer cette fonction et de l'exécuter lorsque le webiopi est prêt.

webiopi (). setFunction (23, "out"); Cela nous aide à indiquer au service WebIOPi de définir GPIO23 comme sortie. Nous avons quatre boutons ici, vous pourriez en avoir plus si vous implémentez plus de boutons.

contenu var, bouton; Cette ligne indique à notre système de créer une variable nommée content et de faire de la variable un bouton.

content = $ ("# content"); La variable de contenu sera toujours utilisée dans notre html et notre css. Ainsi, lorsque nous nous référons à #content, le framework WebIOPi crée tout ce qui lui est associé.

bouton = webiopi (). createGPIOButton (17, "Relais 1"); WebIOPi peut créer différents types de boutons. Le morceau de code ci-dessus nous aide à dire au service WebIOPi de créer un bouton GPIO qui contrôle la broche GPIO dans ce cas 17 étiqueté «Relay 1». Il en va de même pour les autres.

content.append (bouton); Ajoutez ce code à tout autre code pour le bouton créé dans le fichier html ou ailleurs. D'autres boutons peuvent être créés et auront tous les mêmes propriétés que ce bouton. Ceci est particulièrement utile lors de l'écriture du CSS ou du script.

Après avoir créé les fichiers JS, nous les sauvegardons, puis les copions à l'aide de filezilla dans webapp / html / scripts si vous avez créé vos fichiers de la même manière que moi.

Cela fait, nous passons à la création du CSS. Vous pouvez télécharger le code entier à partir du lien donné dans la section Code à la fin.

Le code CSS:

Le CSS nous aide à rendre notre page Web domotique IoT Raspberry Pi jolie.

Je voulais que la page Web ressemble à l'image ci-dessous et j'ai donc dû écrire la feuille de style smarthome.css pour y parvenir.

Ci-dessous, nous avons expliqué le code CSS:

Le script CSS semble trop volumineux pour être inclus ici, je vais donc en choisir une partie et les utiliser pour la ventilation. Vous pouvez télécharger le fichier CSS complet ici. CSS est facile et vous pouvez le comprendre simplement en parcourant le code CSS. Vous pouvez facilement skier cette partie et utiliser notre code CSS tout de suite.

La première partie du script représente la feuille de style pour le corps de l'application Web et celle illustrée ci-dessous;

body {couleur de fond: #ffffff; image de fond: url ('/ img / smart.png'); background-repeat: pas de répétition; background-position: centre; background-size: couverture; police: bold 18px / 25px Arial, sans-serif; couleur: LightGray; }

Je veux croire que le code ci-dessus est explicite, nous définissons la couleur d'arrière-plan comme #ffffff qui est blanc, puis nous ajoutons une image d'arrière-plan située à cet emplacement du dossier (vous vous souvenez de notre configuration de dossier précédente?), Nous nous assurons que l'image ne le fait pas Répétez en définissant la propriété background-repeat sur no-repeat, puis demandez au CSS de centraliser l'arrière-plan. Nous passons ensuite à définir la taille, la police et la couleur de l'arrière-plan.

Avec le corps fait, nous avons écrit le css pour que les boutons soient jolis.

bouton {affichage: bloc; position: relative; marge: 10px; rembourrage: 0 10px; text-align: centre; texte-décoration: aucun; largeur: 130px; hauteur: 40px; police: bold 18px / 25px Arial, sans empattement; la couleur noire; texte-ombre: 1px 1px 1px rgba (255, 255, 255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; rayon de la bordure: 30px;

Pour rester bref, tout le reste du code a également été fait pour lui donner une belle apparence. Vous pouvez les changer pour voir ce qui se passe, je pense que cela s'appelle l'apprentissage par essais et erreurs, mais une bonne chose à propos du CSS est que les choses sont exprimées en anglais simple, ce qui signifie qu'elles sont assez faciles à comprendre. L'autre partie du bloc de boutons a quelques extras pour l'ombre du texte sur le bouton et l'ombre du bouton. Il a également un léger effet de transition qui lui donne un aspect agréable et réaliste lorsque le bouton est enfoncé. Ceux-ci sont définis séparément pour le webkit, le firefox, l'opéra, etc. juste pour garantir que la page Web fonctionne de manière optimale sur toutes les plates-formes.

Le bloc de code suivant est destiné au service WebIOPi pour lui indiquer qu'il s'agit d'une entrée du service WebIOPi.

i nput {affichage: bloc; largeur: 160px; hauteur: 45px; }

La dernière chose que nous voulons faire est de donner une sorte d'indication lorsque le bouton a été enfoncé. Ainsi, vous pouvez en quelque sorte regarder l'écran et la couleur des boutons vous permet de connaître l'état actuel. Pour ce faire, la ligne de code ci-dessous a été implémentée pour chaque bouton.

# gpio17.LOW {couleur d'arrière-plan: gris; la couleur noire; } # gpio17.HIGH {couleur d'arrière-plan: rouge; couleur: LightGray; }

Les lignes de codes ci-dessus modifient simplement la couleur du bouton en fonction de son état actuel. Lorsque le bouton est désactivé (BAS), la couleur d'arrière-plan des boutons devient grise pour indiquer qu'il est inactif et lorsqu'il est activé (HAUT), la couleur d'arrière-plan du bouton devient ROUGE.

CSS dans le sac, enregistrez-le sous smarthome.css, puis déplacez-le via filezilla (ou tout autre logiciel SCP que vous souhaitez utiliser) dans le dossier styles de notre raspberry pi et corrigez le dernier élément, le code html. N'oubliez pas de télécharger le CSS complet à partir d'ici.

Code HTML:

Le code html rassemble tout, javascript et la feuille de style.

Bouton poussoir; recevoir du bacon

Dans la balise head, il existe des caractéristiques très importantes.

La ligne de code ci-dessus permet à l'application Web d'être enregistrée sur un bureau mobile en utilisant Chrome ou Mobile Safari. Cela peut être fait via le menu Chrome. Cela donne à l'application une sensation de lancement facile depuis le bureau mobile ou la maison.

La ligne de code suivante ci-dessous donne une sorte de réactivité à l'application Web. Il lui permet d'occuper l'écran de n'importe quel appareil sur lequel il est lancé.

La ligne de code suivante déclare le titre affiché sur la barre de titre de la page Web.

Les quatre lignes de codes suivantes remplissent chacune la fonction de lier le code html à plusieurs ressources dont il a besoin pour fonctionner comme vous le souhaitez.

La première ligne ci-dessus appelle le JavaScript principal du framework WebIOPi qui est codé en dur à la racine du serveur. Cela doit être appelé chaque fois que WebIOPi doit être utilisé.

La deuxième ligne pointe la page html vers notre script jQuery, la troisième la pointe dans la direction de notre feuille de style. Enfin, la dernière ligne permet de configurer une icône à utiliser sur le bureau mobile au cas où nous déciderions de l'utiliser comme application Web ou comme favicon pour la page Web.

La section corps du code html contient juste des balises break pour garantir que les boutons sont correctement alignés avec la ligne ci-dessous indiquant à notre code html d'afficher ce qui est écrit dans le fichier JavaScript. L' id = "content" doit vous rappeler la déclaration de contenu de notre bouton précédemment sous le code JavaScript.

Vous connaissez la perceuse, le code html comme index.html et passez au dossier html sur le Pi via filezilla. Vous pouvez télécharger tous les fichiers CSS, JS et HTML à partir d'ici.

Modifications du serveur WebIOPi pour la domotique:

À ce stade, nous sommes prêts à commencer à créer nos schémas et à tester notre application Web, mais avant cela, nous devons modifier le fichier de configuration du service webiopi afin qu'il soit indiqué d'utiliser les données de notre dossier html au lieu des fichiers de configuration qui l'accompagnent.

Pour modifier la configuration, exécutez ce qui suit avec l'autorisation root;

sudo nano / etc / webiopi / config

Recherchez la section http du fichier de configuration, vérifiez sous la section où vous avez quelque chose comme, #Utilisez doc-root pour changer l'emplacement par défaut des fichiers HTML et de ressources

Commentez tout ce qui se trouve en dessous en utilisant # puis si votre dossier est configuré comme le mien, pointez votre doc-root sur le chemin de votre fichier de projet

doc-root = / accueil / pi / webapp / html

Sauvegarder et quitter. Vous pouvez également changer le port de 8000, au cas où vous auriez un autre serveur fonctionnant sur le pi utilisant ce port. Sinon, enregistrez et quittez, alors que nous avançons.

Il est important de noter que vous pouvez modifier le mot de passe du service WebIOPi à l'aide de la commande;

sudo webiopi-passwd

Il vous demandera un nouveau nom d'utilisateur et mot de passe. Cela peut également être totalement supprimé, mais la sécurité est importante, non?

Enfin, exécutez le service WebIOPi en émettant la commande ci-dessous:

sudo /etc/init.d/webiopi start

L'état du serveur peut être vérifié en utilisant;

sudo /etc/init.d/webiopi status

Il peut être arrêté de fonctionner en utilisant;

sudo /etc/init.d/webiopi stop

Pour configurer WebIOPi pour qu'il s'exécute au démarrage, utilisez;

sudo update-rc.d valeurs par défaut de webiopi

Si vous souhaitez inverser et empêcher son exécution au démarrage, utilisez;

sudo update-rc.d webiopi supprimer

Schéma de circuit et explication:

Une fois notre logiciel installé, nous sommes tous prêts à commencer à créer les schémas de ce projet d'appareils ménagers contrôlé par le Web.

Bien que je ne puisse pas mettre la main sur des modules de relais, qui me semblent plus faciles à utiliser pour les amateurs. Je dessine donc ici les schémas de relais 5v simples autonomes ordinaires.

Connectez votre circuit comme indiqué dans le circuit de fritzing ci-dessus. Vous devez noter que COM, NO (normalement ouvert) et NC (normalement fermé) de votre propre relais peuvent être situés à différents côtés / points. Veuillez utiliser un millimètre pour le tester. En savoir plus sur le relais ici.

Avec nos composants connectés, lancez votre serveur, à partir d'une page Web, accédez à l'IP de votre Raspberry Pi et indiquez le port comme décrit précédemment, connectez-vous avec votre nom d'utilisateur et votre mot de passe, et vous devriez voir une page Web qui ressemble exactement à l'image ci-dessous.

Vous pouvez désormais contrôler facilement quatre appliaces AC Home depuis n'importe où sans fil, simplement en cliquant sur les boutons. Cela fonctionnera à partir d'un téléphone portable, d'une tablette, etc. et vous pouvez ajouter plus de boutons et de relais pour contrôler plus d'appareils. Regardez la vidéo complète ci-dessous.

C'est ça les gars, merci de rester pour celui-ci. Si vous avez des questions, déposez-les dans la zone de commentaire.