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\”>© 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]);
}
}
