mercredi 20 novembre 2019

Qt5-QML: How to handle a combobox in QML via JavaScript and close the application after triggering it

I am accessing to my own robots via wi-fi using a third party router. I wrote a small application that automatically log-in to the router, navigate through the tab of the router interface all using JavaScript inside a QML application. The small problem I have is that I have to trigger a relays to turn on/off the robot and inside the router GUI I need to trigger a combobox as shown in the print screen below. After clicking on the I/O tab, the address of the router page is https://123.456.789.123:7878/admin/ACEmanagerX.html#:

realys

The corresponding html is also shown below:

html

The problem is that I can't find an easy ways to trigger the relays either on or off.

The expected behavior would be: if it is OFF (value 0) put it ON (value 1 which is Drive Active Low) and vice versa and after that the application should close.

The updated code I am using is the following main.qml (I only left the most important parts):

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtWebEngine 1.9
ApplicationWindow{
    id: root
    width: 1940
    height: 1100
    visible: true
    property string username: "username"
    property string password: "password"
    property string tabs: "#"
    property string cBox: "#"
    QtObject{
        id: internals
        // input of the user and password
        property string login_script: "script_here".arg(username).arg(password);

        // triggers of the tab widget to arrive at the combobox
        property string get_tabs: "script_here".arg(tabs)

        // Below property triggers the combo box of the relays evaluating the normally closed (NC) or
        // normally opened (NO) circuit
        property string get_normallyClosed_or_normallyOpened_comboBox: "
            var get_NO_NC_ComboBox = document.getElementById('859-2-2');
            get_NO_NC_ComboBox.addEventListener('click', function (e) {
                get_NO_NC_ComboBox.options[1].selected = true;
                if ('createEvent' in document) {
                    var evt = document.createEvent('HTMLEvents');
                    evt.initEvent('change', false, true);
                    sel.dispatchEvent(evt);
                }
                else {
                    sel.fireEvent('onchange');
                }
            });
            sel.addEventListener('change', function (e) {
            alert('changed');
            });
        ".arg(cBox)
    }
    Timer { id: timer // and other controls }
    Timer { id: timer2 // and other controls }
    Timer {
        id: timer3
        interval: 20000; repeat: false
        onTriggered: view.runJavaScript(internals.get_normallyClosed_or_normallyOpened_comboBox)
   }
    WebEngineView {
        id: view
        anchors.fill: parent
        onUrlChanged: {
            console.log(url)
            if(url === Qt.resolvedUrl("https://123.456.789.123:7878/")){
                timer.running = true
            } else if (url === Qt.resolvedUrl("https://123.456.789.123:7878/admin/ACEmanagerX.html")) {
                timer2.running = true
            } else if (url === Qt.resolvedUrl("https://123.456.789.123:7878/admin/ACEmanagerX.html#")) {
                timer3.running = true
            }
        }
        onCertificateError: function(error) {
            error.ignoreCertificateError();
        }
        Component.onCompleted: view.url = "https://123.456.789.123:7878"
    }
}

main.cpp

#include <QQmlEngine>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    engine.rootContext()->setContextProperty("view", url);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);
    return app.exec();
}

What I tried so far

1) After going through this post I found out that it is very important to give time to the http request to start. That is why I added interval: 20000 after entering in the I/O tab. However, that was not useful and the combobox wasn't triggered.

2) I used this source to help me figure out how to trigger the combobox via JavaScript and that is exactly what I applied but I didn't see any value changed in the combobox.

3) I found this post which is very close to what I am doing, with the difference that here it was also used a Button to trigger the combobox. But in my case I have no button.

4) the only source I found for closing the application automatically is this one which I followed but it will not close after the relays was triggered. I added all necessary includes to the main and used setContextProperty as also advised in the official documentation

I know I am close to have it working but there is something I am missing. Thank you for shedding light on this matter for solving the problem

Aucun commentaire:

Enregistrer un commentaire