創作內容

15 GP

arduino WebServer

作者：貓貓風 ฅ●ω●ฅ│2017-07-13 20:46:26│巴幣：38│人氣：3094
.












用 arduino 架站比用其他 Apache 等軟體還要簡單許多，基本上也不需要做什麼設定

不過在上面只能運行比較簡單的網頁，較複雜的儲存空間則會不夠，因此建議用arduino

架站主要用來進行I/O控制會比較適當，運算等功能可以移到PC上作業

要使用arduino的網路功能是前則需要購買擴充模組

Arduino Ethernet Shield W5100  (乙太網路擴充板)  如下圖所示



不過買的時候要注意來源，我先前要測買了另外一片從淘寶弄來的，價格是便宜很多

不過一買到全新的就一根Pin角歪掉，然後用那測了一天，結果怎麼樣都連不上

一直懷疑是Code的問題  結果到最後發現是版子問題，因為我又訂過一片，突然恍然大悟

以下是有問題的原兇圖片



以下是比較圖  左 淘寶買的  右 沒屋頂買的



看背面更明顯   先上淘寶買的   根本粗製濫造  焊接點那邊都看得出工很差  該有的都沒有
 
山寨中的山寨  空空如也



接著放沒屋頂買的   跟上圖比起來至少好很多   標示也至少都有出現   雖然也可能是山寨的



跟原本的 arduino 結合之後長這樣





硬體就介紹到這邊

以下先放Code


  1. #include <SPI.h>  
  2. #include <Ethernet.h>  
  3.   
  4. byte mac[] = {  
  5.   0x00, 0xAA, 0xBB, 0xCC, 0xDE, 0x02 //MAC位置自定義，不能與現有MAC重複  
  6. };  
  7. EthernetServer server(80);  
  8. String readString="";   
  9. int Light=2;  
  10. int Sensor=A0;  
  11. int select = 999;  
  12. void setup() {  
  13.   Serial.begin(9600);  
  14.   while (!Serial) {  
  15.     ;
  16.   }  
  17.   Ethernet.begin(mac); //指定MAC IP自動取得  
  18.   server.begin();  
  19.   pinMode(Light,OUTPUT);  
  20.   Serial.print("server is at ");  
  21.   Serial.println(Ethernet.localIP());  
  22. }  
  23.   
  24. void loop() {  
  25.   EthernetClient client = server.available();  
  26.   if (client) {  
  27.     Serial.println("new client");  
  28.     boolean currentLineIsBlank = true;  
  29.     while (client.connected()) {  
  30.       if (client.available()) {  
  31.         char c = client.read();  
  32.         readString += c;  
  33.         if (c == '\n' && currentLineIsBlank) {  
  34.            //------  
  35.            Serial.println(readString);  
  36.           //檢查收到的訊息中是否有 on ，有 -> 開燈  
  37.           if(readString.indexOf("?on") >0) {  
  38.             digitalWrite(Light, HIGH);  
  39.             Serial.println("Led On");  
  40.           }  
  41.           //檢查收到的訊息中是否有 off ，有 -> 關燈  
  42.           if(readString.indexOf("?off") >0) {  
  43.             digitalWrite(Light, LOW);  
  44.             Serial.println("Led Off");  
  45.           }    
  46.           client.println("HTTP/1.1 200 OK");  
  47.           client.println("Content-Type: text/html");  
  48.           client.println("Connection: close");  
  49.           client.println("Refresh: 5");
  50.           client.println();  
  51.           client.println("<!DOCTYPE HTML>");  
  52.           client.println("<html>");  
  53.           client.println("<head>
  54.           <style>table, th, td {border: 1px solid black;}
  55.           </style>"); //定義表格邊線  
  56.           //定義背景圖片CSS  
  57.           client.println("<style type=\"text/css\"> #T2{ background-
  58.           image:url('http://desk.fd.zol-
  59.           img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ
  60.           lauze2IPKICABzBh_ueXY0AAH9JAMQ2qUAHMGf334.jpg'); background-
  61.           repeat:no-repeat; width:1920px; height:1080px;
  62.           border:1px #ccc solid; margin-
  63.           top:10px; background-size:cover;}</style>");  
  64.           //定義JavaScript顯示當前時間  
  65.           client.println("<script language=\"JavaScript\">
  66.           function ShowTime()
  67.           { document.getElementById('showbox').innerHTML =
  68.           new Date(); setTimeout('ShowTime()',1000); }");   
  69.           client.println("function send2arduino()
  70.           {var xmlhttp;if (window.XMLHttpRequest)xmlhttp
  71.           =new XMLHttpRequest();else xmlhttp=new ActiveXObject
  72.           (\"Microsoft.XMLHTTP\");element=document.getElementById
  73.           (\"light\");if (element.innerHTML.match(\"LED on\"))
  74.           {element.innerHTML=\"LED off\"; xmlhttp.open(\"GET\",\"?
  75.           on\",true);}else{ element.innerHTML=\"LED on\";xmlhttp.open(\"GET\",\"?
  76.           off\",true); }xmlhttp.send();}");  
  77.           client.println("function getBrightness()
  78.           {var xmlhttp;if (window.XMLHttpRequest)xmlhttp
  79.           =new XMLHttpRequest();else xmlhttp=new ActiveXObject
  80.           (\"Microsoft.XMLHTTP\");xmlhttp.onreadystatechange=function()
  81.           {if (xmlhttp.readyState==4 && xmlhttp.status==200)
  82.           document.getElementById(\"brightness\").innerHTML=
  83.           xmlhttp.responseText;};xmlhttp.open(\"GET\",\"?
  84.           getBrightness\",true); xmlhttp.send();}window.
  85.           setInterval(getBrightness,1000);");  
  86.           client.println("var select = 0; ");  
  87.           client.println("function funcSelect1(){ select = 1;");  
  88.           client.print("alert(");  
  89.           client.print("select");  
  90.           client.println(")}");  
  91.           client.println("</script>");  
  92.           client.println("</head>");  
  93.           client.println("<body onload=\"ShowTime()\">");  
  94.           client.println("<div id=\"T2\">");  
  95.           //定義跑馬燈  
  96.           client.println("
  97.           <marquee direction=\"right\" height=\"30\"
  98.           scrollamount=\"8\" behavior=\"alternate\" >Web
  99.           Sensoer Monitor</marquee>");  
  100.           client.println("<div id=\"showbox\"></div>");  
  101.           //---------  
  102.           client.println("<script>");  
  103.           client.println("if(true){");  
  104.           client.println("String("") + \"<p>\" + \"<p>\"");    
  105.           client.println("document.write(\"<h1>Refresh Sensor</hl>\")");  
  106.           //client.println("document.write(\"</a>\")");  
  107.           client.println("}</script>");  
  108.           client.println("
  109.           <input type=\"button\" onclick=\"funcSelect1()\"
  110.           value=\"Show Sensor Value\">");  
  111.           //---------  
  112.           client.print("<table align=\"center\">");  
  113.           //用表格方式呈現當前Sensor數值  
  114.           client.print("<th>Input NO</th><th>Value</th>");  
  115.           for (int analogChannel = 0; analogChannel < 6; analogChannel++) {  
  116.             int sensorReading = analogRead(analogChannel);  
  117.             client.print("<tr><td ALIGN=CENTER>analog input");  
  118.             client.print(analogChannel);  
  119.             client.print(" is </td><td ALIGN=CENTER>");  
  120.             client.print(String("") + sensorReading + " "+analogChannel);  
  121.             client.println("</td></tr>");  
  122.           }  
  123.           client.print("</table>");  
  124.           client.println("
  125.           <button id=\"light\" type=\"button\"
  126.           onclick=\"send2arduino()\">LED on</button>
  127.           <button type=\"button\" onclick=\"alert('OpenJumper Web
  128.           Server')\">About</button>");  
  129.           client.println("</div>");  
  130.           client.println("</body>");  
  131.           client.println("</html>");        
  132.           break;  
  133.         }  
  134.         if (c == '\n') {  
  135.           currentLineIsBlank = true;  
  136.         } else if (c != '\r') {  
  137.           currentLineIsBlank = false;  
  138.         }  
  139.       }  
  140.     }  
  141.     delay(10);    
  142.     client.stop();  
  143.     Serial.println("client disconnected");  
  144.     readString="";   
  145.   }  
  146. }  

此程式主要的功能就是會每5秒取得 Pin0 ~ Pin5 的值顯示在網頁上

網頁的介面是用 Client.print的方式執行Html和Javascript語法

然後點擊按鈕LED ON 會開啟 arduino 上所連接的 LED

執行結果



硬體呈現結果  當壓下LED ON時燈會亮



當壓下 LED OFF時燈熄滅


喜歡15 收藏 2 引用 留言 推上首頁 檢舉
引用網址：https://home.gamer.com.tw/TrackBack.php?sn=3642950
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：涼涼風|arduino

3M FA-X50T空氣清淨機 過濾效果驗證
USBISP / USBASP 燒錄教學 - 以 ATmega2560為例
Arduino DFPlayer Mini BlueTooth MP3 Player
SHT35 溫溼度感測器 Ethernet 、 UART 傳輸實作
Arduino PM2.5空氣監測系統 + LCD & 藍芽 輸出顯示

留言共 9 篇留言

約瑟森林的一枚白伊：
貓貓貓貓貓貓風頭香

07-13 20:47

貓貓風 ฅ●ω●ฅ：
恭喜唷 >W<07-13 20:51
貓貓風 ฅ●ω●ฅ：
頭香不幫推推嗎 ><?07-13 20:51
Arthur：
是工程師 辛苦了 [e34]

07-13 20:54

貓貓風 ฅ●ω●ฅ：
[e34]07-13 20:54
羽翼ˊ● ω ●ˋ：
貓貓好有錢OoO

07-13 21:04

貓貓風 ฅ●ω●ฅ：
哪有 > A < 07-13 21:06
碎銀子：
感覺上這比較適合遠端居家控制

07-13 21:27

貓貓風 ฅ●ω●ฅ：
是的 07-13 21:35
約瑟森林的一枚白伊：
推貓貓風嗎 嘻嘻

07-13 22:17

貓貓風 ฅ●ω●ฅ：
怎麼變推我惹OAO07-13 22:27
貓貓風 ฅ●ω●ฅ：
推文說><07-13 22:28
小刀：
白風好好笑。[e7]

貓貓風好厲害～[e19]

07-14 00:10

貓貓風 ฅ●ω●ฅ：
謝謝刀解的稱讚喔><07-14 09:38
死者書生：
好久沒來了
公司有些東西也是接Arduino，但小生沒玩過XD (有另一個人負責)
這塊板子真的不錯用呢，缺點有點大塊
掏寶的少買吧，他們是好貨不外銷的

07-14 10:47

貓貓風 ฅ●ω●ฅ：
所以我以後要買相關的模組都會用沒屋頂買 畢竟品質真的差很多07-14 11:04
貓貓風 ฅ●ω●ฅ：
有點大塊如果真的要放到設備裡還需要做修飾 削邊 解焊等07-14 11:05
珀伽索斯(Ama)：
你對這方面真的很了解呢！果然很厲害[e34]

07-14 21:47

貓貓風 ฅ●ω●ฅ：
其實之前我本來就是寫網頁的XD07-14 21:50
小伽羅：
電腦真是太複雜了，我都不知道自己怎麼考到電腦維修的證照了，一種了解的皮毛的感受，話說我電腦都交給熟識的朋友維修，就算壞的再慘，朋友都能修好，我覺得就是這樣，才害我搞砸電腦的頻率不斷提高，果然隔行如隔山　哈哈ＸＤＤ

07-29 12:08

貓貓風 ฅ●ω●ฅ：
我主要是軟體的部分 硬體我也沒有很在行>< 不過簡單的基本處裡我應該會XD 小伽羅如果不嫌棄的話也可以問我喔07-29 12:55
我要留言提醒：您尚未登入，請先登入再留言

15喜歡★s1234567 可決定是否刪除您的留言，請勿發表違反站規文字。

前一篇：Virtual serv... 後一篇：C# IEnumerab...

追蹤私訊切換新版閱覽

作品資料夾

繪圖區 (0)
└動物朋友 (3)
└魔界戰記 (15)
└勇造繪 (8)
└鋼彈系列 (23)
└百萬亞瑟王 (20)
└東方系列 (17)
└花樣練習 (3)
└自創人物 (15)
└火影忍者 (2)
└魔塔大陸 (3)
└女王之刃 (5)
└織田信奈的野望 (11)
└ＣＬＡＮＮＡＤ (4)
└里番 (13)
└魔法少女 - 小圓 (5)
└Night狼Mare (4)
└水星領航員 (0)
└約會大作戰 (3)
└時空幻境 (5)
└其他 (44)

文章區 (0)
└自然描寫 (71)
└心情日記 (117)
└閒情逸致 (19)
└情感抒發 (43)
└幻 (64)

點點文 (16)

類小說 (9)

神魔之塔 (12)
└地獄級關卡 (86)
└單雙週關卡 (81)
└無限迴廊 (11)
└特殊關卡 (25)
└主線任務 (6)
└黃道十二宮ＥＸ (11)

勇造文 (41)

黑歷史 (11)

程式設計 (0)
└android (8)
└Web (2)
└arduino (32)
└C# (88)
└algorithm (2)
└python (4)

電腦系統相關 (33)

電路設計 (4)

貓咪大戰爭 (140)

闇影詩章 (15)

遊戲相關 (66)

動漫相關 (6)

公主連結 (51)

各種家電 / 電器 周邊 (19)

原神 (92)

崩壞：星穹鐵道 (35)

PVC模型收集 (4)

碧藍航線 (23)

未分類 (110)

yvonne40528 給 歡迎來看小說ゝω・：
🦋《羽化之後》｜現代、校園、微戀愛、成長看更多我要大聲說2小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準，可能無法使用新的應用程式來呈現網站內容，在瀏覽器支援度及網站安全性的雙重考量下，為了讓巴友們有更好的使用體驗，巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特：
。Google Chrome（推薦）
。Mozilla Firefox
。Microsoft Edge（Windows10以上的作業系統版本才可使用）

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營，請將 gamer.com.tw 加入廣告阻擋工具的白名單中，謝謝 !【教學】