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

Lukas1

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

}

}

Chrisir

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

Lukas1

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);
}

Chrisir

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;
}

Chrisir

Not tested ;-)

Lukas1

Many thanks for that.

Chrisir

And you need the draw from the 2nd sketch

Lukas1

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);




 }
}

Chrisir

You can usw. ctrl–t to have auto–Indents

Look at the curly brackets {}

Some seem amiss

Lukas1

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")

Chrisir

ctrl-t is used in processing not in the forum

Chrisir

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.

Lukas1

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.)

Chrisir

Thanks for your reply