树莓派php控制,简单的实现树莓派的WEB控制

最终效果如图:

8f0a08ce7d946c7e2189e7e9a6cf9a1d.png

用到的知识: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)文档,显示这个界面:

7180ba30380b2e6e5d62ca66520aadc7.png

这个文件的源代码如下:

遥控树莓派

#up {

margin-left: 55px;

margin-bottom: 3px;

}

#down {

margin-top: 3px;

margin-left: 55px;

}

$(function(){

$("button").click(function(){

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

});

});

这个内容有点多,不过很简单,就是引用了jquery bootstrap这两个前端框架,加了5个按钮(

之间的代码)。当然我用了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。

完整的源代码如下(自带了bottle框架,解压后直接运行就好)

http://pan.baidu.com/s/1qWYPHQs

post by yafeng

(13)使用python+flask实现树莓派的WEB控制

https://blog.csdn.net/qq_34803821/article/details/86240096 如果你想在网页上点击按钮,并且让树莓派接收到响应,并做响应的处理,实现网页上与树莓 ...

简单而直接的Python web 框架:web.py

web.py 是一个Python 的web 框架,它简单而且功能强大.web.py 是公开的,无论用于什么用途都是没有限制的. 先让大家感受一下web.py 的简单而强大: import web ur ...

BasicModal - 简单易用的现代 Web App 弹窗

BasicModal 是为现代 Web 应用程序打造的弹窗系统.它包括所有你需要显示的信息,问题或接收用户的输入.这里的弹窗还可以链接起来,所以你可以很容易地建立一个预定义顺序的安装帮助或显示对话框. ...

基于boa服务器的web控制mini2440的GPIO口

win7 系统  虚拟机:ubuntu12.04 开发板:mini2440 上一篇已经详细的讲解了如何配置boa服务器,在这里我们就要利用boa服务器带来的便利,利用web控制开发板上的GIPO口,这 ...

树莓派之web服务器搭建

树莓派之web服务器搭建 (一)使用ufw创建防火墙 设置目的:可以完全阻止对树莓派的访问也可以用来配置通过防火墙对特点程序的访问.使用防火墙更好的保护树莓派. 准备工作 1.带有5V电源的树莓派 2 ...

树莓派搭建WEB服务器

树莓派搭建WEB的教程网上有许多,但感觉每一篇都有一些问题,这次我将网上的教程汇总,并亲身实践,将注意的问题都写进去,方便新手学习! 目录:1,安装nginx+sqlite+php5打造轻量级服务器, ...

springmvc 项目完整示例01 需求与数据库表设计 简单的springmvc应用实例 web项目

一个简单的用户登录系统 用户有账号密码,登录ip,登录时间 打开登录页面,输入用户名密码 登录日志,可以记录登陆的时间,登陆的ip 成功登陆了的话,就更新用户的最后登入时间和ip,同时记录一条登录记录 ...

web控制树莓派摄像头

首先测试摄像头保证能顺利拍照 raspistill -o a.jpg 安装flask sudo pip install flask 确认无误之后向下进行. 文件夹结构: CapPic ----stat ...

简单总结几种常见web攻击手段及其防御方式

web攻击手段有几种,本文简单介绍几种常见的攻击手段及其防御方式 XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS XSS 概念 全称是跨站脚本攻击(Cross Site Scr ...

随机推荐

Rstudio代码的快捷键

按tab键:有自动补全的功能 Ctrl+Enter:运行改行代码 Ctrl+1: 移动焦点到source编辑区 Ctrl+2: 移动焦点到控制台 Ctrl+enter Ctrl+L:删除该控制台的所有 ...

R语言学习笔记:绘制地图

在R中画地图先从简单的maps包开始. library("maps") 在这个maps包中有一些数据集,用命令data(package=”maps”),可以看到如下数据: cana ...

codeforces 334B - Eight Point Sets

题意难懂,其实就是x1

信息化的“五观”与“N为”

系统观:联系的总体的看 生产力工具观:人与工具关系 马克思政治经济学 辨证观:发展的看 技术观:第一生产力  改变生产生活(生存)方式 信息论观:“人”联网 控制论 工程观:群体合作的智力游戏论

C注意,使用的语言字符串

转载请注明出处! 在C语言没有具体的字符串数据类型,字符串的字符串常量和字符数组的形式. 实际上该字符串是零个或更多字符的字符串.并在整个位模式0NUL字节结束.因此,字符串所包括的字符内部不能出现N ...

(五)python的发展历史

1989年,为了打发圣诞节假期,Guido开始写Python语言的编译器.Python这个名字,来自Guido所挚爱的电视剧Monty Python's Flying Circus.他希望这个新的叫做 ...

一个简单的Java集合范围过滤的多个方式对比

在一个项目里面有这么一个技术需求: 1.集合中元素个数,10M 2.根据上限和下限从一个Set中过滤出满足要求的元素集合. 实际这个是个很典型的技术要求, 之前的项目也遇见过,但是因为当时的类库不多, ...

aaa配置(第十三组)

拓扑 网络情况 A PING B A PING C PC-B PING PC-C 2.R1的配置 a.console线 R1(config)#username admin1 password Admi ...

C++解决case中不能定义局部变量问题

case Operation::DeviceAuthen: { std::string token = root["body"]["token"].asStri ...

android开发之Tabhost刷新

在android中,使用tabHost的时候,如果tab被点击,该tab所对应的activity被加载了,从别的tab切换回来的时候,activity不会再次被创建了(onCreate),所以要想每次 ...

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值