树莓派学习笔记——webiopi网页控制LED
<!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和GPIO25为输出 webiopi().setFunction(24, "out"); webiopi().setFunction(25, "out"); var content, button; content = $("#content"); // 创建一个不同按钮,按钮ID为hold,名称为LED1,并绑定按下和松开事件 button = webiopi().createButton("hold", "LED1", mousedown, mouseup); content.append(button); // 创建一个GPIO按钮,编号为GPIO24,按钮名称为LED2 button = webiopi().createGPIOButton(25, "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>
<body> <div id="content" align="center"></div> </body>
GPIOPort.prototype.setFunction = function(channel, func, callback) { var name = this.name; $.post(this.url + "/" + channel + "/function/" + func, function(data) { callback(name, channel, data); }); }访问REST API为 /24/function/out。意为GPIO24端口为输出状态。
WebIOPi.prototype.createButton = function (id, label, callback, callbackUp) { var button = $(‘<button type="button" class="Default">‘); button.attr("id", id); button.text(label); if (callback != undefined) { button.bind(BUTTON_DOWN, callback); } if (callbackUp != undefined) { button.bind(BUTTON_UP, callbackUp); } return button; }该代码可创建一个button标签——<button type="button" class="Default" id="hold">LED1</button>
WebIOPi.prototype.createGPIOButton = function (gpio, label) { var button = w().createButton("gpio" + gpio, label); button.bind(BUTTON_DOWN, function(event) { w().toggleValue(gpio); }); return button; }从实现代码中可以看出,GPIOButton本质为一个Button,只是这个Button的ID变为gpio25。除此之外还给该button绑定了一个mousedown事件。
WebIOPi.prototype.createGPIOButton = function (gpio, label) { var button = w().createButton("gpio" + gpio, label); button.bind(BUTTON_DOWN, function(event) { w().toggleValue(gpio); }); return button; }实现部分的代码调用了digitalWrite。(见【8】)
WebIOPi.prototype.refreshGPIO = function (repeat) { $.getJSON(w().context + "*", function(data) { w().updateALT(w().ALT.I2C, data["I2C"]); w().updateALT(w().ALT.SPI, data["SPI"]); w().updateALT(w().ALT.UART, data["UART"]); w().updateALT(w().ALT.ONEWIRE, data["ONEWIRE"]); $.each(data["GPIO"], function(gpio, data) { w().updateFunction(gpio, data["function"]); if ( ((gpio != 4) && ((data["function"] == "IN") || (data["function"] == "OUT")) || ((gpio == 4) && (w().ALT.ONEWIRE["enabled"] == false)))){ w().updateValue(gpio, data["value"]); } else if (data["function"] == "PWM") { w().updateSlider(gpio, "ratio", data["ratio"]); w().updateSlider(gpio, "angle", data["angle"]); } }); }); if (repeat === true) { setTimeout(function(){w().refreshGPIO(repeat)}, 1000); } }该部分实现较为复杂,请注意updateValue函数——webiopi.js
WebIOPi.prototype.updateValue = function (gpio, value) { w().GPIO[gpio].value = value; var style = (value == 1) ? "HIGH" : "LOW"; $("#gpio"+gpio).attr("class", style); }选择一个ID为gpio??的标签,然后加入一个class,样式名为HIGH或者LOW。
function mousedown() { // GPIO24 输出高电平 webiopi().digitalWrite(24, 1); } function mouseup() { // GPIO24 输出低电平 webiopi().digitalWrite(24, 0); }其中digitalWrite实现部分如下
WebIOPi.prototype.digitalWrite = function (gpio, value, callback) { if (w().GPIO[gpio].func.toUpperCase()=="OUT") { $.post(w().context + ‘GPIO/‘ + gpio + "/value/" + value, function(data) { w().updateValue(gpio, data); if (callback != undefined) { callback(gpio, data); } }); } else { //console.log(w().GPIO[gpio].func); } }使用jquery中的$.post方法,REST API为
button { display: block; margin: 5px 5px 5px 5px; width: 160px; height: 45px; font-size: 24pt; font-weight: bold; color: black; }【10】
.LOW { background-color: White; } .HIGH { background-color: Red; }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。