How do I get a snippet of text scraped from http request to go into a rolling banner?

edited January 2018 in Library Questions

Hello.

I have 2 sketches, the first of which grabs some text from a website. At present I just have a printIn command to check that it's grabbing the right bit (which it is). I want to take the text that this sketch grabs and get it to go into a rolling headline.

I have a second sketch taken from a rolling headline tutorial, and am trying to work out how to get the text from the printIn command to go into the rolling headline text (and from there for it to check and replace every once in a while if the text from the website changes).

Can someone point me in the right direction as to how to do this? Thanks

LP.

The http request code is pasted first:

import http.requests.*;

public void setup() 
{
    size(400,400);
    smooth();

    GetRequest get = new GetRequest("https://www.mi5.gov.uk/UKThreatLevel/UKThreatLevel.xml");
    get.send();
    //println("Reponse Content: " + get.getContent());
    //println("Reponse Content-Length Header: " + get.getHeader("Content-Length"));

  ///return the contents of the HTTP request
  String content = get.getContent();

  //turn itinto HTML
  XML rss = parseXML(content);

  ///get the main chunk of xml inside the parent rss
  XML channel = rss.getChild("channel");
   //inside this is a child element called 'title'
  XML item = channel.getChild("item/title");
  //you need what's inside this element i.e. ignore the tags, get the stuff inside
  String itemContent =  item.getContent();


  //how do I get the text printed out into the second sketch?
  println("", itemContent);
}

This is the rolling headline sketch code:

int blinkTime;
boolean blinkOn;

PImage bgImg;  // Declare variable  PImage bgImg related to the field
PGraphics img;

//For now some news headlines, it's here where I want to place the text retrieved from the first sketch
String[] headlines = {
  "fact plus importance equals news", 
  "speed plus repetition equals fear",
  "percentage minus context equals terror",
"it's here where I want to place the text retrieved from the first sketch",

};

PFont f; // Global font variable
float x; // Horizontal location
int index = 0;
PFont l; // STEP 1 Declare PFont variable

void setup() {
  size(600, 399); // make the size same as photo
  bgImg = loadImage("fieldnpole.jpg"); // load the image inside setup  
     f = createFont( "HelveticaNeue-Bold", 20);

  // Initialize headline offscreen
  x = width;
}
{
   blinkTime = millis();
  blinkOn = true;
}

void draw() {
  background(bgImg); 
  fill(#FF0303);
  noStroke();

   if (blinkOn)
  ellipse(550,30,20,20);
  fill(#FF0303);
  noStroke();
   if (millis() - 500 > blinkTime) {
    blinkTime = millis();
    blinkOn = !blinkOn;
  }
 fill(255,0,0.50);
  rect(0,340,600,80);
  // Display headline at x location
  textFont(f, 20);
  textAlign (LEFT);
   fill(255);


  // A specific String from the array is displayed according to the value of the "index" variable.
  text(headlines[index], x, height-20); 

  // Decrement x
  x = x - 3;

  // If x is less than the negative width, then it is off the screen
  // textWidth() is used to calculate the width of the current String.
  float w = textWidth(headlines[index]); 
  if (x < -w) {
    x = width;
    // index is incremented when the current String has left the screen in order to display a new String.
    index = (index + 1) % headlines.length;
  }

  {
     l = createFont("HelveticaNeue-Bold",10,true); // STEP 2 Create Font
  textFont(l,10);                  // STEP 3 Specify font to be used
  fill(0);                         // STEP 4 Specify font color 
  text("LIVE",510,35);   // STEP 5 Display Text

}

}
Tagged:

Answers

  • make a third sketch as a copy of the first, then incorporate the 2nd in it

    avoid duplicate functions like setup

    itemContent in the first sketch is headlines in the 2nd

  • Thanks Chrisr. I am getting an ItemContent does not exist message but am unsure what I'm doing (I as going to add wrong but I think I'll leave it there). Code at present with error is...

    int blinkTime;
    boolean blinkOn;
    
    PImage bgImg;  // Declare variable  PImage bgImg related to the field
    PGraphics img;
    
    // An array of news headlines
    String[] headlines = itemContent
    
    };
    
    PFont f; // Global font variable
    float x; // Horizontal location
    int index = 0;
    PFont l; // STEP 1 Declare PFont variable
    
    void setup() {
      size(600, 399); // make the size same as photo
      bgImg = loadImage("fieldnpole.jpg"); // load the image inside setup  
         f = createFont( "HelveticaNeue-Bold", 20);
    
      // Initialize headline offscreen
      x = width;
    }
    {
       blinkTime = millis();
      blinkOn = true;
    }
    
    void draw() {
      background(bgImg); 
      fill(#FF0303);
      noStroke();
    
       if (blinkOn)
      ellipse(550,30,20,20);
      fill(#FF0303);
      noStroke();
       if (millis() - 500 > blinkTime) {
        blinkTime = millis();
        blinkOn = !blinkOn;
      }
     fill(255,0,0.50);
      rect(0,340,600,80);
      // Display headline at x location
      textFont(f, 20);
      textAlign (LEFT);
       fill(255);
    
    
      // A specific String from the array is displayed according to the value of the "index" variable.
      text(headlines[index], x, height-20); 
    
      // Decrement x
      x = x - 3;
    
      // If x is less than the negative width, then it is off the screen
      // textWidth() is used to calculate the width of the current String.
      float w = textWidth(headlines[index]); 
      if (x < -w) {
        x = width;
        // index is incremented when the current String has left the screen in order to display a new String.
        index = (index + 1) % headlines.length;
      }
    
      {
         l = createFont("HelveticaNeue-Bold",10,true); // STEP 2 Create Font
      textFont(l,10);                  // STEP 3 Specify font to be used
      fill(0);                         // STEP 4 Specify font color 
      text("LIVE",510,35);   // STEP 5 Display Text
    
    }
    
    }
    
    
    import http.requests.*;
    
    {
    
    
      GetRequest get = new GetRequest("https://www.mi5.gov.uk/UKThreatLevel/UKThreatLevel.xml");
      get.send();
      //println("Reponse Content: " + get.getContent());
      //println("Reponse Content-Length Header: " + get.getHeader("Content-Length"));
    
      ///return the contents of the HTTP request
      String content = get.getContent();
    
      //turn itinto HTML
      XML rss = parseXML(content);
    
      ///get the main chunk of xml inside the parent rss
      XML channel = rss.getChild("channel");
       //inside this is a child element called 'title'
      XML item = channel.getChild("item/title");
      //you need what's inside this element i.e. ignore the tags, get the stuff inside
      String itemContent =  item.getContent();
    
    
      //how do I get the text printewd out into the second sketch?
      println("", itemContent);
    }
    
  • edited January 2018 Answer ✓

    try to join both setup() functions

    at the end of setup() the itemContent is handled

    // An array of news headlines
    String[] headlines;
    
    
    
    public void setup() 
    {
        size(400,400);
    
    
    // 1. --------------------
    
      bgImg = loadImage("fieldnpole.jpg"); // load the image inside setup  
      f = createFont( "HelveticaNeue-Bold", 20);
    
      // Initialize headline offscreen
      x = width;
    
    
       // 2. --------------------
    
        smooth(); 
        GetRequest get = new GetRequest("<a href="https://www.mi5.gov.uk/UKThreatLevel/UKThreatLevel.xml" target="_blank" rel="nofollow">https://www.mi5.gov.uk/UKThreatLevel/UKThreatLevel.xml</a>;");
        get.send();
        //println("Reponse Content: " + get.getContent());
        //println("Reponse Content-Length Header: " + get.getHeader("Content-Length"));
    
      ///return the contents of the HTTP request
      String content = get.getContent();
    
      //turn itinto HTML
      XML rss = parseXML(content);
    
      ///get the main chunk of xml inside the parent rss
      XML channel = rss.getChild("channel");
       //inside this is a child element called 'title'
      XML item = channel.getChild("item/title");
      //you need what's inside this element i.e. ignore the tags, get the stuff inside
      String itemContent =  item.getContent();
    
    
      //how do I get the text printed out into the second sketch?
      println("", itemContent);
    
      headlines = new String[1];
    
      headlines[0] = itemContent;
    }
    
  • Not tested ;-)

  • Many thanks for that.

  • Answer ✓

    And you need the draw from the 2nd sketch

  • I eventually realised that I'd need that. Seems to all work fine. Now I have some more

    int blinkTime;
    boolean blinkOn;
    
    PImage bgImg;  // Declare variable  PImage bgImg related to the field
    PGraphics img;
    
    // An array of news headlines
    String[] headlines;
    
    
    PFont f; // Global font variable
    float x; // Horizontal location
    int index = 0;
    PFont l; // STEP 1 Declare PFont variable
    
    void setup() {
      size(600, 399); // make the size same as photo
    
      bgImg = loadImage("fieldnpole.jpg"); // load the image inside setup  
         f = createFont( "HelveticaNeue-Bold", 20);
    
      // Initialize headline offscreen
      x = width;
    }
    {
       blinkTime = millis();
      blinkOn = true;
    }
    
    void draw() {
      background(bgImg); 
      fill(#FF0303);
      noStroke();
    
       if (blinkOn)
      ellipse(550,30,20,20);
      fill(#FF0303);
      noStroke();
       if (millis() - 500 > blinkTime) {
        blinkTime = millis();
        blinkOn = !blinkOn;
      }
     fill(255,0,0.50);
      rect(0,340,600,80);
      // Display headline at x location
      textFont(f, 20);
      textAlign (LEFT);
       fill(255);
    
    
      // A specific String from the array is displayed according to the value of the "index" variable.
      text(headlines[index], x, height-20); 
    
      // Decrement x
      x = x - 3;
    
      // If x is less than the negative width, then it is off the screen
      // textWidth() is used to calculate the width of the current String.
      float w = textWidth(headlines[index]); 
      if (x < -w) {
        x = width;
        // index is incremented when the current String has left the screen in order to display a new String.
        index = (index + 1) % headlines.length;
      }
    
      {
         l = createFont("HelveticaNeue-Bold",10,true); // STEP 2 Create Font
      textFont(l,10);                  // STEP 3 Specify font to be used
      fill(0);                         // STEP 4 Specify font color 
      text("LIVE",510,35);   // STEP 5 Display Text
    
    }
    
    }
    
    
    import http.requests.*;
    
    {
    
    
      GetRequest get = new GetRequest("https://www.mi5.gov.uk/UKThreatLevel/UKThreatLevel.xml");
      get.send();
      //println("Reponse Content: " + get.getContent());
      //println("Reponse Content-Length Header: " + get.getHeader("Content-Length"));
    
      ///return the contents of the HTTP request
      String content = get.getContent();
    
      //turn itinto HTML
      XML rss = parseXML(content);
    
      ///get the main chunk of xml inside the parent rss
      XML channel = rss.getChild("channel");
       //inside this is a child element called 'title'
      XML item = channel.getChild("item/title");
      //you need what's inside this element i.e. ignore the tags, get the stuff inside
      String itemContent =  item.getContent();
    
      headlines = new String[1];
    
      headlines[0] = itemContent;
    
      //how do I get the text printwd out into the second sketch?
      println("", itemContent);
    
    }
    
    void drawFlag(PGraphics pg) {
      pg.beginDraw();
      pg.noStroke();
      pg.smooth();
      color blueColor = color(0, 36, 125);
      color whiteColor = color(255, 255, 255);
      color redColor = color(207, 20, 43); 
      float fatRedCrossWidth= pg.height/5.0;
      float thinRedCrossWidth = pg.height/15.0;
      float whiteDiagonalCrossWidth = pg.height/4.0;
      float fatWhiteCrossWidth = pg.height/3.0;
    
      pg.fill(blueColor);
      pg.rect(0, 0, pg.width, pg.height);
    
      pg.stroke(whiteColor);
      pg.strokeCap(PROJECT);
      pg.noFill();
      pg.strokeWeight(whiteDiagonalCrossWidth);
      pg.line(0, 0, pg.width, pg.height);
      pg.line(0, pg.height, pg.width, 0);
    
      float yRatio = 1/sin(radians(90)-atan2(pg.height, pg.width));
    
      float offsetY = thinRedCrossWidth*yRatio/2;
      pg.stroke(redColor);
      pg.strokeWeight(thinRedCrossWidth);
      pg.line(0, 0+offsetY, pg.width/2, pg.height/2+offsetY);                 // top left stripe
      pg.line(pg.width, 0-offsetY, pg.width/2, pg.height/2-offsetY);          // top right stripe
      pg.line(pg.width, pg.height-offsetY, pg.width/2, pg.height/2-offsetY);  // bot right stripe
      pg.line(0, pg.height+offsetY, pg.width/2, pg.height/2+offsetY);         // bot left stripe
      pg.noStroke();
      pg.fill(whiteColor);
      pg.rect(0, pg.height/2-fatWhiteCrossWidth/2, pg.width, fatWhiteCrossWidth);
      pg.rect(pg.width/2-fatWhiteCrossWidth/2, 0, fatWhiteCrossWidth, pg.height);
      pg.fill(redColor);
      pg.rect(0, pg.height/2-fatRedCrossWidth/2, pg.width, fatRedCrossWidth);
      pg.rect(pg.width/2-fatRedCrossWidth/2, 0, fatRedCrossWidth, pg.height);
    
      pg.endDraw();
    
    }
    
    
    
    
    
     /* You want your y values to flap fully (times 1)
     at the far end of the flag. You want them to flap not at all (times 0) at the near end.
     And everything in between.
    So, in your for loop, multiply your y values by x/pg.width.
    The scalar will range from 0-1 -- no flapping at x=0;
    full flapping at x=pg.width.
    */
    void ripple(PGraphics pg) {
    float y;
    for (int x = 0; x < pg.width; x++) {
    y = 20*sin(radians(x+millis()));
    y = y * x/pg.width;
    image(pg.get(x, 0, 5, pg.height), x, y*4/3);
    
    
    
    
     }
    }
    
  • You can usw. ctrl–t to have auto–Indents

    Look at the curly brackets {}

    Some seem amiss

  • In pasting to the forum or in my scrawly initial code? (or both) !

    Can you (or anyone else for that matter) help me get my head around what I need to look at to do the next bit of what I'm attempting? - I'm not sure whether forum-wise it would be better to ask a new question.

    I now have the 1) a rolling headline sketch that serves up a status alert from the spooks. 2) I have a second sketch that is an oscillating flag that presently slides up and down a flagpole image with y-mouse constraints.

    I want to get the flag to be in 1 of 5 possible positions that are dependant on the text that's encountered when making the http request. (So I need to correlate specific positions for the flag with 5 possible words served up).

    What concepts do I need to get my head around? I've re posted the (hopefully tidier) code from the http sketch as well as the wavy flag code as a seperate sketch. (When I've tried to combine them I get a mixing active and static modes warning so far and haven't been able to work out why either). Thanks

    LP

    1st sketch...

    //blinking graphic
    int blinkTime;
    boolean blinkOn;
    
    PImage bgImg;  //Declare variable  PImage bgImg related to the field
    PGraphics img;
    
    // An array of news headlines
    String[] headlines;
    
    
    PFont f; // Global font variable
    float x; // Horizontal location
    int index = 0;
    PFont l; // STEP 1 Declare PFont variable
    
    //Void setup bit
    void setup() {
      size(600, 399); // make the size same as photo
    
      bgImg = loadImage("fieldnpole.jpg"); // load the image inside setup  
         f = createFont( "HelveticaNeue-Bold", 20);
    
    // Initialize headline offscreen
      x = width;
    }
    {
       blinkTime = millis();
      blinkOn = true;
    }
    
    //void draw bit
    void draw() {
      background(bgImg); 
      fill(#FF0303);
      noStroke();
    
    
       if (blinkOn)
      ellipse(550,30,20,20);
      fill(#FF0303);
      noStroke();
       if (millis() - 500 > blinkTime) {
        blinkTime = millis();
        blinkOn = !blinkOn;
      }
     fill(255,0,0.50);
      rect(0,340,600,80);
      // Display headline at x location
      textFont(f, 20);
      textAlign (LEFT);
       fill(255);
    
    
      // A specific String from the array is displayed according to the value of the "index" variable.
      text(headlines[index], x, height-20); 
    
      // Decrement x
      x = x - 3;
    
      // If x is less than the negative width, then it is off the screen
      // textWidth() is used to calculate the width of the current String.
      float w = textWidth(headlines[index]); 
      if (x < -w) {
        x = width;
        // index is incremented when the current String has left the screen in order to display a new String.
        index = (index + 1) % headlines.length;
      }
        {
           l = createFont("HelveticaNeue-Bold",10,true); // STEP 2 Create Font
        textFont(l,10);                  // STEP 3 Specify font to be used
        fill(0);                         // STEP 4 Specify font color 
        text("LIVE",510,35);   // STEP 5 Display Text
    
        }  
      }
    
    // get stuff from spooks site
    
    import http.requests.*;
    
    {
      GetRequest get = new GetRequest("https://www.mi5.gov.uk/UKThreatLevel/UKThreatLevel.xml");
      get.send();
      //println("Reponse Content: " + get.getContent());
      //println("Reponse Content-Length Header: " + get.getHeader("Content-Length"));
    
      ///return the contents of the HTTP request
      String content = get.getContent();
    
      //turn itinto HTML
      XML rss = parseXML(content);
    
      ///get the main chunk of xml inside the parent rss
      XML channel = rss.getChild("channel");
       //inside this is a child element called 'title'
      XML item = channel.getChild("item/title");
      //you need what's inside this element i.e. ignore the tags, get the stuff inside
      String itemContent =  item.getContent();
    
    //that new bit from Chris
      headlines = new String[1];
    
      headlines[0] = itemContent;
      // printing to check it works (old)
      println("", itemContent);
    
    }
    

    2nd sketch...

    PImage bgImg;  // Declare variable  PImage bgImg related to the field
    PGraphics img;
    
    void setup() {
      size(600, 399); // make the size same as photo
      bgImg = loadImage("fieldnpole.jpg"); // load the image inside setup
    
      background(bgImg); // tells prog to load the image as a background image
      img = createGraphics(200, 100); //size of unionjack to display
      drawFlag(img);
    
    }
    
    void draw() {
      background(bgImg); 
    
     pushMatrix();
     translate(125, constrain(mouseY, 50, height - 150));    ripple(img);
     popMatrix();
    
    }
    
    void drawFlag2(PGraphics pg) {
      pg.beginDraw();
      pg.noStroke();
      pg.smooth();
     color whiteColor = color(255, 255, 255);
    
      pg.fill(whiteColor);
      pg.rect(0, 0, pg.width, pg.height); 
      pg.stroke(whiteColor);
      pg.strokeCap(PROJECT);
      pg.noFill();
      pg.noStroke();
      pg.fill(whiteColor);
      pg.endDraw();
    
    }
    
    void drawFlag(PGraphics pg) {
      pg.beginDraw();
      pg.noStroke();
      pg.smooth();
      color blueColor = color(0, 36, 125);
      color whiteColor = color(255, 255, 255);
      color redColor = color(207, 20, 43); 
      float fatRedCrossWidth= pg.height/5.0;
      float thinRedCrossWidth = pg.height/15.0;
      float whiteDiagonalCrossWidth = pg.height/4.0;
      float fatWhiteCrossWidth = pg.height/3.0;
    
      pg.fill(blueColor);
      pg.rect(0, 0, pg.width, pg.height);
    
      pg.stroke(whiteColor);
      pg.strokeCap(PROJECT);
      pg.noFill();
      pg.strokeWeight(whiteDiagonalCrossWidth);
      pg.line(0, 0, pg.width, pg.height);
      pg.line(0, pg.height, pg.width, 0);
    
      float yRatio = 1/sin(radians(90)-atan2(pg.height, pg.width));
    
      float offsetY = thinRedCrossWidth*yRatio/2;
      pg.stroke(redColor);
      pg.strokeWeight(thinRedCrossWidth);
      pg.line(0, 0+offsetY, pg.width/2, pg.height/2+offsetY);                 // top left stripe
      pg.line(pg.width, 0-offsetY, pg.width/2, pg.height/2-offsetY);          // top right stripe
      pg.line(pg.width, pg.height-offsetY, pg.width/2, pg.height/2-offsetY);  // bot right stripe
      pg.line(0, pg.height+offsetY, pg.width/2, pg.height/2+offsetY);         // bot left stripe
      pg.noStroke();
      pg.fill(whiteColor);
      pg.rect(0, pg.height/2-fatWhiteCrossWidth/2, pg.width, fatWhiteCrossWidth);
      pg.rect(pg.width/2-fatWhiteCrossWidth/2, 0, fatWhiteCrossWidth, pg.height);
      pg.fill(redColor);
      pg.rect(0, pg.height/2-fatRedCrossWidth/2, pg.width, fatRedCrossWidth);
      pg.rect(pg.width/2-fatRedCrossWidth/2, 0, fatRedCrossWidth, pg.height);
    
      pg.endDraw();
    
    }
    
    //rippler
    void ripple(PGraphics pg) {
    float y;
    for (int x = 0; x < pg.width; x++) {
    y = 20*sin(radians(x+millis()));
    y = y * x/pg.width;
    image(pg.get(x, 0, 5, pg.height), x, y*4/3);
    
    }
    
    
    }
    

    oh and the graphic I'm using...

    ![fieldnpole](https://forum.processing.org/two/uploads/imageupload/983/U1GPRDOQV820.jpg "fieldnpole")
    
  • Answer ✓

    ctrl-t is used in processing not in the forum

  • edited January 2018 Answer ✓

    Not solved!! Can anyone jump in here...?

    Both sketches are not treated with ctrl-t

    Do both sketches run? Because I see misplaced {}?

    From line 77 onward in the 1st sketch it seems bit wrong. My setup() function was much better.

    In principle you merged two sketches already and now you have to do the same with a 3rd one.

    The cleanest would be to alter you 3rd into a function or several functions because you have a few functions already. The main function should get a word as a parameter the flag is reacting to.

    Once you did that copy the functions without setup and draw into sketch 1.

    call the main function then and pass it a word from headlines[] as a Parameter.

  • Thought I'd done ctrl-t. Both sketches run on my machine. Thanks for the advice, will attempt that over the next few days (I believe some reading will be involved as I am attempting to run before I can crawl.)

  • Thanks for your reply

Sign In or Register to comment.