Skip to main content

安装界面配置

在Dobot+资源中，每个模块都是通过json格式的文件来配置页面参数及显示。本章节将介绍如何配置安装页面的相关内容，你将会了解到

  • 如何配置config.json
  • 如何创建和开发相关页面
  • 如何调试页面

配置config.json​

找到 configs/Main.json，参考以下示例来配置你的安装界面 json内容

{
  "name": "EXTIO",
  "version": 1,
  "description": "扩展IO插件"
}

说明

字段类型默认值必填说明
namestring无是安装界面插件名称
versionnumber/string无是插件版本号，可用作区分不同版本
descriptionstring无是安装界面插件的相关介绍
hotkeyboolean无否需要配置末端按键操作时设为true
applicationDisplayedapplicationType无否需要将插件显示在应用首页时配置

applicationType

字段类型默认值必填说明
applicationTitlestring无是插件显示在应用首页的入口名称
applicationImagestring无是插件显示在应用首页的图片

Dobot+界面展示效果如下所示：

在 Main.json 配置应用界面显示后，效果如下所示：

插件支持末端按键的配置，可以快捷执行固定的指令 参阅快捷键配置以学习如何配置末端按键的快捷操作

多语言​

找到 Resources/i18n，可以按照对应语言包配置多语言翻译 以中英文翻译为例

  • 在 Resources/i18n/zh.json 中config字段下添加

    {
      "config": {
        "tr_description": "扩展IO插件"
      }
    }

  • 在 Resources/i18n/en.json 中config字段下添加

    {
      "config": {
        "tr_description": "Extended IO plugin"
      }
    }

  • 在 configs/Main.json 中使用

    {
      "name": "EXTIO",
      "version": 1,
      "description": "%tr_description"
    }

按照上面的方法，就可以根据DobotStudio Pro软件界面的语言展示对应的翻译语言

注意

如果使用多语言，必须至少配置简体中文和English两种语言下的翻译，默认显示英文翻译

操作页面开发​

操作页面在ui/pages/Main目录下进行开发，页面开发使用React框架开发 项目已经配置Antd环境，可以直接使用 Antd 的布局和UI组件来完成页面开发 ui/pages/Main/index.tsx 就是插件控制页面的入口，可以在里面引入所需要的工具类

// 引入React环境，支持React组件开发
import React from 'react'
import ReactDOM from 'react-dom'

// (可选)引入store状态管理工具
import { Provider } from 'react-redux'
import store from '../../store'

// (可选)引入自定义UI组件
import App from './app'

// (可选)引入自定义样式文件
import './index.scss'

// (可选)引入大小屏适配工具
import '../../utils/rem'

// 渲染组件到页面
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

我们可以在ui/pages/Main/app.tsx中开发自定义界面，也可以新建tsx组件

// 引入React环境，每个组件都需要注入环境
import React from "react";

// 定义函数式组件
function App() {
  return (
    <div className="app">
      Hello World
    </div>
  );
}

// 导出自定义组件
export default App;
)

注意 界面开发需要掌握React框架，可以参阅官方文档了解更多。

在线调试操作页面​

项目已经配置调试环境，在终端运行以下指令可以在浏览器环境下调试 会本地编译控制页面并且启动默认浏览器访问 http://localhost:8080/Main

dpt dev