关于网站建设实验报告,wordpress如何发表新文章,怎样做才能让网站有排名,电商分享推广怎么做随着IIoT的发展#xff0c;很多工业仪器也具备了远程管理的GUI。与早期使用串口进行命令交互不同#xff0c;这些GUI可以直接在远程呈现数据。
作为希望对仪器、软件进行二次开发的小公司来说#xff0c;会遇到GUI人工操作转自动化的需求。在无法通过串口等传统接口进行自动…随着IIoT的发展很多工业仪器也具备了远程管理的GUI。与早期使用串口进行命令交互不同这些GUI可以直接在远程呈现数据。
作为希望对仪器、软件进行二次开发的小公司来说会遇到GUI人工操作转自动化的需求。在无法通过串口等传统接口进行自动操作的情况下就只能考虑GUI自动化。在现场工程师领域常见的GUI自动化程控技术主要分native界面与Web界面两类。
Native窗体如具备X-Window Form界面的仪器Qt等。使用鼠标模拟点击、Hook等技术在仪器的OS内部用自己的APP实现模拟键盘、读取控件并填写数据。Web 自动化交互Web页面仪器。使用自建浏览器打开操作界面使用JS操作页面元素实现交互本文。
当然还有一类非常特殊的极端情况就是对物理开关的继电器操作。使用继电器取代按键并通过解析LED七段编码做到按键与显示的反馈控制。这种情况需要动用烙铁已经不是编程能解决的问题了。
由于现代Web页面可以通过JS操作理论上只要有一个支持JS控制接口的浏览器就能完成GUI自动化操作。不过一般的浏览器二次开发需要配置的依赖还是很多的。Qt WebEngine 是Qt Webkit的继承者。这个模块允许使用非常简单的代码进行GUI程控。
1. 分析页面的构成
使用firefox或者chrome浏览器打开管理页面击打 F12 开启调试页面在查看器中可以找到控件。
要在浏览器内核的JS Runtime里使用这个控件有几种方法。
使用ID直接访问。比如上图的控件有本身的ID叫做 lgPwd因此直接可以使用ID引用 lgPwd
input idlgPwd namepassword typepassword maxlength32 lgPwd.value123456;
123456使用CSS选择器访问 右键单击上图查看器右侧的选中控件部分复制CSS选择器 则可以在JS里用运算 $()访问。 $(#lgPwd)
Object { 0: input#lgPwd, length: 1, context: HTMLDocument http://192.168.1.1/, selector: #lgPwd } $(#lgPwd)[0]
input idlgPwd namepassword typepassword maxlength32 $(#lgPwd)[0].value
123456 使用xPath定位 右键单击上图查看器右侧的选中控件部分复制XPath选择器 而后用 $x拾取语法来枚举控件在返回的数组里获得想要的东西。 $x(//*[idlgPwd])
Array [ input#lgPwd ] $x(//*[idlgPwd])[0]
input idlgPwd namepassword typepassword maxlength32 $x(//*[idlgPwd])[0].value234;
234$x(//*[idlgPwd])[0].value
234 需要控制的控件、读取的控件一旦可以在控制台访问即可转入下面的步骤了。为什么不直接在Chrome中使用JS脚本运行或者在Python里通过remote操作和Chrome console来互动呢显然我们希望自己的程序显得比较完整给用户一个“本地”应用程序的观感。上面的例子使用的是路由器的登入界面实际仪器的登入界面比这个页面要复杂。
2. 配置Qt WebEngine
刚才我们说了希望把仪器的管理页面带到自己的GUI上作为一个子页面运行。这样仪器“看起来”运行在我们的程序中。要完成这样的操作可以使用Qt WebEngine. 可能有读者有疑惑用WebKit可以吗 理论上是可以的。只是WebKit已经从Qt的官方支持里去掉了。经过实验Qt Webkit 对一些新JS特性支持的一般而WebEngine却非常流畅即使是实时的图形刷新也不在话下。
在Windows下使用QWebEngine只能使用 MS Visual C编译器。这是Qt WebEngine的一大遗憾。受制于chromium的编译器兼容性问题 MINGW 是不被支持的。好在无论是VC还是Qt都有开源版本在线安装速度也不差。我们使用Qt的在线安装别忘了勾选“Qt WebEngine”选项默认不装 同时确保安装了对应的 VC2019或其他版本的编译器。
3 程序开发
QWebEngine 与老的Webkit相比操作大部分都是异步的。但它的API设置的比较好用。如果需要迅速实现复杂功能可以直接把例子simple_browser的框架全部集成到自己的程序中再进行一定的裁剪。如果只是要操作固定的页面则可以直接集成。
首先在模块中引入 webenginewidgets
QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgets webenginewidgetsCONFIG c17最为简单的方法是拖入一个QWebEngineView如果没有designer扩展则拖入Widget提升为这个类。 这样我们即可在代码中获得浏览器实例
ui-web-load(QUrl(http://192.168.1.122));当需要填写控件、获取返回值时只需要运行 ui-web-page()-runJavaScript(lgPwd.value\123456\;,[](const QVariant result)-void{qDebug()result;});输出
QVariant(QString, 123456)要非常注意的是引号在Qt里用双引号时需要使用\转义。使用单引号如果解释器可能不认换成双引号试试看。这种情况在用xPath、CSS选择器时尤其注意。 ui-web-page()-runJavaScript($x(\//*[id\lgPwd\]\)[0].value\234\;,[](const QVariant result)-void{qDebug()result;});实际应用中通过获取网页的状况并根据外部环境调整界面控件的取值能够实现完整的反馈控制。一种典型的场景是根据环境检测仪器的输出直接控制车间顶棚伸缩杆的开启与关闭。当然更为复杂的场景需要进行调试。
4. 调试
QWebEngine可以方便的启用进程内调试器
void WidgetWCtrl::on_pushButton_debug_clicked()
{QWebEngineView * v new QWebEngineView(this);ui-web-page()-setDevToolsPage(v-page());v-show();ui-tabWidget-addTab(v,DEV);
}
此时我们自己的程序里立刻也引入了Web开发工具 5. 发布
要发布程序需要把EXE拷贝出来到独立文件夹在cmd命令行下运行windeployqt:
C:\ C:\Qt\6.4.2\msvc2019_64\bin\windeployqt.exe --compiler-runtime C:\projects\WebCtrlBIN\WebCtrl.exe
C:\projects\WebCtrlBIN\WebCtrl.exe 64 bit, release executable
Adding Qt6Svg for qsvgicon.dll
...
C:\此时文件夹里就有了所有运行时需要的文件 要注意的是除了我们自己的EXE还多了一个QtWebEngineProcess.exe这就是QWebEngine的后台进程。
和QtWebKit不同这个框架背后还是需要一个独立的可执行文件的支持。
