Skip to content

Commit 1db8ad6

Browse files
minggangwminggangw
authored
[Demo] Add rclnodejs electron demo (#996)
Fix: #995
1 parent 863d20c commit 1db8ad6

File tree

7 files changed

+190
-0
lines changed

7 files changed

+190
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ rclnodejs.init().then(() => {
3535
- [API Documentation](#api-documentation)
3636
- [Using TypeScript](#using-rclnodejs-with-typescript)
3737
- [Examples](https://github.com/RobotWebTools/rclnodejs/tree/develop/example)
38+
- [Electron demo](https://github.com/RobotWebTools/rclnodejs/tree/develop/electron_demo)
3839
- [Efficient Usage Tips](./docs/EFFICIENCY.md)
3940
- [FAQ and Known Issues](./docs/FAQ.md)
4041
- [Building from Scratch](./docs/BUILDING.md)

‎electron_demo/README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Rclnodejs Electron demo
2+
3+
## Introduction
4+
5+
This is a minimal rclnodejs demo using Electron. More information about Electron, please check with [Electron documentation](https://electronjs.org/docs/latest/tutorial/quick-start).
6+
7+
The demo includes the following files:
8+
9+
- `package.json` - Points to the app's main file and lists its details and dependencies.
10+
- `main.js` - Introduces the `rclnodejs` native module, starts the app and creates a browser window to render HTML. This is the app's **main process**.
11+
- `index.html` - Includes a text editor where you can input the the topic to be published. This is the app's **renderer process**.
12+
- `renderer.js` - Communicate with main process to publish a topic and get it through a subscription.
13+
14+
## To run the demo
15+
16+
Before starting, please ensure you have installed [nodejs](https://nodejs.org/en).
17+
18+
1. Clone this repository.
19+
20+
```bash
21+
git clone https://github.com/RobotWebTools/rclnodejs.git
22+
```
23+
24+
2. Go into the demo.
25+
```bash
26+
cd rclnodejs/electron_demo
27+
```
28+
29+
3. [SOURCE THE ROS 2 SETUP FILE](https://docs.ros.org/en/jazzy/Tutorials/Beginner-CLI-Tools/Configuring-ROS2-Environment.html#source-the-setup-files)
30+
31+
4. Install dependencies
32+
```bash
33+
npm install
34+
```
35+
36+
5. Rebuild rclnodejs for Electron
37+
```bash
38+
# Every time you run "npm install", run this:
39+
./node_modules/.bin/electron-rebuild
40+
```
41+
42+
6. Run the app
43+
```
44+
npm start
45+
```
46+
47+
If it works, you can see the demo as:
48+
![demo screenshot](./electron-demo.gif)
49+
50+
## Resources for Learning Electron
51+
52+
- [electronjs.org/docs](https://electronjs.org/docs) - all of Electron's documentation.
53+
- [Native Node Modules](https://www.electronjs.org/docs/latest/tutorial/using-native-node-modules) - Use a native node module.
54+

‎electron_demo/electron-demo.gif‎

110 KB
Loading

‎electron_demo/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="Content-Security-Policy"
7+
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
8+
<title>RCLNODEJS Electron Demo</title>
9+
</head>
10+
11+
<body>
12+
<div>
13+
<div style="height: 20px;"></div>
14+
<div>
15+
<input id="topic-input"></input>
16+
<button id="publish-topic">Publish topic</button>
17+
</div>
18+
<div style="height: 20px;"></div>
19+
<span>Received topic:</span>
20+
<span id="received-topic"></span>
21+
</div>
22+
<script src="./renderer.js"></script>
23+
</body>
24+
25+
</html>

‎electron_demo/main.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// Licensed under the Apache License, Version 2.0 (the "License");
2+
// you may not use this file except in compliance with the License.
3+
// You may obtain a copy of the License at
4+
//
5+
// http://www.apache.org/licenses/LICENSE-2.0
6+
//
7+
// Unless required by applicable law or agreed to in writing, software
8+
// distributed under the License is distributed on an "AS IS" BASIS,
9+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
// See the License for the specific language governing permissions and
11+
// limitations under the License.
12+
13+
const { app, BrowserWindow } = require('electron')
14+
let rclnodejs = require("rclnodejs");
15+
const { ipcMain } = require('electron');
16+
17+
function createWindow() {
18+
// Create the browser window.
19+
const mainWindow = new BrowserWindow({
20+
width: 800,
21+
height: 600,
22+
webPreferences: {
23+
// Add the following two lines in order to use require() in renderer, see details
24+
// https://stackoverflow.com/questions/44391448/electron-require-is-not-defined
25+
nodeIntegration: true,
26+
contextIsolation: false,
27+
}
28+
});
29+
30+
mainWindow.loadFile('index.html');
31+
}
32+
33+
// This method will be called when Electron has finished
34+
// initialization and is ready to create browser windows.
35+
// Some APIs can only be used after this event occurs.
36+
app.whenReady().then(() => {
37+
createWindow();
38+
rclnodejs.init().then(() => {
39+
let sender = null;
40+
const node = rclnodejs.createNode('publisher_example_node');
41+
node.createSubscription('std_msgs/msg/String', 'topic', (msg) => {
42+
if (sender) {
43+
sender.send('topic-received', msg.data);
44+
}
45+
});
46+
const publisher = node.createPublisher('std_msgs/msg/String', 'topic');
47+
ipcMain.on('publish-topic', (event, topic) => {
48+
publisher.publish(topic);
49+
sender = event.sender;
50+
});
51+
rclnodejs.spin(node);
52+
});
53+
54+
app.on('activate', function () {
55+
// On macOS it's common to re-create a window in the app when the
56+
// dock icon is clicked and there are no other windows open.
57+
if (BrowserWindow.getAllWindows().length === 0) createWindow();
58+
});
59+
});
60+
61+
// Quit when all windows are closed, except on macOS. There, it's common
62+
// for applications and their menu bar to stay active until the user quits
63+
// explicitly with Cmd + Q.
64+
app.on('window-all-closed', function () {
65+
if (process.platform !== 'darwin') app.quit()
66+
});

‎electron_demo/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "rclnodejs-electron-demo",
3+
"version": "1.0.0",
4+
"description": "A minimal rclnodejs Electron application",
5+
"main": "main.js",
6+
"scripts": {
7+
"start": "electron ."
8+
},
9+
"keywords": [
10+
"Electron",
11+
"rclnodejs",
12+
"demo"
13+
],
14+
"license": "Apache",
15+
"dependencies": {
16+
"rclnodejs": "^0.27.4"
17+
},
18+
"devDependencies": {
19+
"@electron/rebuild": "^3.6.0",
20+
"electron": "^31.0.0"
21+
}
22+
}

‎electron_demo/renderer.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Licensed under the Apache License, Version 2.0 (the "License");
2+
// you may not use this file except in compliance with the License.
3+
// You may obtain a copy of the License at
4+
//
5+
// http://www.apache.org/licenses/LICENSE-2.0
6+
//
7+
// Unless required by applicable law or agreed to in writing, software
8+
// distributed under the License is distributed on an "AS IS" BASIS,
9+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
// See the License for the specific language governing permissions and
11+
// limitations under the License.
12+
13+
const { ipcRenderer } = require('electron');
14+
15+
ipcRenderer.on('topic-received', function (event, response) {
16+
document.getElementById('received-topic').innerText = response;
17+
});
18+
19+
document.getElementById('publish-topic').addEventListener('click', () => {
20+
const topic = document.getElementById('topic-input').value;
21+
ipcRenderer.send('publish-topic', topic);
22+
});

0 commit comments

Comments
 (0)