FunProject - Arduino ile Masaüstü Gif Çıkartması Yapımı
Güncelleme tarihi: 6 Tem 2020
Merhaba. Yine bir fun(eğlencelik) proje ile karşınızdayım. Eğlencelik bu projede neler yaptığıma geçmeden önce neden bu projeyi yaptığımı size açıklamama izin verin. Pandemi boyunca eşim ve ben evden çalışıyoruz. Ben genelde kulaklıkla müzik dinleyerek işlerimi yapıyorum. Tabi haliyle dış dünya ile bağlantım kopuyor.
Ev içerisinde eşim uzun süre sesli olarak benimle iletişim kuramadığı için bu durumdan rahatsız. Eşimin benimle işi olduğunda haberdar olabilmek için, beni uyarıcı bir şeye ihtiyacım vardı. Bu Gif Button da tam olarak beni uyarmak için tasarladığım, bastığında masaüstün de beş saniye duran bir Gif resim gösteriyor. Böylece bende eşimin bana seslendiğini anlayabiliyorum.
Bu iş için reactjs ve electronjs ile aşağıda gördüğünüz basit bir arayüz tasarladım.
Arayüz kısmını anlatmadan önce hızlıca donanım kısmını anlatmak istiyorum. Bu iş için birbiriyle haberleşebilen iki tane cihaz yaptım. Cihazlar birbiriyle iletişim kurarken araya kendi yazılımı mı koyarak bilgisayarda bir takım işlemleri yaptırmaktayım.
Bu iş için Arduino nun Nano tipli cihazını kullandım. Breadboard da bir tane pushbuton koyarak bu butona basıldığında işlemin tetiklenmesini sağlıyorum. İki cihazın iletişimi için nRF24L01 radyo iletişim modülünü kullandım. Aşağıdaki cihazdan iki tane yaptım. Bunlardan birini A diğerini B olarak adlandıracağım.
Kullanılan Malzemeler:
Arduino Nano : https://www.robolinkmarket.com/arduino-nano-klon-ch340?_sgm_campaign=product&_sgm_source=5904&_sgm_action=search
Orta boy breadboard : https://www.robolinkmarket.com/orta-boy-breadboard-beyaz-85x5?_sgm_campaign=product&_sgm_source=7031&_sgm_action=search
Push Button :https://www.robolinkmarket.com/4-pinli-push-buton-12x12x7?_sgm_campaign=product&_sgm_source=6725&_sgm_action=search
NRF24L01 :
Ortaya çıkan cihaz görüntüleri
Arduino Cihazları Kodları
Bu projede kullandığım NRF24L01 modülü özünde bir radyo iletişim modülüdür. Belli bir mesafeye kadar iki modül arasında veri alışverişi yapılabilmektedir. Çeşitli iletişimler için değişik projelerde kullanılmaktadır bu modül. Mesela bu modülle bir kablosuz sesli iletişim cihazı da oluşturabilirsiniz. Ben burada diğer cihaz da butona basılıp basılmadığı bilgisini göndermek için kullanıyorum.
İki cihaz iletişim kurmak için adresleme mantığı ile çalışıyor. Yani eğer karşı tarafın adresini biliyorsanız iletişim kurabiliyorsunuz. Aşağıdaki kodların bir tanesi bir cihazda diğeri diğer cihazda kullanılmakta. Dikkat ederseniz kodların büyük bir çoğunluğu aynı sadece farklı olan hangi adreslere bağlanıp veri gönderdiği kısımlarıdır.
Bir çok iletişim yönteminde olduğu gibi bu modülde de ana görev, açılan iletişim kanalını dinleme üzerinedir. Butona basılmadığı sürece modül kullandığınız adres bilgisini sürekli olarak dinlemekte ve bu adrese yeni bir mesaj gelip gelmediğini kontrol etmektedir.
Benim cihazımdaki butona basıldığında ise modülün dinleme işlemi kapatılarak girilen adrese butona basıldı bilgisi gönderilmektedir. Gönderim işi bittikten sonrada tekrar ilgili adresi dinlemeye devam ediyorum. Böylece iki cihazda hem alıcı hem verici şeklinde çalışıyor.
Alıcı Kodu
Verici Kodu
Arduino kısmındaki yaptıklarım bu kadar. Kodlar kısa ve öz olduğu için inceleyerek hemen anlayabilirsiniz.
Şimdide sıra benim uzmanlık alanım olan masaüstü uygulamasının yapımına geldi.
Projede kullandığım teknolojiler ve kütüphaneler:
Backend
C#
ASP .NET
Newtonsoft.JSON (https://www.newtonsoft.com/json)
Dakota framework (kendi oluşturduğum framework) (https://github.com/HakanUcaar/Dakota)
Frontend
ElectronJs (https://www.electronjs.org/)
ReactJS (https://tr.reactjs.org/)
Redux (https://redux.js.org/)
Material-UI (https://material-ui.com/)
Electron-edge-js (https://www.npmjs.com/package/electron-edge-js)
Custom-electron-titlebar (https://www.npmjs.com/package/custom-electron-titlebar)
Ws(Websocket) (https://www.npmjs.com/package/ws)
Backend Kodlarının Yazımı
İlk önce bir Classlibrary projesi oluşturarak başlıyoruz. Bu proje bize bir dll oluşturacak ve bizde bu dll'i arayüz projemizde importlayarak kullanacağız.
Bu projede kullandığım kütüphaneleri yukarıda belirtmiştim. Peki bu kütüphaneleri ne için kullanıyorum.
Newtonsoft.Json kütüphanesini arayüzden aldığım bilgileri doldurduğum JSON formatlı dosyadan verileri okumak için kullanıyorum.
Dakota benim kendi oluşturduğum makineden veri alma frameworküm. Bu framework ile makineden belirli şablonları uygulayarak veri alıyorum. Bu projede bu makine şu an arduino cihazı.
Arduino cihazı serialport iletişimini kullandığı için Dakota.Receiver.SerialPort kütüphanesini. Aldığım bu verileri dış dünyadaki bir sunucuya aktarmak içinde Dakota.Client.WebSocket kütüphanesini kullandım.
Arduinodan verilerin alınması için temsil classlarının tanımlanması
Bu verilerin alınması için daha önceki projelerde olduğu gibi öncelikle Arduino cihazını temsilen AbstractMachine classını miras alarak ArduinoGifbuMachine adında bir class oluşturuyorum.
Bu class içerisine de buton basma hareketimi temsilen AbstractMovement classını miras alarak OtherButtonPushMovement adında bir class oluşturarak ilişkilendiriyorum. OtherButtonPushMovement classımı tanımlarken base de gelen bilginin tagini veriyorum. Burada benim Arduino dan gönderilecek veri tag'im "OtherUserPressed". Eğer bu tag ile bir veri gelirse benim bu hareketimin tetiklendiğini anlayacağım.
Bağlantı bilgilerinin JSON dosyasından okunması
JSON dosyasında bulunan Arduino bağlantısı, gösterilecek resim ve yazı bilgilerini okuyarak, Newtonsoft kütüphanesi ile aşağıda görünen classları dolduruyorum.
Ana classım olan Gifbulib classımda yukarıda tanımladığım bütün bilgileri kullanarak artık servisimi ayağa kaldırıyorum.
Öncelikle bir websocket client oluşturup servera bağlanıyorum. Daha sonrada serialport servisime bağlanarak gelen verileri okuyorum ve bağlandığım websocket ile bu bilgileri gönderiyorum.
Burada neden websocket kullandığımı merak edenleriniz olmuş olabilir. Burayı şöyle açıklayabilirim. Ben arayüzde ElectronJS kullandığım için burada direkt olarak dll içerisindeki kodları kullanmada sıkıntılar yaşadım. Kullanılamıyor demiyorum sadece çeşitli sorunlar çıkıyor. Fakat websocket gibi iletişim kanalları arayüz ile hem hızlı hemde daha sorunsuz iletişim kurmamı sağlıyor. Bu yüzdende arayüz ile dll arasındaki iletişim için ben websocket kullandım.
Backend kısmını bitirdik sıra geldi frontend kısmının yazımına. Frontend kısmında çok fazla kütüphane ve yapı olduğu için o kısmı ayrıca bir yazı olarak yazmaya karar verdim.
Yaptıklarımın sonucunu bir video çekerek paylaştım. Aşağıdaki videoda sadece bir usb ile oluşturduğum iki cihazdan bir tanesi elektiriğe bağlı bulunmakta. Diğer cihazda tabiki bilgisayara bağlı. Bilgisayarımda gösterilecek transparan Gif resmini ayarlıyorum ve kaydediyorum. Daha sonra sadece elektiriğe bağlı cihazımdan butona bastığımda bilgisayarımda benim seçtiğim Gif resmi sağ alt köşede görüyorum.
Böylece eşim herhangi bir odadan bir usb ye yada bir powerbank e bu cihazı bağlayarak benim masaüstüm de Gif resminin görünmesini tetikletebilir. Aynı şekilde eğer yazdığım bu masaüstü uygulamasını eşim kendi bilgisayarına kurarsa. Bende bendeki cihazdan butona bastığımda onun masaüstünde seçtiği Gif resmi görünecektir.