溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用webiopi網頁控制LED，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
webiopi是一個可控制樹莓派GPIO的web框架，該框架面向物聯網IoT開發。該項目托管于google，并可在sourceforge上下載到源代碼。現在webiopi已經發展到0.7版本，webiopi支持REST Server，CoAP server，并提供python庫和javascript庫，毫無疑問的說webiopi是一個優秀的框架。
雖然webiopi是一個優秀的框架，但是webiopi由python，javacript語言編寫，并提供了REST和CoAP形式訪問方式，學習和掌握webiopi需要不少的基礎知識。對于那些認為C語言、寄存器操作、16進制協議可以解決一切問題的嵌入式工程師來說，python和javacript，REST和CoAP協議顯得臃腫不堪并毫無用處。但是事實并非如此。
【webiopi和其他網頁控制LED的區別】
1.后臺，完善的RESTAPI可實現GPIO端口的方向控制、輸出控制和輸入檢測。
2.前臺，完整的javascript API，方便用戶創建標簽并和后臺API相聯系。
一、 webiopi的安裝
下載最新的webiopi 并上傳到樹莓派，然后解壓并安裝
[code]
tar xvzf WebIOPi-0.7.1.tar.gz
cd WebIOPi-0.7.1
sudo ./setup.sh
[/code]
安裝的過程需要持續一些時間，webiopi會自動安裝一些必要軟件并解決依賴關系。
二、 測試安裝是否成功
可以輸入以下命令：
[code]
Webiopi -h
[/code]
若安裝成功會出現以下提示：
三、 運行webiopi
輸入以下指令運行webiopi
[code]
sudo webiopi –d –c /etc/webiopi/config
[/code]
【說明】
-d 代表打開調試模式，運行webiopi時會在控制臺中輸出若干信息。
-c 代表設置配置文件，配置文件的路徑為/etc/webiopi/config，配置文件中有哪些內容，這個會在以后的博客中分析。
若未端口設置webiopi的端口，端口號的默認值為8000
在瀏覽器中輸入樹莓派的IP地址，例如192.168.1.107:8000。
先會彈出一個登錄窗，需要設置用戶名和密碼。用戶名默認為webiopi，默認密碼為raspberry。
主界面是這樣
點擊GPIO Header進入
可以查看GPIO引腳的狀態
四、 完成網頁控制LED
安裝完webiopi之后，webiopi的home目錄為/usr/share/webiopi/htdocs，在htdoc目錄中有index.html文件便是上文的導航界面。
現在我們把這個html文件上傳到該目錄下，命名為myindex.html，內容為：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
<title>WebIOPi | Demo</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
// GPIO24和GPIO17為輸出
webiopi().setFunction(24, "out");
webiopi().setFunction(17, "out");
var content, button;
content = $("#content");
// 創建一個不同按鈕，按鈕ID為hold，名稱為LED1，并綁定按下和松開事件
button = webiopi().createButton("hold", "LED1", mousedown, mouseup);
content.append(button);
// 創建一個GPIO按鈕，編號為GPIO17，按鈕名稱為LED2
button = webiopi().createGPIOButton(17, "LED2");
content.append(button); // append button to content div
// 不自動刷新界面
webiopi().refreshGPIO(false);
});
function mousedown() {
// GPIO24 輸出高電平
webiopi().digitalWrite(24, 1);
}
function mouseup() {
// GPIO24 輸出低電平
webiopi().digitalWrite(24, 0);
}
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 160px;
height: 45px;
font-size: 24pt;
font-weight: bold;
color: black;
}
.LOW {
background-color: White;
}
.HIGH {
background-color: Red;
}
</style>
</head>
<body>
<div id="content" align="center"></div>
</body>
</html>
我的物理連線是這樣的，把LED小燈的負極連接到6號引腳，負極接到11號引腳（GPIO 17），沒有采用專業的圖形工具繪制，不喜勿噴
輸入以下指令運行程序：
[code]
sudo webiopi –c config
[/code]
瀏覽器中輸入IP地址和端口號： 172.16.2.222:8000
最終效果：按下LED2會點亮，再按以下就會熄滅
關于如何使用webiopi網頁控制LED就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
