0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內(nèi)不再提示

如何從網(wǎng)頁控制arduino?

科技觀察員 ? 來源:八色木 ? 作者:八色木 ? 2022-03-31 16:40 ? 次閱讀

當我們完成一些Arduino項目后,比如Arduino控制燈的項目或者Arduino控制舵機的項目,等等。這時你或許會思考一個問題,是否可以通過網(wǎng)頁實現(xiàn)對燈或舵機的控制。當然,自帶網(wǎng)絡版本的Arduino是首選,比如Arduino Yun。下面來看看怎么去實現(xiàn)它。首先,我們需要創(chuàng)建一個簡單的網(wǎng)頁,使它可以與Arduino通信。在本文中將逐一討論。

如何從網(wǎng)頁控制arduino

在本文中,我們將通過一塊以太網(wǎng)功能的擴展板和Arduino共同完成,目的是使我們能通過web瀏覽器控制藍色LED的開關(當然,如果你愿意,你可以使用其他顏色的LED)。

首先,當然是將網(wǎng)絡功能擴展板與Arduino UNO連接。在這個項目中使用的是Ethernet W5100 網(wǎng)絡擴展板模塊。

電路連接

pYYBAGJFaKiAbKfEAAK-IT-O8rQ609.png

對于控制LED這種項目,其實只使用Arduino 引腳13的板載LED也可以實現(xiàn)。但是如果要考慮添加W5100擴展板,這種方法就存在一些問題。首先,由于LED會被擴展板覆蓋住,想看到LED頸椎受不了!第二個更嚴重的問題是,W5100以太網(wǎng)擴展板本身使用了引腳13。所以在本文中,我們將一個藍色LED接一個10K歐姆的電阻后,再將它連接到Arduino的第二個引腳上。

Arduino連接LED

這就是電路的全部內(nèi)容,是不是超級簡單。當然這里的引腳均需要從W5100擴展板上對應連接,連接OK后,通過USB將Arduino插到PC機上。將以下代碼上傳到Arduino。現(xiàn)在就可以開始從網(wǎng)頁控制Arduino了!

注意:需要將下面代碼中的IP地址(192.168.1.212)更改為適合你自己家中局域網(wǎng)的IP地址。除此之外,不需要調(diào)整其他任何東西。

// Basemu - Controlling an Arduino Pin from a WebPage

// link to www.basemu.com

#include "SPI.h"

#include "Ethernet.h"

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xAD, 0xEE, 0xBE }; //physical mac address

byte ip[] = { 192, 168, 1, 212 }; // IP address in LAN – need to change according to your Network address

byte gateway[] = { 192, 168, 1, 1 }; // internet access via router

byte subnet[] = { 255, 255, 255, 0 }; //subnet mask

EthernetServer server(80); //server port

String controlString; // Captures out URI querystring;;

int blueLEDPin = 2; // pin where our blue LED is connected

void setup(){

pinMode(blueLEDPin, OUTPUT); // change pin 2 to OUTPUT pin

// Initialize the Ethernet

Ethernet.begin(mac, ip, gateway, subnet);

server.begin();

}

void loop(){

// Create a client connection

EthernetClient client = server.available();

if (client) {

while (client.connected()) {

if (client.available()) {

char c = client.read();

//read the HTTP request

if (controlString.length() < 100) {

// write characters to string

controlString += c;

}

//if HTTP request has ended– 0x0D is Carriage Return \n ASCII

if (c == 0x0D) {

client.println("HTTP/1.1 200 OK"); //send new page

client.println("Content-Type: text/html");

client.println();

client.println("

");

client.println("

");

client.println("

");

client.println("");

client.println("

");

client.println("

");

client.println("

LED ON/OFF FROM WEBPAGE

");

client.println("

");

client.println("

);

client.println("");

client.println("");

delay(10);

//stopping client

client.stop();

// control arduino pin

if(controlString.indexOf("?GPLED2ON") > -1) //checks for LEDON

{

digitalWrite(blueLEDPin, HIGH); // set pin high

}

else{

if(controlString.indexOf("?GPLED2OFF") > -1) //checks for LEDOFF

{

digitalWrite(blueLEDPin, LOW); // set pin low

}

}

//clearing string for next read

controlString="";

}

}

}

}

}

下面打開Windows的命令窗口(WIN鍵+R,打開后輸入CMD即可),輸入ping 192.168.1.212(對應你的IP地址),應該看到以下內(nèi)容,這里可以驗證你的Arduino是否已正確連接到網(wǎng)絡:

poYBAGJFaLOAVA31AASgCksvL_4723.png


Windows的命令窗口(WIN鍵+R,打開后輸入CMD即可)

如果成功Ping通,下面打開瀏覽器,輸入http://192.168.1.212((對應你的IP地址),應該看到以下屏幕:

poYBAGJFaJ-AFf92AAGGhSpOf0c495.png


Arduino WEB控制LED

這時,點擊”Turn On The Blue LED”應該會點亮LED,點擊“Turn Off the Blue LED”應該會關閉LED。

代碼解釋

W5100以太網(wǎng)擴展板與Arduino是通過SPI接口進行通信的,因此,使用W5100擴展板需要將“SPI.h”和“Ethernet.h”都include到項目中。

#include "SPI.h"

#include "Ethernet.h"

代碼的下一部分是將MAC地址和IP地址分配給W5100,并配置服務器端口80,這是標準的web服務器端口。

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xAD, 0xEE, 0xBE };

byte ip[] = { 192, 168, 1, 212 };

byte gateway[] = { 192, 168, 1, 1 };

byte subnet[] = { 255, 255, 255, 0 };

EthernetServer server(80);

接下來,需要一個用于藍色LED引腳的變量,以及一個用于捕獲URI查詢字符串數(shù)據(jù)的“控制”變量。我們將發(fā)送“?GPLED2ON”到網(wǎng)頁上來關閉LED,發(fā)送“?GPLED2OFF”來關閉LED。controlString將捕獲這些命令。

String controlString;

int blueLEDPin = 2;

代碼的設置部分,設置引腳2為輸出,以便當我們設置引腳2為高電平時,可以為LED供電。Ethernet.begin 啟動W5100并給它分配前面指定的MAC地址和IP地址。server.begin 啟動在端口80上偵聽web服務器。

pinMode(blueLEDPin, OUTPUT);

Ethernet.begin(mac, ip, gateway, subnet);

server.begin();

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學習之用,如有內(nèi)容侵權或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 網(wǎng)頁
    +關注

    關注

    0

    文章

    71

    瀏覽量

    19153
  • Arduino
    +關注

    關注

    187

    文章

    6453

    瀏覽量

    185915
收藏 人收藏

    評論

    相關推薦

    轉(zhuǎn):開源制作Arduino智能小車( WiFi遠程監(jiān)控+網(wǎng)頁控制

    做的Arduino小車,加上無線路由模塊,刷openwrt可以實現(xiàn)遠程監(jiān)控和網(wǎng)頁控制
    發(fā)表于 07-26 14:14

    運用labview 實現(xiàn)對網(wǎng)頁控制

    各位前輩,我現(xiàn)在想運用labview 實現(xiàn)對一個網(wǎng)頁控制,要把一些數(shù)據(jù)寫到網(wǎng)頁上去,現(xiàn)在不知怎么做?現(xiàn)在可以網(wǎng)頁上把數(shù)據(jù)讀出來,不知道哪
    發(fā)表于 12-02 13:12

    【項目分享】教你如何運用Arduino通過網(wǎng)頁實時控制伺服電機

    以實現(xiàn)一個網(wǎng)絡服務器瀏覽器端來控制并監(jiān)控Arduino。它同時還支持Websocket,這樣我們不用刷新網(wǎng)頁就能實時控制與監(jiān)控
    發(fā)表于 09-26 11:16

    如何使用Arduino和ESP8266實現(xiàn)網(wǎng)頁控制伺服電機

    使用Arduino和ESP8266模塊通過網(wǎng)頁控制伺服電機。在本篇文章中,我們將實現(xiàn)通過網(wǎng)頁控制伺服電機。
    發(fā)表于 06-28 08:09

    如何使用Arduino和ESP8266實現(xiàn)網(wǎng)頁控制伺服電機?

    如何使用Arduino和ESP8266實現(xiàn)網(wǎng)頁控制伺服電機?
    發(fā)表于 09-28 06:16

    什么叫Arduino?Arduino怎么玩

    STEP 1:下載Arduino IDE打開網(wǎng)頁輸入網(wǎng)址進入到頁面后,找到下圖顯示部分。什么叫Arduino?Arduino怎么玩?Arduino
    發(fā)表于 01-17 09:05

    如何arduino發(fā)送文本到arduino?

    arduino發(fā)送文本到arduino
    發(fā)表于 05-04 07:45

    如何使用網(wǎng)頁簡單控制LED?

    誰能幫我畫一個非常簡單的草圖來通過網(wǎng)頁控制 LED。(在 arduino mega 2560 r3 上使用 esp8266)。 與 wifi 的連接和網(wǎng)絡服務器的庫示例工作得很好。我只是不明白如何以
    發(fā)表于 05-24 07:02

    求分享Arduino與ESP8266-12E的連接圖和Arduino發(fā)送號碼到網(wǎng)頁的代碼?

    我想將我的 Arduino uno 與 ESP8266-12E 連接,以將數(shù)字 Arduino uno 發(fā)送到網(wǎng)頁。 誰能給我Arduino
    發(fā)表于 05-29 07:00

    如何使用Arduino Manager移動設備或平板電腦控制Arduino

    對于家庭自動化,Arduino的遠程控制或監(jiān)視,Arduino Manager可以完成所有工作。以下是使用它從移動設備或平板電腦控制Arduino
    的頭像 發(fā)表于 12-05 08:44 ?4149次閱讀

    ESP8266+網(wǎng)頁控制LED

    本次我們將利用NodeMCU建立網(wǎng)絡服務。用戶通過瀏覽器可以訪問NodeMCU所建立的網(wǎng)頁。通過該網(wǎng)頁,用戶可實現(xiàn)對NodeMCU的控制。首先通過串口,當ESP8266連接WiFi成功之后會獲取
    發(fā)表于 12-06 18:51 ?16次下載
    ESP8266+<b class='flag-5'>網(wǎng)頁</b><b class='flag-5'>控制</b>LED

    最簡單DIY基于ESP8266的智能彩燈②(在網(wǎng)頁用按鍵和滑動條控制RGB燈)

    和滑動條控制RGB燈)文章目錄ESP8266和ESP32智能彩燈開發(fā)系列文章目錄前言一、最簡單DIY基于ESP8266的智能彩燈②(在網(wǎng)頁用按鍵和滑動條控制RGB燈)是什么?二、使用步驟1.準備硬件2.
    發(fā)表于 12-29 19:02 ?7次下載
    最簡單DIY基于ESP8266的智能彩燈②(在<b class='flag-5'>網(wǎng)頁</b>用按鍵和滑動條<b class='flag-5'>控制</b>RGB燈)

    BT到WiFi:創(chuàng)建WiFi控制Arduino機器人車

    電子發(fā)燒友網(wǎng)站提供《BT到WiFi:創(chuàng)建WiFi控制Arduino機器人車.zip》資料免費下載
    發(fā)表于 10-27 16:42 ?0次下載
    <b class='flag-5'>從</b>BT到WiFi:創(chuàng)建WiFi<b class='flag-5'>控制</b>的<b class='flag-5'>Arduino</b>機器人車

    如何Arduino取回代碼/程序

    電子發(fā)燒友網(wǎng)站提供《如何Arduino取回代碼/程序.zip》資料免費下載
    發(fā)表于 06-09 10:50 ?1次下載
    如何<b class='flag-5'>從</b><b class='flag-5'>Arduino</b>取回代碼/程序

    Azure Percept中的docker容器控制Arduino

    電子發(fā)燒友網(wǎng)站提供《Azure Percept中的docker容器控制Arduino.zip》資料免費下載
    發(fā)表于 06-27 11:28 ?0次下載
    <b class='flag-5'>從</b>Azure Percept中的docker容器<b class='flag-5'>控制</b><b class='flag-5'>Arduino</b>