使用Python简单的实现树莓派的WEB控制


Posted in Python onFebruary 18, 2016

先给大家展示下效果如图,感觉还很满意请继续阅读全文:

使用Python简单的实现树莓派的WEB控制 

用到的知识:Python Bottle HTML Javascript JQuery Bootstrap AJAX 当然还有 linux

我去,这么多……我还是一点一点说起吧……

先贴最终的源代码:

#!/usr/bin/env python3
from bottle import get,post,run,request,template
@get("/")
def index():
return template("index")
@post("/cmd")
def cmd():
print("按下了按钮: "+request.body.read().decode())
return "OK"
run(host="0.0.0.0")

没错,就10句,我一句一句解释:

1. # !/usr/bin/env python3 ,告诉shell这个文件是Python源代码,让bash调用python3来解释这段代码

2. from bottle import get,post,run,request,template ,从bottle框架导入了我用到的方法、对象

下边几句是定义了2个路由,一个是“/”一个是“/cmd”,前者是get类型(用@get装饰),后者是POST类型(用的@post装饰)

第一个路由很简单,就是读取index模版(模版就是个html啦)并发送到客户端(浏览器),因为路径是“/”也就是比如树莓派的IP地址是:192.168.0.10

那用 http://192.168.0.10:8080 就访问到了我们的"/”路由(bottle默认端口是8080)

同理,第二个路由的路径是“/cmd”也就是访问 http://192.168.0.10:8080/cmd 就访问到了第二个路由

最后一句: run(host = " 0.0.0.0 " )就是调用bottle的run方法,建立一个http服务器,让我们能通过浏览器访问我们的界面。

下边我详细的解释一下这些代码的作用:

第一个路由的作用就是扔给浏览器一个HTML(index.tpl)文档,显示这个界面:

使用Python简单的实现树莓派的WEB控制 

这个文件的源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遥控树莓派</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<style type="text/css">
#up {
margin-left: 55px;
margin-bottom: 3px;
}
#down {
margin-top: 3px;
margin-left: 55px;
}
</style>
<script>
$(function(){
$("button").click(function(){
$.post("/cmd",this.id,function(data,status){});
});
});
</script>
</head>
<body>
<div id="container" class="container">
<div>
<button id="up" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-up"></button>
</div>
<div>
<button id='left' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-left"></button>
<button id='stop' class="btn btn-lg btn-primary glyphicon glyphicon-stop"></button>
<button id='right' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right"></button>
</div>
<div>
<button id='down' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down"></button>
</div>
</div>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

这个内容有点多,不过很简单,就是引用了jquery bootstrap这两个前端框架,加了5个按钮(<body></body>之间的代码)。当然我用了bootstrap内置的上下左右停止这几个图标,这5个按钮的id分辨定义成up,down,left,right,stop,然后写了如下的关键代码:

$(function(){
$("button").click(function(){
$.post("/cmd",this.id,function(data,status){});
});
});

没错,就这三句代码……

第1,2行给所有的按钮(button)绑定了一个点击的事件,第三行调用jquery的post方法把this.id(被单击按钮的id),发送到“/cmd”这个路径下,这时,我们python代码的第二个路由起作用了,接收到了网页上被单击按钮的id,并打印出了“按下了按钮: XXX”

当然,在这里写几个if语句判断,就可以按照实际的需求做一些实际的控制了,嗯,比如调用wiringpi2 for python控制树莓派的GPIO。

关于使用Python简单的实现树莓派的WEB控制的相关内容就给大家介绍这么多,希望对大家有所帮助!

Python 相关文章推荐
pygame学习笔记(4):声音控制
Apr 15 Python
使用pdb模块调试Python程序实例
Jun 02 Python
python web框架学习笔记
May 03 Python
Python中str is not callable问题详解及解决办法
Feb 10 Python
Python语言实现百度语音识别API的使用实例
Dec 13 Python
python实现简单神经网络算法
Mar 10 Python
Python3.5字符串常用操作实例详解
May 01 Python
python写日志文件操作类与应用示例
Jul 01 Python
Python使用Pandas对csv文件进行数据处理的方法
Aug 01 Python
pygame实现俄罗斯方块游戏(AI篇2)
Oct 29 Python
Python实现数值积分方式
Nov 20 Python
flask框架配置mysql数据库操作详解
Nov 29 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
Feb 18 #Python
以一个投票程序的实例来讲解Python的Django框架使用
Feb 18 #Python
使用Python生成随机密码的示例分享
Feb 18 #Python
使用Python的urllib2模块处理url和图片的技巧两则
Feb 18 #Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
Feb 18 #Python
使用Python的PIL模块来进行图片对比
Feb 18 #Python
使用Python来编写HTTP服务器的超级指南
Feb 18 #Python
You might like
php判断是否为json格式的方法
2014/03/04 PHP
php获取url参数方法总结
2014/11/13 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
动态控制Table的js代码
2007/03/07 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
js实现进度条的方法
2015/02/13 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
先进工作者事迹材料
2014/12/23 职场文书
五四青年节活动总结
2015/02/10 职场文书
给领导敬酒词
2015/08/12 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL
nginx配置之并发频次限制
2022/04/18 Servers