Merge pull request #423 from emqx/dev/1.4.2

README-JP.md

@@ -41,7 +41,7 @@
 
 ## 利用方法
 
-詳細な利用方法については、[ブログ](https://www.emqx.io/blog/mqtt-x-guideline)または[ユーザーマニュアル](./docs/manual.md)を確認してください。
+詳細な利用方法については、[ブログ](https://qiita.com/emqx_japan/items/1ff6097fdfe273c5e22f)または[ユーザーマニュアル](./docs/manual-jp.md)を確認してください。
 
 1. MQTT Brokerの準備。
 

docs/manual-cn.md

@@ -179,6 +179,24 @@ sudo snap install mqttx
 
 ![mqttx-advance](../assets/mqttx-advance.png)
 
+### 脚本
+
+在 v1.4.2 版本以后，MQTT X 新增了脚本编辑功能，在该功能中，用户可编写自定义脚本（JavaScript）对发送和接收到的 `Payload` 进行自定义转化，配合定时发送功能，可实现一些模拟数据上报的自动化测试功能。
+
+> 注意：该功能目前属于测试 Beta 阶段。
+
+点击左侧菜单栏中的 `脚本` 按钮，可进入到脚本编辑页面，在该页面中，用户可在最上方的代码编辑器中，编写 JavaScript 代码，全局只包含一个 `execute` API，用户需要编写一个脚本函数，该函数接收一个 `value` 参数，即为 `Payload`, 函数中便可对 `value` 进行自定义修改转化，最后将该函数作为参数传入到 `execute` 中即可执行自定义编写的函数。
+
+下方还包含了一个 `输入` 和 `输出` 框，可输入预想输入值，点击右边的 `测试` 按钮，便可在 `输出` 框中查看执行结果，输入的值的格式包含了 `JSON` 和 `Plaintext`，方便用户提前调试自定义编写的脚本功能。完成测试后，可点击最右上角的 `保存` 按钮，输入该脚本的名称后就可对该脚本进行保存。保存完成后就可以到连接页面进行使用了。保存完成的脚本还可进行编辑和删除。
+
+在连接页面中，点击右上角的下拉功能菜单，选择 `使用脚本`，在弹出窗中，选择你需要使用的预先保存好的脚本，然后选择应用类型，包含了，发送时，接收时和全部。选择完成后，根据数据类型选择发送或接收的数据格式，正常使用消息的收发，此时如果看到预期效果，便完成了一个完整的脚本使用的功能。如果用户需要取消脚本，可点击顶部状态栏中的红色的 `停止脚本` 按钮，便可停止使用脚本。
+
+该功能具有一定的扩展性和灵活性，需用户配合实际需求来进行使用。
+
+![mqttx-script](../assets/mqttx-script.png)
+
+脚本使用实例可在 [/docs/script-example](https://github.com/emqx/MQTTX/tree/master/docs/script-example) 文件夹中查看，目前提供了两个内置脚本，时间戳转化和温湿度数据模拟。如果在您的使用中有更好的，更实用的脚本也可以提交您的代码到这里，方便让更多的人使用到。
+
 ### 其它
 
 1. 连接操作
@@ -263,4 +281,8 @@ Linux: `vue-cli-service electron:build --linux`
 |  方式   | 内容  |
 |  ----  | ----  |
 | QQ 群（EMQ X 官方群3）| 937041105 |
-| EMQ X 官方公众号 | <img src="../assets/wx_qr_code.png" width="160" alt="MQTTX Logo"/> |
+| EMQ X 官方公众号 | <img src="../assets/wx_qr_code.png" width="160" alt="WeChat QR code"/> |
+| EMQ X 微信群（扫码添加后邀请入群）| <img src="../assets/emqx_wx.jpeg" width="160" alt="EMQ X Wechat"/> |
+| 微博 | [@emqtt](https://weibo.com/emqtt) |
+| Twitter | [@emqtt](https://twitter.com/emqtt/) |
+| Slack | [EMQ X](https://slack-invite.emqx.io/) |

docs/manual.md

@@ -179,6 +179,24 @@ In the settings page, you can choose to click the data backup and data recovery
 
 ![mqttx-advance](../assets/mqttx-advance.png)
 
+### Script
+
+After the v1.4.2 version, MQTT X has added a script editing function. In this function, users can write custom scripts (JavaScript) to perform custom conversions on sent and received `Payload`. With the timing sending function, realize the automated test function for the simulation data report.
+
+> Note: This feature is test feature in the beta stage
+
+Click the `script` button in the menu bar on the left to enter the script editing page. In this page, users can write JavaScript code in the code editor at the top. There is only one `execute` API globally, and the user needs write a script function that receives a `value` parameter, which is `Payload`, and the function can be customized to modify the `value`, and finally the function can be executed by passing it as a parameter to the `execute` custom-written functions.
+
+There is also an `input` and `output` box below. You can enter the expected input value. Click the `test` button on the right to view the execution result in the `output` box. The format of the input value includes `JSON` With `Plaintext`, it is convenient for users to debug custom-written script functions in advance. After completing the test, you can click the `Save` button in the upper right corner and enter the name of the script to save the script. After saving, you can go to the connection page for use. The saved script can also be edited and deleted.
+
+In the connection page, click the drop-down menu in the upper right corner, select `Use script`, in the pop-up window, select the pre-saved script you need to use, and then select the script to be applied, including: Published, Received, and All. After the selection is completed, select the data format to be sent or received according to the data type, and use the message sending and receiving normally. At this time, if the expected effect is seen, a script function is completed. If the user needs to cancel the script, you can click the red `Stop script` button in the top status bar to stop using the script.
+
+This function is scalable and flexible, and requires users to cooperate with actual needs to use it.
+
+![mqttx-script](../assets/mqttx-script.png)
+
+The script usage examples can be viewed in the [/docs/script-example](https://github.com/emqx/MQTTX/tree/master/docs/script-example) folder. Currently, two built-in scripts are provided, timestamp conversion and temperature and humidity data simulation. If you have a better and more practical script in your use, you can submit your code here, so that more people can use it.
+
 ### Others
 
 1. Connection operation

docs/script-example/tempAndHum.js

@@ -0,0 +1,21 @@
+/**
+ * Simulated temperature and humidity reporting
+ * @return Return a simulated temperature and humidity JSON data - { "temperature": 23, "humidity": 40 }
+ * @param value, MQTT Payload - {}
+ */
+
+function random(min, max) {
+  return Math.round(Math.random() * (max - min)) + min
+}
+
+function handlePayload(value) {
+  let _value = value
+  if (typeof value === 'string') {
+    _value = JSON.parse(value)
+  }
+  _value.temperature = random(10, 30)
+  _value.humidity = random(20, 40)
+  return JSON.stringify(_value, null, 2)
+}
+
+execute(handlePayload)

docs/script-example/timestamp.js

@@ -0,0 +1,18 @@
+/**
+ * Convert timestamp to normal time.
+ * @return Return the UTC time - { "time": "2020-12-17 14:18:07" }
+ * @param value, MQTT Payload - { "time": 1608185887 }
+ */
+
+function handleTimestamp(value) {
+  let _value = value
+  if (typeof value === 'string') {
+    _value = JSON.parse(value)
+  }
+  // East Eight District needs an additional 8 hours
+  const date = new Date(_value.time * 1000 + 8 * 3600 * 1000)
+  _value.time = date.toJSON().substr(0, 19).replace('T', ' ')
+  return JSON.stringify(_value, null, 2)
+}
+
+execute(handleTimestamp)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTTX",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "MQTT desktop client",
   "author": "EMQ X Team",
   "scripts": {
@@ -39,11 +39,10 @@
     "vuex": "^3.0.1",
     "vuex-class": "^0.3.2",
     "xlsx": "^0.16.8",
-    "xml-js": "^1.6.11"
+    "xml-js": "^1.6.11",
+    "vm2": "latest"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^2.1.0",
-    "@fullhuman/vue-cli-plugin-purgecss": "~2.2.0",
     "@types/chai": "^4.1.0",
     "@types/chart.js": "^2.9.28",
     "@types/fs-extra": "^8.0.0",
@@ -76,11 +75,6 @@
     "vue-cli-plugin-electron-builder": "^1.4.6",
     "vue-template-compiler": "^2.6.12"
   },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions"

postcss.config.js

@@ -1,15 +1,5 @@
-const IN_PRODUCTION = process.env.NODE_ENV === 'production'
-
 module.exports = {
-  plugins: [
-    IN_PRODUCTION && require('@fullhuman/postcss-purgecss')({
-      content: [`./public/**/*.html`, `./src/**/*.vue`, `./src/**/*.scss`],
-      defaultExtractor (content) {
-        const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
-        return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
-      },
-      whitelist: [],
-      whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
-    })
-  ],
+  plugins: {
+    autoprefixer: {},
+  },
 }

src/api/script.ts

@@ -0,0 +1,22 @@
+import db from '@/database/index'
+import { ScriptModel } from '@/views/script/types'
+
+export const createScript = (data: ScriptModel): ScriptModel => {
+  return db.insert<ScriptModel>('scripts', data)
+}
+
+export const loadScripts = (): ScriptModel[] | [] => {
+  return db.get<ScriptModel[] | []>('scripts')
+}
+
+export const deleteScript = (id: string): ScriptModel => {
+  return db.remove<ScriptModel>('scripts', id)
+}
+
+export const updateScript = (id: string, data: ScriptModel): ScriptModel => {
+  return db.update<ScriptModel>('scripts', id, data)
+}
+
+export const loadScript = (id: string): ScriptModel => {
+  return db.find<ScriptModel>('scripts', id)
+}