index-150lines.html

<style>
    html{
        padding: 20px;
        background-color: rgb(250, 250, 250);
    }
    body{
        background-color: transparent !important;
    }
    .container{
        background-color: transparent;
    }

    #serialResults {
        white-space: pre-line;
        height: 100%;
        width: 100%;
        overflow-y: scroll;
        text-align: left;
    }
    #serialResults::-webkit-scrollbar{
        display: none;
    }

    input[type=range]::-webkit-slider-thumb{
        appearance: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background-color: black;
        border: 2px solid #fff;
    }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<title>Fastest Serial terminal in your browser for Chrome.</title>
<meta name="Description" content="Set your baud speed and hit connect.
 A serial terminal that runs with out any plugins in chrome.">

<div class="container" style="min-width: 750px;">
    <!-- 标题 -->
    <header class="pb-3 mb-4 border-bottom ">
        <div class="d-flex align-items-center text-dark text-decoration-none justify-content-center">
            <img src="./pics/logoZ-black.svg" style="width: 40px; margin-right: 20px;" />
            <span class="fs-4">机械臂控制台 - control center</span>
        </div>
    </header>
    <div class="row justify-content-center">
        <div class="col-6" style="width: 660px;">
            <div class="p-5 text-white bg-dark rounded-3">
                <!-- 端口选择 -->
                <div class="input-group mb-3">
                    <!-- <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">@</span>
                        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
                      </div> -->
                    <button type="button" class="btn btn-outline-light" onclick="connectSerial()">Connect</button>
                    <span class="input-group-text" id="basic-addon1">Baud:</span>
                    <input class="form-control" type="text" id="baud" list="baudList"
                        style="width: 200px; text-align: center;" onclick="this.value = ''"
                        onchange="localStorage.baud = this.value" aria-describedby="basic-addon1">
                    
                    <!-- <button type="button" class="btn btn-outline-light"
                        onclick="serialResultsDiv.innerHTML = '';">Clear</button> -->
                </div>
                <datalist id="baudList">
                    <option value="110">110</option>
                    <option value="300">300</option>
                    <option value="600">600</option>
                    <option value="1200">1200</option>
                    <option value="2400">2400</option>
                    <option value="4800">4800</option>
                    <option value="9600">9600</option>
                    <option value="14400">14400</option>
                    <option value="19200">19200</option>
                    <option value="38400">38400</option>
                    <option value="57600">57600</option>
                    <option value="115200">115200</option>
                    <option value="128000">128000</option>
                    <option value="256000">256000</option>
                </datalist>
                <!-- 发送 -->
                <!-- <div class="input-group" style="margin-bottom: 10px;">
                    <input type="text" class="form-control" id="lineToSend" style="width:calc(100% - 300px)">
                    <button type="button" class="btn btn-outline-light" onclick="sendSerialLine()"
                        style="width:100px">Send</button>
                    <button type="button" class="btn btn-outline-light" onclick="sendCharacterNumber()"
                        style="width:150px">Send
                        Char</button>
                </div> -->
                <!-- 设置 -->
                <!-- <input class="form-check-input" type="checkbox" id="addLine"
                    onclick="localStorage.addLine = this.checked;" checked>
                <label class="form-check-label" for="addLine">send with /r/n</label>

                <input class="form-check-input" type="checkbox" id="echoOn"
                    onclick="localStorage.echoOn = this.checked;" checked>
                <label class="form-check-label" for="echoOn">echo</label> -->
                
            </div>
            <div class="p-5 text-white bg-dark rounded-3" style="margin-top: 20px;">
                <!-- 新增按钮 -->
                <div class="row align-items-center">
                    <!-- 速度 -->
                    <div class="col-9">
                        <label for="customRange1" class="form-label">Joint 1</label>
                        <input type="range" class="form-range" min="0" max="5" id="customRange1">
                        <div class="label">
                            <span>-3</span>
                            <span style="margin-left: 54px;">-2</span>
                            <span style="margin-left: 58px;">-1</span>
                            <span style="margin-left: 58px;">1</span>
                            <span style="margin-left: 64px;">2</span>
                            <span style="margin-left: 64px;">3</span>
                        </div>
                    </div>
                    <div class="col-3">
                        <button type="button" class="btn btn-outline-light sendBtn" style="margin-top:30px; width:100px" id="customButton1">Move</button>
                    </div>
                </div>
                <div class="row align-items-center" style="margin-top:20px;">
                    <!-- 速度 -->
                    <div class="col-9">
                        <label for="customRange2" class="form-label">Joint 2</label>
                        <input type="range" class="form-range" min="0" max="5" id="customRange2">
                        <div class="label">
                            <span>-3</span>
                            <span style="margin-left: 54px;">-2</span>
                            <span style="margin-left: 58px;">-1</span>
                            <span style="margin-left: 58px;">1</span>
                            <span style="margin-left: 64px;">2</span>
                            <span style="margin-left: 64px;">3</span>
                        </div>
                    </div>
                    <div class="col-3">
                        <button type="button" class="btn btn-outline-light sendBtn" style="margin-top:30px; width:100px" id="customButton2">Move</button>
                    </div>
                </div>
                <div class="row align-items-center" style="margin-top:20px;">
                    <!-- 速度 -->
                    <div class="col-9">
                        <label for="customRange3" class="form-label">Joint 3</label>
                        <input type="range" class="form-range" min="0" max="5" id="customRange3">
                        <div class="label">
                            <span>-3</span>
                            <span style="margin-left: 54px;">-2</span>
                            <span style="margin-left: 58px;">-1</span>
                            <span style="margin-left: 58px;">1</span>
                            <span style="margin-left: 64px;">2</span>
                            <span style="margin-left: 64px;">3</span>
                        </div>
                    </div>
                    <div class="col-3">
                        <button type="button" class="btn btn-outline-light sendBtn" style="margin-top:30px; width:100px" id="customButton3">Move</button>
                    </div>
                </div>
            </div>
        </div>
     

    </div>
    <br> 
    <p style="text-align: center; font-size: 11px;">
        © 2021 Mike Molinari (mmiscool) Source <a
        href="https://github.com/mmiscool/serialTerminal.com">https://github.com/mmiscool/serialTerminal.com</a>
    </p>
 
</div>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.bundle.min.js"></script>
<script>
    var port, textEncoder, writableStreamClosed, writer;
    async function connectSerial() {
        try {
            // Prompt user to select any serial port.
            port = await navigator.serial.requestPort();
            await port.open({ baudRate: document.getElementById("baud").value });

            textEncoder = new TextEncoderStream();
            writableStreamClosed = textEncoder.readable.pipeTo(port.writable);
            writer = textEncoder.writable.getWriter();
            listenToPort();
        } catch {
            alert("Serial Connection Failed");
        }
    }
    let data1 //按钮对应数据
    let data2 //滑动条对应数据
    async function sendCharacterNumber() {
        // 在这里更新，不要在下面的函数更新
		let dataHex = new Array(0x13, 0x01, 0x01, 0x00, 0x00, 0x00, 0x0d, 0x0a);
        dataHex[1]  = data1
		dataHex[2] = data2;
		let dataChar = new Array(8);
		for (let i = 0; i < 8; i++){
			dataChar[i] = String.fromCharCode(dataHex[i]);
		}
		console.log(dataChar)
		for (let i = 0; i < 8; i++){
			await writer.write(dataChar[i]);
		}

    }

    async function sendSerialLine() {
        //转为16进制
        dataToSend = document.getElementById("lineToSend").value.split(" ").map(item => '0x' + item)
        console.log(dataToSend)
        if (document.getElementById("addLine").checked == true) dataToSend = dataToSend + "\r\n";
        if (document.getElementById("echoOn").checked == true) appendToTerminal("> " + dataToSend);
        await writer.write(dataToSend[0][0]);
    }
    async function listenToPort() {
        const textDecoder = new TextDecoderStream();
        const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
        const reader = textDecoder.readable.getReader();
        // Listen to data coming from the serial device.
        while (true) {
            const { value, done } = await reader.read();
            if (done) {
                // Allow the serial port to be closed later.
                reader.releaseLock();
                break;
            }
            // value is a string.
            // appendToTerminal(value); //显示返回数据
        }
    }
    /* const serialResultsDiv = document.getElementById("serialResults");
    async function appendToTerminal(newStuff) {
        serialResultsDiv.innerHTML += newStuff;
        if (serialResultsDiv.innerHTML.length > 3000) serialResultsDiv.innerHTML = serialResultsDiv.innerHTML.slice(serialResultsDiv.innerHTML.length - 3000);

        //scroll down to bottom of div
        serialResultsDiv.scrollTop = serialResultsDiv.scrollHeight;
    } */
    /* document.getElementById("lineToSend").addEventListener("keyup", async function (event) {
        if (event.keyCode === 13) {
            sendSerialLine();
        }
    }) */
    document.getElementById("baud").value = (localStorage.baud == undefined ? 115200 : localStorage.baud);
    // document.getElementById("addLine").checked = (localStorage.addLine == "false" ? false : true);
    // document.getElementById("echoOn").checked = (localStorage.echoOn == "false" ? false : true);

    // 获取滑动条数据
    const ranges = document.getElementsByClassName("form-range")
    function getDate1(i){
        switch (i) {
            case 0:
                data1 = 0x00
                break;
            case 1:
                data1 = 0x01
                break;
            case 2:
                data1 = 0x02
                break; 
            default:
            data1 = 0x00
                break;
        }
        console.log(data1)
    }
    function getDate2(i){
        switch (ranges[i].value) {
            case '0':
                data2 = 0x0f
                break;
            case '1':
                data2 = 0x0e
                break;
            case '2':
                data2 = 0x0d
                break; 
            case '3':
                data2 = 0x01
                break; 
            case '4':
                data2 = 0x02
                break;
            case '5':
                data2 = 0x03
                break;
            default:
            data2 = 0x01
                break;
        }
        console.log(data2)
    }
    // range1.addEventListener("change",() =>{
    //     getDate2()
    // } )
    // 滑动条对应按钮
    const btns = document.getElementsByClassName('sendBtn')
    // const btn1 = document.getElementById("customButton1")
    // 长按连续触发
    let tid
    for(let i = 0;i<btns.length;i++){
        btns[i].onmousedown = function(){
            getDate1(i)
            getDate2(i)
            tid = setInterval(function() {
            sendCharacterNumber()
            }, 300);
    }
    btns[i].onmouseup = function(){
        clearInterval(tid)//清除定时器
    }
    // 单击
    btns[i].onclick = function(){
        getDate1(i)
        getDate2(i)
        sendCharacterNumber()
    }
    }
   
</script>