A Processing Java Applet in WordPress

Turns out that figuring out how to embed a Processing Java applet in WordPress was quite the endeavor.   Ended up writing a Wordpress plugin. Here is a link to the tarball: wp-proc-embed.tar.gz

A few brief instructions for installation and use:

  1. Extract into the wp-content/plugins directory (Same as every other plugin for WordPress).  If you can’t figure out how to extract a .tar.gz file, and I’m in a good mood, let me know and I’ll create a zip for you.
  2. Login to wordpress as admin and activate the plugin.
  3. Export your Processing project.
  4. Copy/scp/ftp the entire directory tree of the sketch (which should now include an applet directory) to wp-content/plugins/wp-proc-embed/
  5. As an example of what the directory structure should look like in step 4 I have included the applet “threeballsclass”.  The exported java files appear in wp-content/plugins/wp-proc-embed/threeballsclass/applet/
  6. Make a new post and include the following tag to display the threeballsclass applet with a dimension of 200 x 200:   LEFT BRACKET processing=threeballsclass 200 200 RIGHT BRACKET
  7. Publish and Pray.
  8. I just realized that I called the example project “threeballsclass” and there are actually four balls flying around.  Deal with it.

Here’s the applet in action:

This browser does not have a Java Plug-in.
Get the latest Java Plug-in here.

(If anyone knows the escape character for the left and right brackets, so I don’t have to use LEFT BRACKET and RIGHT BRACKET above, let me know.  I’m having to do this because otherwise it displays the applet)

Tags: , , , ,

Ohm meter using a Voltage Divider

Nothing too fancy this time around, just a simple project that calculates the resistance of a resistor.  The circuit is based on a simple voltage divider.  First, a wire is connected from the 5V pin on the Arduino to the breadboard +5V bus.  Then, another wire connects the Gnd pin on the Arduino to the GND bus on the breadboard.  Now that you have power, put two resistors in series.  One should be your “known” resistance; I used a 10 kohm resistor for this.  The other is the “unknown” resistor that we are trying to find the resistance of.  In between these two resistors, another wire should be connected to one of the analogue pins on the Arduino (I used pin 0).  Below are two pictures which show the setup.

res1 res2

Here is the Arduino code which calculates the unknown resistance, and outputs it to serial:

int aPinIn = 0;            // Analogue Input on Arduino
int val = 0;               // The raw analogue value
float Vout = 0.0;          // Voltage at point between resistors
                           // (relative to ground)
float Vin = 5.0;           // Vcc (5 Volts)
float Rknown = 10000.0;    // The known resistor (10 kohms)
float Runknown = 0.0;
 
void setup(){
 
  Serial.begin(9600);
  digitalWrite(13, HIGH);
 
}
 
void loop(){
 
  val = analogRead(aPinIn);              // Read in val (0-1023)
  Vout = (Vin/1024.0) * float(val);      // Convert to voltage
  Runknown = Rknown*((Vin/Vout) - 1);    // Calculate Runknown
 
  Serial.print("Vout: ");
  Serial.println(Vout);                  // Output everything
  Serial.print("R: ");
  Serial.println(Runknown);
 
  delay(1000);                           // delay for readability
 
}

Here is the serial output (updating every second):

res_pic
Not bad. According to the color code, the unknown is a 330 Ohm resistor with 5% tolerance. The circuit/code produces a value of 333.

Wireless with XBee

Have you ever had one of those projects where, after spending hours preparing and reading up on background material, find yourself ultimately baffled as to why it is not working? That’s what happened here, and as it turned out, the solution was trivial in the form of a single line of Processing code. We’ll get to that later. The goal here was to get two Digi XBee RF modules to communicate over 802.15.4, in particular, a simple “Hello World” type of event in the form of a blinking LED.

Alright, here’s how it work.  The first XBee is connected to an XBee Explorer from Sparkfun. This board is awesome because it takes care of the conversion of serial signals to USB. Furthermore it has LEDs which indicate when the XBee is receiving or transmitting data. Here is a picture of the Explorer itself, and my Explorer mounted with an Xbee and connected to the iMac via a mini-USB cable:

xbee_explorerxbee1

The Processing code for sending out bytes of data through the XBee and over the wireless is very similar to the code from the previous post:

import processing.serial.*;
 
Serial myPort;
 
void setup(){
  println(Serial.list());
  myPort = new Serial(this, Serial.list()[0], 9600);
}
 
void draw(){
myPort.write('x');
delay(1000);
myPort.write('o');
delay(1000);
}

The second XBee (receiving XBee) is connected to a breakout board (from Sparkfun) which allows the XBee which has 2mm pin spacing to be used on breadboards which commonly have holes compatible with .1″ pin spacing. Four wires are connecting the XBee to the Arduino (see picture below). The yellow wire provides 3.3 volts from the aptly named pin on the Arduino. The red and green wires connect the XBee’s DIN and DOUT, to the Arduino’s TX and RX pins, respectively. Finally, the black wire is connected to the ground pin of the Arduino. Technically, the voltage of the DIN and DOUT connections should be translated down to 3.3 volts, but actually works fine at 5 volts (The unit MUST be powered at 3.3 volts, however).

xbee2

After about the 5th try, I was able to snap a picture that actually had the blinking LED in an ON state. The code that was loaded onto the Arduino was:

void setup() {
  Serial.begin(9600);
  pinMode(13, OUTPUT);
}
 
void loop(){
  if (Serial.available()){
 
    byte val = Serial.read();
 
    if (val == 'x') { digitalWrite(13, HIGH); }
    if (val == 'o') { digitalWrite(13, LOW); }
  }
}

There you have it, a proof-of-concept that wireless communication is possible using these XBee modules.  Oh yeah, the trivial problem that I alluded to in the beginning of this post was that in the Processing code for the transmitting XBee, I had a loop() function instead of a draw() function.  Yeah, don’t do that.  Ok, here’s video proof that the LED is actually blinking, and that this whole thing isn’t a farce:

Tags: , , , ,

Enabling Serial Communication in Processing/Arduino

I have been trying to dissect the differences between the implementation of serial asynchronous communication in Processing 1.0 and the Arduino IDE.  There are even broader differences between the two environments (Arduino is based on C/C++, and Processing is Java based) but fortunately these do not come into play with the current investigation.  Arduino is a simple development environment which allows for the programming of Arduino boards.  The board I am currently using is the Duemilanove (Italian for 2009), which has at its heart an ATmega.328 micro-controller.

Processing is a programming language that allows users to quickly create programs, or “sketches”, that generate graphics and gives control to input and output devices such as the keyboard, mouse, and serial ports.  More information on Processing can be found here. What follows is how to enable serial communication for both the Arduino IDE and Processing.

The first issue is choosing which serial port to use in the current project.  In the Arduino IDE, this is accomplished by selecting Tools — Serial Port and then choosing the appropriate serial port.

Selecting the Serial Port in Arduino

Note that in the above figure, that Serial Port is not available (grey).  If you have successfully installed the serial drivers, then you should get a list of available ports (I’m not writing this entry from my development machine).  Selecting your serial port in the Arduino is as easy as that.  Processing, however, is a much broader programming environment and therefore hooking up to a serial port must be done manually.  The following code shows how to do this:

// Serial communication in Processing 1.0
 
// Import the processing serial libraries
import processing.serial.*;
 
// Declare a serial port:
Serial myPort;
 
// List all available serial ports:
println(Serial.list());
 
/*
Open whatever port is the one you're using.  Mine is zero,
hence Serial.list()[0].  Also, 9600 is the bps (bits per second) of
the connection.
*/
 
myPort = new Serial(this, Serial.list()[0], 9600);
 
// Send an E to the serial port.  69 is the ASCII value for capital E.
myPort.write(69);

I would imagine that something similar to the above block of code is actually running when selecting the serial port from the drop-down menu in the case of the Arduino IDE. Also worth mentioning is that when using the Arduino IDE, the serial libraries have already been included, and therefore do not have to included manually as was the case with Processing.

Tags: , , ,

The Evil Quark Blog has Returned!

The blog portion of the website has returned. Make sure and check back to see what’s going on in the Evil Quark Labs.