使用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 相关文章推荐
pymssql ntext字段调用问题解决方法
Dec 17 Python
python显示生日是星期几的方法
May 27 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
Nov 11 Python
使用Python对MySQL数据操作
Apr 06 Python
linux环境下python中MySQLdb模块的安装方法
Jun 16 Python
Python之str操作方法(详解)
Jun 19 Python
python3学生名片管理v2.0版
Nov 29 Python
Python函数返回不定数量的值方法
Jan 22 Python
pyqt5 获取显示器的分辨率的方法
Jun 18 Python
解决使用export_graphviz可视化树报错的问题
Aug 09 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
Jan 10 Python
浅谈TensorFlow中读取图像数据的三种方式
Jun 30 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 Class 文章
2007/04/04 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python2 与python3的print区别小结
2018/01/16 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python用Configobj模块读取配置文件
2020/09/26 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
应聘教师自荐信
2013/10/12 职场文书
施工协议书范本
2014/04/22 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
2014年环保局工作总结
2014/12/11 职场文书
国情备忘录观后感
2015/06/04 职场文书
学生会部长竞选稿
2015/11/19 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript