arduino projeleri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Elimizde arduino var.Ethernet shieldımız da bulunuyor. Webserver olarak kullanıyoruz ancak bir görsellik katamıyoruz.
#include <Ethernet.h>
#include <SPI.h>
byte ip[] = { 192, 168, 1, 177 }; //ethernet shield için ip miz
byte gateway[] = { 192, 168, 1, 254 }; //alt ağ geçidimiz
byte subnet[] = { 255, 255, 255, 0 }; //alt ağ maskemiz
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }//mac adresi tanımlandı
EthernetServer server = EthernetServer(80); //80 portu üzerinden çıkış yapılacak
int outputQuantity = 8; //toplam röle çıkış adedi belirlenmiş
int outputLowest = 2;// en düşük röle pinimiz 2 oldu röle çıkışlarımız 2 nolu pinden başlayacak
int outp = 0; // çıkış verme değişkenimiz tanımlandı
boolean printLastCommandOnce = false;
boolean printButtonMenuOnce = false;
boolean initialPrint = true;
String allOn = “”;// tüm röleleri çektirme değişkenimiz
String allOff = “”;//tüm röleleri bıraktırma değişkenimiz
boolean reading = false;//arduino internet sayfamızdan okuma yapsınmı yapmasınmı değişkeni
boolean readInput[10]; //Form üzerinden alacağımız bilgi adeti
void setup(){
Serial.begin(9600);
//Pin 10,11,12 & 13 ethernet shield tarafından kullanılıyor
//for döngüsü içerisinde en düşük pinimiz 2 den başlayarak röle adetimiz kadar pini output yapıyoruz
for (int var = outputLowest; var < outputLowest + outputQuantity; var++) {
pinMode(var, OUTPUT);
}
Ethernet.begin(mac, ip, gateway, subnet); //ethernet bağlantımızı yukarıdaki ayarlarımız ile başlatıyoruz
server.begin();//serverımızı başlatıyoruz
Serial.println(Ethernet.localIP());//seri monitor üzerine mevcut arduino ipmizi yazdırıyoruz
}
void loop(){
//Gelen client varmı ? kontrol ediyoruz
checkForClient();
}
void checkForClient(){// client kontrol fonksiyonu tanımlanmış
EthernetClient client = server.available();//server olduğu sürece client adı altında gelen clientları kabul ediyoruz
if (client) {
// http isteği boş bir satır ile sonlanır bu değişkenlerimizi tanımlıyoruz
boolean currentLineIsBlank = true;
boolean sentHeader = false; // sitemizin header kısmını daha göndermiyoruz
while (client.connected()) { // clientımız serverımıza bağlı kaldığı sürece
if (client.available()) { // client hala var mı ?
if(!sentHeader){ // sitenin header kısmı daha gönderilmedi ise
//sitenin header kısımlarını gönderiyoruz.
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/html”);
client.println(“Connnection: close”);
client.println();
client.println(“<!DOCTYPE HTML>”);
client.println(“<head>”); // header kısmını sonlandırdık
// sitemizin başlığı yazdırıyoruz
client.println(“<title>Ethernet Switching</title>”);
client.println(“<meta name=\”description\” content=\”Ethernet Switching\”/>”);
// 5 saniyede bir clientın görüntülediği websitemizi yenileyerek bilgilerimizi alacağız
client.println(“<meta http-equiv=\”refresh\” content=\”10; url=/\”>”);
// diğer browserlar için destek verme kısımları bir nevi browserın desteğine göre özellik kısıtlama
client.println(“<meta name=\”apple-mobile-web-app-capable\” content=\”yes\”>”);
client.println(“<meta name=\”apple-mobile-web-app-status-bar-style\” content=\”default\”>”);
client.println(“<meta name=\”viewport\” content=\”width=device-width, user-scalable=no\”/>”);
//Css kodlarımızı yerleştirmeye başlıyoruz
client.println(“<style type=\”text/css\”>”);
client.println(“”);
//Sitenin genel olarak görünümü ayarlanıyor
client.println(“html { height:100%; }”);
client.println(“ body {“);
client.println(“ height: 100%;”);
client.println(“ margin: 0;”);
client.println(“ font-family: helvetica, sans-serif;”); // yazıların font ayarı
client.println(“ -webkit-text-size-adjust: none;”);
client.println(“ }”);
client.println(“”);
client.println(“body {“);
client.println(“ -webkit-background-size: 100% 21px;”); // arka plan ebat yüzdesi
client.println(“ background-color: #c5ccd3;”);/arka plan rengi
client.println(“ background-image:”);//arka plan resmi
client.println(“ -webkit-gradient(linear, left top, right top,”);//gradient tanımlama yapılmış
client.println(“ color-stop(.75, transparent),”);//gradient nerede bitecek
client.println(“ color-stop(.75, rgba(255,255,255,.1)) );”);
client.println(“ -webkit-background-size: 7px;”);//arka plan ebatları
client.println(“ }”);
client.println(“”);
client.println(“.view {“);
client.println(“ min-height: 100%;”);
client.println(“ overflow: auto;”);
client.println(“ }”);
client.println(“”);
client.println(“.header-wrapper {“);// ethernet switching yazdırdığımız kuşak olan kısım
client.println(“ height: 44px;”);
client.println(“ font-weight: bold;”);
client.println(“ text-shadow: rgba(0,0,0,0.7) 0 -1px 0;”);
client.println(“ border-top: solid 1px rgba(255,255,255,0.6);”);
client.println(“ border-bottom: solid 1px rgba(0,0,0,0.6);”);
client.println(“ color: #fff;”);
client.println(“ background-color: #8195af;”);
client.println(“ background-image:”);
client.println(“ -webkit-gradient(linear, left top, left bottom,”);
client.println(“ from(rgba(255,255,255,.4)),”);
client.println(“ to(rgba(255,255,255,.05)) ),”);
client.println(“ -webkit-gradient(linear, left top, left bottom,”);
client.println(“ from(transparent),”);
client.println(“ to(rgba(0,0,64,.1)) );”);
client.println(“ background-repeat: no-repeat;”);
client.println(“ background-position: top left, bottom left;”);
client.println(“ -webkit-background-size: 100% 21px, 100% 22px;”);
client.println(“ -webkit-box-sizing: border-box;”);
client.println(“ }”);
client.println(“”);
client.println(“.header-wrapper h1 {“);//ethernet switching başlık stilimiz
client.println(“ text-align: center;”);
client.println(“ font-size: 20px;”);
client.println(“ line-height: 44px;”);
client.println(“ margin: 0;”);
client.println(“ }”);
client.println(“”);
client.println(“.group-wrapper {“);// butonlarımızın içerisinde yer alacağı beyaz grup alanı
client.println(“ margin: 9px;”);
client.println(“ }”);
client.println(“”);
client.println(“.group-wrapper h2 {“);
client.println(“ color: #4c566c;”);
client.println(“ font-size: 17px;”);
client.println(“ line-height: 0.8;”);
client.println(“ font-weight: bold;”);
client.println(“ text-shadow: #fff 0 1px 0;”);
client.println(“ margin: 20px 10px 12px;”);
client.println(“ }”);
client.println(“”);
client.println(“.group-wrapper h3 {“);
client.println(“ color: #4c566c;”);
client.println(“ font-size: 12px;”);
client.println(“ line-height: 1;”);
client.println(“ font-weight: bold;”);
client.println(“ text-shadow: #fff 0 1px 0;”);
client.println(“ margin: 20px 10px 12px;”);
client.println(“ }”);
client.println(“”);
client.println(“.group-wrapper table {“);
client.println(“ background-color: #fff;”);
client.println(“ -webkit-border-radius: 10px;”);
client.println(“ -moz-border-radius: 10px;”);
client.println(“ -khtml-border-radius: 10px;”);
client.println(“ border-radius: 10px;”);
client.println(“ font-size: 17px;”);
client.println(“ line-height: 20px;”);
client.println(“ margin: 9px 0 20px;”);
client.println(“ border: solid 1px #a9abae;”);
client.println(“ padding: 11px 3px 12px 3px;”);
client.println(“ margin-left:auto;”);
client.println(“ margin-right:auto;”);
client.println(“ -moz-transform :scale(1);”); // Mozilla Firefox desteği
client.println(“ -moz-transform-origin: 0 0;”);
client.println(“ }”);
client.println(“”);
//ledimizin on yani yeşil yuvarlak görünümünü ayarlıyoruz
client.println(“.green-circle {“);// yeşil yuvarlak görünüm stili
client.println(“ display: block;”);
client.println(“ height: 23px;”);
client.println(“ width: 23px;”);
client.println(“ background-color: #0f0;”);
//client.println(“ background-color: rgba(60, 132, 198, 0.8);”);// yeşil rengimizi verdik
client.println(“ -moz-border-radius: 11px;”);
client.println(“ -webkit-border-radius: 11px;”);//radius veriyoruz yuvarlak hale getiriyoruz
client.println(“ -khtml-border-radius: 11px;”);
client.println(“ border-radius: 11px;”);
client.println(“ margin-left: 1px;”);
client.println(“ background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(46, 184, 0, 0.8)), to(rgba(148, 255, 112, .9)));@”);
client.println(“ border: 2px solid #ccc;”);
client.println(“ -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;”);
client.println(“ -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */”);
client.println(“ box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */”);
client.println(“ }”);
client.println(“”);
//ledimizin röle çekmezken off halindeki kırmızı yuvarlak görünüm stili
client.println(“.black-circle {“);
client.println(“ display: block;”);
client.println(“ height: 23px;”);
client.println(“ width: 23px;”);
client.println(“ background-color: #040;”);
client.println(“ -moz-border-radius: 11px;”);
client.println(“ -webkit-border-radius: 11px;”);
client.println(“ -khtml-border-radius: 11px;”);
client.println(“ border-radius: 11px;”);
client.println(“ margin-left: 1px;”);
client.println(“ -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;”);
client.println(“ -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */”);
client.println(“ box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */”);
client.println(“ }”);
client.println(“”);
//kırmızı ve yeşil ledlerin her ikisinede parlaklık efekti katıyoruz
client.println(“ .glare {“);
client.println(“ position: relative;”);
client.println(“ top: 1;”);
client.println(“ left: 5px;”);
client.println(“ -webkit-border-radius: 10px;”);
client.println(“ -moz-border-radius: 10px;”);
client.println(“ -khtml-border-radius: 10px;”);
client.println(“ border-radius: 10px;”);
client.println(“ height: 1px;”);
client.println(“ width: 13px;”);
client.println(“ padding: 5px 0;”);
client.println(“ background-color: rgba(200, 200, 200, 0.25);”);
client.println(“ background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));”);
client.println(“ }”);
client.println(“”);
//sitemizin header kısmını sonlandırıyoruz
client.println(“</style>”);
client.println(“</head>”);
// sitemizin body yani gövde kısmını oluşturuyoruz
client.println(“<body>”);
client.println(“<div class=\”view\”>”);
client.println(“ <div class=\”header-wrapper\”>”);
client.println(“ <h1>Ethernet Switching</h1>”);
client.println(“ </div>”);
client.println(“<div class=\”group-wrapper\”>”);
client.println(“ <h2>Switch the required output.</h2>”);
client.println();
sentHeader = true; //sitemizin header kısmını yukarıda yerleştirmiştik artık header kontrol değişkenimizi true yapabiliriz.
}
char c = client.read(); // client tarafından gelecek char değişkenimizi okuyoruz
if(reading && c == ‘ ‘){ // okuma ve gelen veri yok ise
reading = false; // okuma değişkenini false yaparak okuma yok bilgisi tanımlıyoruz
}
if(c == ‘?’) { // gelen veri ? ise yani hazırmısın bilgisi ise
reading = true; //okuma değişkenimizi true yani okuma var olarak değiştiriyoruz
}
if(reading){ okuma var mı ?
if(c == ‘H’) {outp = 1;} // gelen veri H (HIGH anlamında) çıkışlara yazdıcağımız veri 1
if(c == ‘L’) {outp = 0;}// gelen veri L(LOW anlamında) çıkışlara yazdıracağımız veri 0
Serial.print(c); //gelen veriyi seri monitore yazdır
//output değişkenini aldık sırada clienttan gelen veriye göre hangi pinlere outputu vereceğiz
switch (c) {
case ’2′://gelen veri 2 ise
//2 nolu pine outp değişkenini bas
triggerPin(2, client, outp);
break;
case ’3′:// gelen veri 3 ise
//3 nolu pine outp değişkenini bas
triggerPin(3, client, outp);
break;
case ’4′:
triggerPin(4, client, outp);
break;
case ’5′:
triggerPin(5, client, outp);
break;
case ’6′:
triggerPin(6, client, outp);
break;
case ’7′:
triggerPin(7, client, outp);
break;
case ’8′:
triggerPin(8, client, outp);
break;
case ’9′:
triggerPin(9, client, outp);
break;
}
}
if (c == ‘\n’ && currentLineIsBlank){ //cleinttan bilgi kesildi ise
printLastCommandOnce = true; // son komutları bir kez daha tekrarla
printButtonMenuOnce = true; // ekrana buton menusunu bir kez daha bastır
triggerPin(777, client, outp); //verileri tekrar oku ancak outputlara uygulama (777 outputlara veri gonderimi engellemek için kullanılmıi)
break; // döngüyü kır
}
}
}
//Çıkmadan önce değişkenlerimizi sıfırlıyoruz Bir sonraki bağlantı için
printLastCommandOnce = false;
printButtonMenuOnce = false;
allOn = “”;
allOff = “”;
client.println(“\n<h3 align=\”center\”>© Author – Claudio Vella <br> Malta – October – 2012</h3>”);
client.println(“</div>\n</div>\n</body>\n</html>”);
delay(1); // webbrowser için gecikme tanımlanmış
client.stop(); // client kapatıldı.
}
}
void triggerPin(int pin, EthernetClient client, int outp){
//triggerPin fonksiyonumuz pin numarası,client ve outp değişkeni ile birlikte çağrılabilir
//çıkış ayarları
if (pin != 777){ // pin 777 değilse (daha önce hiçbir outputa bastırmamak için kullandık)
if(outp == 1) { // yazdırılmak istenen değer 1 ise
digitalWrite(pin, HIGH);// ilgili pini High yap
}
if(outp == 0){//yazdırılmak istenen veri 0 ise
digitalWrite(pin, LOW);//ilgili pini Low yap
}
}
//okunan deiğişkenleri refresh ediyoruz
readOutputStatuses();
//Butonları ekrana yazdırıyoruz
if (printButtonMenuOnce == true){ // butonlar websitesinde 1 kere mi yazdırılıyor?
printHtmlButtons(client); // evet ise site görüntüsüne butonları bastır
printButtonMenuOnce = false;// artık ile defa butonlar bastırılıyor değişkenimizi false yapıyoruz.
}
}
//ekrana butonlarımızı ve yesil kırmızı ledlerimizi bastırdığımız fonksiyonumuz
void printHtmlButtons(EthernetClient client){
//html tablo oluşturmaya başladık form olarak
client.println(“”);
//client.println(“<p>”);
client.println(“<FORM>”);
client.println(“<table border=\”0\” align=\”center\”>”);
//her bir butonu teker teker web sitesine bastırıyoruz
for (int var = outputLowest; var < outputLowest + outputQuantity; var++) {
//tümünü aç ya da tümünü kapa değişkenlerimizi tanımlıyoruz
allOn += “H”;
allOn += var;
allOff += “L”;
allOff += var;
//tablomuzun satır başlangıcını yazdırıyoruz
client.print(“<tr>\n”);
//on butonlarımız web sitesine yazdırılıyor
client.print(” <td><INPUT TYPE=\”button\” VALUE=\”Switch ON – Pin “);
client.print(var);
client.print(“\” onClick=\”parent.location=’/?H”);
client.print(var);
client.print(“‘\”></td>\n”);
//off görsellerimiz yerleştiriliyor
client.print(” <td><INPUT TYPE=\”button\” VALUE=\”Switch OFF – Pin “);
client.print(var);
client.print(“\” onClick=\”parent.location=’/?L”);
client.print(var);
client.print(“‘\”></td>\n”);
//ilk kırmızı ve yeşil ledlerimiz yerleştiriliyor
if (readInput[var] == true){
client.print(” <td><div class=’green-circle’><div class=’glare’></div></div></td>\n”);
}else
{
client.print(” <td><div class=’black-circle’><div class=’glare’></div></div></td>\n”);
}
//tablomuzun satırları sonlandırılıyor
client.print(“</tr>\n”);
}
//tümünü on yap butonu ekleniyor
client.print(“<tr>\n<td><INPUT TYPE=\”button\” VALUE=\”Switch ON All Pins”);
client.print(“\” onClick=\”parent.location=’/?”);
client.print(allOn);
client.print(“‘\”></td>\n”);
//tümünü off yap butonu ekleniyor
client.print(“<td><INPUT TYPE=\”button\” VALUE=\”Switch OFF All Pins”);
client.print(“\” onClick=\”parent.location=’/?”);
client.print(allOff);
client.print(“‘\”></td>\n<td></td>\n</tr>\n”);
//tablo ve formumuz sonlandırılıyor
client.println(“</table>”);
client.println(“</FORM>”);
//client.println(“</p>”);
}
//Çıkış değişken bilgileri clienttan alınıyor
void readOutputStatuses(){
for (int var = outputLowest; var < outputLowest + outputQuantity; var++) {
readInput[var] = digitalRead(var);
//Serial.print(readInput[var]);
}
}
Çoğu zaman arduino ile webserver olarak uğraşan arkadaşlar ya sd kart üzerinden image dosyalarına ulaşmakta sıkıntı yaşıyorlar ya da ulaşabilseler bile webserverlarının cevap verme sürelerinden yakınıyorlar.Bu yazımızda tamamen CSS3 ve HTML5 kullanılarak SD karta ihtiyaç duymadan arduino da nasıl görsel bir webserver üzerinden röle kontrolü sağlanır onu açıklamaya çalışacağız.
Neler gerekli ?
1 adet Arduino
1 ade 8li röle kartı
1 adet ethernet kablosu
1 adet ethernet shield
Görseldeki ledler tamamen css3 kodları ile oluşturulmuş.Butonlar ise form içerisine oturtulmuş ve yine css3 ile şekilleri verilmiş.
Ufak bir uyarı : Bazı browserler CSS3 stilini tam olarak kabul etmeyebilir.Firefox,opera,safari ve IE üzerinde denendiği iddia ediliyor.Ancak en iyi sonuş safari ile alınmış.
Gelilim kod kısmımıza :
#include <Ethernet.h>
#include <SPI.h>
byte ip[] = { 192, 168, 1, 177 }; //ethernet shield için ip miz
byte gateway[] = { 192, 168, 1, 254 }; //alt ağ geçidimiz
byte subnet[] = { 255, 255, 255, 0 }; //alt ağ maskemiz
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }//mac adresi tanımlandı
EthernetServer server = EthernetServer(80); //80 portu üzerinden çıkış yapılacak
int outputQuantity = 8; //toplam röle çıkış adedi belirlenmiş
int outputLowest = 2;// en düşük röle pinimiz 2 oldu röle çıkışlarımız 2 nolu pinden başlayacak
int outp = 0; // çıkış verme değişkenimiz tanımlandı
boolean printLastCommandOnce = false;
boolean printButtonMenuOnce = false;
boolean initialPrint = true;
String allOn = “”;// tüm röleleri çektirme değişkenimiz
String allOff = “”;//tüm röleleri bıraktırma değişkenimiz
boolean reading = false;//arduino internet sayfamızdan okuma yapsınmı yapmasınmı değişkeni
boolean readInput[10]; //Form üzerinden alacağımız bilgi adeti
void setup(){
Serial.begin(9600);
//Pin 10,11,12 & 13 ethernet shield tarafından kullanılıyor
//for döngüsü içerisinde en düşük pinimiz 2 den başlayarak röle adetimiz kadar pini output yapıyoruz
for (int var = outputLowest; var < outputLowest + outputQuantity; var++) {
pinMode(var, OUTPUT);
}
Ethernet.begin(mac, ip, gateway, subnet); //ethernet bağlantımızı yukarıdaki ayarlarımız ile başlatıyoruz
server.begin();//serverımızı başlatıyoruz
Serial.println(Ethernet.localIP());//seri monitor üzerine mevcut arduino ipmizi yazdırıyoruz
}
void loop(){
//Gelen client varmı ? kontrol ediyoruz
checkForClient();
}
void checkForClient(){// client kontrol fonksiyonu tanımlanmış
EthernetClient client = server.available();//server olduğu sürece client adı altında gelen clientları kabul ediyoruz
if (client) {
// http isteği boş bir satır ile sonlanır bu değişkenlerimizi tanımlıyoruz
boolean currentLineIsBlank = true;
boolean sentHeader = false; // sitemizin header kısmını daha göndermiyoruz
while (client.connected()) { // clientımız serverımıza bağlı kaldığı sürece
if (client.available()) { // client hala var mı ?
if(!sentHeader){ // sitenin header kısmı daha gönderilmedi ise
//sitenin header kısımlarını gönderiyoruz.
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/html”);
client.println(“Connnection: close”);
client.println();
client.println(“<!DOCTYPE HTML>”);
client.println(“<head>”); // header kısmını sonlandırdık
// sitemizin başlığı yazdırıyoruz
client.println(“<title>Ethernet Switching</title>”);
client.println(“<meta name=\”description\” content=\”Ethernet Switching\”/>”);
// 5 saniyede bir clientın görüntülediği websitemizi yenileyerek bilgilerimizi alacağız
client.println(“<meta http-equiv=\”refresh\” content=\”10; url=/\”>”);
// diğer browserlar için destek verme kısımları bir nevi browserın desteğine göre özellik kısıtlama
client.println(“<meta name=\”apple-mobile-web-app-capable\” content=\”yes\”>”);
client.println(“<meta name=\”apple-mobile-web-app-status-bar-style\” content=\”default\”>”);
client.println(“<meta name=\”viewport\” content=\”width=device-width, user-scalable=no\”/>”);
//Css kodlarımızı yerleştirmeye başlıyoruz
client.println(“<style type=\”text/css\”>”);
client.println(“”);
//Sitenin genel olarak görünümü ayarlanıyor
client.println(“html { height:100%; }”);
client.println(“ body {“);
client.println(“ height: 100%;”);
client.println(“ margin: 0;”);
client.println(“ font-family: helvetica, sans-serif;”); // yazıların font ayarı
client.println(“ -webkit-text-size-adjust: none;”);
client.println(“ }”);
client.println(“”);
client.println(“body {“);
client.println(“ -webkit-background-size: 100% 21px;”); // arka plan ebat yüzdesi
client.println(“ background-color: #c5ccd3;”);/arka plan rengi
client.println(“ background-image:”);//arka plan resmi
client.println(“ -webkit-gradient(linear, left top, right top,”);//gradient tanımlama yapılmış
client.println(“ color-stop(.75, transparent),”);//gradient nerede bitecek
client.println(“ color-stop(.75, rgba(255,255,255,.1)) );”);
client.println(“ -webkit-background-size: 7px;”);//arka plan ebatları
client.println(“ }”);
client.println(“”);
client.println(“.view {“);
client.println(“ min-height: 100%;”);
client.println(“ overflow: auto;”);
client.println(“ }”);
client.println(“”);
client.println(“.header-wrapper {“);// ethernet switching yazdırdığımız kuşak olan kısım
client.println(“ height: 44px;”);
client.println(“ font-weight: bold;”);
client.println(“ text-shadow: rgba(0,0,0,0.7) 0 -1px 0;”);
client.println(“ border-top: solid 1px rgba(255,255,255,0.6);”);
client.println(“ border-bottom: solid 1px rgba(0,0,0,0.6);”);
client.println(“ color: #fff;”);
client.println(“ background-color: #8195af;”);
client.println(“ background-image:”);
client.println(“ -webkit-gradient(linear, left top, left bottom,”);
client.println(“ from(rgba(255,255,255,.4)),”);
client.println(“ to(rgba(255,255,255,.05)) ),”);
client.println(“ -webkit-gradient(linear, left top, left bottom,”);
client.println(“ from(transparent),”);
client.println(“ to(rgba(0,0,64,.1)) );”);
client.println(“ background-repeat: no-repeat;”);
client.println(“ background-position: top left, bottom left;”);
client.println(“ -webkit-background-size: 100% 21px, 100% 22px;”);
client.println(“ -webkit-box-sizing: border-box;”);
client.println(“ }”);
client.println(“”);
client.println(“.header-wrapper h1 {“);//ethernet switching başlık stilimiz
client.println(“ text-align: center;”);
client.println(“ font-size: 20px;”);
client.println(“ line-height: 44px;”);
client.println(“ margin: 0;”);
client.println(“ }”);
client.println(“”);
client.println(“.group-wrapper {“);// butonlarımızın içerisinde yer alacağı beyaz grup alanı
client.println(“ margin: 9px;”);
client.println(“ }”);
client.println(“”);
client.println(“.group-wrapper h2 {“);
client.println(“ color: #4c566c;”);
client.println(“ font-size: 17px;”);
client.println(“ line-height: 0.8;”);
client.println(“ font-weight: bold;”);
client.println(“ text-shadow: #fff 0 1px 0;”);
client.println(“ margin: 20px 10px 12px;”);
client.println(“ }”);
client.println(“”);
client.println(“.group-wrapper h3 {“);
client.println(“ color: #4c566c;”);
client.println(“ font-size: 12px;”);
client.println(“ line-height: 1;”);
client.println(“ font-weight: bold;”);
client.println(“ text-shadow: #fff 0 1px 0;”);
client.println(“ margin: 20px 10px 12px;”);
client.println(“ }”);
client.println(“”);
client.println(“.group-wrapper table {“);
client.println(“ background-color: #fff;”);
client.println(“ -webkit-border-radius: 10px;”);
client.println(“ -moz-border-radius: 10px;”);
client.println(“ -khtml-border-radius: 10px;”);
client.println(“ border-radius: 10px;”);
client.println(“ font-size: 17px;”);
client.println(“ line-height: 20px;”);
client.println(“ margin: 9px 0 20px;”);
client.println(“ border: solid 1px #a9abae;”);
client.println(“ padding: 11px 3px 12px 3px;”);
client.println(“ margin-left:auto;”);
client.println(“ margin-right:auto;”);
client.println(“ -moz-transform :scale(1);”); // Mozilla Firefox desteği
client.println(“ -moz-transform-origin: 0 0;”);
client.println(“ }”);
client.println(“”);
//ledimizin on yani yeşil yuvarlak görünümünü ayarlıyoruz
client.println(“.green-circle {“);// yeşil yuvarlak görünüm stili
client.println(“ display: block;”);
client.println(“ height: 23px;”);
client.println(“ width: 23px;”);
client.println(“ background-color: #0f0;”);
//client.println(“ background-color: rgba(60, 132, 198, 0.8);”);// yeşil rengimizi verdik
client.println(“ -moz-border-radius: 11px;”);
client.println(“ -webkit-border-radius: 11px;”);//radius veriyoruz yuvarlak hale getiriyoruz
client.println(“ -khtml-border-radius: 11px;”);
client.println(“ border-radius: 11px;”);
client.println(“ margin-left: 1px;”);
client.println(“ background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(46, 184, 0, 0.8)), to(rgba(148, 255, 112, .9)));@”);
client.println(“ border: 2px solid #ccc;”);
client.println(“ -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;”);
client.println(“ -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */”);
client.println(“ box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */”);
client.println(“ }”);
client.println(“”);
//ledimizin röle çekmezken off halindeki kırmızı yuvarlak görünüm stili
client.println(“.black-circle {“);
client.println(“ display: block;”);
client.println(“ height: 23px;”);
client.println(“ width: 23px;”);
client.println(“ background-color: #040;”);
client.println(“ -moz-border-radius: 11px;”);
client.println(“ -webkit-border-radius: 11px;”);
client.println(“ -khtml-border-radius: 11px;”);
client.println(“ border-radius: 11px;”);
client.println(“ margin-left: 1px;”);
client.println(“ -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;”);
client.println(“ -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */”);
client.println(“ box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */”);
client.println(“ }”);
client.println(“”);
//kırmızı ve yeşil ledlerin her ikisinede parlaklık efekti katıyoruz
client.println(“ .glare {“);
client.println(“ position: relative;”);
client.println(“ top: 1;”);
client.println(“ left: 5px;”);
client.println(“ -webkit-border-radius: 10px;”);
client.println(“ -moz-border-radius: 10px;”);
client.println(“ -khtml-border-radius: 10px;”);
client.println(“ border-radius: 10px;”);
client.println(“ height: 1px;”);
client.println(“ width: 13px;”);
client.println(“ padding: 5px 0;”);
client.println(“ background-color: rgba(200, 200, 200, 0.25);”);
client.println(“ background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));”);
client.println(“ }”);
client.println(“”);
//sitemizin header kısmını sonlandırıyoruz
client.println(“</style>”);
client.println(“</head>”);
// sitemizin body yani gövde kısmını oluşturuyoruz
client.println(“<body>”);
client.println(“<div class=\”view\”>”);
client.println(“ <div class=\”header-wrapper\”>”);
client.println(“ <h1>Ethernet Switching</h1>”);
client.println(“ </div>”);
client.println(“<div class=\”group-wrapper\”>”);
client.println(“ <h2>Switch the required output.</h2>”);
client.println();
sentHeader = true; //sitemizin header kısmını yukarıda yerleştirmiştik artık header kontrol değişkenimizi true yapabiliriz.
}
char c = client.read(); // client tarafından gelecek char değişkenimizi okuyoruz
if(reading && c == ‘ ‘){ // okuma ve gelen veri yok ise
reading = false; // okuma değişkenini false yaparak okuma yok bilgisi tanımlıyoruz
}
if(c == ‘?’) { // gelen veri ? ise yani hazırmısın bilgisi ise
reading = true; //okuma değişkenimizi true yani okuma var olarak değiştiriyoruz
}
if(reading){ okuma var mı ?
if(c == ‘H’) {outp = 1;} // gelen veri H (HIGH anlamında) çıkışlara yazdıcağımız veri 1
if(c == ‘L’) {outp = 0;}// gelen veri L(LOW anlamında) çıkışlara yazdıracağımız veri 0
Serial.print(c); //gelen veriyi seri monitore yazdır
//output değişkenini aldık sırada clienttan gelen veriye göre hangi pinlere outputu vereceğiz
switch (c) {
case ’2′://gelen veri 2 ise
//2 nolu pine outp değişkenini bas
triggerPin(2, client, outp);
break;
case ’3′:// gelen veri 3 ise
//3 nolu pine outp değişkenini bas
triggerPin(3, client, outp);
break;
case ’4′:
triggerPin(4, client, outp);
break;
case ’5′:
triggerPin(5, client, outp);
break;
case ’6′:
triggerPin(6, client, outp);
break;
case ’7′:
triggerPin(7, client, outp);
break;
case ’8′:
triggerPin(8, client, outp);
break;
case ’9′:
triggerPin(9, client, outp);
break;
}
}
if (c == ‘\n’ && currentLineIsBlank){ //cleinttan bilgi kesildi ise
printLastCommandOnce = true; // son komutları bir kez daha tekrarla
printButtonMenuOnce = true; // ekrana buton menusunu bir kez daha bastır
triggerPin(777, client, outp); //verileri tekrar oku ancak outputlara uygulama (777 outputlara veri gonderimi engellemek için kullanılmıi)
break; // döngüyü kır
}
}
}
//Çıkmadan önce değişkenlerimizi sıfırlıyoruz Bir sonraki bağlantı için
printLastCommandOnce = false;
printButtonMenuOnce = false;
allOn = “”;
allOff = “”;
client.println(“\n<h3 align=\”center\”>© Author – Claudio Vella <br> Malta – October – 2012</h3>”);
client.println(“</div>\n</div>\n</body>\n</html>”);
delay(1); // webbrowser için gecikme tanımlanmış
client.stop(); // client kapatıldı.
}
}
void triggerPin(int pin, EthernetClient client, int outp){
//triggerPin fonksiyonumuz pin numarası,client ve outp değişkeni ile birlikte çağrılabilir
//çıkış ayarları
if (pin != 777){ // pin 777 değilse (daha önce hiçbir outputa bastırmamak için kullandık)
if(outp == 1) { // yazdırılmak istenen değer 1 ise
digitalWrite(pin, HIGH);// ilgili pini High yap
}
if(outp == 0){//yazdırılmak istenen veri 0 ise
digitalWrite(pin, LOW);//ilgili pini Low yap
}
}
//okunan deiğişkenleri refresh ediyoruz
readOutputStatuses();
//Butonları ekrana yazdırıyoruz
if (printButtonMenuOnce == true){ // butonlar websitesinde 1 kere mi yazdırılıyor?
printHtmlButtons(client); // evet ise site görüntüsüne butonları bastır
printButtonMenuOnce = false;// artık ile defa butonlar bastırılıyor değişkenimizi false yapıyoruz.
}
}
//ekrana butonlarımızı ve yesil kırmızı ledlerimizi bastırdığımız fonksiyonumuz
void printHtmlButtons(EthernetClient client){
//html tablo oluşturmaya başladık form olarak
client.println(“”);
//client.println(“<p>”);
client.println(“<FORM>”);
client.println(“<table border=\”0\” align=\”center\”>”);
//her bir butonu teker teker web sitesine bastırıyoruz
for (int var = outputLowest; var < outputLowest + outputQuantity; var++) {
//tümünü aç ya da tümünü kapa değişkenlerimizi tanımlıyoruz
allOn += “H”;
allOn += var;
allOff += “L”;
allOff += var;
//tablomuzun satır başlangıcını yazdırıyoruz
client.print(“<tr>\n”);
//on butonlarımız web sitesine yazdırılıyor
client.print(” <td><INPUT TYPE=\”button\” VALUE=\”Switch ON – Pin “);
client.print(var);
client.print(“\” onClick=\”parent.location=’/?H”);
client.print(var);
client.print(“‘\”></td>\n”);
//off görsellerimiz yerleştiriliyor
client.print(” <td><INPUT TYPE=\”button\” VALUE=\”Switch OFF – Pin “);
client.print(var);
client.print(“\” onClick=\”parent.location=’/?L”);
client.print(var);
client.print(“‘\”></td>\n”);
//ilk kırmızı ve yeşil ledlerimiz yerleştiriliyor
if (readInput[var] == true){
client.print(” <td><div class=’green-circle’><div class=’glare’></div></div></td>\n”);
}else
{
client.print(” <td><div class=’black-circle’><div class=’glare’></div></div></td>\n”);
}
//tablomuzun satırları sonlandırılıyor
client.print(“</tr>\n”);
}
//tümünü on yap butonu ekleniyor
client.print(“<tr>\n<td><INPUT TYPE=\”button\” VALUE=\”Switch ON All Pins”);
client.print(“\” onClick=\”parent.location=’/?”);
client.print(allOn);
client.print(“‘\”></td>\n”);
//tümünü off yap butonu ekleniyor
client.print(“<td><INPUT TYPE=\”button\” VALUE=\”Switch OFF All Pins”);
client.print(“\” onClick=\”parent.location=’/?”);
client.print(allOff);
client.print(“‘\”></td>\n<td></td>\n</tr>\n”);
//tablo ve formumuz sonlandırılıyor
client.println(“</table>”);
client.println(“</FORM>”);
//client.println(“</p>”);
}
//Çıkış değişken bilgileri clienttan alınıyor
void readOutputStatuses(){
for (int var = outputLowest; var < outputLowest + outputQuantity; var++) {
readInput[var] = digitalRead(var);
//Serial.print(readInput[var]);
}
}
Görünüşte oldukça basit ancak kullanışlı bir sistemden bahsedeceğiz.
Aduino ile oluşturulmuş olan bir otopark sistemi.Sistemde giriş ve çıkışa izin veren bir adet servo motora bağlanılmış kol bulunuyor.Yine sistemde araçların giriş çıkışının sağlanması ve giriş çıkış kolunun kontrolü açısından giriş ve çıkışlarda butonlar bulunmakta.Otoparkta kaç adet araçlık yer olduğunu belirtmek açısından da 7segment display kullanılmış.
Gelelim kodlama kısmına
Sistemde birkaç değişiklik yapılabilir.
Örneğin giiş çıkış butonları yerine yaklaşım sensörleri kullanılabilir.Yine otomobilin bariyer altında olup olmadığı kontrol edilmelidir.Aracın üstüne bariyerin kapanmasını istemeyiz nihayetinde :)
Gelelim kodlama kısmına
#include <Servo.h> Servo myservo; // servo motor tanımlanmıs #define ServoM 12 //servo motor kontrol pini #define Bright 11 #define Exit 9 //çıkış butonu tanımlanmış #define In 8 //Giriş butonu tanımlanmış #define BarLow 177 //Bariyerin en düşük pozisyonu ayarlanmış #define BarUp 95 //Bariyerin en yüksek pozisyonu ayarlanmış #define CAPACITY 8 //Otopark kapasitesi belirlenmiş #define INTEN 80 //7segment display bacakları tanımlanmış #define segA 0 #define segB 1 #define segC 2 #define segD 3 #define segE 4 #define segF 5 #define segG 6 //0-9 arasındaki rakamların 7 segmente gönderilmesi için bir dizi tanımlanmış byte segments[10] = { B00111111, // 0 B00000110, // 1 B01011011, // 2 B01001111, // 3 B01100110, // 4 B01101101, // 5 B01111101, // 6 B00000111, // 7 B01111111, // 8 B01101111 // 9 }; void setup(){ myservo.attach(ServoM);// tanımlanan servo kontrol pini ile
servo değişkeni birleşt pinMode(Exit, INPUT); // çıkış butonu pini input olarak ayarlandı pinMode(In, INPUT); // Giriş butonu input olarak ayarlandı digitalWrite(Exit, HIGH);// pull up direnci ile kullanılacak digitalWrite(In, HIGH); // pull up direnci ile kullanılacak pinMode(segA,OUTPUT); //her bir 7segment display bacagına gidecek
pin output oldu pinMode(segB,OUTPUT); pinMode(segC,OUTPUT); pinMode(segD,OUTPUT); pinMode(segE,OUTPUT); pinMode(segF,OUTPUT); pinMode(segG,OUTPUT); pinMode(Bright,OUTPUT); analogWrite(Bright,255*INTEN/100);//parlaklık ayarı yapıldı myservo.write(BarLow);//servo motor bariyerin en dusuk pozisyonuna
kadar hareket etti // delay(1000); } int Available= 9;// Otoparktaki boş alan bilgisi integer
olarak ayarlandı //================================================================ void loop(){ Display(Available); // otoparktaki boş alan sayısı diplaye yazdırıldı if(digitalRead(In)==0)//giriş butonuna basıldımı { if(Available != 0){//otoparkta boş alan var mı ? Available--;// boş alan var ise boş alan sayısını 1 azalt myservo.write(BarUp);//bariyeri aç delay(3000);//3 sn gecikme myservo.write(BarLow);//bariyeri kapat } } if(digitalRead(Exit)==0)// çıkış butonuna basıldı mı? { if(Available != CAPACITY){//boş alan sayısı toplam kapasiteye eşit mi? Available++;//değilse boş alan sayısını 1 arttır myservo.write(BarUp);//bariyeri kaldır delay(3000);//3 sn bekle myservo.write(BarLow);// bariyeri kapat } } } void Display(int number){// 7segment displaye deger yazdırma fonksiyonumuz byte segs = ~segments[number];//"~" ortak anot için kullanıldı digitalWrite(segA, bitRead(segs, 0) ); digitalWrite(segB, bitRead(segs, 1) ); digitalWrite(segC, bitRead(segs, 2) ); digitalWrite(segD, bitRead(segs, 3) ); digitalWrite(segE, bitRead(segs, 4) ); digitalWrite(segF, bitRead(segs, 5) ); digitalWrite(segG, bitRead(segs, 6) ); }
Sistemde birkaç değişiklik yapılabilir.
Örneğin giiş çıkış butonları yerine yaklaşım sensörleri kullanılabilir.Yine otomobilin bariyer altında olup olmadığı kontrol edilmelidir.Aracın üstüne bariyerin kapanmasını istemeyiz nihayetinde :)
Aslında oldukça sık kullanılan bir proje.Neredeyse ısınan her devrede bir sıcaklık sensörü ve bu sıcaklık sensörüne bağlı çalışan bir fan sistemi bulunmakta.Paylaşacağımız devreyi ise evinizdeki fanı oda sıcaklığına bağlı olarak hızlandırıp duruma göre yavaşlatabilirsiniz.
Arduninonun 11 nolu pwm çıkışı analog çıkış olarak kullanılmış.Daha önceki paylaşımlarımızda arduinonun pwm çıkışından nasıl analıg çıkış elde edilir paylaşmıştık.Burada kullanılan kapasitör ise fanın düzensiz çalışmasını engellemek amacı ile yani sarj ve desarj zamanları kullanılarak daha stabil bir base voltajı elde etmek için kullanılmış aynı zaman RC filtre devresi görmektedir.Burada esas husus siz pwm çıkışınızda ne kadar fazla cycle gönderir iseniz fanınız o kadar hızlı dönecektir.
Gelelim işin kod kısmına
#include <LiquidCrystal.h>
LiquidCrystal lcd(7,6,5,4,3,2);//lcd ekran noktaları belirlendi
int tempPin = A1; // lm35 sensörü okuma pini atandı
int fan = 11; // Fanın hız referans noktası
int led = 8; // led pin
int temp;
int tempMin = 30; // Fanın çalışması için min. sıcaklık seti
int tempMax = 70; // Fanın tam kapasitede çalışması için sıcaklık set değeri
int fanSpeed;// fan hızı için değişken tanımlanıyor
int fanLCD;
void setup() {
pinMode(fan, OUTPUT);// 11 nolu pwm çıkış olarak atandı
pinMode(led, OUTPUT);// fan devrede olup olmadıgını takip ledi çıkış atandı
pinMode(tempPin, INPUT);//sıcaklık degerini okuyacagımız 1 nolu analog pin giriş atandı
lcd.begin(16,2);// lcd başlatıldı
}
void loop() {
temp = readTemp(); // sıcaklık bilgisi okundu
if(temp < tempMin) { // sıcaklık bilgisi set degeri ile karsılastırıldı
fanSpeed = 0; // min set degerinden kucuk ise fan devrede degil ledi yakma
digitalWrite(fan, LOW);//fan cıkıs ucuna sıfır ver devreye sokma
}
if((temp >= tempMin) && (temp <= tempMax)) { // Sıcaklık min setten buyuk ise
fanSpeed = map(temp, tempMin, tempMax, 32, 255); // sıcaklık ile fan hızını map et
fanLCD = map(temp, tempMin, tempMax, 0, 100); // fan hızını lcd ye yaz
analogWrite(fan, fanSpeed); // 11 nolu pwm den fana hız ver
}
if(temp > tempMax) { // sıcaklıgımız maks. set degerinden fazla ise
digitalWrite(led, HIGH); // ledi yak
} else { // degilse
digitalWrite(led, LOW);//ledi sondur
}
lcd.print("TEMP: ");
lcd.print(temp); // lcd ye okdugumuz sıcaklık degerini yaz
lcd.print("C ");
lcd.setCursor(0,1); // lcd yazmayı bir alt satıra al
lcd.print("FANS: ");
lcd.print(fanLCD); // alt satıra fan hızını yaz
lcd.print("%");
delay(200);
lcd.clear();
}
int readTemp() { // int donuslu sıcaklık okuma fonksiyonumuz sıcaklıgı santigrata ceviriyor
temp = analogRead(tempPin);
return temp * 0.48828125;
}
Biraz daha bilgi verelim mesela nedir map() fonksiyonu.
Map fonksiyonu 2 fark limitlerdeki deişkenler arasında bir harita olusturur.Bu örnekte kullandığımız gibi fanımız 0 ile 255 (pwm çıkışında cycle kontrolü ile fan hızı kontrolü yapıldığından) ve sıcaklığımızın da min 30 ve maks 70 degerleri var.Map fonksiyonu bu degerler ve limitler arasındaki değişimler için karşılık oluşturur.30 sıcaklık için 10 0 cycle 40 için 50cycle 70 için 100cycle gibi.Bir nevi oransal bir kontrole sahip oluyoruz map fonksiyonu kullanarak.
Sistemin ise işleyişi gayet basit.Daha öncede bahsettiğimiz gibi her bir sıcaklık arasında bir fan hızı oluşturuluyor ve sıcaklıkla orantılı olarak fan kontrol ediliyor.Sıcaklığımız maks limit üzerine çıkarsa da uyarı ledimiz yakılıyor.
