Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

WebView not working in Release mode!



  • I have a page in an application, with a WebView component. WebView.url is an .html file. There is a Signature pad and the user draws his signature.

    It worked well untill the last update of Qt. Since the update, this is not working anymore in RELEASE mode. (in DEBUG mode it works well).

    0_1531811910493_draw.png


  • Lifetime Qt Champion

    Hi,

    What version of Qt is it exactly ?
    On what OS ?
    Do you get any warning ?
    Can you share a minimal sample code that reproduces this ?



  • Hi SGaist,

    I use Qt 5.11.1 on mac os.
    I don't get any warning related to my issue.
    (In the meanwhile, i developed another solution for signature functionality, with Canvas and MouseArea.)
    In the following, i will present the problem:

    I have, somewhere in code, a WebView like:

    WebView {
                    id: webView
                    Component.onCompleted: {
                        webView.onLoadingChanged.connect(loadingChanged);
                        webView.url = "qrc:/Html/Canvas/" + "Canvas.html";
                    }
    
                    function loadingChanged(loadRequest){
                        if (loadRequest.status == WebView.LoadSucceededStatus){
                            console.log("Page loaded!");
                        }
                    }
                }
    

    File Canvas.html contains:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Signature Pad demo</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <link rel="stylesheet" href="signature_pad.css">
    </head>
    <body scroll="no">
      <div id="signature-pad" class="m-signature-pad">
          <canvas></canvas>
      </div>
      <script src="signature_pad.js"></script>
      <script src="app.js"></script>
    </body>
    </html>
    

    signature_pad.css file is:

    html, body, canvas {
        width: 100% !important;
        height: 100% !important;
    }
    .m-signature-pad {
            height: 100%;
    }
    

    signature_pad.js file is contains a lot of functions (i will put here a part of it):

    (function (global, factory) {
        (typeof exports === 'object' && typeof module !== 'undefined') ? module.exports = factory() :
        ((typeof define === 'function' && define.amd) ? define(factory) :
        (global.SignaturePad = factory()));
    }(this, (function () {
        'use strict';
    ...
    function SignaturePad (canvas, options) {
            var self = this;
            var opts = options || {};
    ...
            this._canvas = canvas;
            this._ctx = canvas.getContext('2d');
            this.clear();
            this._handleMouseDown = function (event) {
                console.log("_handleMouseDown");
                event.preventDefault();
                if (event.which === 1) {
                    self._mouseButtonDown = true;
                    self._strokeBegin(event);
                }
                return false;
            };
    
            this._handleMouseMove = function (event) {
                event.preventDefault();
                if (self._mouseButtonDown) {
                    self._strokeUpdate(event);
                }
                return false;
            };
    
            this._handleMouseUp = function (event) {
                event.preventDefault();
                if (event.which === 1 && self._mouseButtonDown) {
                    self._mouseButtonDown = false;
                    self._strokeEnd(event);
                }
                return false;
            };
    
            this._handleTouchStart = function (event) {
                event.preventDefault();
                if (event.targetTouches.length === 1) {
                    var touch = event.changedTouches[0];
                    self._strokeBegin(touch);
                }
                return false;
            };
    
            this._handleTouchMove = function (event) {
                // Prevent scrolling.
                event.preventDefault();
    
                var touch = event.targetTouches[0];
                self._strokeUpdate(touch);
                return false;
            };
    
            this._handleTouchEnd = function (event) {
                var wasCanvasTouched = event.target === self._canvas;
                if (wasCanvasTouched) {
                    event.preventDefault();
                    self._strokeEnd(event);
                }
                return false;
            };
            // Enable mouse and touch event handlers
            this.on();
        }
    ...// + methods description
    

    app.js is like:

    var wrapper = document.getElementById("signature-pad"),
        canvas = wrapper.querySelector("canvas"),
        el = canvas,
        signaturePad;
    function resizeCanvas() {
        var ratio =  Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }
    window.onresize = resizeCanvas;
    	resizeCanvas();
    signaturePad = new SignaturePad(canvas);
    function save(){
    	return signaturePad.toDataURL();
    }
    function clear(){
    	signaturePad.clear();
    }
    

    All these worked fine before i updated my Qt.



  • I made a test in RELEASE mode setting SignaturePad's background color to "red" and that didn't work. (in debug mode it worked).
    That was like " signaturePad = new SignaturePad(canvas); " from app.js didn't work.


  • Lifetime Qt Champion

    Would it be possible to share the complete project through e.g. Gitlab, Bitbucket or another way ?


Log in to reply