智奉工作室 2023-07-25 15:25 采纳率: 0%
浏览 9

python和html esp32


import network
import socket
from config import *


wifi_status = network.WLAN(network.STA_IF) #作为客户端连接WiFi还是作为接入开启WiFi
wifi_status.active(False)
wifi_status.active(True) #这里True表示激活网络接口，False表示停用网络接口
wifi_status.connect(ssid,password) #连接WIFI

while wifi_status.isconnected() == False:
    print('Wifi lost connect...')

# if connected
print('Wifi connect successful')
print(wifi_status.ifconfig())

def web_page(request):
    try:
        f= open('index.html',mode='rb')
        html =f.read()
        f.close()
    except:
        html = 'HTTP/1.1 404 Not Found\r\n\r\n'
        html += 'File Not Found'
    return html

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)

while True:
    conn, addr = s.accept()
    print('Connection: %s' % str(addr))
    request = conn.recv(1024).decode('utf-8')
    request = str(request)
    response = web_page(request)
    conn.send(b'HTTP/1.1 200 OK\r\n')
    conn.send(b'Content-Type: text/html\r\n')
    conn.send(b'Connection: close\r\n\r\n')
    conn.sendall(response)
    print("跳转")
    conn.close()

micropython开发esp32，想实现页面的切换，目前出现的问题是，url变化了，但是页面不变化


def web_page(request):
    if 'GET /save' in request:
        try:
            f = open('index.html', 'r')
            response = f.read()
            f.close()
        except:
            response = 'HTTP/1.1 404 Not Found\r\n\r\n'
            response += 'File Not Found'
    else:
        try:
            f = open('set_up.html', 'r')
            response = f.read()
            f.close()
        except:
            response = 'HTTP/1.1 404 Not Found\r\n\r\n'
            response += 'File Not Found'
    return response

还使用了这种类型，也无法实现页面的跳转


```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1,user-scalable=no">
    <title>Four-legged robot</Four-legged></title>
    <style>
        .h1s{
            text-align: center;
        }
        .sz{
            text-align: center;
        }
        .control{
            margin: 0 auto;
        }
        .Task{
            margin: auto;
        }
        #go{
            background-size:100% 100%;
            background-repeat:no-repeat;
            border: none;
            color: black;
            padding: 35px 35px;
            border-radius:5px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        
        }
        #back{
            background-size:100% 100%;
            background-repeat:no-repeat;
            border: none;
            color: black;
            padding: 35px 35px;
            border-radius:5px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        #left{
            background-size:100% 100%;
            background-repeat:no-repeat;
            border: none;
            color: black;
            padding: 35px 35px;
            border-radius:5px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        #right{
            background-size:100% 100%;
            background-repeat:no-repeat;
            border: none;
            color: black;
            padding: 35px 35px;
            border-radius:5px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        #same_pace{
            background-size:100% 100%;
            background-repeat:no-repeat;
            border: none;
            color: black;
            padding: 35px 35px;
            border-radius:5px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        .set_up{
            box-sizing: border-box;
            width: 200px;
            height: 40px;
            border: none;
            background-color: #e7e7e7; color: black;
            font-size: 14px;
            padding: 10px 15px;
            border-radius: 5px;
        }
        .myButton {
        padding: 10px 20px;
        background-color: #eaeaea;
        border: none;
        border-radius: 4px;
        transition: transform 0.3s ease;
        }
        
        .myButton.active {
        transform: scale(0.95);
        }
    </style>
</head>
<br>
<br>
<br>
<br>
<body>
    <h1 class="h1s">Four-legged robot</h1>
    <table class="control">
        <tr>
            <td></td>
            <td><button id="go" alt="Button Image" title="图片按钮" class="myButton">前进</button></td>
            <td></td>
        </tr>
        <tr>
            <td><button id="left" alt="Button Image" title="图片按钮" class="myButton">左转</button></td>
            <td><button id="same_pace" alt="Button Image" title="图片按钮">踏步</button></td>
            <td><button id="right" alt="Button Image" title="图片按钮" class="myButton">右转</button></td>
        </tr>
        <tr>
            <td></td>
            <td><button id="back" alt="Button Image" title="图片按钮" class="myButton">退后</button></td>
            <td></td>
        </tr>
    </table>
    <p></p>
    <p></p>
    <p></p>

    <Table class="Task">
        <tr>
            <td></td>
            <td><h2 class="sz">Set UP</h2></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><button class="set_up set_up2">Robot dance</button></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><button class="set_up set_up2" onclick="window.location.href='./set_up.html'">Rudder calibration</button></td>
            <td></td>
        </tr>
    </Table>
</body>
</html>





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
    <title>Document</title>
    <style>
        .h1{
            text-align: center;
        }
        table{
            margin: auto;
            width: 230px;
            height: 100px;
            border-collapse:collapse;
        }
        td{
            text-align: center;
            padding: 0;
            margin: 0;
        }
        .set_up1{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border: black;
            background-color: #e7e7e7; 
            color: black;
            font-size: 15px;
        }
        .button3{
            background-repeat:no-repeat;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;  
            
        }
        .button3:hover{
            background-color: #4CAF50; /* Green */
            color: white;
        }
        .set_up2{
            box-sizing: border-box;
            width: 100px;
            height: 40px;
            background-color: #e7e7e7; 
            color: black;
            font-size: 14px;
            font-size: 15px;
            padding: 10px 15px;;   
        }
        .set_up3{
            box-sizing: border-box;
            width: 50px;
            height: 10px;
            background-color: white; 
            color: black;
            border: none;
            font-size: 15px;
            border-radius: 5px;
             padding: 4px; 
        }
        #saveBtn{
            width: 100%;
            height: 100%;
            background-repeat:no-repeat;
            color: black;
            border: none;
            border-radius: 5px;
            padding: 15px 20px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        #resetBtn{
            width: 100%;
            height: 100%;
            background-repeat:no-repeat;
            color: black;
            border: none;
            border-radius: 5px;
            padding: 15px 20px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        #confirmBtn{
            width: 50%;
            height: 100%;
            background-repeat:no-repeat;
            border: none;
            color: black;
            background-color: #e7e7e7;
            border-radius: 5px;
            padding: 15px 5px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
        }
        .input{
            width: 80%;
            padding: 10px 8px;
        }
        input:focus{
            background-color: #e7e7e7;
            }        
    </style>
</head>
<body>
    <br>
    <br>
    <h1 class="h1">Rudder calibration</h1>
    <table>
        <tr>
            <td><button class="set_up1" id="leg1Btn">前左腿</button></td>
            <td><button class="set_up1" id="leg2Btn">前右腿</button></td>
        </tr>
        <tr>
            <td><button class="set_up1" id="leg3Btn">后左腿</button></td>
            <td><button class="set_up1" id="leg4Btn">后右腿</button></td>
        </tr>
    </table>
    <p></p>
    <p></p>
    <table>
        <tr>
            <td class="set_up2">大腿</td>
            <td class="set_up2">小腿</td>
        </tr>
        <tr>
            <td class="set_up2"><input type="number" class="input" id="thighInput" value="90"></td>
            <td class="set_up2"><input type="number" class="input" id="calfInput" value="90"></td>
        </tr>
        <tr>
            <td><br></td>
        </tr>
        <tr>
            <td class="set_up3" colspan="2"><button id="saveBtn">Determine</button></td>
        </tr>
        <tr>
            <td class="set_up3" colspan="2"><button id="resetBtn">Reset All</button></td>
        </tr>
    </table>
    <br>
    <br>
    <div align="center">
        <button id="confirmBtn" onclick="onButtonClick()">Save & Exit setup</button>
    </div>
    <script>
        // 初始数据
var leg1 = {
    thigh: localStorage.getItem('leg1thighData'),
    calf: localStorage.getItem('leg1calfData')
};
var leg2 = {
    thigh: localStorage.getItem('leg2thighData'),
    calf: localStorage.getItem('leg2calfData')
};
var leg3 = {
    thigh: localStorage.getItem('leg3thighData'),
    calf: localStorage.getItem('leg3calfData')
};
var leg4 = {
    thigh: localStorage.getItem('leg4thighData'),
    calf: localStorage.getItem('leg4calfData')
};



// 当前选择的腿
var currentLeg = leg1;
const leg1Button = document.getElementById('leg1Btn');
const leg2Button = document.getElementById('leg2Btn');
const leg3Button = document.getElementById('leg3Btn');
const leg4Button = document.getElementById('leg4Btn');
// 初始化界面
document.getElementById("thighInput").value = currentLeg.thigh;
document.getElementById("calfInput").value = currentLeg.calf;
leg1Button.style.backgroundColor = '#4CAF50';

// 腿按钮点击事件
document.getElementById("leg1Btn").addEventListener("click", function() {
    currentLeg = leg1;
    leg1Button.style.backgroundColor = '#4CAF50';
    leg2Button.style.backgroundColor = '';
    leg3Button.style.backgroundColor = '';
    leg4Button.style.backgroundColor = '';
    setActiveButton("leg1Btn");
    updateInputs();
    event.preventDefault();
});

document.getElementById("leg2Btn").addEventListener("click", function() {
    currentLeg = leg2;
    leg1Button.style.backgroundColor = '';
    leg2Button.style.backgroundColor = '#4CAF50';
    leg3Button.style.backgroundColor = '';
    leg4Button.style.backgroundColor = '';
    setActiveButton("leg2Btn");
    updateInputs();
    event.preventDefault();
});

document.getElementById("leg3Btn").addEventListener("click", function() {
    currentLeg = leg3;
    leg1Button.style.backgroundColor = '';
    leg2Button.style.backgroundColor = '';
    leg3Button.style.backgroundColor = '#4CAF50';
    leg4Button.style.backgroundColor = '';
    setActiveButton("leg3Btn");
    updateInputs();
    event.preventDefault();
});

document.getElementById("leg4Btn").addEventListener("click", function() {
    currentLeg = leg4;
    leg1Button.style.backgroundColor = '';
    leg2Button.style.backgroundColor = '';
    leg3Button.style.backgroundColor = '';
    leg4Button.style.backgroundColor = '#4CAF50';
    setActiveButton("leg4Btn");
    updateInputs();
    event.preventDefault();
});

// 保存按钮点击事件
document.getElementById("saveBtn").addEventListener("click", function() {
    currentLeg.thigh = parseInt(document.getElementById("thighInput").value);
    currentLeg.calf = parseInt(document.getElementById("calfInput").value);
    localStorage.setItem('leg1thighData', leg1.thigh);
    localStorage.setItem('leg1calfData', leg1.calf);
    localStorage.setItem('leg2thighData', leg2.thigh);
    localStorage.setItem('leg2calfData', leg2.calf);
    localStorage.setItem('leg3thighData', leg3.thigh);
    localStorage.setItem('leg3calfData', leg3.calf);
    localStorage.setItem('leg4thighData', leg4.thigh);
    localStorage.setItem('leg4calfData', leg4.calf);
});

// 恢复默认按钮点击事件
document.getElementById("resetBtn").addEventListener("click", function() {
    currentLeg = leg1;
    leg1.thigh=90;leg1.calf=90;leg2.thigh=90;leg2.calf=90;leg3.thigh=90;leg3.calf=90;leg4.thigh=90;leg4.calf=90;
    setActiveButton("leg1Btn");
    updateInputs();
    
});

// 确认并跳转按钮点击事件
function onButtonClick() {
                var xhttp = new XMLHttpRequest();
                xhttp.open('GET', '/save', true);
                xhttp.send();
            }

document.getElementById("confirmBtn").addEventListener("click", function() {
    currentLeg.thigh = parseInt(document.getElementById("thighInput").value);
    currentLeg.calf = parseInt(document.getElementById("calfInput").value);
    localStorage.setItem('leg1thighData', leg1.thigh);
    localStorage.setItem('leg1calfData', leg1.calf);
    localStorage.setItem('leg2thighData', leg2.thigh);
    localStorage.setItem('leg2calfData', leg2.calf);
    localStorage.setItem('leg3thighData', leg3.thigh);
    localStorage.setItem('leg3calfData', leg3.calf);
    localStorage.setItem('leg4thighData', leg4.thigh);
    localStorage.setItem('leg4calfData', leg4.calf);
    alert("保存成功！");
    // 跳转到另一个页面
    window.location.href = "index.html";
});

// 设置按钮的活动状态
function setActiveButton(buttonId) {
    var buttons = document.querySelectorAll("button");
    buttons.forEach(function(button) {
    button.classList.remove("active");
    });
    document.getElementById(buttonId).classList.add("active");
}

// 更新输入框的数值
function updateInputs() {
    document.getElementById("thighInput").value = currentLeg.thigh;
    document.getElementById("calfInput").value = currentLeg.calf;
}

var pressTimer;

// 长按事件处理函数
function longPress() {
// 在此处添加需要在长按时执行的代码

console.log("长按事件触发");
}

// 鼠标按下事件处理函数
function onButtonPress() {
// 设置计时器，在500毫秒之后触发长按事件
pressTimer = setTimeout(longPress, 500);
}

// 鼠标松开事件处理函数
function onButtonRelease() {
// 清除计时器，如果在500毫秒内松开按钮，则不会触发长按事件
clearTimeout(pressTimer);
}

// 获取所有按钮元素
var buttons = document.getElementsByClassName("myButton");

// 遍历按钮，并为每个按钮添加事件监听器
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('mousedown', onButtonPress);
buttons[i].addEventListener('touchstart', onButtonPress);
buttons[i].addEventListener('mouseup', onButtonRelease);
buttons[i].addEventListener('touchend', onButtonRelease);
}
    </script>
</body>
</html>

没学过前端，主要想做一个控制器，实在不知道怎么解决了，望各位帮帮忙

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-07-25 17:16
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:
    • 以下回答由chatgpt基于相关博客总结生成:

      我可以帮你解答关于IT方面的问题，请提供具体的问题内容。


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题？

问题事件

  • 创建了问题 7月25日

悬赏问题

  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图