使用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 相关文章推荐
python list语法学习(带例子)
Nov 01 Python
Django框架下在视图中使用模版的方法
Jul 16 Python
python 与GO中操作slice,list的方式实例代码
Mar 20 Python
opencv改变imshow窗口大小,窗口位置的方法
Apr 02 Python
Python unittest模块用法实例分析
May 25 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
May 31 Python
详解python读取和输出到txt
Mar 29 Python
python笔记之mean()函数实现求取均值的功能代码
Jul 05 Python
Python csv模块使用方法代码实例
Aug 29 Python
python爬取王者荣耀全皮肤的简单实现代码
Jan 31 Python
在Mac中PyCharm配置python Anaconda环境过程图解
Mar 11 Python
Python移位密码、仿射变换解密实例代码
Jun 27 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
15种PHP Encoder的比较
2007/03/06 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
利用ctypes提高Python的执行速度
2016/09/09 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Django的性能优化实现解析
2019/07/30 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
10张动图学会python循环与递归问题
2021/02/06 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
银行求职信怎么写
2014/05/26 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python