how to get links of API images of wikipedia in processing ?

edited January 2018 in Library Questions

Hello,

I have a question about the code "M_6_4_01_TOOL" in generative design, which allows to visualize dynamic data interactively. Do you know how to visualize wikipedia API images in the same way as keywords?

Thank you for your help !

Capture d’écran 2018-01-14 à 13.30.42

Answers

  • edited January 2018 Answer ✓

    This is a not-complete demo accessing the Wikipedia API.

    Kf

    //Processing Forum on 14-Jan-2018
    //SUMMARY: Demo retrieving and displaying images from a Wikipedia site
    //By Kf
    
    //REFERENCES: https:// www.mediawiki.org/wiki/API:Images  
    //REFERENCES: https:// forum.processing.org/two/discussion/25957/how-to-get-links-of-api-images-of-wikipedia-in-processing#latest
    //REFERENCES:
    
    //INSTRUCTIONS:
    //         *-- Base on the follwing url: https:// en.wikipedia.org/wiki/Albert_Einstein
    //         *-- This program reads all the images in the requested link and not more
    //         *-- set by the limit MAX_IMGS.
    //         *-- Click on any image to zoom in. Second click to go back to tiles.
    
    //===========================================================================
    // IMPORTS:
    import http.requests.*;
    import java.net.URLEncoder;
    import java.io.UnsupportedEncodingException;
    
    //===========================================================================
    // FINAL FIELDS:
    final String HTTPS="https://";
    final String WIKI_PAGE="Albert Einstein";  //"Art";
    final String WIKIPEDIA_IMAGES_QUERY_LIST=HTTPS+"en.wikipedia.org/w/api.php?action=query&prop=images&format=json&formatversion=2&titles=";
    final String WIKIPEDIA_IMAGE_QUERY_URL=HTTPS+"en.wikipedia.org/w/api.php?action=query&prop=imageinfo&iiprop=url&format=json&formatversion=2&titles=Image:";
    
    final int MAX_IMGS=10;
    
    //===========================================================================
    // GLOBAL VARIABLES:
    StringList imgsURL;
    int nImages;
    ArrayList<PImage> imgsBin;
    
    boolean picked=false;
    int cIdx=-1;
    
    
    //===========================================================================
    // PROCESSING DEFAULT FUNCTIONS:
    
    void settings() {
      size(400, 600);
    }
    
    void setup() { 
    
      noLoop();
      textAlign(CENTER, CENTER);
      rectMode(CENTER);
      imageMode(CENTER);
    
      fill(255);
      strokeWeight(2);
    
      imgsURL=new StringList();
      imgsBin=new ArrayList<PImage>();
    
      background(90);  
      textSize(32);
      text("Loading data....\n Wait", width/2, height/2);  
    
      registerMethod("pre", this);
    }
    
    void pre() {
      unregisterMethod("pre", this);
      textSize(10);
    
      GetRequest get;
      JSONObject values;
      get = new GetRequest(WIKIPEDIA_IMAGES_QUERY_LIST+htmlCustomFormatter(WIKI_PAGE));
      get.send();
    
      values=parseJSONObject(get.getContent());
      JSONArray imgs=values.getJSONObject("query").getJSONArray("pages").getJSONObject(0).getJSONArray("images");
    
      if (imgs!=null) {
        int n=values.getJSONObject("query").getJSONArray("pages").getJSONObject(0).getJSONArray("images").size();
    
    
    
        for (int i=0; i<n && i<MAX_IMGS; i++) {
          String imageFileName=imgs.getJSONObject(i).getString("title");
          imageFileName=getFileName(imageFileName);           //Remove "File:"
          imageFileName=htmlCustomFormatter(imageFileName);   //Remove white spaces from URL
          println("Image "+i+"=> "+imgs.getJSONObject(i).getString("title"));
    
          String urlStr=null;
          PImage loadedImg=null;
          if (imageFileName.endsWith("jpg") || imageFileName.endsWith("png") || imageFileName.endsWith("tif")) {
            get = new GetRequest(WIKIPEDIA_IMAGE_QUERY_URL+imageFileName);
            get.send();
    
            JSONObject res=parseJSONObject(get.getContent());
            urlStr=res.getJSONObject("query").getJSONArray("pages").getJSONObject(0).getJSONArray("imageinfo").getJSONObject(0).getString("url");
            loadedImg=loadImage(urlStr);
          }
          imgsURL.append(urlStr);
          imgsBin.add(loadedImg);
          println("........... ", urlStr);
        }
      } else {
        println("Retrieving images from query failed!");
      }
    }
    
    void draw() {
      background(200, 20, 220);  
      showAllImages();
    
      if (picked==true  ) {
        if (cIdx>=0) {
          background(200, 20, 220); 
          showImage(cIdx, width/2, height/2, width, height);
        } else
          picked=false;  //It gets reset by mouse clicked unless if no image was clicked
      }
    
      if (nImages==0) {
        textSize(32);
        text("Loading Resources\nFailure", width/2, height/2);
      }
    }
    
    void keyReleased() {
      exit();
    }
    
    void mouseReleased() {
      picked=!picked;
      redraw();
    }
    
    //===========================================================================
    // OTHER FUNCTIONS:
    
    void showAllImages() {
    
      nImages=imgsURL.size();
      if (nImages>0) {
        int ncol=2;
        int nrow=nImages%ncol==0?nImages/ncol:nImages/ncol+1;
    
        float dw=width/(ncol+2);
        float dh=height/(nrow*2);
    
        float posx=dw;
        float posy=dh;
        int ctr=0;
    
        cIdx=-1;
        noFill();
        stroke(255, 20, 20);
        strokeWeight(3);
        for (int x=0; x<ncol; x++) {
    
          for (int y=0; y<nrow && ctr<MAX_IMGS; y++) {
    
            rect(posx, posy, dw, dh);
            if (picked==true && isOverImage(posx, posy, dw, dh))
              cIdx=ctr;
            showImage(ctr++, posx, posy, dw, dh);
    
            posy+=2*dh;
          }
          posx+=2*dw;
          posy=dh;
        }
      }
    }
    
    boolean isOverImage(float px, float py, float dw, float dh) {
      return mouseX>(px-dw/2) && mouseX<(px+dw/2) && mouseY>(py-dh/2) && mouseY<(py+dh/2);
    }
    
    void showImage(int ii, float px, float py, float dw, float dh) {
      String fn=imgsURL.get(ii);
      if (fn!=null) {
        image(imgsBin.get(ii), px, py, dw, dh);
      } else {
        text("Not valid format", px, py, dw, dh);
      }
    }
    
    
    String getFileName(String in) {
      boolean goodValue=in.startsWith("File:");
      String ret=null;
    
      if (goodValue) ret=in.substring(in.indexOf(":")+1);
    
      println("Requisting image: "+ret);
      return  ret;
    }
    
    //REFERENCE: https:// stackoverflow.com/questions/30998288/php-how-to-replace-special-characters-for-url
    String htmlCustomFormatter(String in) {
      boolean goodValue=in!=null;
      String ret=null;
    
      //  $specChars = array(
      //    '!' => '%21',    '"' => '%22',
      //    '#' => '%23',    '$' => '%24',    '%' => '%25',
      //    '&' => '%26',    '\'' => '%27',   '(' => '%28',
      //    ')' => '%29',    '*' => '%2A',    '+' => '%2B',
      //    ',' => '%2C',    '-' => '%2D',    '.' => '%2E',
      //    '/' => '%2F',    ':' => '%3A',    ';' => '%3B',
      //    '<' => '%3C',    '=' => '%3D',    '>' => '%3E',
      //    '?' => '%3F',    '@' => '%40',    '[' => '%5B',
      //    '\\' => '%5C',   ']' => '%5D',    '^' => '%5E',
      //    '_' => '%5F',    '`' => '%60',    '{' => '%7B',
      //    '|' => '%7C',    '}' => '%7D',    '~' => '%7E',
      //    ',' => '%E2%80%9A',  ' ' => '%20'
      //);
    
    
    
      if (goodValue) { 
    
        //ret=in.replaceAll(" ", "%20");  
    
        try {
          ret=URLEncoder.encode(in, "UTF-8");  //Also PApplet.encoder()
        }
        catch(UnsupportedEncodingException e) {
          e.printStackTrace();
        }
      }
    
      //println("Requisting image(formatted): "+ret);
      return  ret;
    }
    
  • Thank you kfrajer, this really help me!

  • Hey!

    I have another question regarding this code, Is it possible to use images and links from another html page (not wikipage)?

    Thank you again for your help.

  • Answer ✓

    loadImage() can load images from valid url links. This is described in the reference. I was able to get the url links of the images as this is provided by the wikipedia API. If you have access to those links from this other website's API, then yes. If this other website does not provide you with this info, you can access the image manually. You can check you have a valid image link easily: Just copy and paste it in any browser.

    Kf

  • ok thank you I will check that :)

Sign In or Register to comment.