index.html Example File | Qt WebKit Examples 5.4

- Qt 5.4
- Qt WebKit Examples
- The Webkit Bridge Tutorial - Hybrid Client Application
- index.html Example File
- Qt 5.4.2 Reference Documentation

# index.html Example File

webkitwidgets/imageanalyzer/resources/index.html

    <html>
        <body>
            <div style="float:right; width:50%; border-left: solid 1px black">
                <div id="listdiv" align="center">
                    <h5>Images to be analyzed:</h5>
                    <select multiple size=10 id=imglist style="width:80%"></select>
                    <br />
                    <input type="button" id="evalbutton" value="Analyze" onclick="analyzeImages()" />
                </div>
            </div>
            <div style="width:50%">
                <div id="titleblock" align="center">
                    <h2>Image Analyzer</h2>
                </div>
                <div id=outputdiv align=center>
                    <h4>Status: <span id=status>Idle</span></h4>
                    <h5>
                        Latest Results:<br />
                        Red: <span id=redval style="color:red">n/a</span><br />
                        Green: <span id=greenval style="color:green">n/a</span><br />
                        Blue: <span id=blueval style="color:blue">n/a</span><br />
                    </h5>
                    <h3>Click on images below to select for analysis</h3>
                </div>
            </div>
            <div id=imagediv style="clear:both; text-align:center">
            <hr/>
                <img src="images/mtRainier.jpg" height=150px onclick='return addImage(this);' />
                <img src="images/bellaCoola.jpg" height=150px onclick='return addImage(this);'/>
                <img src="images/seaShell.jpg" height=150px onclick='return addImage(this);'/>
                <img src="images/flower.jpg" height=150px onclick='return addImage(this);'/>
                <img src="images/trees.jpg" height=150px onclick='return addImage(this);'/>
            </div>

        </body>
    </html>

    <script type="text/javascript">
        var remaining = 0;
        var connected = false;
        //We use this function because connect statements resolve their target once, imediately
        //not at signal emission so they must be connected once the imageAnalyzer object has been added to the frame
        //! <!--  [ connect slots ] -->
        function connectSlots()
        {
            if ( !connected ) {
                connected = true;
                imageAnalyzer.finishedAnalysis.connect(this, finished);
                imageAnalyzer.updateProgress.connect(this, updateProg);
            }
        }
        //! <!--  [ connect slots ] -->

        function finished() {
            setStatus('Idle');
            setResults(imageAnalyzer.red.toFixed(2), imageAnalyzer.green.toFixed(2), imageAnalyzer.blue.toFixed(2));
        }
        //This will function as the recieving "slot" for the progress signal
        function updateProg(complete, max)
        {
            var oldRemaining = remaining;
            remaining = max - complete;
            pullList(oldRemaining - remaining);
            //Prevent results getting messed up if we don't get signals in order
            if( imageAnalyzer.busy ) {
                setStatus('Processing (' + complete + ' of ' + max + ' completed)');
                setResults('Calculating','Calculating','Calculating');
            }
        }

    //! <!--  [ analyzeImages ] -->
    function analyzeImages() {
        connectSlots();
        var imglist = document.getElementsByTagName('option');
        if (imglist.length > 0) {
            stringlist = [];
            for(var i=0; i<imglist.length; i++) {
                stringlist[i]=imglist[i].value;
            }
            if (!imageAnalyzer.busy) {
                remaining = stringlist.length;
                imageAnalyzer.startAnalysis(stringlist);
            } else {
                alert("Processing, please wait until finished.");
            }
    //! <!--  [ analyzeImages ] -->
        } else {
            alert('No images selected. Click on one or more images to select them for analysis.');
        }
    }
    function clearList() {
        var imglist = document.getElementById('imglist');
        while(imglist.length > 0) {
            imglist.removeChild(imglist.childNodes[0]);
        }
    }
    function pullList(count) {
        var imglist = document.getElementById('imglist');
        while(imglist.length > 0 && count > 0) {
            imglist.removeChild(imglist.childNodes[0]);
            count--;
        }
    }
    function setStatus(statusString) {
        document.getElementById('status').innerHTML = statusString;
    }

    function setResults(red, green, blue) {
        if (! isNaN(red) ) { red += " %"; }
        if (! isNaN(green) ) { green += " %"; }
        if (! isNaN(blue) ) { blue += " %"; }
        document.getElementById('redval').innerHTML = red;
        document.getElementById('greenval').innerHTML = green;
        document.getElementById('blueval').innerHTML = blue;
    }
    //! <!--  [ addImage ] -->
    function addImage(newimg) {
        var imglist = document.getElementById('imglist');
        var curChildren = imglist.childNodes;
        var newline = document.createElement('option');
        newline.innerHTML = newimg.src.substring(newimg.src.lastIndexOf('/')+1);
        newline.value = newimg.src;
        imglist.appendChild(newline);
    }
    //! <!--  [ addImage ] -->
    </script>