Arduino与JavaScript开发实例-开发环境搭建

文章目录

1、开发环境搭建

1、Firmata协议介绍

Firmata 是一种协议,用于通过计算机(或智能手机/平板电脑等)上的软件与微控制器进行通信。该协议可以在任何微控制器架构上的固件以及任何计算机软件包上的软件中实现。

Firmata 基于 midi 消息格式,其中命令字节为 8 位,数据字节为 7 位。例如,midi 通道压力(命令:0xD0)消息是 2 个字节长,在 Firmata 中,命令 0xD0 用于启用数字端口(8 个引脚的集合)的报告。 midi 和 Firmata 版本都是 2 个字节长,但含义明显不同。在 Firmata 中,消息中的字节数必须符合相应的 midi 消息。然而,Midi System Exclusive (Sysex) 消息可以是任意长度,因此在整个 Firmata 协议中使用最为显着。

此存储库包含 Firmata 协议的文档。协议的核心在protocol.md 文件文件中描述。特定于功能的文档在各个降价文件(i2c.md、accelStepperFirmata.md、servos.md 等)中进行了描述。添加到提案目录的文件是尚未最终确定的新功能提案。有关已记录的固件功能的完整列表,请参阅 feature-registry.md。

Firmata 协议理论上可以用于任何微控制器平台。然而,目前最完整的实现是针对 Arduino(包括与 Arduino 兼容的微控制器)。以下是已知的 Firmata 微控制器平台实现:

Firmata客户端有多种计算机语言实现,本次实例使用到的Firmata客户端为:johnny-five

2、Arduino固件库烧写

2.1 安装Arduino Firmata支持库

在这里插入图片描述

2.2 安装Arduino固件

在这里插入图片描述

本次实例使用的Arduino开发板为:Arduino Mega2560

3、Firmata客户端开发环境

1)下载并安装VS code:https://code.visualstudio.com/

2)下载Electron:https://github.com/electron/electron。本次使用的Electron为`v17.0.1`:

在这里插入图片描述

3)下载并安装Nodejs:https://nodejs.org/dist/v16.13.0/

nodejs安装完成后,需要安装如下支持库:

1
2
npm -g install node-gyp nan debug

4)下载并安装Python3:https://www.python.org/

5)下载并安装Visual Studio 2019 Community:https://visualstudio.microsoft.com/

4、Firmata客户端项目

本次实例使用Electron作为桌面系统,因此整个Firmata客户端工程按Electron要求组织。

1)创建package.json文件

1
2
3
4
5
6
7
8
9
10
11
{
"name": "Arduino Firmata Electron",
"version": "0.0.1",
"main": "main.js",
"dependencies": {
"jquery": "^3.6.0",
"johnny-five": "^2.1.0"
}
}


在工程目录下运行命令安装依赖:npm install --save

2)创建main.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const { app, BrowserWindow,ipcMain } = require('electron')
app.allowRendererProcessReuse = false
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow() {

// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
backgroundColor: "#ccc",
webPreferences: {
nodeIntegration: true, // to allow require
contextIsolation: false, // allow use with Electron 12+
preload: path.join(__dirname, 'preload.js')
}
})

// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

// Open the DevTools.
mainWindow.webContents.openDevTools()

// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}



// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
app.quit()
})

app.on('activate', function() {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})

上述代码实现Electron应用程序入口各项初始化。

jhonny-five模块引用了serialport模块,而serialport模块包含了本地依赖库;由于Electron14+之后,不支持在渲染进程中调用本地依赖库,因此需要在主进程中加载jhonny-file模块,并通过IPC方式与渲染页面通信。

在main.js文件最后添加Firmata客户端调用实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

// 加载库
const five = require('johnny-five')

// 连接开始板,串口为COM12(请根据自己电脑的串口名称)
// 关闭repl,这个配置相当重要,如果打开的话,在开始板初始化后,Electron会自动退出
const board = new five.Board({port:'COM12',repl:false})
// 监听开发板ready事件,
board.on('ready',() => {
console.log('board inited')
// 初始化LED,引脚编号为13
const led = new five.Led(13)

// 监听渲染进程自定义led-on事件
ipcMain.on('led-on', (event, arg) =>{
console.log('led on')
// 打开LED
led.on()
})

// 监听渲染进程自定义的led-off事件
ipcMain.on('led-off',(event,arg) => {
console.log('led off')
// 关闭LELD
led.off()
})
})

3)渲染进程控制逻辑:renderer.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const { ipcRenderer } = require('electron')

let ledState = false;

$('#led-btn').on('click',() => {
if(!ledState){
ipcRenderer.send('led-on','');
console.log('led on')
}else{
ipcRenderer.send('led-off','')
console.log('led off')
}
ledState = !ledState

if(ledState){
$('#led-ctr-bg-img').attr('src','static/images/led\_on.png')
$('#led-controller-title').html('关闭LED')
}else{
$('#led-ctr-bg-img').attr('src','static/images/led\_off.png')
$('#led-controller-title').html('打开LED')
}
})

4)页面文件:index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Arduino Firmata Electron</title>
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="static/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
<script>
window.echarts = require('echarts');
</script>
<link href="static/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet"></link>
</head>
<body>
<div class="row">
<div class="col-md-2">
<div class="panel panel-default" style="width:128px;height:256px">
<div class="panel-heading text-center">LED开关</div>
<div class="panel-body">
<button type="button" class="btn" id="led-btn">
<image src="static/images/led\_off.png" id="led-ctr-bg-img"></image>
</button>
</div>
<div class="panel-footer text-center" id="led-controller-title">打开LED</div>
</div>
</div>
</div>
<script src="renderer.js"></script>
</body>
</html>

到此,整个项目已经编写完成,在工程目录下运行命令:electron .启动Electron应用程序。运行结果如下:

在这里插入图片描述

文章来源: https://iotsmart.blog.csdn.net/article/details/124907013