Ahududu pi kullanan IoT tabanlı web kontrollü ev otomasyonu

Merhaba arkadaşlar, bugünün öğreticisine hoş geldiniz, Raspberry Pi ile ilgili iyi şeylerden biri, özellikle Ev Otomasyonuyla İlgili Projeler için size cihazları internete bağlama fırsatı veren büyük yetenek ve kolaylıktır. Bugün, internet kullanarak bir web sayfasındaki düğmelere tıklayarak AC cihazlarını kontrol etme olasılığını keşfedeceğiz. Bu IoT tabanlı ev otomasyon sistemini kullanarak Ev aletlerinizi dünyanın her yerinden kontrol edebilirsiniz. Bu web sunucusu Akıllı Telefon, tablet, bilgisayar vb. Gibi HTML uygulamalarını çalıştırabilen herhangi bir cihazdan çalıştırılabilir.

Gerekli Bileşenler:

Bu proje için gereksinimler, Donanım ve Yazılım olmak üzere iki kategoriye ayrılacaktır:

I. Donanım Gereksinimleri:

1. Raspberry Pi 3 (Başka herhangi bir Sürüm güzel olacak)
2. Raspbian Jessie çalıştıran 8 veya 16 GB hafıza kartı
3. 5v Röleler
4. 2n222 transistörler
5. Diyotlar
6. Atlama Telleri
7. Bağlantı Blokları
8. Test edilecek LED'ler.
9. Test edilecek AC lambası
10. Breadboard ve atlama kabloları
11. 220 veya 100 ohm direnç

II. Yazılım gereksinimleri:

Raspbian Jessie işletim sistemi ahududu pi çalışan Asides, biz de kullanıyor olacak WebIOPi çerçeve çalışması, not defteri ++ PC ve üzerinde çalışan FileZila ahududu pi PC, özellikle web uygulaması dosyalarından dosyaları kopyalamak için.

Ayrıca bu Ev Otomasyon Projesi için Python'da kod yazmanıza gerek yok, WebIOPi tüm işi yapacak.

Raspberry Pi'yi hazırlamak:

Bu benim için bir tür alışkanlık ve bence bu iyi bir alışkanlık, Raspberry Pi'yi her kullanmak istediğimde ilk yaptığım şey PI'yi güncellemektir. Bu proje için, bu bölüm Pi güncelleme prosedürlerinden ve web sayfasından ahududu pi'ye iletişimi yönetmemize yardımcı olacak WebIOPi çerçevesinin kurulmasından oluşacaktır. Muhtemelen bunun python Flask çerçeve çalışması kullanılarak tartışmasız daha kolay bir şekilde yapılabileceğini belirtmeliyim, ancak DIY ile ilgili ilginç şeylerden biri, kaputun altına bir göz atıp zor işi yaptığınız zamandır. İşte DIY'in tüm neşesinin geldiği yer.

To Ahududu Pi güncellemek komutları altında ve daha sonra RPI yeniden;

sudo apt-get update sudo apt-get yükseltme sudo yeniden başlatma

Bunu yaptıktan sonra, bizim için sonraki şey webIOPi çerçevesini kurmamızdır.

Kullanarak ana dizinde olduğunuzdan emin olun;

cd ~

Dosyayı sourceforge sayfasından almak için wget kullanın;

wget

İndirme tamamlandığında, dosyayı çıkartın ve dizine gidin;

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

Kurulumu çalıştırmadan önce bu noktada , WebIOPi'nin bu sürümü kullandığım ahududu pi 3 ile çalışmadığından ve WebIOPi'nin Pi 3 ile açıkça çalışan bir sürümünü bulamadığım için bir yama yüklememiz gerekiyor..

Yamayı yüklemek için halen WebIOPi dizinindeyken aşağıdaki komutlar kullanılır, çalıştırın;

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

Ardından WebIOPi için kurulum kurulumunu aşağıdakileri kullanarak çalıştırabiliriz;

sudo./setup.sh

Kurulum kurulumu sırasında herhangi bir bağımlılık yüklemeniz istenirse evet demeye devam edin. Bittiğinde pi'nizi yeniden başlatın;

sudo yeniden başlatma

WebIOPi Kurulumunu Test Et:

Şemalara ve kodlara geçmeden önce, Raspberry Pi tekrar açıldığında, her şeyin istendiği gibi çalıştığından emin olmak için WebIOPi kurulumumuzu test etmemiz gerekecek.

Komutu çalıştırın;

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

Pi üzerinde yukarıdaki komutu verdikten sonra, ahududu pi'ye bağlı bilgisayarınızın web tarayıcısını http: // raspberrypi'ye yönlendirin. mshome.net:8000 veya http; // thepi'nin IPadresi: 8000. Sistem sizden kullanıcı adı ve şifre isteyecektir.

Kullanıcı adı webiopi Parola ahududu

Bu oturum açma, istenirse daha sonra kaldırılabilir, ancak ev otomasyon sisteminiz bile, evinizde yalnızca IP kontrol cihazları ve IOT cihazları olan herkesi önlemek için bazı ekstra güvenlik düzeyini hak eder.

Oturum açtıktan sonra etrafa bakın ve ardından GPIO başlık bağlantısına tıklayın.

Bu test için GPIO 17'ye bir LED bağlayacağız, bu yüzden devam edin ve GPIO 17'yi çıkış olarak ayarlayın.

Bunu yaptıktan sonra, led'i ahududu pi'nize aşağıdaki şemalarda gösterildiği gibi bağlayın.

Bağlantıdan sonra, web sayfasına geri dönün ve LED'i açmak veya kapatmak için pin 11 düğmesine tıklayın. Bu şekilde Raspberry Pi GPIO'yu WebIOPi kullanarak kontrol edebiliriz .

Testten sonra, her şey anlatıldığı gibi çalıştıysa, terminale geri dönüp CTRL + C ile programı durdurabiliriz. Bu kurulumla ilgili herhangi bir sorun yaşarsanız, yorum bölümünden bana ulaşın.

Webiopi hakkında daha fazla bilgi Wiki sayfasında bulunabilir (http://webiopi.trouch.com/INSTALL.html)

Test tamamlandıktan sonra ana projeyi başlatmaya hazırız.

Raspberry Pi Ev Otomasyonu için Web Uygulaması Oluşturma:

Burada WebIOPi hizmetinin varsayılan yapılandırmasını düzenleyeceğiz ve çağrıldığında çalıştırılacak kendi kodumuzu ekleyeceğiz. Yapacağımız ilk şey, filezilla'yı veya PC'mize kurulu herhangi bir FTP / SCP kopyalama yazılımını almaktır. Terminal aracılığıyla pi üzerinde kodlamanın oldukça stresli olduğu konusunda benimle hemfikir olacaksınız, bu nedenle filezilla veya başka herhangi bir SCP yazılımı bu aşamada kullanışlı olacaktır. Bu IoT Ev otomasyon Web uygulaması için html, css ve java script kodlarını yazmaya ve bunları Raspberry Pi'ye taşımaya başlamadan önce, tüm web dosyalarımızın olacağı proje klasörünü oluşturalım.

Kullanarak ana dizinde olduğunuzdan emin olun, ardından klasörü oluşturun, oluşturulan klasöre gidin ve dizinde html klasörü oluşturun:

cd ~ mkdir webapp cd webapp mkdir html

HTML klasörünün içindeki komut dosyaları, CSS ve resimler için bir klasör oluşturun

mkdir html / css mkdir html / img mkdir html / betikler

Oluşturulan dosyalarımızla, kodların bilgisayarımıza yazılmasına ve ardından filezilla ile Pi'ye geçelim.

JavaScript Kodu:

Yazacağımız ilk kod parçası javascript'inkidir. WebIOPi hizmetiyle iletişim kurmak için basit bir komut dosyası.

Bu proje için web uygulamamızın dört düğmeden oluşacağına dikkat etmek önemlidir, bu da gösterimimizde sadece iki röleyi kontrol ediyor olsak da sadece dört GPIO pinini kontrol etmeyi planladığımız anlamına gelir. Sonunda videonun tamamını kontrol edin.

webiopi (). ready (function () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). setFunction (22, "out"); webiopi ().setFunction (23, "çıkış"); var içerik, düğme; içerik = $ ("# içerik"); düğme = webiopi (). createGPIOButton (17, "Geçiş 1"); içerik.append (düğme); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (düğme); button = webiopi ().createGPIOButton (23, "Relay 4"); content.append (düğme);});

Yukarıdaki kod, WebIOPi hazır olduğunda çalışır.

Aşağıda JavaScript kodunu açıkladık:

webiopi (). ready (function (): Bu, sistemimize bu işlevi yaratması ve webiopi hazır olduğunda çalıştırması talimatını verir.

webiopi (). setFunction (23, "çıkış"); Bu, WebIOPi hizmetine GPIO23'ü çıktı olarak ayarlamasını söylememize yardımcı olur. Burada dört düğmemiz var, daha fazla düğme uyguluyorsanız daha fazlasına sahip olabilirsiniz.

var içerik, düğme; Bu satır, sistemimize içerik adlı bir değişken oluşturmasını ve değişkeni bir düğme yapmasını söyler.

içerik = $ ("# içerik"); İçerik değişkeni hala html ve css'lerimizde kullanılacaktır. Dolayısıyla, #content'e atıfta bulunduğumuzda, WebIOPi çerçevesi onunla ilişkili her şeyi oluşturur.

button = webiopi (). createGPIOButton (17, "Relay 1"); WebIOPi farklı türde düğmeler oluşturabilir. Yukarıdaki kod parçası, WebIOPi hizmetine, bu durumda 17 "Röle 1" etiketli GPIO pinini kontrol eden bir GPIO düğmesi oluşturmasını söylememize yardımcı olur. Aynısı diğerleri için de geçerli.

content.append (düğme); Bu kodu, html dosyasında veya başka bir yerde oluşturulan düğme için başka herhangi bir koda ekleyin. Daha fazla düğme oluşturulabilir ve tümü bu düğmenin aynı özelliklerine sahip olacaktır. Bu özellikle CSS veya Komut Dosyası yazarken kullanışlıdır.

JS dosyalarını oluşturduktan sonra, dosyalarınızı benim yaptığım gibi oluşturduysanız, dosyayı kaydedip filezilla kullanarak webapp / html / scripts'e kopyalıyoruz.

Bunu yaptıktan sonra CSS oluşturmaya geçiyoruz. Sen bütün edebilir kodunu indirmek sonunda Kod bölümünde verilen bağlantıdan.

CSS Kodu:

CSS, IoT Raspberry Pi ev otomasyonu web sayfamızı güzel göstermemize yardımcı oluyor.

Web sayfasının aşağıdaki resim gibi görünmesini istedim ve bu nedenle bunu başarmak için smarthome.css stil sayfasını yazmam gerekti .

Aşağıda CSS kodunu açıkladık:

CSS betiği buraya dahil edilemeyecek kadar hantal geliyor, bu yüzden sadece bir kısmını seçeceğim ve bunları döküm için kullanacağım. Tam CSS dosyasını buradan indirebilirsiniz. CSS kolaydır ve bunu yalnızca CSS kodunu inceleyerek anlayabilirsiniz. Bu bölümü kolayca atlayabilir ve CSS kodumuzu hemen kullanabilirsiniz.

Komut dosyasının ilk bölümü, web uygulamasının gövdesi için stil sayfasını temsil eder ve aşağıda gösterilmiştir;

gövde {arka plan rengi: #ffffff; arkaplan resmi: url ('/ img / smart.png'); arka plan tekrarı: yineleme yok; arka plan konumu: merkez; arka plan boyutu: kapak; yazı tipi: kalın 18px / 25px Arial, sans-serif; renk: LightGray; }

Yukarıdaki kodun kendi kendini açıklayıcı olduğuna inanmak istiyorum, arka plan rengini beyaz olan #ffffff olarak ayarlıyoruz, ardından o klasör konumunda bulunan bir arka plan görüntüsü ekliyoruz (önceki klasör kurulumumuzu hatırlıyor musunuz?), Görüntünün olmamasını sağlıyoruz ' t Arka plan yineleme özelliğini yineleme yok olarak ayarlayarak tekrarlayın, ardından CSS'ye arka planı merkezileştirmesi talimatını verin. Ardından arka plan boyutunu, yazı tipini ve rengini ayarlamak için hareket ediyoruz.

Gövde bittiğinde, düğmelerin güzel görünmesi için css'i yazdık.

button {display: block; konum: göreceli; kenar boşluğu: 10px; dolgu: 0 10px; metin hizalama: merkez; metin dekorasyonu: yok; genişlik: 130px; yükseklik: 40px; yazı tipi: kalın 18px / 25px Arial, sans-serif; siyah renk; metin gölgesi: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz sınır yarıçapı: 30px; kenarlık yarıçapı: 30px;

Bu kısa tutmak için, koddaki diğer her şey de iyi görünmesi için yapıldı. Ne olacağını görmek için onları değiştirebilirsin, sanırım buna deneme yanılma yoluyla öğrenme deniyor ama CSS ile ilgili iyi bir şey, düz İngilizce ile ifade edilen şeylerin anlaşılması oldukça kolay olduğu anlamına geliyor. Düğme bloğunun diğer kısmında, düğme ve düğme gölgesindeki metin gölgesi için birkaç ekstra bulunur. Ayrıca, düğmeye basıldığında güzel ve gerçekçi görünmesine yardımcı olan hafif bir geçiş efektine sahiptir. Bunlar, web sayfasının tüm platformlarda en iyi şekilde çalışmasını sağlamak için webkit, firefox, opera vb. İçin ayrı ayrı tanımlanır.

Bir sonraki kod bloğu, WebIOPi hizmetinin kendisine bunun WebIOPi hizmetine bir girdi olduğunu söylemesidir.

i nput {display: block; genişlik: 160px; yükseklik: 45px; }

Yapmak istediğimiz son şey , düğmeye basıldığında bir tür gösterge vermektir. Böylece ekrana bir çeşit bakabilirsiniz ve düğmelerin rengi mevcut durumu bilmenizi sağlar. Bunu yapmak için, her bir düğme için aşağıdaki kod satırı uygulandı.

# gpio17.LOW {background-color: Gri; siyah renk; } # gpio17.HIGH {background-color: Kırmızı; renk: LightGray; }

Yukarıdaki kod satırları, mevcut durumuna bağlı olarak düğmenin rengini değiştirir. Düğme kapalı (DÜŞÜK) olduğunda, düğmelerin arka plan rengi devre dışı olduğunu göstermek için gri olur ve açık olduğunda (YÜKSEK) düğmenin arka plan rengi KIRMIZI olur.

Çantadaki CSS, smarthome.css olarak kaydetmenizi, ardından filezilla (veya kullanmak istediğiniz herhangi bir SCP yazılımı) aracılığıyla ahududu pi'mizdeki stiller klasörüne taşımanızı ve son parça olan html kodunu düzeltmenizi sağlar. Buradan tam CSS indirmeyi unutmayın.

HTML Kodu:

Html kodu her şeyi, javascript ve stil sayfasını bir araya getirir.

Butona basınız; pastırma almak

Başlık etiketinde çok önemli bazı özellikler bulunur.

Yukarıdaki kod satırı, web uygulamasının krom veya mobil safari kullanan bir mobil masaüstüne kaydedilmesini sağlar. Bu, krom menü aracılığıyla yapılabilir. Bu, uygulamaya mobil masaüstünden veya evden kolay bir başlatma hissi verir.

Aşağıdaki bir sonraki kod satırı, web uygulamasına bir çeşit yanıt verir. Başlatıldığı herhangi bir cihazın ekranını işgal etmesini sağlar.

Sonraki kod satırı, web sayfasının başlık çubuğunda gösterilen başlığı belirtir.

Sonraki dört kod satırının her biri, html kodunu istendiği gibi çalışması için ihtiyaç duyduğu çeşitli kaynaklara bağlama işlevini yerine getirir.

Yukarıdaki ilk satır, sunucu kök dizininde sabit kodlanmış ana WebIOPi çerçeve JavaScript'ini çağırır. WebIOPi'nin her kullanılacağı zaman bunun çağrılması gerekir.

İkinci satır bizim jQuery komut, html sayfasını işaret üçüncü bizim stil sayfasında yönünde noktaları. Son olarak, son satır, onu bir web uygulaması veya web sayfası için bir favicon olarak kullanmaya karar vermemiz durumunda, mobil masaüstünde kullanılacak bir simge oluşturmaya yardımcı olur.

Html kodunun gövde bölümü, düğmelerin aşağıdaki satırla düzgün bir şekilde hizalanmasını sağlamak için yalnızca, html kodumuzun JavaScript dosyasında yazılanları görüntülemesini söyleyen kesme etiketleri içerir. İd =”content” daha önce JavaScript kodu altında düğme için içerik beyanının hatırlatmak gerekir.

Matkabı, html kodunu index.html olarak biliyorsunuz ve filezilla ile Pi'deki html klasörüne gidersiniz. Tüm CSS, JS ve HTML dosyalarını buradan indirebilirsiniz.

Ev Otomasyonu için WebIOPi Sunucu Düzenlemeleri:

Bu aşamada, şemalarımızı oluşturmaya ve web uygulamamızı test etmeye hazırız, ancak daha önce webiopi hizmetinin yapılandırma dosyasını düzenlememiz gerekiyor, böylece onunla birlikte gelen yapılandırma dosyaları yerine html klasörümüzdeki verileri kullanmalıyız..

Yapılandırmayı düzenlemek için aşağıdakileri root izniyle çalıştırın;

sudo nano / etc / webiopi / config

Yapılandırma dosyasının http bölümünü arayın, # Varsayılan HTML ve kaynak dosyalarının konumunu değiştirmek için doc-root kullanın gibi bir şeyin olduğu bölümün altına bakın

# Kullanarak altındaki herhangi bir şeyi yorumlayın, ardından klasörünüz benimki gibi ayarlanmışsa, doc-root'unuzu proje dosyanızın yoluna yönlendirin

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

Kaydet ve çık. Ayrıca, o portu kullanan pi üzerinde çalışan başka bir sunucunuz olması durumunda, portu 8000'den değiştirebilirsiniz. Kaydetmezseniz ve ilerledikçe çıkarsınız.

Komutu kullanarak WebIOPi servisinin şifresini değiştirebileceğinizi unutmamak önemlidir;

sudo webiopi-passwd

Sizden yeni bir kullanıcı adı ve şifre isteyecektir. Bu da tamamen kaldırılabilir ama güvenlik önemlidir, değil mi?

Son olarak aşağıdaki komutu vererek WebIOPi hizmetini çalıştırın:

sudo /etc/init.d/webiopi başlangıç

Sunucu durumu kullanılarak kontrol edilebilir;

sudo /etc/init.d/webiopi durumu

Kullanılarak çalıştırılması durdurulabilir;

sudo /etc/init.d/webiopi durdur

WebIOPi'yi önyüklemede çalışacak şekilde ayarlamak için;

sudo update-rc.d webiopi varsayılanları

Geri döndürmek ve önyükleme sırasında çalışmasını durdurmak istiyorsanız, şunu kullanın;

sudo update-rc.d webiopi kaldır

Devre Şeması ve Açıklaması:

Yazılım kurulumumuz tamamlandığında, hepimiz bu Web kontrollü Ev Aletleri projesi için şemalar oluşturmaya başlamaya hazırız.

Ellerimi hobiler için çalışmanın daha kolay olduğunu düşündüğüm röle modüllerine koyamıyorum. Bu yüzden burada sıradan bağımsız tek 5v röleleri için şemalar çiziyorum.

Devrenizi yukarıdaki fritzing devresinde gösterildiği gibi bağlayın. Kendi rölenizin COM, NO (normalde açık) ve NC'nin (normalde Kapalı) farklı taraflarda / noktalarda bulunabileceğini unutmamalısınız. Test etmek için lütfen bir milimetre kullanın. Geçiş hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Bileşenlerimiz bağlandığında, bir web sayfasından sunucunuzu çalıştırın, Raspberry Pi'nizin IP'sine gidin ve daha önce açıklandığı gibi bağlantı noktasını belirtin, kullanıcı adınız ve şifrenizle giriş yapın ve aşağıdaki resme tam olarak benzeyen bir web sayfası görmelisiniz..

Artık dört AC Ev uygulamasını kablosuz olarak herhangi bir yerden, sadece düğmelere tıklayarak kolayca kontrol edebilirsiniz. Bu, Mobilephone, tablet vb. Cihazlarda çalışacaktır ve daha fazla cihazı kontrol etmek için daha fazla düğme ve röle ekleyebilirsiniz. Aşağıdaki videonun tamamını kontrol edin.

İşte bu çocuklar, bunun için etrafta kaldığınız için teşekkürler Herhangi bir sorunuz varsa, bunları yorum kutusuna bırakın.