Posted by : MC 5 Mart 2015 Perşembe

Elimizde arduino var.Ethernet shieldımız da bulunuyor. Webserver olarak kullanıyoruz ancak bir görsellik katamıyoruz.


Ç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\”>&copy; 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]);

}


}

{ 5 Comments... read them below or Comment }

  1. arkadaşlar ben kodları kopyaladmım fakat çalışmıyor

    YanıtlaSil
    Yanıtlar
    1. tam olarak nerede hata aliyorsunuz bunu belirtmeniz daha yapici olur ve bizde size yardimci olmaya calisiriz

      Sil
    2. kodu kopyalayamıyorum

      Sil
  2. arkadaşlar ben ayhan bu konuda yeniyim şöyle bir hata alıyorum yardımcı olursanız sevinirim ('triggerPin' was not declared in this scope)
    şimdiden teşekkürler..

    YanıtlaSil
  3. Merhaba arkadaşlar burda gateway dediği modem arayüzüne girdiğimiz ip mi

    YanıtlaSil

ELEKTRO BLOGGER A HOŞGELDINIZ

ARAMA YAP

EN COK OKUNANLAR

- Copyright © ELEKTRO-BLOGGER Blogger