树莓派小车，从基础上手到完整工程（三）——设计html，网页操控，与小车交互

_做个辣妹

于 2022-01-31 13:38:12 发布

阅读量825

点赞数 2

文章标签： html raspberry pi 交互

本文链接：https://blog.csdn.net/weixin_45926435/article/details/122759089

版权

搭一个树莓派小车

网页操控

网页操控

在自己设计的网页页面上添加几个按钮，进而操控小车。
在这里插入图片描述

main.py

from flask import Flask, render_template, Response
from motor import Motor

motor = Motor()
app = Flask(__name__)

@app.route('/')
def template():
    return render_template('index.html')   # 返回事先完成的html文档，使其显示在网页上

@app.route("/front")
def front():
    motor.Front()
    print("front")
    return ""

@app.route("/left")
def left():
    motor.Left()
    print("left")
    return ""

@app.route("/right")
def right():
    motor.Right()
    print("right")
    return ""

@app.route("/rear")
def rear():
    motor.Rear()
    print("rear")
    return ""

app.run(host="0.0.0.0")

html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小外甥的酷炫小车</title>
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
              name="viewport">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <style>
            body {
                text-align: center;
                background-color: white;
            }
            button {
                width: 100px;
                height: 100px;
                font-size: 50px;
                color: white;
                padding: 10px 20px;
                background-color: black;
                font-weight: 1500;
                cursor: pointer;
                border-radius: 30px;
            }
            #front {
                position: absolute;
                top: 100px;
                left: 180px;
            }
            #left{
                position: absolute;
                top: 220px;
                left: 60px;
            }
            #right{
                position: absolute;
                top: 220px;
                left: 300px;
            }
            #rear{
                position: absolute;
                top: 340px;
                left: 180px;
            }
        </style>
        <script>
            function move(self)
            {
                var xmlthhp;
                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET",self.id,true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <button id="front" onclick="move(this)">↑</button>
        <button id="left" onclick="move(this)">←</button>
        <button id="right" onclick="move(this)">→</button>
        <button id="rear" onclick="move(this)">↓</button>
    </body>
</html>