Hi all -
I’m a newbie with a question. I was working with my Arduino and one of the samples used PDE. I liked the example and wanted to modify a bit and place it on my web page.
I stripped out the Arduino commands and references from the original sketch I’d copied, made my slight modification and ran the sketch within PDE. Everything worked perfect, no errors.
I then wrote a basic HTML.index file to see if I could make my sketch work on a web page. Here is where I have failed.
So all my files are in a single folder (pde, html along with processing.js file).
Any help would be appreciated.
Code below
Thanks
Sreyba
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>Welcome to my website
<p><canvas data-processing-sources="mac_version_mysketch.pde"></canvas></p>
</body>
</html>
PDE sketch (mac_version_mysketch.pde) is below :
String feed = "https://www.npr.org";
int interval = 5 * 60* 1000; //retrieve feed every five minutes
int lastTime; //last time we fetched the content
int biden = 0;
int trump = 0;
int covid = 0;
color c;
String cs;
PFont font;
void setup() {
size (640,480);
frameRate(10); // we don't need fast updates
font = createFont("Helvetica", 24);
fill(255);
textFont(font,32);
//Important Note:
//The first serial port retrived by Serial.list() should be your Arduino.
//If not, uncomment the next line by deleting the // beforee it, and re-run
//the sketch to see a list of serial ports. Then, change the 0 in between [ and ]
//to the number of the port that your arduino is connected to.
//println(Serial.list());
lastTime = millis();
fetchData();
}
void draw() {
background( c );
int n = (lastTime + interval - millis())/1000;
//build a color based on the 3 values
c = color(trump, biden, covid);
cs = "#" + hex(c,6); //prepare a string to be set to arduino
text("Arduino Networked Lamp", 10, 40);
text("Reading feed:", 10, 100);
text(feed, 10, 140);
text("Next update in "+ n + " seconds", 10, 450);
text("trump", 10, 200);
text(" " + trump, 130, 200);
rect(200, 172, trump, 28);
text("biden ",10,240);
text(" " + biden, 130, 240);
rect(200, 212, biden, 28);
text("covid ", 10, 280);
text(" " + covid, 130, 280);
rect(200, 252, covid, 28);
//write the color string to the screen
text("sending", 10, 340);
text(cs, 200, 340);
text(cs,200,340);
if(n<=0) {
fetchData();
lastTime = millis();
}
}
void fetchData() {
//we use these strings to parse the feed
String data;
String chunk;
// zero the counters
biden = 0;
trump = 0;
covid = 0;
try {
URL url = new URL(feed); // an object to represent the URL
//prepare the connection
URLConnection conn = url.openConnection();
conn.connect(); // now connect to the wwebsite
//this is a bit of virtual plumbing as we connect the data coming from the connection
//to a buffered reader that reads the data one line at a time
BufferedReader in = new
BufferedReader(new
InputStreamReader(conn.getInputStream()));
//read each line from the feed
while ( (data = in.readLine()) != null) {
StringTokenizer st =
new StringTokenizer(data, "\"<>,.()[] ");//break it down
while (st.hasMoreTokens ()) {
//each chunk of data is made lowercase
chunk= st.nextToken().toLowerCase();
if (chunk.indexOf("biden") >= 0) // found "biden"?
biden++; //increment biden by 1
if (chunk.indexOf("trump") >= 0) // found "trump"
trump++; //increment
if (chunk.indexOf("covid") >+ 0) // found "covid"?
covid++; //increment
}
}
//Set of 64 to be the maximum number of references we care about
if (trump > 64) trump = 64;
if (biden > 64) biden = 64;
if (covid > 64) covid = 64;
trump = trump * 4; // multiply so that the max is 255 which comes in handy when
//building a color that is made of 4 bytes
biden = biden * 4;
covid = covid * 4;
}
catch (Exception ex) {//if there was an error, stop the sketch
ex.printStackTrace();
System.out.println("ERROR: "+ex.getMessage());
}
}