使用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爬虫常用的模块分析
Aug 29 Python
Python爬虫天气预报实例详解(小白入门)
Jan 24 Python
使用apidocJs快速生成在线文档的实例讲解
Feb 07 Python
python实现装饰器、描述符
Feb 28 Python
python如何让类支持比较运算
Mar 20 Python
python之消除前缀重命名的方法
Oct 21 Python
Python正则匹配判断手机号是否合法的方法
Dec 09 Python
使用Python创建简单的HTTP服务器的方法步骤
Apr 26 Python
Python3 pandas 操作列表实例详解
Sep 23 Python
numpy 返回函数的上三角矩阵实例
Nov 25 Python
如何清空python的变量
Jul 05 Python
Python使用jpype模块调用jar包过程解析
Jul 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个人网站架设连环讲(三)
2006/10/09 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
php网站地图生成类示例
2014/01/13 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP _construct()函数讲解
2019/02/03 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
Python可变参数函数用法实例
2015/07/07 Python
python for 循环获取index索引的方法
2019/02/01 Python
python入门之井字棋小游戏
2020/03/05 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
Final类有什么特点
2012/04/25 面试题
超市收银员岗位职责
2015/04/07 职场文书
2015年导购员工作总结
2015/04/25 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS