树莓派小车#2 - 添加新的控制方式

最新推荐文章于 2024-09-03 16:07:32 发布

哲学旺仔

最新推荐文章于 2024-09-03 16:07:32 发布

阅读量166

点赞数 1

分类专栏：树莓派文章标签： javascript html ajax

本文链接：https://blog.csdn.net/xuxl97/article/details/119913666

版权

目录结构代码优化键盘监听 Web控制 JavaScript

关键词由CSDN通过智能技术生成

树莓派专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

整理代码 & 添加新的控制方式
- 优化目录结构
- 添加Web页面监听键盘输入的功能

整理代码 & 添加新的控制方式

优化目录结构

在上次的文章中，我们有了一个基础的控制系统。显然把web框架和控制界面放到一个文件夹中并不是一个好主意。我们需要把文件分类放好以便后期的维护和更改。

上一次的目录结构：

./
|- start.py
|- index.html

优化后的目录结构：

这里我们把上次文章中的Car和Wheel类放到了components/vehicle.py中，然后在项目根目录的main.py中调用。components文件夹用于放置各种自定义的模块，用于实现不同的功能，可以方便的插入到主程序当中。

你可能会注意到多了一些其他的文件，暂时不需要去管，这是开发中的一些遗留，后面会逐一清理。
只需要知道我们把原有的starter.py和index.html改成了components/vehicle.py + main.py + index.html的形式。

添加Web页面监听键盘输入的功能

页面单纯用点击是很反人类的控制方式（在触摸端反而比较好），为了能在PC上的页面用键盘控制，我添加了页面监听键盘的javascript代码，直接写在index.html中，如下：（其实是很不规范的写法，还在学前端。。有机会再改进）

    <script type="text/javascript" language=JavaScript charset="UTF-8">
        document.onkeydown=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
            // left/up/right/down: 37/38/39/40
            // a/w/d/s: 65/87/68/83
            if (e && (e.keyCode == 37 || e.keyCode == 65)){
                $.post("/cmd", "leftTurn", function(data, status){});
            }
            if (e && (e.keyCode == 38 || e.keyCode == 87)){
                $.post("/cmd", "forward", function(data, status){});
            }
            if (e && (e.keyCode == 39 || e.keyCode == 68)){
                $.post("/cmd", "rightTurn", function(data, status){});
            }
            if (e && (e.keyCode == 40 || e.keyCode == 83)){
                $.post("/cmd", "backward", function(data, status){});
            }
            if (e && e.keyCode == 32){
                $.post("/cmd", "stop", function(data, status){});
            }
            if (e && e.keyCode == 74){
                $.post("/cmd", "accelerate", function(data, status){});
            }
            if (e && e.keyCode == 75){
                $.post("/cmd", "decelerate", function(data, status){});
            }

        }
    </script>

上面这段代码写在<head></head>之间，这导致html页面加载时间略长，不过问题不大，功能确实是实现了，现在在html页面按动键盘上的「方向键」、「wasd」可以实现鼠标点击前后作用相同的效果；按「j / k」可以分别加速和减速。

原计划用keyboard添加在ssh端控制的新模式，python的keyboard库并不是很好用，准备换换其他的方式，写一个新线程（或者进程？感觉进程稳定一些）来监听键盘输入。

最近忙于学习各种知识，慢慢开发把，基础知识牢了之后会加快开发速度的。

代码均在raspCar，不定期更新。

END

哲学旺仔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树莓派小车#2 - 添加新的控制方式

文章目录优化目录结构添加Web页面监听键盘输入的功能优化目录结构在上次的文章中，我们有了一个基础的控制系统。显然把web框架和控制界面放到一个文件夹中并不是一个好主意。我们需要把文件分类放好以便后期的维护和更改。上一次的目录结构：./|- start.py|- index.html优化后的目录结构：这里我们把上次文章中的Car和Wheel类放到了components/vehicle.py中，然后在项目根目录的main.py中调用。components文件夹用于放置各种自定义的模块，用
复制链接

扫一扫

专栏目录