User:Mathijs van Oosterhoudt/counting: Difference between revisions

From XPUB & Lens-Based wiki
(Created page with " <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script> <script type="text/javascript"> /* * How t...")
 
No edit summary
Line 1: Line 1:
<!DOCTYPE HTML>
  <head>
    <title>Canvasplay</title>
     <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
     <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
     <script type="text/javascript">
     <script type="text/javascript">
    /*
 
    *  How to search for images and restrict them by size.
    *  This demo will also show how to use Raw Searchers, aka a searcher that is
    *  not attached to a SearchControl.  Thus, we will handle and draw the results
    *  manually.
    */
   
     google.load('search', '1');
     google.load('search', '1');
      
      
Line 17: Line 14:
c = document.getElementById("canvas")
c = document.getElementById("canvas")
//console.log("c is",c)
p = c.getContext("2d")
p = c.getContext("2d")
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
Line 27: Line 23:
// Math.floor((Math.random()*100)+1);
      // Check that we got results
       if (searcher.results && searcher.results.length > 0) {
       if (searcher.results && searcher.results.length > 0) {
        // Grab our content div, clear it.   
        // Loop through our results, printing them to the page.
         var results = searcher.results;
         var results = searcher.results;
         for (var i = 0; i < results.length; i++) {
         for (var i = 0; i < results.length; i++) {
          // For each result write it's title and image to the screen
           var result = results[i];
           var result = results[i];
           base_image = new Image();
           base_image = new Image();
Line 51: Line 41:


c = document.getElementById("canvas2")
c = document.getElementById("canvas2")
//console.log("c is",c)
p = c.getContext("2d")
p = c.getContext("2d")
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
Line 60: Line 49:
// Math.floor((Math.random()*100)+1);
      // Check that we got results
       if (searcher.results && searcher.results.length > 0) {
       if (searcher.results && searcher.results.length > 0) {
        // Grab our content div, clear it.   
        // Loop through our results, printing them to the page.
         var results = searcher.results;
         var results = searcher.results;
         for (var i = 0; i < results.length; i++) {
         for (var i = 0; i < results.length; i++) {
          // For each result write it's title and image to the screen
           var result = results[i];
           var result = results[i];
           base_image = new Image();
           base_image = new Image();
Line 84: Line 68:


c = document.getElementById("canvas3")
c = document.getElementById("canvas3")
//console.log("c is",c)
p = c.getContext("2d")
p = c.getContext("2d")
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
Line 92: Line 75:
p.globalAlpha = 0.8;
p.globalAlpha = 0.8;
// Math.floor((Math.random()*100)+1);
      // Check that we got results
       if (searcher.results && searcher.results.length > 0) {
       if (searcher.results && searcher.results.length > 0) {
        // Grab our content div, clear it.   
        // Loop through our results, printing them to the page.
         var results = searcher.results;
         var results = searcher.results;
         for (var i = 0; i < results.length; i++) {
         for (var i = 0; i < results.length; i++) {
          // For each result write it's title and image to the screen
           var result = results[i];
           var result = results[i];
           base_image = new Image();
           base_image = new Image();
Line 117: Line 93:


      // Our ImageSearch instance.
       var imageSearch = new google.search.ImageSearch();
       var imageSearch = new google.search.ImageSearch();
       var imageSearch2 = new google.search.ImageSearch();
       var imageSearch2 = new google.search.ImageSearch();
Line 128: Line 103:




      // Restrict to extra large images only
       imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
       imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
       imageSearch2.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
       imageSearch2.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
       imageSearch3.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
       imageSearch3.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);


      // Here we set a callback so that anytime a search is executed, it will call
      // the searchComplete function and pass it our ImageSearch searcher.
      // When a search completes, our ImageSearch object is automatically
      // populated with the results.
       imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
       imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
       imageSearch2.setSearchCompleteCallback(this, searchComplete2, [imageSearch2]);
       imageSearch2.setSearchCompleteCallback(this, searchComplete2, [imageSearch2]);
Line 142: Line 112:




      // Find me a beautiful car.
        
        
        
        
Line 158: Line 127:
     google.setOnLoadCallback(OnLoad);
     google.setOnLoadCallback(OnLoad);
     </script>
     </script>
 
  </head>
    
    
   <div style="width:100%;">
   <div style="width:100%;">
Line 167: Line 136:
    </div>
    </div>
</div>
</div>
  </body>
</html>

Revision as of 23:34, 30 September 2012

<!DOCTYPE HTML> 

 <head>
   <title>Canvasplay</title>
   <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
   <script type="text/javascript">

   google.load('search', '1');
   



   function searchComplete(searcher) {


c = document.getElementById("canvas") p = c.getContext("2d") var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight]; c.width = ((dimension[1]-100)/4)*5; c.height = (dimension[1]-100)/3;

p.globalAlpha = 0.8; 


     if (searcher.results && searcher.results.length > 0) {
       var results = searcher.results;
       for (var i = 0; i < results.length; i++) {
         var result = results[i];
         base_image = new Image();
 		base_image.src = result.unescapedUrl;
 		p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1), 0);



       }
     }
   }
   
   
   
       function searchComplete2(searcher) {

c = document.getElementById("canvas2") p = c.getContext("2d") var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight]; c.width = ((dimension[1]-100)/4)*5; c.height = (dimension[1]-100)/3;

p.globalAlpha = 0.8; 


     if (searcher.results && searcher.results.length > 0) {
       var results = searcher.results;
       for (var i = 0; i < results.length; i++) {
         var result = results[i];
         base_image = new Image();
 		base_image.src = result.unescapedUrl;
 		p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1),(Math.random()*10)+1);



       }
     }
   }
   
   
   
           function searchComplete3(searcher) {

c = document.getElementById("canvas3") p = c.getContext("2d") var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight]; c.width = ((dimension[1]-100)/4)*5; c.height = (dimension[1]-100)/3;

p.globalAlpha = 0.8; 

     if (searcher.results && searcher.results.length > 0) {
       var results = searcher.results;
       for (var i = 0; i < results.length; i++) {
         var result = results[i];
         base_image = new Image();
 		base_image.src = result.unescapedUrl;
 		p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1),(Math.random()*10)+1);



       }
     }
   }
   
   
   
   function OnLoad() {



     var imageSearch = new google.search.ImageSearch();
     var imageSearch2 = new google.search.ImageSearch();
     var imageSearch3 = new google.search.ImageSearch();


imageSearch.setResultSetSize(8); imageSearch2.setResultSetSize(8); imageSearch3.setResultSetSize(8); 


     imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
     imageSearch2.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
     imageSearch3.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);

     imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
     imageSearch2.setSearchCompleteCallback(this, searchComplete2, [imageSearch2]);
     imageSearch3.setSearchCompleteCallback(this, searchComplete3, [imageSearch3]);




     imageSearch2.execute("blue sky");
     

     imageSearch3.execute("the matterhorn");



     imageSearch.execute("old person raising hand");



   }
   google.setOnLoadCallback(OnLoad);
   </script>
 </head>
 

 		<canvas id="canvas2" style="margin = 0px; padding = 0px;"></canvas>
 		<canvas id="canvas3" style="margin = 0px; padding = 0px;"></canvas>

<canvas id="canvas" style="margin = 0px; padding = 0px;"></canvas> 

 </body>

</html>

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Mathijs_van_Oosterhoudt/counting&oldid=34747"