1# HCS可视化工具开发调试说明 2## 简介 3 4HCS可视化工具支持HCS文件预览与编辑，具有可视化配置与HCS文件内容双向绑定、同步更新展示的优点。 5工具代码文件说明如下： 6 7 ├── hcs-view 8 ├── ...... # 图片文件 9 ├── hcsVSCode # VSCode工程代码，用于hcs文件与hcsWebView之间传递数据 10 ├── hcsWebView # hcs可视化处理WebView源码，用于界面的绘制呈现等处理 11 │ ├── src # hcs源码 12 │ └── test # 工具单元测试用例 13 ├── ...... # 其他文件 14 └── README_zh.md # 工具使用说明文档 15 16 17## 工具介绍 18 19通过HCS可视化工具，使用者能够以可视化的方式对新增或已有的hcs文件，进行预览、编辑等操作，不需要在配置文件中进行节点属性预览、编辑。 20 21## hcsWebView调试说明 22 23### 说明 24 25visual studio code 版本需1.62.0及以上。 26 27### 调试说明 28 29#### 安装依赖 30 311.右键windows开始菜单，单击运行，输入cmd，单击确定。 32 33 34 352.在命令行中进入到hcsWebView目录下，安装依赖库，命令如下： 36 37 npm i 38 39#### 运行脚本 40 411.修改启动方式，将hcsWebView目录下build.py文件内容修改为以下代码，其他代码注释掉。 42 43 import os 44 os.system("npx webpack --mode=development") 45 462.命令行进入hcsWebView目录下，运行build.py文件更新本地代码，运行成功后命令行中显示“successfully”，表示代码更新成功，如下图所示： 47 48 49 50#### 启动服务 51 52命令行进入hcsWebView目录下，启动8080端口服务，命令如下： 53 54 D:\HCS_tool\drivers_framework\drivers_framework\tools\hcs-view\hcsWebView>python -m http.server 8080 55 Serving HTTP on :: port 8080 (http://[::]:8080/) ... 56 57#### 运行工程 58 59VS Code中，点击文件->打开文件夹，找到hcsWebView工程所在路径，打开工具代码。按下键盘F5，选择Chrome，生成launch.json文件。 60 61 62 63#### html可视化编辑 64 65再次按下键盘F5，即可打开mock调试网页，如下图所示： 66 67 68 69## hcsWebView & hcsVSCode联调说明 70 71### 说明 72visual studio code 版本需1.62.0及以上。 73 74### 调试说明 75 76#### 安装依赖 77 781.右键windows开始菜单，单击运行，输入cmd，单击确定。 79 80 81 822.在命令行中进入到hcsVSCode目录下，安装依赖库，命令如下： 83 84 npm i 85 863.在命令行中进入到hcsWebView目录下，安装依赖库，命令如下： 87 88 npm i 89 90#### 运行脚本 91 92首次使用工具或本地代码有更新时，需运行hcsWebView目录下build.py文件更新本地代码，运行成功后命令行中显示“replaced”，表示代码更新成功，如下图所示： 93 94 95 96#### 运行工程 97 98VS Code中，点击文件->打开文件夹，找到hcsVSCode工程所在路径，打开工具代码。然后左侧导航栏选中extension.js文件，按下键盘F5键，选择“VS Code Extension Development”环境运行工程，即可打开编辑hcs文件新窗口，如下图所示： 99 100 101 102 103 104#### VSCode可视化编辑 105 106VSCode新窗口弹出后，选中将要编辑的hcs文件，右键点击“hcsView”，可打开HCS文件对应的可视化配置窗口，便可进行预览或编辑节点等操作。 107 108 109 110 111 112注意：若新窗口打开文件列表为空，可在VS Code中左上角点击文件->打开文件夹，选择正确的hcs文件。 113 114## 注意 115 116暂无 117
