使用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发送邮件的实例代码(支持html、图片、附件)
Mar 04 Python
Python采用raw_input读取输入值的方法
Aug 18 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
Jan 31 Python
Python中的默认参数实例分析
Jan 29 Python
用pandas按列合并两个文件的实例
Apr 12 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
Jun 13 Python
Python3字符串encode与decode的讲解
Apr 02 Python
python mac下安装虚拟环境的图文教程
Apr 12 Python
dpn网络的pytorch实现方式
Jan 14 Python
pycharm工具连接mysql数据库失败问题
Apr 01 Python
Python OpenCV实现测量图片物体宽度
May 27 Python
python内置模块之上下文管理contextlib
Jun 14 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 文件上传实例代码
2012/04/19 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
初学Javascript的一些总结
2008/11/03 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
bootstrap table小案例
2016/10/21 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
Vue中的vue-resource示例详解
2018/11/02 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
原生js 实现表单验证功能
2021/02/08 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python实现图书借阅系统
2019/02/20 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
机工车间主任岗位职责
2014/03/05 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
股东大会通知
2015/04/24 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
护理培训心得体会
2016/01/22 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android