WEB 手柄 http通信,mcu端解析代码 2024/7/23 日志

最新推荐文章于 2024-08-28 11:59:16 发布
梦境虽美，却不长
最新推荐文章于 2024-08-28 11:59:16 发布
阅读量315
点赞数 2
分类专栏：前端从入门到放弃文章标签：前端 http css
本文链接：https://blog.csdn.net/qq_43422073/article/details/140647740
版权
前端从入门到放弃专栏收录该内容
12 篇文章 0 订阅
订阅专栏
WEB 手柄

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>WEB遥控器</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        overflow-y: hidden;
        overflow-x: hidden;

    }


    body {
        background-color: #09f811;
        color: aliceblue;

    }

    #play {

        transform-origin: top left;
        position: absolute;
        



    }
   
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    #play {
        transform: scale(0.5);
    }
}


@media only screen 
and (min-device-width : 481px) 
and (max-device-width : 768px) {
    #play {
        transform: scale(0.7);
    }
}


@media only screen 
and (orientation : portrait) 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    #play {
        transform: scale(0.8);
    }
}


@media only screen 
and (orientation : landscape) 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    #play {
        transform: scale(0.9);
    }
}


@media only screen 
and (min-width : 1224px) {
    #play {
        transform: scale(1);
    }
}

    #box {

        gap: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);


    }



    #box3 {
        gap: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);


    }





    div[id^="t"] {
        border-radius: 25px;
        margin: 10px;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: black;
        font-size: 50px;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    #t1 {
        grid-column: 3;
        grid-row: 2;
        transform: rotate(90deg)
    }

    #t2 {
        grid-column: 2;
        grid-row: 2;
    }

    #t3 {
        grid-column: 1;
        grid-row: 2;
        transform: rotate(90deg);

    }

    #t4 {
        grid-column: 2;
        transform: rotate(90deg);

    }

    #t5 {
        transform: rotate(90deg);
        grid-column: 2;
        grid-row: 3;



    }


    #t6,
    #t7 {
        font-size: 30px;
        transform: rotate(90deg);
    }


    #t8 {
        grid-column: 3;
        grid-row: 2;
        transform: rotate(90deg);
    }

    #t9 {
        grid-column: 2;
        grid-row: 2;
    }

    #t10 {
        grid-column: 1;
        grid-row: 2;
        transform: rotate(90deg);
    }

    #t11 {
        grid-column: 2;
        transform: rotate(90deg);
    }

    #t12 {
        grid-column: 2;
        grid-row: 3;
        transform: rotate(90deg);
    }

    div[id^="t"]:active {
        transform:scale(0.2);
       
        background-color: rgb(243, 94, 8);
  
       
    }



  

    #wifi {
        position: absolute;
        background-color: black;
        border-radius: 25px;
        font-size: 50px;
        width: 50px;
        height: 50px;
        right: 0;
        
      
    }

    #wifi:active {
        transform: scale(0.5);
       


    }

    #set {
        display: none;
        height: 100vh;
        position: relative;
        z-index: 2;
        background-color: black;

    }

    #but {
        position: absolute;
        width: 100vw;
        height: 5vh;
        bottom: 0;
    }

    #but:active {
        transform: scale(0.4);
       
    }

    #MQTT {

        width: 100vw;
        height: 50vh;

    }

    #diva {
        display: flex;

    }

    #LED {
        margin: 0;
        padding: 0;


    }

    #dy {
        display: none;




    }

    #dvfas {
        display: none;
    }

    #about {
        height: 5vh;
        width: 100vw;
        position: absolute;
        bottom: 0;
  
    }
    #about>p{
       
        transform: rotate(90deg);
    }
   
    #abouta{
        position: absolute;
        display: block;
        width: 100vw;
        background-color: white;
        height: 100vh;
        display: none;
        color: black;
       
    }
    #abouta>p{
        transform-origin: 50vw 50vw;
        transform: rotate(90deg);
        position: absolute;
        top:5vh;
        right: 80vw;

        
    }
    #abouta>p:hover{
       
       color: rgba(241, 8, 8, 0.835);
    }
   
</style>

<body>

    <div id="play">
        <div id="box">
            <div id="t1">↑</div>
            <div id="t2">⚪</div>

            <div id="t3">↓</div>

            <div id="t4">←</div>
            <div id="t5">→</div>
        </div>
        <div id="box2">
            <div id="t6">启动</div>
            <div id="t7">暂停</div>
        </div>
        <div id="box3">
            <div id="t8">上</div>
            <div id="t9">⚪</div>

            <div id="t10">下</div>

            <div id="t11">左</div>
            <div id="t12">右</div>
        </div>

    </div>
    <button id="about"><p>关于</p></button>
    <div id="abouta"><p>点击空白返回<br>联系我们:<br>邮箱
<br>祝福您生活愉快!</p></div>
    <div id="wifi" >
        ★
    </div>
   
    <div id="set" >
        <h1>MQTT管理</h1>
        <div id="MQTT">
            <form class="fr">
                <span>MQTT服务器:</span>
                <input type="text" id="mqttserver" name="dz" placeholder="填入服务器地址"><br>
                <span>MQTT端口号:</span>
                <input type="text" id="pot" name="port" placeholder="填入端口号"><br>

                <span>MQTT密匙码:</span>
                <input type="text" id="pasa" name="pass" placeholder="填入MQTT连接密匙">
                <button type="button" onclick="connected()">连接</button>
            </form>
            <div id="diva">
                <span>连接状态:</span>
                <svg width="30" height="30" viewBox="0 0 100 100">
                    <circle id="LED" cx="30" cy="30" r="26" stroke="black" stroke-width="3" fill="red" />连接中...
                </svg>

            </div>
            <p id="ts"></p>
            <br><i id="jsre"></i>
            <div id="dy">
                <form>
                    <span>设置订阅主题:</span>
                    <input type="text" id="subqq" name="subqq" placeholder="填入订阅主题">
                    <button type="button" onclick="subee()">订阅</button>
                </form>
                <p id="subts"></p>
            </div>
            <div id="dvfas">
                <form>
                    <span>设置发布主题:</span>
                    <input type="text" id="pubqq" name="pubqq" placeholder="填入需要发布的消息">
                    <button type="button" onclick="pubee()">发布</button>
                </form>
                <p id="pubts"></p>

            </div>




        </div>
        <button id="but">返回</button>
    </div>

    <script>
        for (var i = 1; i <= 12; i++) {
            document.getElementById("t" + i).addEventListener("click", function () {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "/?cmd=" + this.id, true);
                xhr.send();
                var str = document.getElementById(this.id).textContent;
                console.log(str);
            })
        }

        connected = () => {
            var geta = document.getElementById('mqttserver').value;
            var getb = document.getElementById('pot').value;
            var getc = document.getElementById('pasa').value;
            if (geta == "" || getb == "" || getc == "") {
                document.getElementById("ts").innerHTML = "请输入完整";
                return;
            };
            console.log(geta);
            console.log(getb);
            console.log(getc);
            var xhr = new XMLHttpRequest();
            var str = "/MQTT?dz=" + geta + "&port=" + getb + "&pass=" + getc;
            xhr.open("GET", str, false);
            xhr.send();
            if (xhr.status == 200) {
                var LED = document.getElementById("LED");
                LED.setAttribute("fill", "green");
                document.getElementById("jsre").innerText = "恭喜您,成功连接MQTT!";
                document.getElementById("ts").innerHTML = "连接成功";
                document.getElementById("dy").style.display = "block";
            } else { document.getElementById("ts").innerHTML = "连接失败"; };



        };

        function subee() {
            var gea = document.getElementById('subqq').value;
            if (gea == "") {
                document.getElementById("subts").innerText = "请输入完整";
                return;
            };
            console.log(gea);
            var xhr = new XMLHttpRequest();
            var str = "/subqq?subqq=" + gea;
            xhr.open("GET", str, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("subts").innerText = "订阅成功";
                    document.getElementById("dvfas").style.display = "block";
                };
            };

            xhr.send();
        };

        function pubee() {
            var gea = document.getElementById('pubqq').value;
            if (gea == "") {
                document.getElementById("subts").innerText = "请输入完整";
                return;
            };
            console.log(gea);
            var xhr = new XMLHttpRequest();
            var str = "/pubqq?pubqq=" + gea;
            xhr.open("GET", str, true);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("pubts").innerText = "发布成功";
                };
            };
            xhr.send();
        };

        document.getElementById("wifi").addEventListener("click", function () {
            var h1 = document.getElementById("set");
            h1.style.display = "block";
        });
        document.getElementById("but").addEventListener("click", function () {
            var h1 = document.getElementById("set");
            h1.style.display = "none";

        });
        document.getElementById("about").addEventListener("click", function () {
            var abouta=document.getElementById("abouta");
            abouta.style.display="block";
            abouta.addEventListener("click",function(){
                abouta.style.display="none";
            });
        });


    </script>


</body>

</html>