为 ROS 设计一个前端应用程序原型
如果你想尝试调整ROS中的参数，我想有很多人使用rqt来改变它们，或者首先创建专门使用QT来操作的应用程序。 （我以前也用 QT 制作应用程序。）但是，我在尝试制作像最近网站上看到的那些很酷的表情时遇到了很多麻烦，而且我不得不担心如果 GUI 太僵硬，那就不会了很受欢迎。我想很多人都有。
近期，酷站和前端应用陆续发布，但很多都是基于 Web 的应用，比如 React。基于 Web 的前端非常先进，我的印象是，最近正在开发越来越多的可以原生运行的应用程序。也许支持Android和iPhone等跨平台很容易。所以，这一次，我们将使用 React 创建一个基于 Web 的应用程序，并与 ROS 通信以创建一个很酷的 Web 应用程序。
原型制作软件
在原生应用程序的开发环境中，过去有一个环境是在 MFC 或 XCode + Objective-C 等环境中设计 GUI。当我查看网络世界时，我发现大部分都是设计师设计的，而且似乎使用 Figma 和 Adobe XD 作为设计工具。这次是在实际工作的前提下研究的结果，想扩展功能，最重要的一点是可以输出React代码，我把候选范围缩小到以下两个。
- 建造者X
- 反应工作室
但是，由于 BuilderX 是基于 Web 的，它的功能似乎很难扩展，所以这次我想使用 React Studio 创建一个 Web 应用程序。
React Studio 基础知识
首先，让我写一些非常重要的东西。
此软件仅适用于 Mac！
如果您只有 Windows 或 Ubuntu PC，请转身。
价格是免费的！
伟大的！对于那些往往无法通过付费使用它的机器人开发人员来说，这是一个不错的地方。
看起来是个不错的工具，但是好像没有更新，不知怎么的信息太少了！
只有幸存下来，机器人开发者才会被召唤。
尽管如此，如果你没有任何信息，你将不知道你能做什么，但在以下 YouTube 和 Medium 网站上有各种文章，所以请参考它们。
无论如何安装它
它适用于 Mac，因此您不必写很多东西。只需从主页下载并解压缩即可。更重要的是，这个工具里面包含了node.js，所以基本上你不需要额外安装任何东西。这很容易。
所以它会开始
让我们创建一个移动应用程序。
单击创建新项目。
在上栏部分甚至还有一个出口和移动显示器，所以你可以期待！
暂时尝试设计GUI
我认为有很多机器人开发人员没有任何意义（只是一种偏见），但现在我将制作一个 GUI。
首先，双击屏幕上的开始块。
Windows 出来就像要求我放置一个按钮一样。现在，让我们一个一个放置一个文本框和一个按钮。
接下来，我们将在单击按钮时分配一个动作。
从 Interact 项中单击 Tap，然后为单击操作选择脚本。
单击编辑脚本以编写单击按钮时发生的情况。
启用 ROS
关于如何创建 GUI，请参考 YouTube 上的教程，所以我想继续使用 ROS。
然而，问题是如何在 Web 应用程序中使用 ROS，但我们将使用一个名为 roslibjs 的库，它允许 JavaScript 处理 ROS 函数。但是，由于这个 roslibjs 不能直接与 rosmaster 通信，所以需要在 ROS 的 Ubuntu 上使用 rosbridge_websocket，所以在宿主 Ubuntu 机器上安装以下软件包。
sudo apt install ros-noetic-rosbridge-server
接下来，让我们在 React Studio 上使用 roslibjs。我之前写过 Node.js 包含在 React Studio 中，但是您可以通过自由创建和添加插件来引入 npm 包。在这里，我们将创建一个插件来使用 roslibjs。
在菜单栏中选择从插件创建新插件。
选择 ROS 作为名称，选择 Wrapping NPM Package 作为类型。
在下一个屏幕上，指定要使用 npm 安装的包。如果你用 npm 安装，它叫做 roslib，最新版本是 1.3.0，所以输入。
如果你把Preview image和Icon设置为你的ROS图标就很容易理解了，但是由于某种原因你不能拖放，所以你以后必须手动重写PNG文件（请自己动手）。
其次，不能照原样使用 roslib 作为插件。所以我会重写它，以便它可以使用。首先，使用 Plugins 中的 Edit Plugin 编辑 ROS 插件。
我们将在插件编辑器中编辑 Main.js。
首先defaultNameForNewInstance的表示法是ROS，很不酷，所以我们把它改成ROS。 （伊朗
接下来，在第 104 行更改以下部分。这是因为 roslib 不需要添加到 JSX 代码中，所以它是一个被删除的进程。
this.getReactWebJSXCode = function(exporter) {
//return `<Roslib />`;
return ``;
}
现在您可以将 roslib 与 React Studio 一起使用！
将 ROSLIB 与 React Studio 一起使用。
如果插件创建成功，ROS 将出现在组件列表中。
通过拖放来放置它。这个组件实际上是不可见的，所以放在哪里都没有关系。首先，让我们检查一下这是否正常工作。
接下来保存项目，查看该状态是否有错误，点击右上角的Open in Web Browser，查看本次创建的UI是否无错误。
如果 Window 没有出现这样的错误就可以了。
创建 ROS Publisher
接下来，我们将创建一个 ROS Publisher。我们将为上一个按钮提供一个发布功能，但首先我们将编写代码以连接到该项目中的 ROS 服务器端。
首先，单击上面的脚本编辑器以打开编辑器屏幕。
在开始模板部分的末尾添加以下行。
var ROSLIB = require('roslib');
var ros = new ROSLIB.Ros({
url : 'ws://10.211.55.15:9090'
});
ros.on('connection', function() {
alert("Connected");
console.log("Connected.");
});
ros.on('error', function(error) {
alert("ERROR");
});
ros.on('close', function() {
alert("CLOSED Connection");
});
这是连接到 ROS Bridge 的代码。通过将其设置为alert，您可以在弹出窗口中显示连接操作是否成功。
现在，在服务器 PC 上启动 ROS Bridge。
roslaunch rosbridge_server rosbridge_websocket.launch
准备工作现已完成。此外，单击右上角的在 Web 浏览器中打开以检查操作。
如果可以正确连接，应该会显示为“已连接”，如下图。
现在您可以正确地与 rosbridge_server 通信了。接下来，让我们尝试通过按下之前放置的 PUBLISH 按钮来发送主题。
首先，我这样做是为了在 PUBLISH 按钮的交互部分点击按钮时执行脚本，但我将从那里的编辑脚本编辑脚本。
如下图，编写点击按钮时发布的代码。
var publisher = new ROSLIB.Topic({
ros : ros,
name : '/webapp/topic',
messageType : 'std_msgs/String'
});
var msg = new ROSLIB.Message({
data : 'Hello ROS!'
});
publisher.publish(msg);
完成此操作后，单击在 Web 浏览器中打开以检查它是否有效。
在 Ubuntu 方面
rostopic echo /webapp/topic
当您在网络浏览器中单击按钮时，您可以看到主题已输出。
现在，当您单击按钮时，主题将出现！如果你应用这个，我认为你可以通过这个 Web 应用程序输出各种主题。
创建 ROS 订阅者
接下来，我们将订阅并显示其他 ROS 节点输出的主题。
首先，我们将在 JavaScript 代码中使 Screen 可访问，以便我们可以更新此 Screen 项目的内容。目前我正在写一个可以用于原型的方法，但是我是一个 React 初学者，所以我不确定这是否好。这可能不是最好的方法，但我想在这里尝试一下。
首先，在 Script Editor 中，在调用 componentDidMount 时添加以下行，以便您可以从 JavaScript 端访问 Text 等。
componentDidMount() {
{{CLASS_NAME}}.instance = this;
{{COMPONENT_DID_MOUNT_CODE}}
}
接下来，在脚本的底部，编写订阅 ROS 主题的代码。
首先，检查放置Text的Localize.Key。这里是 start_text_860211，所以我想通过使用订阅字符串覆盖该值来显示它。
在StartScreen的Methods下添加UpdateText函数，更新显示订阅数据。
{{METHODS}}
updateText(msg) {
this.context.locStrings.start_text_860211 = msg;
this.setState({});
}
并将以下代码添加到最后一行以订阅和更新显示。
const subscriber = new ROSLIB.Topic({
ros : ros,
name : '/server/topic',
messageType : 'std_msgs/String'
});
subscriber.subscribe(msg => {
var receive_string = msg.data;
StartScreen.instance.updateText(receive_string);
});
完成此操作后，保存并单击在 Web 浏览器中打开以运行它。
然后在 Ubuntu 端运行以下命令发布主题。
rostopic pub /server/topic std_msgs/String "data: 'aaa'" -r 1
然后，订阅的消息显示在 TextBox 中，如下所示。
概括
所以，这一次，我使用了 React Studio，一个用于创建 WebApps 的原型工具，来创建一个很酷的可以与 ROS 通信的 WebApp。正如你们中的一些人可能已经注意到的，您可以在最后一个屏幕截图中看到 JoyStick，但是您可以使用这样的包来与 React 一起使用来创建更酷的 WebApp。请大家试一试！ （仅适用于 Mac 用户）
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308622607.html