Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <link rel="stylesheet" href="file:///android_asset/bootstrap.min.css">

        <!-- that's a special resource with JS-library for WebChannel -->
        <script type="text/javascript" src="file:///android_asset/qwebchannel.js"></script>

        <script type="text/javascript">

            // here will be our QtObject from QML side
            var backend;

            window.onload = function()
            {
                new QWebChannel(qt.webChannelTransport, function(channel) {
                    // all published objects are available in channel.objects under
                    // the identifier set in their attached WebChannel.id property
                    backend = channel.objects.backend;

                    // connect to a signal
                    backend.someSignal.connect(function(someText) {
                        alert("Got signal: " + someText);
                        document.getElementById("lbl").innerHTML = someText;
                    });
                });
            }

            // just to demonstrate you async interaction
            var result = "ololo";
            function changeLabel()
            {
                var textInputValue = document.getElementById("input").value.trim();
                if (textInputValue.length === 0)
                {
                    alert("You haven't entered anything!");
                    return;
                }

                // invoke a method, and receive the return value asynchronously
                backend.changeText(textInputValue, function(callback) {
                    //processThisShit(callback);
                    result = callback;
                    // since it's async, this alert will appear later and show the actual result
                    alert(result);
                    // reset variable back to default value
                    result = "ololo";
                });
                // this alert will appear first and show default "ololo"
                alert(result);
            }

            //function processThisShit(shit) {
            //    //alert("Shit has been processed. " + shit);
            //    result = shit;
            //    alert(result);
            //}

            // you can also read/write properties of QtObject from QML side
            function getPropertyValue()
            {
                var originalValue = backend.someProperty;

                alert(backend.someProperty);
                backend.someProperty = "some another value";
                alert(backend.someProperty);

                backend.someProperty = originalValue;
            }

        </script>

        <style>
            div.centered {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
            #lbl {
                color: blue;
                cursor: pointer;
            }
        </style>

    </head>
    <body>

        <div class="container centered">
            <div class="input-group mb-3">
                <input id="input" type="text" class="form-control"/>
                <div class="input-group-append">
                    <button type="button" class="btn btn-lg btn-primary" onclick="changeLabel();">
                        send
                    </button>
                </div>
            </div>
            <div style="text-align:center;">
                A text label (click on it):
                    <span id="lbl" onclick="getPropertyValue();">some value</span>
            </div>
        </div>

    </body>
</html>