index.html Example File | Qt WebKit Examples 5.9

Qt 5.9 | Qt WebKit Examples | The Webkit Bridge Tutorial - Hybrid Client Application | index.html Example File

Qt 5.9.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>